Khafid Prayoga
add19f33a2
Add size prop configuration to action components in data table to allow consistent sizing. Update dropdown action component to accept size prop with default value.
75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { LinkItem, ListItemDto } from './types'
|
|
|
|
interface Props {
|
|
rec: ListItemDto
|
|
size?: 'default' | 'sm' | 'lg'
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: 'lg',
|
|
})
|
|
|
|
const recId = inject<Ref<number>>('rec_id')!
|
|
const recAction = inject<Ref<string>>('rec_action')!
|
|
const recItem = inject<Ref<any>>('rec_item')!
|
|
|
|
function edit() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = 'showEdit'
|
|
recItem.value = props.rec
|
|
}
|
|
|
|
function del() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = 'showConfirmDel'
|
|
recItem.value = props.rec
|
|
}
|
|
|
|
const linkItems: LinkItem[] = [
|
|
{
|
|
label: 'Edit',
|
|
onClick: () => {
|
|
edit()
|
|
},
|
|
icon: 'i-lucide-pencil',
|
|
},
|
|
{
|
|
label: 'Hapus',
|
|
onClick: () => {
|
|
del()
|
|
},
|
|
icon: 'i-lucide-trash',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton
|
|
:size="size"
|
|
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white"
|
|
>
|
|
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg bg-white" align="end">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem
|
|
v-for="item in linkItems"
|
|
:key="item.label"
|
|
v-slot="{ active }"
|
|
class="hover:bg-gray-100"
|
|
@click="item.onClick"
|
|
>
|
|
<Icon :name="item.icon" />
|
|
<span :class="active ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|