- second commit

resources/js/Components/FormField.vue

@@ -2,46 +2,47 @@
 import { computed, useSlots } from 'vue';
 
 defineProps({
-	label: {
-	    type: String,
-		default: null,
-	},
-	labelFor: {
-		type: String,
-		default: null,
-	},
-	help: {
-		type: String,
-		default: null,
-	},
+    label: {
+        type: String,
+        default: null,
+    },
+    labelFor: {
+        type: String,
+        default: null,
+    },
+    help: {
+        type: String,
+        default: null,
+    },
 });
 
 const slots = useSlots();
 
 const wrapperClass = computed(() => {
-	const base = [];
-	const slotsLength = slots.default().length;
+    const base = [];
+    const slotsLength = slots.default().length;
 
-	if (slotsLength > 1) {
-		base.push('grid grid-cols-1 gap-3');
-	}
+    if (slotsLength > 1) {
+        base.push('grid grid-cols-1 gap-3');
+    }
 
-	if (slotsLength === 2) {
-		base.push('md:grid-cols-2');
-	}
+    if (slotsLength === 2) {
+        base.push('md:grid-cols-2');
+    }
 
-	return base;
+    return base;
 });
 </script>
 
 <template>
-	<div class="mb-6 last:mb-0">
-		<label v-if="label" :for="labelFor" class="block font-bold mb-2">{{ label }}</label>
-		<div v-bind:class="wrapperClass">
-			<slot />
-		</div>
-		<div v-if="help" class="text-xs text-gray-500 dark:text-slate-400 mt-1">
-			{{ help }}
-		</div>
-	</div>
+    <div class="mb-6 last:mb-0">
+        <!-- <label v-if="label" :for="labelFor" class="block font-bold mb-2">{{ label }}</label> -->
+        <label v-if="label" :for="labelFor" class="font-bold h-6 mt-3 text-xs leading-8 uppercase">{{ label }}</label>
+        <div v-bind:class="wrapperClass">
+            <slot />
+        </div>
+        <div v-if="help" class="text-xs text-gray-500 dark:text-slate-400 mt-1">
+            {{ help }}
+        </div>
+    </div>
 </template>