Smart Search Input

1<script setup lang="ts">
2import { X } from "@lucide/vue";
3import type { ActiveFilterItem } from "./types";
4import { GetI18nText, type Locale } from "./locales";
5 
6const props = withDefaults(
7  defineProps<{
8    locale?: Locale;
9  }>(),
10  {
11    locale: "en",
12  },
13);
14 
15const filters = defineModel<ActiveFilterItem[]>("filters", { required: true });
16 
17const emit = defineEmits<{
18  (e: "remove", key: string): void;
19  (e: "clear-all"): void;
20}>();
21 
22const $t = (key: Parameters<typeof GetI18nText>[0]) =>
23  GetI18nText(key, props.locale);
24 
25const handleRemove = (key: string) => {
26  filters.value = filters.value.filter((f) => f.key !== key);
27  emit("remove", key);
28};
29 
30const handleClearAll = () => {
31  filters.value = [];
32  emit("clear-all");
33};
34</script>
35 
36<template>
37  <div v-if="filters.length" class="flex flex-wrap gap-2 items-center">
38    <span class="text-sm text-muted-foreground">{{ $t("filterTag") }}</span>
39    <div
40      v-for="item in filters"
41      :key="item.key"
42      class="flex items-center gap-1 px-2 py-1 text-sm bg-muted rounded-md"
43    >
44      <span class="truncate max-w-40"
45        >{{ item.label }}: {{ item.displayValue }}</span
46      >
47      <button
48        class="hover:bg-muted-foreground/20 rounded p-0.5"
49        @click="handleRemove(item.key)"
50      >
51        <X class="h-3 w-3" />
52      </button>
53    </div>
54    <button
55      class="text-xs text-muted-foreground hover:text-foreground"
56      @click="handleClearAll"
57    >
58      {{ $t("clearAll") }}
59    </button>
60  </div>
61</template>