Cleanup

package-lock.json

@@ -10,6 +10,7 @@
                 "@editorjs/nested-list": "^1.4.2",
                 "@editorjs/paragraph": "^2.11.3",
                 "@inertiajs/vue3": "^1.0.14",
+                "@tailwindcss/forms": "^0.5.7",
                 "@tailwindcss/typography": "^0.5.10",
                 "@vitejs/plugin-vue": "^4.6.2",
                 "change-case": "^4.1.2",
@@ -975,6 +976,17 @@
                 "node": ">= 10"
             }
         },
+        "node_modules/@tailwindcss/forms": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+            "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+            "dependencies": {
+                "mini-svg-data-uri": "^1.2.3"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+            }
+        },
         "node_modules/@tailwindcss/typography": {
             "version": "0.5.10",
             "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
@@ -2941,6 +2953,14 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mini-svg-data-uri": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+            "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+            "bin": {
+                "mini-svg-data-uri": "cli.js"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",

package.json

@@ -29,6 +29,7 @@
         "@editorjs/nested-list": "^1.4.2",
         "@editorjs/paragraph": "^2.11.3",
         "@inertiajs/vue3": "^1.0.14",
+        "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.10",
         "@vitejs/plugin-vue": "^4.6.2",
         "change-case": "^4.1.2",

resources/js/components/form/Select.vue

@@ -1,25 +1,24 @@
 <template>
-    <label class="field-wrap" :for="id" :class="`field-wrap-${size}`">
+    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <span v-if="label" class="field-label">
+        <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>
-        <div class="real-field-wrap" :class="`size-${size}`">
+        <div class="relative flex-none flex">
-            <select v-model="inner" :disabled="disabled" :name="name">
+            <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"
+            >
                 <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="info-wrap">
+            <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 v-if="size != 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-3 h-3 fill-current" src="chevron"></ui-sprite>
-                </div>
-                <div v-if="size == 'xs'" class="px-1 relative">
-                    <ui-sprite class="chevron w-2 h-2 fill-current" src="chevron"></ui-sprite>
-                </div>
             </div>
         </div>
     </label>
@@ -29,6 +28,12 @@
 import {computed, ref} from 'vue';
 import map from 'lodash/map';
 
+const sizes = ref({
+    sm: 'field-sm',
+    base: 'field-base',
+    lg: 'field-lg',
+});
+
 const emit = defineEmits(['update:modelValue']);
 
 const props = defineProps({

resources/js/components/form/Text.vue

@@ -1,16 +1,28 @@
 <template>
-    <label class="field-wrap field-wrap-sm" :for="id" :class="sizes[size].wrap">
+    <label class="flex flex-col group" :for="id" :class="sizes[size]">
-        <span v-if="label" class="field-label">
+        <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>
-        <div class="real-field-wrap size-sm" :class="sizes[size].field">
+        <div class="relative flex-none flex">
-            <input :name="name" :type="type" :value="transformedValue" :disabled="disabled" :placeholder="placeholder"
+            <input
-                :min="min" :max="max" @keypress="$emit('keypress', $event)" @input="onInput" @change="onChange"
+                :name="name"
-                @focus="onFocus" @blur="onBlur" />
+                :type="type"
-            <div v-if="hint" class="info-wrap">
+                :value="transformedValue"
+                :disabled="disabled"
+                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"
+                @keypress="$emit('keypress', $event)"
+                @input="onInput"
+                @change="onChange"
+                @focus="onFocus"
+                @blur="onBlur"
+            />
+            <div v-if="hint" class="h-full items-center flex absolute top-0 right-0">
                 <div v-tooltip="hint">
-                    <ui-sprite src="info-button" class="info-button"></ui-sprite>
+                    <ui-sprite src="info-button" class="text-primary-700"></ui-sprite>
                 </div>
             </div>
         </div>
@@ -79,11 +91,6 @@ var transformers = {
 
 export default {
     props: {
-        placeholder: {
-            default: function () {
-                return '';
-            },
-        },
         default: {},
         mode: {
             default: function () {
@@ -139,18 +146,9 @@ export default {
         return {
             focus: false,
             sizes: {
-                sm: {
+                sm: 'field-sm',
-                    wrap: 'field-wrap-sm',
+                base: 'field-base',
-                    field: 'size-sm',
+                lg: 'field-lg',
-                },
-                base: {
-                    wrap: 'field-wrap-base',
-                    field: 'size-base',
-                },
-                lg: {
-                    wrap: 'field-wrap-lg',
-                    field: 'size-lg',
-                },
             },
         };
     },

tailwind.config.js

@@ -33,5 +33,5 @@ module.exports = {
         },
     },
 
-    plugins: [require('@tailwindcss/typography')],
+    plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
 };