move input and input error into component

resources/js/Components/Input.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+defineProps({
+  modelValue: String,
+});
+
+defineEmits(['update:modelValue']);
+
+const input = ref(null);
+
+onMounted(() => {
+  if (input.value.hasAttribute('autofocus')) {
+    input.value.focus();
+  }
+});
+
+defineExpose({ focus: () => input.value.focus() });
+</script>
+
+<template>
+  <input
+      ref="input"
+      class="w-full bg-white dark:bg-transparent border-gray-300 dark:border-gray-600 dark:text-gray-100 focus:border-indigo-300 dark:focus:border-gray-700 focus:ring focus:ring-indigo-200 dark:focus:ring-gray-600 focus:ring-opacity-50 rounded-md shadow-sm placeholder:capitalize"
+      :value="modelValue"
+      @input="$emit('update:modelValue', $event.target.value)"
+  >
+</template>

resources/js/Components/InputError.vue

@@ -0,0 +1,15 @@
+<script setup>
+const { error } = defineProps({
+  error: String,
+})
+</script>
+
+<template>
+  <Transition
+    enterActiveClass="transition-all duration-150"
+    leaveActiveClass="transition-all duration-150"
+    enterFromClass="opacity-0 -scale-y-100"
+    leaveToClass="opacity-0 -scale-y-100">
+      <div v-if="error" class="text-right text-sm text-red-500">{{ error }}</div>
+  </Transition>
+</template>

resources/js/Pages/Superuser/Menu/Index.vue

@@ -13,6 +13,8 @@ import Modal from '@/Components/Modal.vue'
 import Close from '@/Components/Button/Close.vue'
 import ButtonGreen from '@/Components/Button/Green.vue'
 import ButtonBlue from '@/Components/Button/Blue.vue'
