opendesk

1<template>
2  <div class="flex w-fit items-center">
3    <Button
4      :label="label"
5      :class="count ? 'rounded-e-none' : ''"
6      @click="$emit('toggle')"
7    >
8      <template #prefix><FilterIcon class="h-4" /></template>
9      <template #suffix>
10        <!-- -ms-2 cancels the Button's gap while the badge is closed -->
11        <span
12          :class="[REVEAL, count ? 'grid-cols-[1fr]' : '-ms-2 grid-cols-[0fr]']"
13          :aria-hidden="!count"
14        >
15          <span class="min-w-0 overflow-hidden">
16            <span
17              class="flex h-5 w-5 items-center justify-center rounded-[5px] bg-surface-base pt-px text-xs-medium text-ink-gray-8 shadow-sm"
18            >
19              {{ count || "" }}
20            </span>
21          </span>
22        </span>
23      </template>
24    </Button>
25    <!-- invisible: a collapsed X still has a box; visibility waits out the transition -->
26    <div
27      :class="[REVEAL, count ? 'grid-cols-[1fr]' : 'invisible grid-cols-[0fr]']"
28      :inert="!count"
29    >
30      <div class="min-w-0 overflow-hidden">
31        <Tooltip :text="__('Clear all Filter')">
32          <div>
33            <Button
34              class="rounded-s-none border-s"
35              icon="lucide-x"
36              :aria-label="__('Clear all Filter')"
37              @click.stop="$emit('clear')"
38            />
39          </div>
40        </Tooltip>
41      </div>
42    </div>
43  </div>
44</template>
45
46<script setup lang="ts">
47import FilterIcon from "../FilterIcon.vue";
48import { __ } from "../translation";
49import { Button, Tooltip } from "frappe-ui";
50
51interface P {
52  count: number;
53  label?: string;
54}
55
56interface E {
57  (event: "toggle"): void;
58  (event: "clear"): void;
59}
60
61withDefaults(defineProps<P>(), { label: "Filter" });
62
63// A 0fr to 1fr grid column animates the width, which `auto` cannot.
64const REVEAL =
65  "grid transition-all duration-200 ease-out motion-reduce:transition-none";
66defineEmits<E>();
67</script>
68