opendesk

1<template>
2  <Popover
3    bare
4    :side="splitPlacement(props.placement).side"
5    :align="splitPlacement(props.placement).align"
6  >
7    <template #trigger>
8      <Button
9        class="flex items-center justify-between min-w-36"
10        :class="targetClass"
11        icon-right="lucide-chevron-down"
12      >
13        <div class="w-full truncate">
14          {{
15            options?.find((option) => option.value == model)?.label || "Select"
16          }}
17        </div>
18      </Button>
19    </template>
20    <template #default="{ close: closePopover }">
21      <div
22        class="mt-1 p-1 text-ink-gray-6 w-[--reka-popper-anchor-width] bg-surface-base shadow-2xl rounded-4"
23        :class="bodyClass"
24      >
25        <div class="max-h-52 overflow-y-auto">
26          <div
27            v-for="option in options"
28            :key="option.value"
29            class="p-2 cursor-pointer hover:bg-surface-gray-3 text-base flex items-center justify-between rounded-4"
30            @click="
31              () => {
32                onChange(option.value);
33                closePopover();
34              }
35            "
36          >
37            <div class="w-full truncate">
38              {{ option.label }}
39            </div>
40            <LucideCheck v-if="model == option.value" class="size-4 ms-2" />
41          </div>
42        </div>
43        <hr class="my-1" />
44        <Button
45          variant="ghost"
46          :label="__('Reset')"
47          icon-left="lucide-refresh-ccw"
48          class="w-full focus-visible:ring-0"
49          @click="onReset(closePopover)"
50        />
51      </div>
52    </template>
53  </Popover>
54</template>
55
56<script setup lang="ts">
57import { splitPlacement } from "@/utils";
58import LucideCheck from "~icons/lucide/check";
59import { Button, Popover } from "frappe-ui";
60
61const model = defineModel();
62
63interface Props {
64  options: Array<{ value: string; label: string }>;
65  targetClass?: string;
66  bodyClass?: string;
67  placement?: string;
68  defaultValue?: string;
69}
70
71const props = withDefaults(defineProps<Props>(), {
72  placement: "bottom-start",
73  defaultValue: undefined,
74});
75
76const onReset = (closePopover: () => void) => {
77  model.value = props.defaultValue !== undefined ? props.defaultValue : null;
78  closePopover();
79};
80
81const onChange = (value: string) => {
82  model.value = value;
83};
84</script>
85