simrsx-fe/app/components/pub/my-ui/data/dropdown-action-duvp.vue

<script setup lang="ts">
import type { LinkItem, ListItemDto } from './types'
import { ActionEvents } from './types'

const props = defineProps<{
  rec: ListItemDto
}>()

const recId = inject<Ref<number>>('rec_id')!
const recAction = inject<Ref<string>>('rec_action')!
const recItem = inject<Ref<any>>('rec_item')!
const timestamp = inject<Ref<any>>('timestamp')!
  
const activeKey = ref<string | null>(null)
const linkItems: LinkItem[] = [
  {
    label: 'Detail',
    onClick: () => {
      detail()
    },
    icon: 'i-lucide-eye',
  },
  {
    label: 'Edit',
    onClick: () => {
      edit()
    },
    icon: 'i-lucide-pencil',
  },
  {
    label: 'Verifikasi',
    onClick: () => {
      verify()
    },
    icon: 'i-lucide-shield-check',
  },
  {
    label: 'Print',
    onClick: () => {
      print()
    },
    icon: 'i-lucide-printer',
  },
]

function detail() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showDetail
  recItem.value = props.rec
}

function edit() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showEdit
  recItem.value = props.rec
}

function verify() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showConfirmVerify
  recItem.value = props.rec
  timestamp.value = new Date().getTime()
}

function print() {
  recId.value = props.rec.id || 0
  recAction.value = ActionEvents.showPrint
  recItem.value = props.rec
}
</script>

<template>
  <div>
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <SidebarMenuButton
          size="lg"
          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
        >
          <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 border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
        align="end"
      >
        <DropdownMenuGroup>
          <DropdownMenuItem
            v-for="item in linkItems"
            :key="item.label"
            class="hover:bg-gray-100 dark:hover:bg-slate-700"
            @click="item.onClick"
            @mouseenter="activeKey = item.label"
            @mouseleave="activeKey = null"
          >
            <Icon :name="item.icon ?? ''" />
            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </div>
</template>