dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: integrate tooltip functionality into OrderPrintButton component to enhance user interaction and improve clarity

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-21 10:21:22 +07:00
parent 29f4498ede
commit e522b5f922
1 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
resources/js/pages/admin/manage/orders/form/OrderPrintButton.vue
View File

@ -4,11 +4,12 @@ import { Printer } from '@lucide/vue';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import Popover from '@/components/ui/popover/Popover.vue';
Popover, import PopoverContent from '@/components/ui/popover/PopoverContent.vue';
PopoverContent, import PopoverTrigger from '@/components/ui/popover/PopoverTrigger.vue';
PopoverTrigger, import Tooltip from '@/components/ui/tooltip/Tooltip.vue';
} from '@/components/ui/popover'; import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue';
import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue';
import { useThermalPrinter, getPaperSizeLabel } from '@/composables/useThermalPrinter'; import { useThermalPrinter, getPaperSizeLabel } from '@/composables/useThermalPrinter';
import type { PaperSize } from '@/lib/thermal-printer/types'; import type { PaperSize } from '@/lib/thermal-printer/types';
import type { OrderListItem } from '@/types/order'; import type { OrderListItem } from '@/types/order';
@ -68,13 +69,20 @@ async function handlePrint(paperSize: PaperSize) {
</script> </script>
<template> <template>
<Tooltip>
<Popover v-model:open="open"> <Popover v-model:open="open">
<TooltipTrigger as-child>
<PopoverTrigger as-child> <PopoverTrigger as-child>
<Button variant="ghost" size="icon" class="size-8" :disabled="processing" title="Cetak struk"> <Button variant="ghost" size="icon" class="size-8" :disabled="processing">
<Printer class="size-4" /> <Printer class="size-4" />
<span class="sr-only">Cetak struk</span> <span class="sr-only">Cetak struk</span>
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
</TooltipTrigger>
<TooltipContent>
Cetak struk
</TooltipContent>
<PopoverContent align="end" class="w-40 space-y-2 p-3"> <PopoverContent align="end" class="w-40 space-y-2 p-3">
<p class="text-sm font-medium"> <p class="text-sm font-medium">
@ -88,4 +96,5 @@ async function handlePrint(paperSize: PaperSize) {
</div> </div>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</Tooltip>
</template> </template>