Mod text component

resources/js/components/form/Text.vue

@@ -14,11 +14,10 @@
                 :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"
+                @focus="focus = true"
+                @blur="focus = false"
             />
             <div v-if="hint" class="h-full items-center flex absolute top-0 right-0">
                 <div v-tooltip="hint">
@@ -29,8 +28,11 @@
     </label>
 </template>
 
-<script>
+<script setup>
 import wNumb from 'wnumb';
+import {ref, computed} from 'vue';
+
+const emit = defineEmits(['update:modelValue']);
 
 var numb = {
     natural: wNumb({
@@ -89,117 +91,76 @@ var transformers = {
     },
 };
 
-export default {
-    props: {
-        default: {},
+const props = defineProps({
     mode: {
-            default: function () {
-                return 'none';
-            },
+        type: String,
+        default: () => 'none',
     },
     required: {
         type: Boolean,
-            default: false,
-        },
-        inset: {
-            default: function () {
-                return null;
-            },
+        default: () => false,
     },
     size: {
-            default: function () {
-                return 'base';
-            },
+        type: String,
+        default: () => 'base',
     },
     id: {
+        type: String,
         required: true,
     },
     hint: {
-            default: null,
+        type: String,
+        default: () => '',
     },
-        modelValue: {},
-        mask: {
-            default: undefined,
+    modelValue: {
+        type: String,
+        default: () => '',
     },
     label: {
-            default: false,
+        type: String,
+        default: () => '',
     },
     type: {
-            required: false,
-            default: function () {
-                return 'text';
-            },
+        type: String,
+        default: () => 'text',
     },
     disabled: {
-            default: false,
+        default: () => false,
         type: Boolean,
     },
     min: {
-            default: () => '',
+        type: Number,
+        default: () => undefined,
     },
     max: {
-            default: () => '',
+        type: Number,
+        default: () => undefined,
     },
-        name: {},
+    name: {
+        required: true,
+        type: String,
     },
-    data: function () {
-        return {
-            focus: false,
-            sizes: {
+});
+
+const focus = ref(false);
+const sizes = ref({
     sm: 'field-sm',
     base: 'field-base',
     lg: 'field-lg',
-            },
-        };
-    },
-    computed: {
-        transformedValue: {
-            get() {
-                return transformers[this.mode][this.focus ? 'edit' : 'display'].to(this.modelValue);
-            },
-            set(v) {
-                this.$emit('update:modelValue', transformers[this.mode][this.focus ? 'edit' : 'display'].from(v));
-            },
-        },
-        insetClass() {
-            if (this.inset === '') {
-                return 'bg-inset';
-            }
-            if (this.inset === undefined) {
-                return null;
-            }
+});
 
-            return `bg-${this.inset}`;
-        },
-    },
-    created() {
-        if (typeof this.modelValue === 'undefined') {
-            this.$emit('update:modelValue', this.default === undefined ? '' : this.default);
+const transformedValue = computed({
+    get: () => transformers[props.mode][focus.value ? 'edit' : 'display'].to(props.modelValue),
+    set: (v) => emit('update:modelValue', transformers[props.mode][focus.value ? 'edit' : 'display'].from(v)),
+});
+function onChange(v) {
+    if (props.mode !== 'none') {
+        transformedValue.value = v.target.value;
     }
-    },
-    methods: {
-        onFocus() {
-            this.focus = true;
-        },
-        onBlur() {
-            this.focus = false;
-        },
-        onChange(v) {
-            if (this.mode !== 'none') {
-                this.transformedValue = v.target.value;
-            }
-        },
-        onInput(v) {
-            if (this.mode === 'none') {
-                this.transformedValue = v.target.value;
-            }
-        },
-    },
-};
-</script>
-
-<style scope>
-.bg-inset {
-    background: linear-gradient(to bottom, hsl(247.5, 66.7%, 97.6%) 0%, hsl(247.5, 66.7%, 97.6%) 41%, hsl(0deg 0% 100%) 41%, hsl(180deg 0% 100%) 100%);
 }
-</style>
+function onInput(v) {
+    if (props.mode === 'none') {
+        transformedValue.value = v.target.value;
+    }
+}
+</script>