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

create button component

Browse Source
This commit is contained in:
Geriano
2022-07-30 10:38:28 +07:00
parent ef79fd9451
commit ff54776fc4
10 changed files with 121 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,10 @@ import Th from '@/Components/DataTable/Th.vue'
import Swal from 'sweetalert2'
import Select from '@vueform/multiselect'
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 ButtonRed from '@/Components/Button/Red.vue'
const self = getCurrentInstance()
const { permissions } = defineProps({
@@ -101,12 +105,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
<template #header>
<div class="flex items-center space-x-2 p-2 bg-gray-200 dark:bg-gray-800">
<button v-if="can('create role')" @click.prevent="show" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
<div class="flex items-center space-x-1">
<Icon name="plus" />
<p class="uppercase font-semibold">create</p>
</div>
</button>
<ButtonGreen v-if="can('create role')" @click.prevent="show">
<Icon name="plus" />
<p class="uppercase font-semibold">create</p>
</ButtonGreen>
</div>
</template>
@@ -159,19 +161,15 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
</td>
<td class="px-2 py-1 border dark:border-gray-800">
<div class="flex items-center space-x-2">
<button @click.prevent="edit(role, refresh)" class="bg-blue-600 rounded-md px-3 py-1 transition-all hover:bg-blue-700 text-white text-sm">
<div class="flex items-center space-x-2">
<Icon name="edit" />
<p class="uppercase">edit</p>
</div>
</button>
<ButtonBlue @click.prevent="edit(role, refresh)">
<Icon name="edit" />
<p class="uppercase">edit</p>
</ButtonBlue>
<button @click.prevent="destroy(role, refresh)" class="bg-red-600 rounded-md px-3 py-1 transition-all hover:bg-red-700 text-white text-sm">
<div class="flex items-center space-x-2">
<Icon name="trash" />
<p class="uppercase">delete</p>
</div>
</button>
<ButtonRed @click.prevent="destroy(role, refresh)">
<Icon name="trash" />
<p class="uppercase">delete</p>
</ButtonRed>
</div>
</td>
</tr>
@@ -195,7 +193,7 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<Card class="bg-gray-50 dark:bg-gray-700 dark:text-gray-100">
<template #header>
<div class="flex items-center justify-end bg-gray-200 dark:bg-gray-800 p-2">
<Icon @click.prevent="close" name="times" class="px-2 py-1 bg-gray-300 hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md transition-all cursor-pointer" />
<Close @click.prevent="close" />
</div>
</template>
@@ -233,13 +231,10 @@ onUnmounted(() => window.removeEventListener('keydown', esc))
<template #footer>
<div class="flex items-center justify-end space-x-2 bg-gray-200 dark:bg-gray-800 px-2 py-1">
<button type="submit" class="bg-green-600 hover:bg-green-700 rounded-md px-3 py-1 text-sm text-white transition-all">
<div class="flex items-center space-x-1">
<Icon name="check" />
<p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
</div>
</button>
<ButtonGreen type="submit">
<Icon name="check" />
<p class="uppercase font-semibold">{{ form.id ? 'update' : 'create' }}</p>
</ButtonGreen>
</div>
</template>
</Card>