From 70e779c8a43e191a173269cf54dca9f38fd46cd1 Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sun, 31 Jul 2022 10:31:21 +0700
Subject: [PATCH] move input and input error into component

---
 resources/js/Components/Input.vue             | 28 ++++++++++++++++
 resources/js/Components/InputError.vue        | 15 +++++++++
 resources/js/Pages/Superuser/Menu/Index.vue   | 12 ++++---
 .../js/Pages/Superuser/Permission/Index.vue   |  8 ++---
 resources/js/Pages/Superuser/Role/Index.vue   | 13 ++++----
 resources/js/Pages/Superuser/User/Index.vue   | 32 +++++++++----------
 6 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 resources/js/Components/Input.vue
 create mode 100644 resources/js/Components/InputError.vue

diff --git a/resources/js/Components/Input.vue b/resources/js/Components/Input.vue
new file mode 100644
index 0000000..2770ee7
--- /dev/null
+++ b/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>
diff --git a/resources/js/Components/InputError.vue b/resources/js/Components/InputError.vue
new file mode 100644
index 0000000..8e18d33
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/js/Pages/Superuser/Menu/Index.vue b/resources/js/Pages/Superuser/Menu/Index.vue
index 87351ae..d563e6f 100644
--- a/resources/js/Pages/Superuser/Menu/Index.vue
+++ b/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">
diff --git a/resources/js/Pages/Superuser/Permission/Index.vue b/resources/js/Pages/Superuser/Permission/Index.vue
index 4df6415..3d3f062 100644
--- a/resources/js/Pages/Superuser/Permission/Index.vue
+++ b/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">
-                <div v-if="form.errors.name" class="text-red-400 text-sm text-right">{{ form.errors.name }}</div>
-              </transition>
+              <InputError :error="form.errors.name" />
             </div>
           </div>
         </template>
diff --git a/resources/js/Pages/Superuser/Role/Index.vue b/resources/js/Pages/Superuser/Role/Index.vue
index 2e3ae40..ae41c9e 100644
--- a/resources/js/Pages/Superuser/Role/Index.vue
+++ b/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 = () => {
-  open.value = true
-  nextTick(() => self.refs.name?.focus())
-}
+const show = () => open.value = true
 
 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>
diff --git a/resources/js/Pages/Superuser/User/Index.vue b/resources/js/Pages/Superuser/User/Index.vue
index 1dd9da2..b51e053 100644
--- a/resources/js/Pages/Superuser/User/Index.vue
+++ b/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 = () => {
-  open.value = true
-  nextTick(() => self.refs.name?.focus())
-}
+const show = () => open.value = true
 
 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>