1<template>
2 <FormControl
3 v-if="filter.type == 'Check'"
4 :label="filter.label"
5 type="checkbox"
6 :checked="props.value"
7 @change.stop="updateFilter(filter, $event.target.checked)"
8 class="!min-w-36 max-w-36"
9 />
10 <FormControl
11 v-else-if="filter.type === 'Select'"
12 class="form-control cursor-pointer [&_select]:cursor-pointer !min-w-36 max-w-36"
13 type="select"
14 :model-value="props.value || undefined"
15 :options="filter.options"
16 :placeholder="filter.label"
17 @update:modelValue="(v) => updateFilter(filter, v || '')"
18 />
19 <Link
20 v-else-if="filter.type === 'Link'"
21 :model-value="props.value"
22 :doctype="filter.options"
23 :placeholder="filter.label"
24 :title="props.value ? String(props.value) : undefined"
25 class="!min-w-36 max-w-36"
26 @update:model-value="(value) => updateFilter(filter, value ?? '')"
27 />
28 <component
29 v-else-if="['Date', 'Datetime'].includes(filter.type)"
30 class="border-none !min-w-36 max-w-36"
31 :is="filter.type === 'Date' ? DatePicker : DateTimePicker"
32 :model-value="props.value"
33 @change="(v) => updateFilter(filter, v)"
34 :placeholder="filter.label"
35 />
36 <TextInput
37 v-else
38 :value="props.value"
39 type="text"
40 :placeholder="filter.label"
41 @input.stop="debouncedFn(filter, $event.target.value)"
42 class="border-none !min-w-36 max-w-36"
43 />
44</template>
45<script setup>
46import { Link } from "@framework/ui";
47import { useDebounceFn } from "@vueuse/core";
48import { DatePicker, DateTimePicker, FormControl, TextInput } from "frappe-ui";
49
50const props = defineProps({
51 filter: {
52 type: Object,
53 required: true,
54 },
55 value: {
56 type: [String, Boolean],
57 required: true,
58 },
59});
60
61const emit = defineEmits(["applyQuickFilter"]);
62
63const debouncedFn = useDebounceFn((f, value) => {
64 emit("applyQuickFilter", f, value);
65}, 500);
66
67function updateFilter(f, value) {
68 emit("applyQuickFilter", f, value);
69}
70</script>
71