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

57
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,24 +69,32 @@ async function handlePrint(paperSize: PaperSize) {
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Tooltip>
<PopoverTrigger as-child> <Popover v-model:open="open">
<Button variant="ghost" size="icon" class="size-8" :disabled="processing" title="Cetak struk"> <TooltipTrigger as-child>
<Printer class="size-4" /> <PopoverTrigger as-child>
<span class="sr-only">Cetak struk</span> <Button variant="ghost" size="icon" class="size-8" :disabled="processing">
</Button> <Printer class="size-4" />
</PopoverTrigger> <span class="sr-only">Cetak struk</span>
</Button>
</PopoverTrigger>
</TooltipTrigger>
<PopoverContent align="end" class="w-40 space-y-2 p-3"> <TooltipContent>
<p class="text-sm font-medium"> Cetak struk
Ukuran kertas </TooltipContent>
</p>
<div class="grid grid-cols-2 gap-2"> <PopoverContent align="end" class="w-40 space-y-2 p-3">
<Button v-for="paperSize in paperSizes" :key="paperSize" variant="outline" size="sm" class="h-8" <p class="text-sm font-medium">
:disabled="processing" @click="handlePrint(paperSize)"> Ukuran kertas
{{ paperSize }} </p>
</Button> <div class="grid grid-cols-2 gap-2">
</div> <Button v-for="paperSize in paperSizes" :key="paperSize" variant="outline" size="sm" class="h-8"
</PopoverContent> :disabled="processing" @click="handlePrint(paperSize)">
</Popover> {{ paperSize }}
</Button>
</div>
</PopoverContent>
</Popover>
</Tooltip>
</template> </template>