move classes

resources/js/components/form/Hint.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="h-full items-center flex absolute top-0 right-0">
+        <div v-tooltip="value">
+            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700 mr-2"></ui-sprite>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    value: {
+        type: String,
+        required: true,
+    },
+});
+</script>

resources/js/components/form/Label.vue

@@ -0,0 +1,19 @@
+<template>
+    <span class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
+        {{ value }}
+        <span v-show="required" class="text-red-800">&nbsp;*</span>
+    </span>
+</template>
+
+<script setup>
+const props = defineProps({
+    value: {
+        type: String,
+        required: true,
+    },
+    required: {
+        type: Boolean,
+        required: true,
+    },
+});
+</script>

resources/js/components/form/Text.vue

@@ -1,9 +1,6 @@
 <template>
     <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <span v-if="label" class="font-semibold leading-none text-gray-400 group-[.field-base]:text-sm group-[.field-sm]:text-xs">
+        <f-label :required="required" :value="label"></f-label>
-            {{ label }}
-            <span v-show="required" class="text-red-800">&nbsp;*</span>
-        </span>
         <div class="relative flex-none flex">
             <input
                 :id="id"
@@ -13,17 +10,14 @@
                 placeholder=""
                 :min="min"
                 :max="max"
-                class="group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px] group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs py-0 group-[.field-base]:px-2 group-[.field-sm]:px-1 w-full"
+                :class="[fieldHeight, fieldAppearance, paddingX]"
+                class="w-full"
                 @input="onInput"
                 @change="onChange"
                 @focus="focus = true"
                 @blur="focus = false"
             />
-            <div v-if="hint" class="h-full items-center flex absolute top-0 right-0">
+            <f-hint v-if="hint" :value="hint"></f-hint>
-                <div v-tooltip="hint">
-                    <ui-sprite src="info-button" class="text-primary-700"></ui-sprite>
-                </div>
-            </div>
         </div>
     </label>
 </template>
@@ -31,6 +25,9 @@
 <script setup>
 import wNumb from 'wnumb';
 import {ref, computed} from 'vue';
+import useFieldSize from '../../composables/useFieldSize';
+
+const {fieldHeight, fieldAppearance, paddingX} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 

resources/js/components/form/Textarea.vue

@@ -2,7 +2,7 @@
     <label class="flex flex-col">
         <span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
         <div class="relative w-full h-full">
-            <textarea :placeholder="placeholder" class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
+            <textarea class="h-full w-full outline-none" :class="[defaultFieldClass, fieldClass(size)]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
             <div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
                 <ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
             </div>
@@ -22,33 +22,31 @@ const props = defineProps({
         default: false,
     },
     size: {
-        default: null,
+        type: String,
+        default: () => 'base',
     },
     rows: {
-        default: function () {
+        type: Number,
-            return 4;
+        default: () => 4,
-        },
     },
     id: {
+        type: String,
         required: true,
     },
     hint: {
-        default: null,
+        type: String,
+        default: () => '',
     },
     modelValue: {
-        default: undefined,
+        validator: (v) => typeof v === 'string' || v === null,
+        required: true,
     },
     label: {
-        default: false,
+        type: String,
-    },
+        default: () => '',
-    placeholder: {
-        default: '',
     },
 });
 function trigger(v) {
     emit('update:modelValue', v.target.value);
 }
-if (typeof props.modelValue === 'undefined') {
-    emit('update:modelValue', '');
-}
 </script>

resources/js/composables/useFieldSize.js

@@ -16,6 +16,12 @@ export default function () {
 
     const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
 
+    const fieldHeight = 'group-[.field-base]:h-[35px] group-[.field-sm]:h-[23px]';
+    const fieldAppearance =
+        'group-[.field-base]:border-2 group-[.field-sm]:border border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg group-[.field-base]:text-sm group-[.field-sm]:text-xs';
+
+    const paddingX = 'group-[.field-base]:px-2 group-[.field-sm]:px-1';
+
     function labelClass(size) {
         return sizes[size ? size : 'default'].label;
     }
@@ -28,5 +34,8 @@ export default function () {
         labelClass,
         fieldClass,
         defaultFieldClass,
+        fieldHeight,
+        fieldAppearance,
+        paddingX,
     };
 }