Add field appearance

resources/js/components/form/Editor.vue

@@ -1,12 +1,10 @@
 <template>
     <div>
-        <div>
-            <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="flex flex-col group" :for="id" :class="sizeClass(size)">
+            <f-label v-if="label" :required="required" :value="label"></f-label>
             <div class="relative w-full h-full">
-                <div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
-                <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>
+                <div :id="id" :class="[fieldAppearance, paddingX, paddingY]"></div>
+                <f-hint v-if="hint" :value="hint"></f-hint>
             </div>
         </div>
 
@@ -34,7 +32,7 @@ import Alert from 'editorjs-alert';
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
+const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
 
 const props = defineProps({
     required: {
@@ -42,14 +40,15 @@ const props = defineProps({
         default: false,
     },
     size: {
-        default: null,
+        type: String,
+        default: () => 'base',
     },
     rows: {
-        default: function () {
-            return 4;
-        },
+        type: Number,
+        default: () => 4,
     },
     id: {
+        type: String,
         required: true,
     },
     conditions: {
@@ -58,16 +57,15 @@ const props = defineProps({
         default: () => false,
     },
     hint: {
-        default: null,
+        type: String,
+        default: () => '',
     },
     modelValue: {
         default: undefined,
     },
     label: {
-        default: false,
-    },
-    placeholder: {
-        default: '',
+        type: String,
+        default: () => '',
     },
 });
 

resources/js/components/form/Hint.vue

@@ -1,7 +1,7 @@
 <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 v-tooltip="value" class="mr-2">
+            <ui-sprite src="info-button" class="w-5 h-5 text-primary-700"></ui-sprite>
         </div>
     </div>
 </template>

resources/js/components/form/Select.vue

@@ -1,38 +1,22 @@
 <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">
-            {{ label }}
-            <span v-show="required" class="text-red-800">&nbsp;*</span>
-        </span>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
         <div class="relative flex-none flex">
-            <select
-                v-model="inner"
-                :disabled="disabled"
-                :name="name"
-                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 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full"
-            >
+            <select v-model="inner" :disabled="disabled" :name="name" :class="[fieldHeight, fieldAppearance]" class="py-0 pr-8 group-[.field-base]:pl-2 group-[.field-sm]:pl-1 w-full">
                 <option v-if="placeholder" :value="def">{{ placeholder }}</option>
-
                 <option v-for="option in parsedOptions" :key="option.id" :value="option.id">{{ option.name }}</option>
             </select>
-            <div class="h-full items-center flex absolute top-0 right-0">
-                <div v-if="hint" v-tooltip="hint">
-                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
-                </div>
-            </div>
+            <f-hint v-if="hint" :value="hint"></f-hint>
         </div>
     </label>
 </template>
 
 <script setup>
 import {computed, ref} from 'vue';
+import useFieldSize from '../../composables/useFieldSize.js';
 import map from 'lodash/map';
 
-const sizes = ref({
-    sm: 'field-sm',
-    base: 'field-base',
-    lg: 'field-lg',
-});
+const {fieldHeight, fieldAppearance, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 

resources/js/components/form/Text.vue

@@ -1,6 +1,6 @@
 <template>
-    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <f-label :required="required" :value="label"></f-label>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
         <div class="relative flex-none flex">
             <input
                 :id="id"
@@ -27,7 +27,7 @@ import wNumb from 'wnumb';
 import {ref, computed} from 'vue';
 import useFieldSize from '../../composables/useFieldSize';
 
-const {fieldHeight, fieldAppearance, paddingX} = useFieldSize();
+const {fieldHeight, fieldAppearance, paddingX, sizeClass} = useFieldSize();
 
 const emit = defineEmits(['update:modelValue']);
 
@@ -136,11 +136,6 @@ const props = defineProps({
 });
 
 const focus = ref(false);
-const sizes = ref({
-    sm: 'field-sm',
-    base: 'field-base',
-    lg: 'field-lg',
-});
 
 const transformedValue = computed({
     get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),

resources/js/components/form/Textarea.vue

@@ -1,11 +1,9 @@
 <template>
-    <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 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>
+    <label class="flex flex-col group" :for="id" :class="sizeClass(size)">
+        <f-label v-if="label" :required="required" :value="label"></f-label>
+        <div class="relative flex-none flex">
+            <textarea class="w-full h-full" :class="[fieldAppearance, paddingX, paddingY]" :rows="rows" @input="trigger" v-text="modelValue"></textarea>
+            <f-hint v-if="hint" :value="hint"></f-hint>
         </div>
     </label>
 </template>
@@ -14,7 +12,7 @@
 import useFieldSize from '../../composables/useFieldSize.js';
 const emit = defineEmits(['update:modelValue']);
 
-const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
+const {fieldAppearance, paddingX, paddingY, sizeClass} = useFieldSize();
 
 const props = defineProps({
     required: {

resources/js/composables/useFieldSize.js

@@ -1,41 +1,24 @@
-import {ref, inject, computed, onBeforeUnmount} from 'vue';
-import {router} from '@inertiajs/vue3';
-import useQueueEvents from './useQueueEvents.js';
-
 export default function () {
-    const sizes = {
-        sm: {
-            label: 'text-xs',
-            field: 'text-xs',
-        },
-        default: {
-            label: 'text-sm',
-            field: 'text-sm',
-        },
-    };
-
-    const defaultFieldClass = 'border-2 p-2 rounded-lg bg-gray-700 border-gray-600 text-gray-300 border-solid';
+    function sizeClass(size) {
+        return {
+            sm: 'field-sm',
+            base: 'field-base',
+            lg: 'field-lg',
+        }[size];
+    }
 
     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;
-    }
-
-    function fieldClass(size) {
-        return sizes[size ? size : 'default'].field;
-    }
+    const paddingY = 'group-[.field-base]:py-2 group-[.field-sm]:py-1';
 
     return {
-        labelClass,
-        fieldClass,
-        defaultFieldClass,
         fieldHeight,
         fieldAppearance,
         paddingX,
+        paddingY,
+        sizeClass,
     };
 }