From e5b7bfeacbb5aba4fb84bfd51b24d37159b6b55b Mon Sep 17 00:00:00 2001
From: adro <a.schlett@gmx.de>
Date: Fri, 3 Nov 2023 17:59:03 +0100
Subject: [PATCH] Added Heading component for Form Sections

---
 client/src/components/display/Heading.vue | 15 +++++++++++++++
 client/src/main.ts                        |  2 ++
 client/src/pages/test.vue                 |  1 +
 3 files changed, 18 insertions(+)
 create mode 100644 client/src/components/display/Heading.vue

diff --git a/client/src/components/display/Heading.vue b/client/src/components/display/Heading.vue
new file mode 100644
index 0000000..6cd33e9
--- /dev/null
+++ b/client/src/components/display/Heading.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<{
+  headingLevel?: number,
+  caption?: string,
+}>(), {
+  headingLevel: 2,
+  caption: '',
+});
+const { headingLevel, caption } = $(props);
+
+</script>
+<template>
+  <component :is="`h` + headingLevel">{{ caption }}</component>
+</template>
\ No newline at end of file
diff --git a/client/src/main.ts b/client/src/main.ts
index 0ecfb97..55186bb 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -14,6 +14,7 @@ import MultilineTextBox from './components/inputs/MultilineTextBox.vue';
 import CheckBox from './components/inputs/CheckBox.vue';
 import SingleSelect from './components/inputs/SingleSelect.vue';
 import MultiSelect from './components/inputs/MultiSelect.vue';
+import Heading from './components/display/Heading.vue';
 
 import { Form, Field, ErrorMessage  } from 'vee-validate';
 
@@ -47,6 +48,7 @@ app.component('ErrorMessage', ErrorMessage);
 app.component('SingleSelect', SingleSelect);
 app.component('MultiSelect', MultiSelect);
 app.component('EnumInput', EnumInput);
+app.component('Heading', Heading);
 
 
 app.mount('#app');
diff --git a/client/src/pages/test.vue b/client/src/pages/test.vue
index ceef4a9..15f8f45 100644
--- a/client/src/pages/test.vue
+++ b/client/src/pages/test.vue
@@ -25,6 +25,7 @@ function genSP(indexIsChar: boolean): SearchProvider {
     <NicerForm :fields="{
       Single: { is: 'SingleSelect', label: 'SingleSelect', props: { options: testValues, searchProvider: genSP(true) } },
       Multiple: { is: 'MultiSelect', label: 'Multiselect', props: { options: testValues, searchProvider: genSP(false) } },
+      adv: { is: 'Heading', props: { caption: 'Subsection' } },
       IP: { is: 'EnumInput', label: 'IP Address', props: { variants: {
         'dhcp': { display: 'DHCP' },
         'static-ipv4': {