jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move input and input error into component

Browse Source
This commit is contained in:
Geriano
2022-07-31 10:31:21 +07:00
parent 019e25137c
commit 70e779c8a4
6 changed files with 76 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/js/Pages/Superuser/Menu/Index.vue
View File

@@ -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">

8
resources/js/Pages/Superuser/Permission/Index.vue
View File

@@ -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>

13
resources/js/Pages/Superuser/Role/Index.vue
View File

@@ -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>

32
resources/js/Pages/Superuser/User/Index.vue
View File

@@ -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>