Hide missing label/descriptions on form elements.

frontend/vue/components/Form/FormGroupCheckbox.vue

@@ -38,7 +38,10 @@
             />
         </template>
 
-        <template #description="slotProps">
+        <template
+            v-if="description || slots.description"
+            #description="slotProps"
+        >
             <slot
                 name="description"
                 v-bind="slotProps"
@@ -54,6 +57,7 @@ import VuelidateError from "./VuelidateError";
 import FormLabel from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 import {formFieldProps, useFormField} from "~/components/Form/useFormField";
+import {useSlots} from "vue";
 
 const props = defineProps({
     ...formFieldProps,
@@ -85,6 +89,8 @@ const props = defineProps({
     }
 });
 
+const slots = useSlots();
+
 const emit = defineEmits(['update:modelValue']);
 
 const {model, isVuelidateField, isRequired} = useFormField(props, emit);

frontend/vue/components/Form/FormGroupField.vue

@@ -3,7 +3,10 @@
         v-bind="$attrs"
         :id="id"
     >
-        <template #label="slotProps">
+        <template
+            v-if="label || slots.label"
+            #label="slotProps"
+        >
             <form-label
                 :is-required="isRequired"
                 :advanced="advanced"
@@ -55,7 +58,10 @@
             />
         </template>
 
-        <template #description="slotProps">
+        <template
+            v-if="description || slots.description"
+            #description="slotProps"
+        >
             <slot
                 v-bind="slotProps"
                 name="description"
@@ -68,7 +74,7 @@
 
 <script setup>
 import VuelidateError from "./VuelidateError";
-import {computed, ref} from "vue";
+import {computed, ref, useSlots} from "vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 import FormLabel from "~/components/Form/FormLabel.vue";
 import {formFieldProps, useFormField} from "~/components/Form/useFormField";
@@ -123,6 +129,8 @@ const props = defineProps({
     }
 });
 
+const slots = useSlots();
+
 const emit = defineEmits(['update:modelValue']);
 
 const {model, isVuelidateField, fieldClass, isRequired} = useFormField(props, emit);

frontend/vue/components/Form/FormGroupMultiCheck.vue

@@ -3,7 +3,10 @@
         v-bind="$attrs"
         :id="id"
     >
-        <template #label="slotProps">
+        <template
+            v-if="label || slots.label"
+            #label="slotProps"
+        >
             <form-label
                 :is-required="isRequired"
                 :advanced="advanced"
@@ -48,7 +51,10 @@
             />
         </template>
 
-        <template #description="slotProps">
+        <template
+            v-if="description || slots.description"
+            #description="slotProps"
+        >
             <slot
                 v-bind="slotProps"
                 name="description"
@@ -66,6 +72,7 @@ import FormGroup from "~/components/Form/FormGroup.vue";
 import FormMultiCheck from "~/components/Form/FormMultiCheck.vue";
 import useSlotsExcept from "~/functions/useSlotsExcept";
 import {formFieldProps, useFormField} from "~/components/Form/useFormField";
+import {useSlots} from "vue";
 
 const props = defineProps({
     ...formFieldProps,
@@ -103,6 +110,8 @@ const props = defineProps({
     }
 });
 
+const slots = useSlots();
+
 const emit = defineEmits(['update:modelValue']);
 
 const {model, isVuelidateField, isRequired} = useFormField(props, emit);

frontend/vue/components/Form/FormGroupSelect.vue

@@ -3,7 +3,10 @@
         v-bind="$attrs"
         :id="id"
     >
-        <template #label="slotProps">
+        <template
+            v-if="label || slots.label"
+            #label="slotProps"
+        >
             <form-label
                 :is-required="isRequired"
                 :advanced="advanced"
@@ -39,7 +42,10 @@
             />
         </template>
 
-        <template #description="slotProps">
+        <template
+            v-if="description || slots.description"
+            #description="slotProps"
+        >
             <slot
                 v-bind="slotProps"
                 name="description"
@@ -56,6 +62,7 @@ import FormLabel from "~/components/Form/FormLabel.vue";
 import FormGroup from "~/components/Form/FormGroup.vue";
 import {formFieldProps, useFormField} from "~/components/Form/useFormField";
 import SelectOptions from "~/components/Form/SelectOptions.vue";
+import {useSlots} from "vue";
 
 const props = defineProps({
     ...formFieldProps,
@@ -89,6 +96,8 @@ const props = defineProps({
     }
 });
 
+const slots = useSlots();
+
 const emit = defineEmits(['update:modelValue']);
 
 const {model, isVuelidateField, fieldClass, isRequired} = useFormField(props, emit);

frontend/vue/components/Form/FormMarkup.vue

@@ -1,6 +1,9 @@
 <template>
     <form-group :id="id">
-        <template #label="slotProps">
+        <template
+            v-if="label || slots.label"
+            #label="slotProps"
+        >
             <slot
                 name="label"
                 v-bind="slotProps"
@@ -19,7 +22,10 @@
             </div>
         </template>
 
-        <template #description="slotProps">
+        <template
+            v-if="description || slots.description"
+            #description="slotProps"
+        >
             <slot
                 v-bind="slotProps"
                 name="description"
@@ -32,6 +38,7 @@
 
 <script setup>
 import FormGroup from "~/components/Form/FormGroup.vue";
+import {useSlots} from "vue";
 
 const props = defineProps({
     id: {
@@ -47,4 +54,6 @@ const props = defineProps({
         default: null
     },
 });
+
+const slots = useSlots();
 </script>