admins-components 9.0.72 → 9.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -63,7 +63,7 @@ var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
|
|
|
63
63
|
if (z.value.length === 0) return null;
|
|
64
64
|
if (!M.value.multiple) {
|
|
65
65
|
let e = z.value[0];
|
|
66
|
-
return j.options.find((t) => t.value === e
|
|
66
|
+
return j.options.find((t) => t.value === e?.value)?.label ?? e?.label ?? null;
|
|
67
67
|
}
|
|
68
68
|
return z.value.length > 2 ? `${z.value.length} kiválasztva` : z.value.map((e) => j.options.find((t) => t.value === e.value)?.label ?? e.label ?? e.value).join(", ");
|
|
69
69
|
}), U = r(() => {
|
|
@@ -97,7 +97,7 @@ var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
|
|
|
97
97
|
let e = M.value.lazy && P.value ? R : z, t = K.value.filter((e) => e.value);
|
|
98
98
|
if (q.value) {
|
|
99
99
|
let n = new Set(t.map((e) => e.value));
|
|
100
|
-
e.value = e.value.filter((e) => !n.has(e.value));
|
|
100
|
+
e.value = e.value.filter((e) => !n.has(e.value ?? ""));
|
|
101
101
|
} else {
|
|
102
102
|
let n = new Set(e.value.map((e) => e.value)), r = t.filter((e) => !n.has(e.value));
|
|
103
103
|
e.value = [...e.value, ...r];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every((o) => o.value && currentList.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\n// Actions\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n\n <div\n v-if=\"isOpen\"\n class=\"c-dropdown ds-dropdown ac-component\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n\n <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every((o) => o.value && currentList.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\n// Actions\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n\n <div\n v-if=\"isOpen\"\n class=\"c-dropdown ds-dropdown ac-component\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n\n <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every((o) => o.value && currentList.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\n// Actions\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n\n <div\n v-if=\"isOpen\"\n class=\"c-dropdown ds-dropdown ac-component\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n\n <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption | DropdownOption[] | string | string[] | null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption | DropdownOption[] | null]\n 'filter-input': [filterText: string]\n}>()\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\n\nfunction normalizeToOptions(\n val: DropdownOption | DropdownOption[] | string | string[] | null | undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption | null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n //debouncedEmit(text)\n}\n\n/* const debouncedEmit = debounce((raw: string) => {\n emit('filter-input', raw)\n}) */\n\n// Display\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n // Prefer the label from the live options list, fall back to the stored label\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q || !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every((o) => o.value && currentList.some((s) => s.value === o.value))\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\n// Actions\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => {\n document.removeEventListener('mousedown', onClickOutside)\n})\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n }\"\n :aria-disabled=\"cfg.disabled || undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n\n <div\n v-if=\"isOpen\"\n class=\"c-dropdown ds-dropdown ac-component\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n\n <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
|
|
@@ -60,7 +60,7 @@ var E = {
|
|
|
60
60
|
F.value = {
|
|
61
61
|
...F.value,
|
|
62
62
|
[e.key]: n
|
|
63
|
-
}, e.onChange && e.onChange(n), N.lazy ||
|
|
63
|
+
}, e.onChange && e.onChange(n), N.lazy || W();
|
|
64
64
|
}
|
|
65
65
|
let V = f(() => Object.values(F.value).some((e) => e !== null && e !== "" && e !== void 0));
|
|
66
66
|
function H() {
|
|
@@ -68,45 +68,53 @@ var E = {
|
|
|
68
68
|
for (let t of N.items) {
|
|
69
69
|
if (t.type === "separator") continue;
|
|
70
70
|
let n = F.value[t.key];
|
|
71
|
-
t.transformer ? Object.assign(e, t.transformer(n) ?? {}) : t.type === "date" || t.type === "datetime" ? e[t.key] = n?.utc ?? n : e[t.key] = n;
|
|
71
|
+
t.transformer ? Object.assign(e, t.transformer(n) ?? {}) : t.type === "date" || t.type === "datetime" ? e[t.key] = n?.utc ?? n : t.type === "dropdown" ? e[t.key] = U(n) : e[t.key] = n;
|
|
72
72
|
}
|
|
73
73
|
return {
|
|
74
74
|
values: s(F.value),
|
|
75
75
|
transformed: s(e)
|
|
76
76
|
};
|
|
77
77
|
}
|
|
78
|
-
function U() {
|
|
79
|
-
|
|
78
|
+
function U(e) {
|
|
79
|
+
if (e == null) return null;
|
|
80
|
+
if (Array.isArray(e)) {
|
|
81
|
+
let t = e.map((e) => e == null ? null : typeof e == "object" && "value" in e ? e.value ?? null : typeof e == "string" ? e : null).filter((e) => e !== null);
|
|
82
|
+
return t.length > 0 ? t : null;
|
|
83
|
+
}
|
|
84
|
+
return typeof e == "object" && "value" in e ? e.value ?? null : typeof e == "string" ? e : null;
|
|
80
85
|
}
|
|
81
86
|
function W() {
|
|
82
|
-
|
|
87
|
+
N.handleUrl && l(N.items, F.value), P("change", H());
|
|
83
88
|
}
|
|
84
89
|
function G() {
|
|
85
|
-
|
|
90
|
+
W(), P("close");
|
|
86
91
|
}
|
|
87
|
-
function K(
|
|
92
|
+
function K() {
|
|
93
|
+
F.value = {}, W();
|
|
94
|
+
}
|
|
95
|
+
function q(e) {
|
|
88
96
|
F.value = {
|
|
89
97
|
...F.value,
|
|
90
98
|
[e]: null
|
|
91
|
-
},
|
|
99
|
+
}, W();
|
|
92
100
|
}
|
|
93
|
-
function
|
|
101
|
+
function J(e) {
|
|
94
102
|
let t = I.value[e];
|
|
95
103
|
t && (typeof t.focusAndOpen == "function" ? t.focusAndOpen() : typeof t.focus == "function" && t.focus());
|
|
96
104
|
}
|
|
97
|
-
function
|
|
105
|
+
function Y(e) {
|
|
98
106
|
let t = { ...F.value };
|
|
99
107
|
for (let n of N.items) n.type !== "separator" && n.key in e && (t[n.key] = e[n.key] ?? null);
|
|
100
|
-
F.value = t,
|
|
108
|
+
F.value = t, W();
|
|
101
109
|
}
|
|
102
110
|
j({
|
|
103
|
-
clearFilter:
|
|
104
|
-
focusFilter:
|
|
111
|
+
clearFilter: q,
|
|
112
|
+
focusFilter: J
|
|
105
113
|
});
|
|
106
|
-
function
|
|
107
|
-
e.key === "Enter" && e.target?.tagName !== "TEXTAREA" && (e.preventDefault(),
|
|
114
|
+
function X(e) {
|
|
115
|
+
e.key === "Enter" && e.target?.tagName !== "TEXTAREA" && (e.preventDefault(), G());
|
|
108
116
|
}
|
|
109
|
-
function
|
|
117
|
+
function Z(e, t) {
|
|
110
118
|
e.onInnerSearch && e.onInnerSearch(t);
|
|
111
119
|
}
|
|
112
120
|
return (s, c) => (x(), p(o, {
|
|
@@ -118,7 +126,7 @@ var E = {
|
|
|
118
126
|
default: T(() => [
|
|
119
127
|
g("div", {
|
|
120
128
|
class: "data-filters",
|
|
121
|
-
onKeydown:
|
|
129
|
+
onKeydown: X
|
|
122
130
|
}, [(x(!0), h(d, null, C(v.items, (e) => (x(), h("div", {
|
|
123
131
|
key: e.key,
|
|
124
132
|
class: b(["data-filters__field", { "data-filters__field--full": e.fullWidth || e.type === "separator" }])
|
|
@@ -190,7 +198,7 @@ var E = {
|
|
|
190
198
|
clearable: !0,
|
|
191
199
|
filterable: !0
|
|
192
200
|
},
|
|
193
|
-
onFilterInput: (t) =>
|
|
201
|
+
onFilterInput: (t) => Z(e, t),
|
|
194
202
|
"onUpdate:modelValue": (t) => B(e, t)
|
|
195
203
|
}, null, 8, [
|
|
196
204
|
"model-value",
|
|
@@ -205,18 +213,18 @@ var E = {
|
|
|
205
213
|
label: "Szűrők törlése",
|
|
206
214
|
"aria-label": "Szűrők törlése",
|
|
207
215
|
size: "small",
|
|
208
|
-
onClick:
|
|
216
|
+
onClick: K
|
|
209
217
|
}, null, 8, ["disabled"]), _(e, {
|
|
210
218
|
label: "Szűrés",
|
|
211
219
|
"aria-label": "Szűrés",
|
|
212
220
|
type: "success",
|
|
213
|
-
onClick:
|
|
221
|
+
onClick: G
|
|
214
222
|
})]),
|
|
215
223
|
v.historyEnabled ? (x(), h(d, { key: 0 }, [c[1] ||= g("hr", { class: "separator my-3" }, null, -1), _(u, {
|
|
216
224
|
items: v.items,
|
|
217
225
|
values: F.value,
|
|
218
226
|
"storage-key": v.storageKey,
|
|
219
|
-
onLoad:
|
|
227
|
+
onLoad: Y
|
|
220
228
|
}, null, 8, [
|
|
221
229
|
"items",
|
|
222
230
|
"values",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components91.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n onInnerSearch?: (value: string) => void\n onChange?: (value: any) => void\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n\nexport interface DataFiltersProps {\n items: FilterItem[]\n open?: boolean\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport TextInput, { type TextInputType } from '@/components/TextInput.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getDefaultFilters, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataFiltersProps>(), {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getDefaultFilters(props.items, props.storageKey, false))\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) filterRefs.value[key] = el\n else delete filterRefs.value[key]\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nfunction update(item: FilterItem, value: any) {\n const stored = typeof value === 'string' ? value.trim() : value\n values.value = { ...values.value, [item.key]: stored }\n if (item.onChange) item.onChange(stored)\n if (!props.lazy) emitChange()\n}\n\nconst hasActiveFilters = computed(() =>\n Object.values(values.value).some((v) => v !== null && v !== '' && v !== undefined),\n)\n\nfunction buildResponse(): FilterResponse {\n const transformed: Record<string, any> = {}\n for (const item of props.items) {\n if (item.type === 'separator') continue\n const val = values.value[item.key]\n if (item.transformer) {\n Object.assign(transformed, item.transformer(val) ?? {})\n } else if (item.type === 'date' || item.type === 'datetime') {\n transformed[item.key] = val?.utc ?? val\n } else {\n transformed[item.key] = val\n }\n }\n return { values: filterEmptyValues(values.value), transformed: filterEmptyValues(transformed) }\n}\n\nfunction emitChange() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponse())\n}\n\nfunction confirm() {\n emitChange()\n emit('close')\n}\n\nfunction clearAll() {\n values.value = {}\n emitChange()\n}\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n emitChange()\n}\n\nfunction focusFilter(key: string) {\n const el = (filterRefs.value as Record<string, any>)[key]\n if (!el) return\n\n if (typeof el.focusAndOpen === 'function') el.focusAndOpen()\n else if (typeof el.focus === 'function') el.focus()\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) next[item.key] = loaded[item.key] ?? null\n }\n values.value = next\n emitChange()\n}\n\ndefineExpose({ clearFilter, focusFilter })\n\nfunction handleFilterKeydown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return\n\n // Allow Enter in textarea for line breaks\n const target = event.target as HTMLElement\n if (target?.tagName === 'TEXTAREA') return\n\n event.preventDefault()\n confirm()\n}\n\nfunction handleDropdownFilterInput(item: FilterItem, text: string) {\n if (item.onInnerSearch) item.onInnerSearch(text)\n}\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\" @keydown=\"handleFilterKeydown\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"['text', 'number', 'textarea'].includes(item.type)\">\n <TextInput\n :type=\"item.type as TextInputType\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as string) ?? ''\"\n :label=\"item.label ?? item.key\"\n :placeholder=\"item.placeholder\"\n @update:model-value=\"(val) => update(item, val || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as DropdownOption | DropdownOption[] | null) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @filter-input=\"handleDropdownFilterInput(item, $event)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <template v-if=\"historyEnabled\">\n <hr class=\"separator my-3\" />\n <FiltersHistory\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n />\n </template>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GAQR,IAAO,GAKP,IAAS,EAAyB,EAAkB,EAAM,OAAO,EAAM,YAAY,EAAK,CAAC,GACzF,IAAa,EAAyB,CAAC,CAAC;EAE9C,SAAS,EAAa,GAAa,GAAS;GAC1C,AAAI,IAAI,EAAW,MAAM,KAAO,IAC3B,OAAO,EAAW,MAAM;EAC/B;EAEA,SAAS,EAAsB,GAAoC;GACjE,OAAO;IACL,GAAI,EAAK,UAAU,CAAC;IACpB,UAAU,EAAK,SAAS;IACxB,aAAa,EAAK,gBAAgB,EAAK,SAAS,aAAa,YAAY;GAC3E;EACF;EAEA,SAAS,EAA2B,GAAyC;GAC3E,OAAO;IACL,GAAI,EAAK,UAAU,CAAC;IACpB,GAAK,EAAK,YAAgC,CAAC,IAArB,EAAE,SAAS,GAAK;IACtC,UAAU,EAAK,SAAS;GAC1B;EACF;EAEA,SAAS,EAAO,GAAkB,GAAY;GAC5C,IAAM,IAAS,OAAO,KAAU,WAAW,EAAM,KAAK,IAAI;GAG1D,AAFA,EAAO,QAAQ;IAAE,GAAG,EAAO;KAAQ,EAAK,MAAM;GAAO,GACjD,EAAK,YAAU,EAAK,SAAS,CAAM,GAClC,EAAM,QAAM,EAAW;EAC9B;EAEA,IAAM,IAAmB,QACvB,OAAO,OAAO,EAAO,KAAK,EAAE,MAAM,MAAM,MAAM,QAAQ,MAAM,MAAM,MAAM,KAAA,CAAS,CACnF;EAEA,SAAS,IAAgC;GACvC,IAAM,IAAmC,CAAC;GAC1C,KAAK,IAAM,KAAQ,EAAM,OAAO;IAC9B,IAAI,EAAK,SAAS,aAAa;IAC/B,IAAM,IAAM,EAAO,MAAM,EAAK;IAC9B,AAAI,EAAK,cACP,OAAO,OAAO,GAAa,EAAK,YAAY,CAAG,KAAK,CAAC,CAAC,IAC7C,EAAK,SAAS,UAAU,EAAK,SAAS,aAC/C,EAAY,EAAK,OAAO,GAAK,OAAO,IAEpC,EAAY,EAAK,OAAO;GAE5B;GACA,OAAO;IAAE,QAAQ,EAAkB,EAAO,KAAK;IAAG,aAAa,EAAkB,CAAW;GAAE;EAChG;EAEA,SAAS,IAAa;GAEpB,AADI,EAAM,aAAW,EAAkB,EAAM,OAAO,EAAO,KAAK,GAChE,EAAK,UAAU,EAAc,CAAC;EAChC;EAEA,SAAS,IAAU;GAEjB,AADA,EAAW,GACX,EAAK,OAAO;EACd;EAEA,SAAS,IAAW;GAElB,AADA,EAAO,QAAQ,CAAC,GAChB,EAAW;EACb;EAEA,SAAS,EAAY,GAAa;GAEhC,AADA,EAAO,QAAQ;IAAE,GAAG,EAAO;KAAQ,IAAM;GAAK,GAC9C,EAAW;EACb;EAEA,SAAS,EAAY,GAAa;GAChC,IAAM,IAAM,EAAW,MAA8B;GAChD,MAED,OAAO,EAAG,gBAAiB,aAAY,EAAG,aAAa,IAClD,OAAO,EAAG,SAAU,cAAY,EAAG,MAAM;EACpD;EAEA,SAAS,EAAc,GAA6B;GAClD,IAAM,IAA4B,EAAE,GAAG,EAAO,MAAM;GACpD,KAAK,IAAM,KAAQ,EAAM,OACnB,EAAK,SAAS,eACd,EAAK,OAAO,MAAQ,EAAK,EAAK,OAAO,EAAO,EAAK,QAAQ;GAG/D,AADA,EAAO,QAAQ,GACf,EAAW;EACb;EAEA,EAAa;GAAE;GAAa;EAAY,CAAC;EAEzC,SAAS,EAAoB,GAAsB;GAC7C,EAAM,QAAQ,WAGH,EAAM,QACT,YAAY,eAExB,EAAM,eAAe,GACrB,EAAQ;EACV;EAEA,SAAS,EAA0B,GAAkB,GAAc;GACjE,AAAI,EAAK,iBAAe,EAAK,cAAc,CAAI;EACjD;yBAIE,EAuFU,GAAA;GAvFA,MAAM,EAAA;GAAM,OAAM;GAAU,UAAU,EAAA;GAAW,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;;oBAkE9D;IAjEN,EAiEM,OAAA;KAjED,OAAM;KAAgB,WAAS;gBAClC,EA+DM,GAAA,MAAA,EA9DW,EAAA,QAAR,YADT,EA+DM,OAAA;KA7DH,KAAK,EAAK;KACX,OAAK,EAAA,CAAC,uBAAqB,EAAA,6BACY,EAAK,aAAa,EAAK,SAAI,YAAA,CAAA,CAAA;QAExD,EAAK,SAAI,eAAA,EAAA,GAAnB,EAAuE,MAAvE,CAAuE,KAClD,EAAK,SAAI,cAAA,EAAA,GAC5B,EAME,GANF,EAME;;;KALC,MAAM,MAAY,EAAa,EAAK,KAAK,CAAE;KAC3C,eAAc,EAAA,MAAO,EAAK,QAAG;KAC7B,OAAO,EAAK,SAAS,EAAK;KAC1B,wBAAqB,MAAQ,EAAO,GAAM,CAAG;wBACtC,EAAK,MAAM,GAAA,MAAA,IAAA;KAAA;KAAA;KAAA;IAAA,CAAA,KAAA;;;;MAG6B,SAAS,EAAK,IAAI,KAAA,EAAA,GACpE,EASE,GATF,EASE;;KARC,MAAM,EAAK;;KACX,MAAM,MAAY,EAAa,EAAK,KAAK,CAAE;KAC3C,IAAE,MAAQ,EAAK;KACf,eAAc,EAAA,MAAO,EAAK,QAAG;KAC7B,OAAO,EAAK,SAAS,EAAK;KAC1B,aAAa,EAAK;KAClB,wBAAqB,MAAQ,EAAO,GAAM,KAAG,IAAA;wBACtC,EAAK,MAAM,GAAA,MAAA,IAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA,CAAA,KAGF,EAAK,SAAI,UAAe,EAAK,SAAI,cAAA,EAAA,GAAtD,EASW,GAAA,EAAA,KAAA,EAAA,GAAA,CART,EAAmF,SAAA;KAA5E,OAAM;KAAW,KAAG,MAAQ,EAAK;SAAU,EAAK,SAAS,EAAK,GAAG,GAAA,GAAA,CAAA,GACxE,EAME,GAAA;;KALC,MAAM,MAAY,EAAa,EAAK,KAAK,CAAE;KAC3C,IAAE,MAAQ,EAAK;KACf,eAAc,EAAA,MAAO,EAAK,QAAG;KAC7B,QAAQ,EAAsB,CAAI;KAClC,wBAAqB,MAAQ,EAAO,GAAM,CAAG;;;;;;gBAG7B,EAAK,SAAI,eAAoB,EAAK,SAAI,mBAAA,EAAA,GAA3D,EAQW,GAAA,EAAA,KAAA,EAAA,GAAA,CAPT,EAAyD,QAAzD,GAAyD,EAAhC,EAAK,SAAS,EAAK,GAAG,GAAA,CAAA,GAC/C,EAKE,GAAA;;KAJC,MAAM,MAAY,EAAa,EAAK,KAAK,CAAE;KAC3C,eAAc,EAAA,MAAO,EAAK,QAAG;KAC7B,QAAQ,EAA2B,CAAI;KACvC,wBAAqB,MAAQ,EAAO,GAAM,CAAG;;;;;gBAG7B,EAAK,SAAI,cAAA,EAAA,GAA9B,EAeW,GAAA,EAAA,KAAA,EAAA,GAAA,CAdT,EAAyD,QAAzD,GAAyD,EAAhC,EAAK,SAAS,EAAK,GAAG,GAAA,CAAA,GAC/C,EAYE,GAAA;;KAXC,MAAM,MAAY,EAAa,EAAK,KAAK,CAAE;KAC3C,eAAc,EAAA,MAAO,EAAK,QAAG;KAC7B,SAAS,EAAK,WAAO,CAAA;KACrB,QAAM;SAAsB,EAAK,UAAM,CAAA;mBAAoC,EAAK,eAAW;;;;KAM3F,gBAAY,MAAE,EAA0B,GAAM,CAAM;KACpD,wBAAqB,MAAQ,EAAO,GAAM,CAAG;;;;;;;;IAKtD,EAUM,OAVN,GAUM,CATJ,EAOE,GAAA;KANA,MAAK;KACJ,UAAQ,CAAG,EAAA;KACZ,OAAM;KACN,cAAW;KACX,MAAK;KACJ,SAAO;+BAEV,EAA6E,GAAA;KAArE,OAAM;KAAS,cAAW;KAAS,MAAK;KAAW,SAAO;;IAEpD,EAAA,kBAAA,EAAA,GAAhB,EAQW,GAAA,EAAA,KAAA,EAAA,GAAA,CAAA,AAAA,EAAA,OAPT,EAA6B,MAAA,EAAzB,OAAM,iBAAgB,GAAA,MAAA,EAAA,GAC1B,EAKE,GAAA;KAJC,OAAO,EAAA;KACP,QAAQ,EAAA;KACR,eAAa,EAAA;KACb,QAAM"}
|
|
1
|
+
{"version":3,"file":"admins-components91.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n onInnerSearch?: (value: string) => void\n onChange?: (value: any) => void\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n\nexport interface DataFiltersProps {\n items: FilterItem[]\n open?: boolean\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport TextInput, { type TextInputType } from '@/components/TextInput.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getDefaultFilters, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataFiltersProps>(), {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getDefaultFilters(props.items, props.storageKey, false))\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) filterRefs.value[key] = el\n else delete filterRefs.value[key]\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nfunction update(item: FilterItem, value: any) {\n const stored = typeof value === 'string' ? value.trim() : value\n values.value = { ...values.value, [item.key]: stored }\n if (item.onChange) item.onChange(stored)\n if (!props.lazy) emitChange()\n}\n\nconst hasActiveFilters = computed(() =>\n Object.values(values.value).some((v) => v !== null && v !== '' && v !== undefined),\n)\n\nfunction buildResponse(): FilterResponse {\n const transformed: Record<string, any> = {}\n for (const item of props.items) {\n if (item.type === 'separator') continue\n const val = values.value[item.key]\n if (item.transformer) {\n Object.assign(transformed, item.transformer(val) ?? {})\n } else if (item.type === 'date' || item.type === 'datetime') {\n transformed[item.key] = val?.utc ?? val\n } else if (item.type === 'dropdown') {\n // Emit only the value(s), not the full DropdownOption object(s).\n // The full object is kept internally for label display, but the\n // payload sent to consumers should contain plain values.\n transformed[item.key] = extractDropdownValues(val)\n } else {\n transformed[item.key] = val\n }\n }\n return { values: filterEmptyValues(values.value), transformed: filterEmptyValues(transformed) }\n}\n\n/**\n * Extracts plain value(s) from a dropdown filter value.\n * Accepts `DropdownOption | DropdownOption[] | string | string[] | null`\n * and returns `string | string[] | null`.\n */\nfunction extractDropdownValues(val: unknown): string | string[] | null {\n if (val == null) return null\n if (Array.isArray(val)) {\n const values = val\n .map((entry) => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'value' in entry) {\n return (entry as { value?: string }).value ?? null\n }\n if (typeof entry === 'string') return entry\n return null\n })\n .filter((v): v is string => v !== null)\n return values.length > 0 ? values : null\n }\n if (typeof val === 'object' && 'value' in val) {\n return (val as { value?: string }).value ?? null\n }\n if (typeof val === 'string') return val\n return null\n}\n\nfunction emitChange() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponse())\n}\n\nfunction confirm() {\n emitChange()\n emit('close')\n}\n\nfunction clearAll() {\n values.value = {}\n emitChange()\n}\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n emitChange()\n}\n\nfunction focusFilter(key: string) {\n const el = (filterRefs.value as Record<string, any>)[key]\n if (!el) return\n\n if (typeof el.focusAndOpen === 'function') el.focusAndOpen()\n else if (typeof el.focus === 'function') el.focus()\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) next[item.key] = loaded[item.key] ?? null\n }\n values.value = next\n emitChange()\n}\n\ndefineExpose({ clearFilter, focusFilter })\n\nfunction handleFilterKeydown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return\n\n // Allow Enter in textarea for line breaks\n const target = event.target as HTMLElement\n if (target?.tagName === 'TEXTAREA') return\n\n event.preventDefault()\n confirm()\n}\n\nfunction handleDropdownFilterInput(item: FilterItem, text: string) {\n if (item.onInnerSearch) item.onInnerSearch(text)\n}\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\" @keydown=\"handleFilterKeydown\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"['text', 'number', 'textarea'].includes(item.type)\">\n <TextInput\n :type=\"item.type as TextInputType\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as string) ?? ''\"\n :label=\"item.label ?? item.key\"\n :placeholder=\"item.placeholder\"\n @update:model-value=\"(val) => update(item, val || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as DropdownOption | DropdownOption[] | null) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @filter-input=\"handleDropdownFilterInput(item, $event)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <template v-if=\"historyEnabled\">\n <hr class=\"separator my-3\" />\n <FiltersHistory\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n />\n </template>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components93.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n onInnerSearch?: (value: string) => void\n onChange?: (value: any) => void\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n\nexport interface DataFiltersProps {\n items: FilterItem[]\n open?: boolean\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport TextInput, { type TextInputType } from '@/components/TextInput.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getDefaultFilters, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataFiltersProps>(), {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getDefaultFilters(props.items, props.storageKey, false))\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) filterRefs.value[key] = el\n else delete filterRefs.value[key]\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nfunction update(item: FilterItem, value: any) {\n const stored = typeof value === 'string' ? value.trim() : value\n values.value = { ...values.value, [item.key]: stored }\n if (item.onChange) item.onChange(stored)\n if (!props.lazy) emitChange()\n}\n\nconst hasActiveFilters = computed(() =>\n Object.values(values.value).some((v) => v !== null && v !== '' && v !== undefined),\n)\n\nfunction buildResponse(): FilterResponse {\n const transformed: Record<string, any> = {}\n for (const item of props.items) {\n if (item.type === 'separator') continue\n const val = values.value[item.key]\n if (item.transformer) {\n Object.assign(transformed, item.transformer(val) ?? {})\n } else if (item.type === 'date' || item.type === 'datetime') {\n transformed[item.key] = val?.utc ?? val\n } else {\n transformed[item.key] = val\n }\n }\n return { values: filterEmptyValues(values.value), transformed: filterEmptyValues(transformed) }\n}\n\nfunction emitChange() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponse())\n}\n\nfunction confirm() {\n emitChange()\n emit('close')\n}\n\nfunction clearAll() {\n values.value = {}\n emitChange()\n}\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n emitChange()\n}\n\nfunction focusFilter(key: string) {\n const el = (filterRefs.value as Record<string, any>)[key]\n if (!el) return\n\n if (typeof el.focusAndOpen === 'function') el.focusAndOpen()\n else if (typeof el.focus === 'function') el.focus()\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) next[item.key] = loaded[item.key] ?? null\n }\n values.value = next\n emitChange()\n}\n\ndefineExpose({ clearFilter, focusFilter })\n\nfunction handleFilterKeydown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return\n\n // Allow Enter in textarea for line breaks\n const target = event.target as HTMLElement\n if (target?.tagName === 'TEXTAREA') return\n\n event.preventDefault()\n confirm()\n}\n\nfunction handleDropdownFilterInput(item: FilterItem, text: string) {\n if (item.onInnerSearch) item.onInnerSearch(text)\n}\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\" @keydown=\"handleFilterKeydown\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"['text', 'number', 'textarea'].includes(item.type)\">\n <TextInput\n :type=\"item.type as TextInputType\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as string) ?? ''\"\n :label=\"item.label ?? item.key\"\n :placeholder=\"item.placeholder\"\n @update:model-value=\"(val) => update(item, val || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as DropdownOption | DropdownOption[] | null) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @filter-input=\"handleDropdownFilterInput(item, $event)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <template v-if=\"historyEnabled\">\n <hr class=\"separator my-3\" />\n <FiltersHistory\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n />\n </template>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components93.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n onInnerSearch?: (value: string) => void\n onChange?: (value: any) => void\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n\nexport interface DataFiltersProps {\n items: FilterItem[]\n open?: boolean\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport TextInput, { type TextInputType } from '@/components/TextInput.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getDefaultFilters, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(defineProps<DataFiltersProps>(), {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getDefaultFilters(props.items, props.storageKey, false))\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) filterRefs.value[key] = el\n else delete filterRefs.value[key]\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nfunction update(item: FilterItem, value: any) {\n const stored = typeof value === 'string' ? value.trim() : value\n values.value = { ...values.value, [item.key]: stored }\n if (item.onChange) item.onChange(stored)\n if (!props.lazy) emitChange()\n}\n\nconst hasActiveFilters = computed(() =>\n Object.values(values.value).some((v) => v !== null && v !== '' && v !== undefined),\n)\n\nfunction buildResponse(): FilterResponse {\n const transformed: Record<string, any> = {}\n for (const item of props.items) {\n if (item.type === 'separator') continue\n const val = values.value[item.key]\n if (item.transformer) {\n Object.assign(transformed, item.transformer(val) ?? {})\n } else if (item.type === 'date' || item.type === 'datetime') {\n transformed[item.key] = val?.utc ?? val\n } else if (item.type === 'dropdown') {\n // Emit only the value(s), not the full DropdownOption object(s).\n // The full object is kept internally for label display, but the\n // payload sent to consumers should contain plain values.\n transformed[item.key] = extractDropdownValues(val)\n } else {\n transformed[item.key] = val\n }\n }\n return { values: filterEmptyValues(values.value), transformed: filterEmptyValues(transformed) }\n}\n\n/**\n * Extracts plain value(s) from a dropdown filter value.\n * Accepts `DropdownOption | DropdownOption[] | string | string[] | null`\n * and returns `string | string[] | null`.\n */\nfunction extractDropdownValues(val: unknown): string | string[] | null {\n if (val == null) return null\n if (Array.isArray(val)) {\n const values = val\n .map((entry) => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'value' in entry) {\n return (entry as { value?: string }).value ?? null\n }\n if (typeof entry === 'string') return entry\n return null\n })\n .filter((v): v is string => v !== null)\n return values.length > 0 ? values : null\n }\n if (typeof val === 'object' && 'value' in val) {\n return (val as { value?: string }).value ?? null\n }\n if (typeof val === 'string') return val\n return null\n}\n\nfunction emitChange() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponse())\n}\n\nfunction confirm() {\n emitChange()\n emit('close')\n}\n\nfunction clearAll() {\n values.value = {}\n emitChange()\n}\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n emitChange()\n}\n\nfunction focusFilter(key: string) {\n const el = (filterRefs.value as Record<string, any>)[key]\n if (!el) return\n\n if (typeof el.focusAndOpen === 'function') el.focusAndOpen()\n else if (typeof el.focus === 'function') el.focus()\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) next[item.key] = loaded[item.key] ?? null\n }\n values.value = next\n emitChange()\n}\n\ndefineExpose({ clearFilter, focusFilter })\n\nfunction handleFilterKeydown(event: KeyboardEvent) {\n if (event.key !== 'Enter') return\n\n // Allow Enter in textarea for line breaks\n const target = event.target as HTMLElement\n if (target?.tagName === 'TEXTAREA') return\n\n event.preventDefault()\n confirm()\n}\n\nfunction handleDropdownFilterInput(item: FilterItem, text: string) {\n if (item.onInnerSearch) item.onInnerSearch(text)\n}\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\" @keydown=\"handleFilterKeydown\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"['text', 'number', 'textarea'].includes(item.type)\">\n <TextInput\n :type=\"item.type as TextInputType\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as string) ?? ''\"\n :label=\"item.label ?? item.key\"\n :placeholder=\"item.placeholder\"\n @update:model-value=\"(val) => update(item, val || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as DropdownOption | DropdownOption[] | null) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @filter-input=\"handleDropdownFilterInput(item, $event)\"\n @update:model-value=\"(val) => update(item, val)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <template v-if=\"historyEnabled\">\n <hr class=\"separator my-3\" />\n <FiltersHistory\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n />\n </template>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":""}
|