38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { Printer } from '@lucide/vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import Popover from '@/components/ui/popover/Popover.vue';
|
|
import PopoverContent from '@/components/ui/popover/PopoverContent.vue';
|
|
import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
|
|
defineProps<{
|
|
tooltip?: string;
|
|
disabled?: boolean;
|
|
popoverAlign?: 'start' | 'center' | 'end';
|
|
}>();
|
|
|
|
const open = defineModel<boolean>('open', { default: false });
|
|
</script>
|
|
|
|
<template>
|
|
<Tooltip>
|
|
<Popover v-model:open="open">
|
|
<TooltipTrigger as-child>
|
|
<PopoverTrigger as-child>
|
|
<Button variant="ghost" size="icon" class="size-8" :disabled="disabled">
|
|
<Printer class="size-4" />
|
|
<span class="sr-only">{{ tooltip || 'Cetak' }}</span>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
</TooltipTrigger>
|
|
|
|
<TooltipContent>{{ tooltip || 'Cetak' }}</TooltipContent>
|
|
|
|
<PopoverContent :align="popoverAlign || 'end'" class="w-40 space-y-2 p-3">
|
|
<slot name="popover-content" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Tooltip>
|
|
</template>
|