Added Heading component for Form Sections

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>

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');

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': {