+import Input from '@/Components/Input.vue'
+import InputError from '@/Components/InputError.vue'
 
 const self = getCurrentInstance()
 const props = defineProps({
@@ -173,10 +175,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
             <div class="flex flex-col space-y-1">
               <div class="flex items-center space-x-2">
                 <label for="name" class="lowercase first-letter:capitalize w-1/3">name</label>
-                <input type="text" name="name" v-model="form.name" ref="name" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 border dark:border-gray-800 uppercase placeholder:capitalize" placeholder="name" required>
+                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
               </div>
 
-              <div v-if="form.errors.name" class="text-right text-sm text-red-500">{{ form.errors.name }}</div>
+              <InputError :error="form.errors.name" />
             </div>
 
             <div class="flex flex-col space-y-1">
@@ -193,7 +195,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   placeholder="route name or url" />
               </div>
 
-              <div v-if="form.errors.route_or_url" class="text-right text-sm text-red-500">{{ form.errors.route_or_url }}</div>
+              <InputError :error="form.errors.route_or_url" />
             </div>
 
             <div class="flex flex-col space-y-1">
@@ -212,7 +214,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   placeholder="actives" />
               </div>
 
-              <div v-if="form.errors.actives" class="text-right text-sm text-red-500">{{ form.errors.actives }}</div>
+              <InputError :error="form.errors.actives" />
             </div>
 
             <div class="flex flex-col space-y-1">
@@ -233,7 +235,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   placeholder="permissions" />
               </div>
 
-              <div v-if="form.errors.permissions" class="text-right text-sm text-red-500">{{ form.errors.permissions }}</div>
+              <InputError :error="form.errors.permissions" />
             </div>
 
             <div class="flex items-center space-x-2">

resources/js/Pages/Superuser/Permission/Index.vue

@@ -12,6 +12,8 @@ import Close from '@/Components/Button/Close.vue'
 import ButtonGreen from '@/Components/Button/Green.vue'
 import ButtonBlue from '@/Components/Button/Blue.vue'
 import ButtonRed from '@/Components/Button/Red.vue'
+import Input from '@/Components/Input.vue'
+import InputError from '@/Components/InputError.vue'
 
 const self = getCurrentInstance()
 const permissions = ref([])
@@ -153,12 +155,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="name" class="lowercase first-letter:capitalize flex-none w-1/4">name</label>
-                <input ref="name" type="text" v-model="form.name" class="bg-transparent w-full rounded-md px-3 py-1 text-sm placeholder:capitalize" placeholder="name">
+                <Input v-model="form.name" type="text" placeholder="name" required autofocus />
               </div>
               
-              <transition name="fade">
+              <InputError :error="form.errors.name" />
-                <div v-if="form.errors.name" class="text-red-400 text-sm text-right">{{ form.errors.name }}</div>
-              </transition>
             </div>
           </div>
         </template>

resources/js/Pages/Superuser/Role/Index.vue

@@ -14,6 +14,8 @@ import Close from '@/Components/Button/Close.vue'
 import ButtonGreen from '@/Components/Button/Green.vue'
 import ButtonBlue from '@/Components/Button/Blue.vue'
 import ButtonRed from '@/Components/Button/Red.vue'
+import Input from '@/Components/Input.vue'
+import InputError from '@/Components/InputError.vue'
 
 const self = getCurrentInstance()
 const { permissions } = defineProps({
@@ -29,10 +31,7 @@ const form = useForm({
 const table = ref(null)
 const open = ref(false)
 
-const show = () => {
+const show = () => open.value = true
-  open.value = true
-  nextTick(() => self.refs.name?.focus())
-}
 
 const close = () => {
   open.value = false
@@ -204,10 +203,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
-                <input ref="name" type="text" name="name" v-model="form.name" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="name" required>
+                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
               </div>
 
-              <p v-if="form.errors.name" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.name }}</p>
+              <InputError :error="form.errors.name" />
             </div>
 
             <div class="flex flex-col space-y-2">
@@ -226,7 +225,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   mode="tags" />
               </div>
 
-              <p v-if="form.errors.permissions" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.permissions }}</p>
+              <InputError :error="form.errors.permissions" />
             </div>
           </div>
         </template>

resources/js/Pages/Superuser/User/Index.vue

@@ -14,12 +14,15 @@ import ButtonGreen from '@/Components/Button/Green.vue'
 import ButtonBlue from '@/Components/Button/Blue.vue'
 import ButtonRed from '@/Components/Button/Red.vue'
 import Close from '@/Components/Button/Close.vue'
+import Input from '@/Components/Input.vue'
+import InputError from '@/Components/InputError.vue'
 
 const self = getCurrentInstance()
 const { permissions, roles } = defineProps({
   permissions: Array,
   roles: Array,
 })
+
 const form = useForm({
   id: null,
   name: '',
@@ -34,10 +37,7 @@ const form = useForm({
 const table = ref(null)
 const open = ref(false)
 
-const show = () => {
+const show = () => open.value = true
-  open.value = true
-  nextTick(() => self.refs.name?.focus())
-}
 
 const close = () => {
   open.value = false
@@ -261,46 +261,46 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="name" class="w-1/3 lowercase first-letter:capitalize">name</label>
-                <input ref="name" type="text" name="name" v-model="form.name" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="name" required>
+                <Input v-model="form.name" type="text" name="name" placeholder="name" required autofocus />
               </div>
 
-              <p v-if="form.errors.name" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.name }}</p>
+              <InputError :error="form.errors.name" />
             </div>
 
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="username" class="w-1/3 lowercase first-letter:capitalize">username</label>
-                <input ref="username" type="text" name="username" v-model="form.username" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="username" required>
+                <Input v-model="form.username" type="text" name="username" placeholder="username" required />
               </div>
 
-              <p v-if="form.errors.username" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.username }}</p>
+              <InputError :error="form.errors.username" />
             </div>
 
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="email" class="w-1/3 lowercase first-letter:capitalize">email</label>
-                <input ref="email" type="email" name="email" v-model="form.email" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="email" required>
+                <Input v-model="form.email" type="email" name="email" placeholder="email" required />
               </div>
 
-              <p v-if="form.errors.email" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.email }}</p>
+              <InputError :error="form.errors.email" />
             </div>
 
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="password" class="w-1/3 lowercase first-letter:capitalize">password</label>
-                <input ref="password" type="password" name="password" v-model="form.password" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="password" :required="form.id === null">
+                <Input v-model="form.password" type="password" name="password" placeholder="password" :required="form.id === null" />
               </div>
 
-              <p v-if="form.errors.password" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.password }}</p>
+              <InputError :error="form.errors.password" />
             </div>
 
             <div class="flex flex-col space-y-2">
               <div class="flex items-center space-x-2">
                 <label for="password_confirmation" class="w-1/3 lowercase first-letter:capitalize">password confirmation</label>
-                <input ref="password_confirmation" type="password" name="password_confirmation" v-model="form.password_confirmation" class="w-full bg-white dark:bg-transparent rounded px-3 py-2 placeholder:capitalize" placeholder="password confirmation" :required="form.id === null">
+                <Input v-model="form.password_confirmation" type="password" name="password_confirmation" placeholder="password confirmation" :required="form.id === null" />
               </div>
 
-              <p v-if="form.errors.password_confirmation" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.password_confirmation }}</p>
+              <InputError :error="form.errors.password_confirmation" />
             </div>
 
             <div class="flex flex-col space-y-2">
@@ -319,7 +319,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   mode="tags" />
               </div>
 
-              <p v-if="form.errors.permissions" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.permissions }}</p>
+              <InputError :error="form.errors.permissions" />
             </div>
 
             <div class="flex flex-col space-y-2">
@@ -338,7 +338,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
                   mode="tags" />
               </div>
 
-              <p v-if="form.errors.roles" class="text-red-500 text-right lowercase first-letter:capitalize">{{ form.errors.roles }}</p>
+              <InputError :error="form.errors.roles" />
             </div>
           </div>
         </template>