admins-components 9.0.71 → 9.0.73

package/dist/admins-components26.js

@@ -1,26 +1,26 @@
 import e from "./admins-components6.js";
 import t from "./admins-components25.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as ee, defineComponent as c, nextTick as l, normalizeClass as u, onBeforeUnmount as d, onMounted as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, watch as _, withModifiers as v } from "vue";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as ee, defineComponent as c, nextTick as l, normalizeClass as u, onBeforeUnmount as te, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, watch as g, withModifiers as _ } from "vue";
 //#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "ac-component" }, b = ["aria-disabled"], te = {
+var v = { class: "ac-component" }, ne = ["aria-disabled"], re = {
 	key: 0,
 	class: "c-truncate ds-value"
-}, ne = {
+}, ie = {
 	key: 1,
 	class: "c-placeholder"
-}, x = {
+}, y = {
 	key: 0,
 	class: "ds-filter"
-}, S = ["title"], C = ["value", "placeholder"], w = { class: "ds-options c-scroll" }, T = {
+}, b = ["title"], x = ["value", "placeholder"], S = { class: "ds-options c-scroll" }, C = {
 	key: 0,
 	class: "ds-option ds-option--loading"
-}, E = ["onClick", "onKeydown"], D = ["innerHTML"], O = {
+}, w = ["onClick", "onKeydown"], T = ["innerHTML"], E = {
 	key: 0,
 	class: "ds-option ds-option--empty"
-}, k = {
+}, D = {
 	key: 1,
 	class: "c-footer"
-}, A = {
+}, O = {
 	placeholder: "Válassz...",
 	filterable: !0,
 	filterPlaceholder: "Kezdj el gépelni...",
@@ -32,35 +32,45 @@ var y = { class: "ac-component" }, b = ["aria-disabled"], te = {
 	size: "normal",
 	highlight: !0,
 	disabled: !1
-}, j = /* @__PURE__ */ c({
+}, k = /* @__PURE__ */ c({
 	__name: "DropdownSelect",
 	props: {
 		modelValue: { default: null },
 		options: {},
-		config: { default: () => ({ ...A }) }
+		config: { default: () => ({ ...O }) }
 	},
 	emits: ["update:modelValue", "filter-input"],
-	setup(c, { expose: j, emit: re }) {
-		let M = c, N = r(() => ({
-			...A,
-			...M.config
-		})), P = re, F = m(!1), I = m(""), L = m(null), R = m(null), z = m([]), B = m(V(M.modelValue));
-		function V(e) {
-			return e == null ? [] : Array.isArray(e) ? [...e] : [e];
-		}
-		_(() => M.modelValue, (e) => {
-			B.value = V(e);
-		}), _(F, (e) => {
-			e && (I.value = "", N.value.filterable && l(() => R.value?.focus()), N.value.lazy && (z.value = [...B.value]));
+	setup(c, { expose: k, emit: A }) {
+		let j = c, M = r(() => ({
+			...O,
+			...j.config
+		})), N = A, P = p(!1), F = p(""), I = p(null), L = p(null), R = p([]), z = p(B(j.modelValue, j.options));
+		function B(e, t) {
+			return e == null ? [] : (Array.isArray(e) ? e : [e]).map((e) => e == null ? null : typeof e == "object" && "label" in e ? e : typeof e == "string" ? t.find((t) => t.value === e) ?? {
+				value: e,
+				label: e
+			} : null).filter((e) => e !== null);
+		}
+		g(() => [j.modelValue, j.options], ([e]) => {
+			z.value = B(e, j.options);
+		}), g(P, (e) => {
+			e && (F.value = "", M.value.filterable && l(() => L.value?.focus()), M.value.lazy && (R.value = [...z.value]));
 		});
-		function H(e) {
-			I.value = e, P("filter-input", e);
+		function V(e) {
+			F.value = e, N("filter-input", e);
 		}
-		let U = r(() => B.value.length === 0 ? null : N.value.multiple ? B.value.length > 2 ? `${B.value.length} kiválasztva` : B.value.map((e) => M.options.find((t) => t.value === e)?.label ?? e).join(", ") : M.options.find((e) => e.value === B.value[0])?.label ?? null), W = r(() => {
-			let e = I.value.toLowerCase();
-			return e ? M.options.filter((t) => t.label.toLowerCase().includes(e)) : M.options;
+		let H = r(() => {
+			if (z.value.length === 0) return null;
+			if (!M.value.multiple) {
+				let e = z.value[0];
+				return j.options.find((t) => t.value === e?.value)?.label ?? e?.label ?? null;
+			}
+			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(", ");
+		}), U = r(() => {
+			let e = F.value.toLowerCase();
+			return e ? j.options.filter((t) => t.label.toLowerCase().includes(e)) : j.options;
 		});
-		function G(e) {
+		function W(e) {
 			return e.replace(/[&<>"']/g, (e) => ({
 				"&": "&amp;",
 				"<": "&lt;",
@@ -69,151 +79,152 @@ var y = { class: "ac-component" }, b = ["aria-disabled"], te = {
 				"'": "&#39;"
 			})[e]);
 		}
-		function K(e) {
-			let t = I.value.trim();
-			if (!t || !N.value.highlight) return G(e);
-			let n = G(e), r = G(t), i = new RegExp(r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "ig");
+		function G(e) {
+			let t = F.value.trim();
+			if (!t || !M.value.highlight) return W(e);
+			let n = W(e), r = W(t), i = new RegExp(r.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "ig");
 			return n.replace(i, (e) => `<mark class="ds-option__highlight">${e}</mark>`);
 		}
-		let q = r(() => W.value.filter((e) => e.value)), J = r(() => {
-			if (q.value.length === 0) return !1;
-			let e = N.value.lazy && F.value ? z.value : B.value;
-			return q.value.every((t) => t.value && e.includes(t.value));
+		let K = r(() => U.value.filter((e) => e.value)), q = r(() => {
+			if (K.value.length === 0) return !1;
+			let e = M.value.lazy && P.value ? R.value : z.value;
+			return K.value.every((t) => t.value && e.some((e) => e.value === t.value));
 		});
-		function Y(e) {
-			return (N.value.lazy && F.value ? z : B).value.includes(e);
-		}
-		function ie() {
-			let e = N.value.lazy && F.value ? z : B, t = q.value.map((e) => e.value);
-			if (J.value) e.value = e.value.filter((e) => !t.includes(e));
-			else {
-				let n = t.filter((t) => !e.value.includes(t));
-				e.value = [...e.value, ...n];
+		function J(e) {
+			return (M.value.lazy && P.value ? R : z).value.some((t) => t.value === e);
+		}
+		function Y() {
+			let e = M.value.lazy && P.value ? R : z, t = K.value.filter((e) => e.value);
+			if (q.value) {
+				let n = new Set(t.map((e) => e.value));
+				e.value = e.value.filter((e) => !n.has(e.value ?? ""));
+			} else {
+				let n = new Set(e.value.map((e) => e.value)), r = t.filter((e) => !n.has(e.value));
+				e.value = [...e.value, ...r];
 			}
-			N.value.lazy || P("update:modelValue", B.value.length > 0 ? [...B.value] : null);
+			M.value.lazy || N("update:modelValue", z.value.length > 0 ? [...z.value] : null);
 		}
 		function X(e, t) {
-			let n = e.indexOf(t);
+			let n = e.findIndex((e) => e.value === t.value);
 			return n >= 0 ? e.filter((e, t) => t !== n) : [...e, t];
 		}
 		function Z(e) {
 			if (e.callback) {
-				e.callback(), F.value = !1;
+				e.callback(), P.value = !1;
 				return;
 			}
-			let t = e.value;
-			t && (N.value.multiple ? N.value.lazy ? z.value = X(z.value, t) : (B.value = X(B.value, t), P("update:modelValue", B.value.length > 0 ? [...B.value] : null)) : (B.value = [t], P("update:modelValue", t), F.value = !1));
+			e.value && (M.value.multiple ? M.value.lazy ? R.value = X(R.value, e) : (z.value = X(z.value, e), N("update:modelValue", z.value.length > 0 ? [...z.value] : null)) : (z.value = [e], N("update:modelValue", e), P.value = !1));
 		}
 		function Q() {
-			N.value.lazy && (B.value = [...z.value], P("update:modelValue", z.value.length > 0 ? [...z.value] : null)), F.value = !1;
+			M.value.lazy && (z.value = [...R.value], N("update:modelValue", R.value.length > 0 ? [...R.value] : null)), P.value = !1;
 		}
 		function ae() {
-			N.value.lazy ? z.value = [] : (B.value = [], P("update:modelValue", null));
+			M.value.lazy ? R.value = [] : (z.value = [], N("update:modelValue", null));
 		}
 		function oe(e, t) {
 			e.key === " " ? (e.preventDefault(), Z(t)) : e.key === "Enter" && (e.preventDefault(), Q());
 		}
 		function $(e) {
-			L.value && !L.value.contains(e.target) && (F.value = !1);
+			I.value && !I.value.contains(e.target) && (P.value = !1);
 		}
-		f(() => document.addEventListener("mousedown", $)), d(() => {
+		d(() => document.addEventListener("mousedown", $)), te(() => {
 			document.removeEventListener("mousedown", $);
 		});
 		function se() {
-			N.value.disabled || (F.value = !F.value, F.value && N.value.filterable && (I.value = "", P("filter-input", "")));
+			M.value.disabled || (P.value = !P.value, P.value && M.value.filterable && (F.value = "", N("filter-input", "")));
 		}
 		function ce() {
-			N.value.disabled || (B.value = [], P("update:modelValue", null), F.value = !1);
+			M.value.disabled || (z.value = [], N("update:modelValue", null), P.value = !1);
 		}
 		function le() {
-			N.value.disabled || (F.value = !0, N.value.filterable && l(() => R.value?.focus()));
+			M.value.disabled || (P.value = !0, M.value.filterable && l(() => L.value?.focus()));
 		}
 		function ue() {
-			I.value = "", P("filter-input", "");
+			F.value = "", N("filter-input", "");
 		}
-		return j({ focusAndOpen: le }), (r, c) => (p(), o("div", y, [s("div", {
+		return k({ focusAndOpen: le }), (r, c) => (f(), o("div", v, [s("div", {
 			ref_key: "wrapperRef",
-			ref: L,
+			ref: I,
 			class: "c-wrapper ds-wrapper"
 		}, [s("div", {
 			class: u(["c-input-row pointer", {
-				"c-input-row--sm": N.value.size === "small",
-				"c-input-row--lg": N.value.size === "large",
-				"c-input-row--disabled": N.value.disabled
+				"c-input-row--sm": M.value.size === "small",
+				"c-input-row--lg": M.value.size === "large",
+				"c-input-row--disabled": M.value.disabled
 			}]),
-			"aria-disabled": N.value.disabled || void 0,
+			"aria-disabled": M.value.disabled || void 0,
 			onClick: c[1] ||= (e) => se()
 		}, [
-			U.value ? (p(), o("span", te, g(U.value), 1)) : (p(), o("span", ne, g(N.value.placeholder), 1)),
-			N.value.clearable && B.value.length > 0 ? (p(), o("button", {
+			H.value ? (f(), o("span", re, h(H.value), 1)) : (f(), o("span", ie, h(M.value.placeholder), 1)),
+			M.value.clearable && z.value.length > 0 ? (f(), o("button", {
 				key: 2,
 				type: "button",
 				class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
-				onClick: c[0] ||= v((e) => ce(), ["stop"]),
+				onClick: c[0] ||= _((e) => ce(), ["stop"]),
 				"aria-label": "Törlés"
 			}, [...c[6] ||= [s("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : a("", !0),
-			s("span", { class: u(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": F.value }]) }, [...c[7] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, b), F.value ? (p(), o("div", {
+			s("span", { class: u(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": P.value }]) }, [...c[7] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 10, ne), P.value ? (f(), o("div", {
 			key: 0,
-			class: u(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": N.value.multiple }])
+			class: u(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": M.value.multiple }])
 		}, [
-			N.value.filterable ? (p(), o("div", x, [
-				N.value.multiple ? (p(), o("span", {
+			M.value.filterable ? (f(), o("div", y, [
+				M.value.multiple ? (f(), o("span", {
 					key: 0,
-					class: u(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": J.value }]),
-					onClick: c[2] ||= v((e) => ie(), ["stop"]),
-					title: J.value ? "Összes kijelölés törlése" : "Összes kijelölése"
-				}, null, 10, S)) : a("", !0),
+					class: u(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": q.value }]),
+					onClick: c[2] ||= _((e) => Y(), ["stop"]),
+					title: q.value ? "Összes kijelölés törlése" : "Összes kijelölése"
+				}, null, 10, b)) : a("", !0),
 				s("input", {
 					ref_key: "filterInputRef",
-					ref: R,
+					ref: L,
 					type: "text",
 					id: "ds-filter-input",
 					class: "c-focus ds-filter-input",
-					value: I.value,
-					onInput: c[3] ||= (e) => H(e.target.value),
+					value: F.value,
+					onInput: c[3] ||= (e) => V(e.target.value),
 					autocomplete: "off",
-					placeholder: N.value.filterPlaceholder,
-					onClick: c[4] ||= v(() => {}, ["stop"])
-				}, null, 40, C),
-				I.value ? (p(), o("button", {
+					placeholder: M.value.filterPlaceholder,
+					onClick: c[4] ||= _(() => {}, ["stop"])
+				}, null, 40, x),
+				F.value ? (f(), o("button", {
 					key: 1,
 					type: "button",
 					class: "c-icon-btn c-icon-btn--clear ds-filter-clear",
-					onClick: c[5] ||= v((e) => ue(), ["stop"]),
+					onClick: c[5] ||= _((e) => ue(), ["stop"]),
 					"aria-label": "Szűrők törlése"
 				}, [...c[8] ||= [s("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : a("", !0)
 			])) : a("", !0),
-			s("ul", w, [N.value.loading ? (p(), o("li", T, [ee(t, {
+			s("ul", S, [M.value.loading ? (f(), o("li", C, [ee(t, {
 				size: "2rem",
 				color: "var(--neutral-300)",
 				class: "m-auto p-3"
-			})])) : (p(), o(n, { key: 1 }, [(p(!0), o(n, null, h(W.value, (e, t) => (p(), o("li", {
+			})])) : (f(), o(n, { key: 1 }, [(f(!0), o(n, null, m(U.value, (e, t) => (f(), o("li", {
 				key: e.value ?? `cb-${t}`,
-				class: u(["d-option ds-option", { "ds-option--selected": e.value && Y(e.value) }]),
+				class: u(["d-option ds-option", { "ds-option--selected": e.value && J(e.value) }]),
 				tabindex: "0",
 				onClick: (t) => Z(e),
 				onKeydown: (t) => oe(t, e)
 			}, [
-				N.value.multiple && e.value ? (p(), o("span", {
+				M.value.multiple && e.value ? (f(), o("span", {
 					key: 0,
-					class: u(["c-checkbox", { "c-checkbox--checked": Y(e.value) }])
+					class: u(["c-checkbox", { "c-checkbox--checked": J(e.value) }])
 				}, null, 2)) : a("", !0),
-				e.icon ? (p(), o("i", {
+				e.icon ? (f(), o("i", {
 					key: 1,
 					class: u(["fa-fw", e.icon])
 				}, null, 2)) : a("", !0),
 				s("span", {
-					class: u(["d-option__label", { "c-truncate": N.value.textEllipsis }]),
-					innerHTML: K(e.label)
-				}, null, 10, D)
-			], 42, E))), 128)), W.value.length === 0 ? (p(), o("li", O, " Nincs találat ")) : a("", !0)], 64))]),
-			N.value.multiple || N.value.clearable && B.value.length > 0 ? (p(), o("div", k, [N.value.clearable ? (p(), i(e, {
+					class: u(["d-option__label", { "c-truncate": M.value.textEllipsis }]),
+					innerHTML: G(e.label)
+				}, null, 10, T)
+			], 42, w))), 128)), U.value.length === 0 ? (f(), o("li", E, " Nincs találat ")) : a("", !0)], 64))]),
+			M.value.multiple || M.value.clearable && z.value.length > 0 ? (f(), o("div", D, [M.value.clearable ? (f(), i(e, {
 				key: 0,
 				label: "Törlés",
 				outline: "",
 				onClick: ae
-			})) : a("", !0), N.value.multiple ? (p(), i(e, {
+			})) : a("", !0), M.value.multiple ? (f(), i(e, {
 				key: 1,
 				label: "OK",
 				type: "success",
@@ -223,4 +234,4 @@ var y = { class: "ac-component" }, b = ["aria-disabled"], te = {
 	}
 });
 //#endregion
-export { j as default, A as dropdownSelectConfigDefaults };
+export { k as default, O as dropdownSelectConfigDefaults };

package/dist/admins-components26.js.map

@@ -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?: 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: string | string[] | 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<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\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    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[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.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\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: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\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, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\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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"}
+{"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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[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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"}

package/dist/admins-components28.js.map

@@ -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?: 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: string | string[] | 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<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\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    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[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.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\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: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\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, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\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":""}
+{"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) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[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":""}

package/dist/admins-components83.js

@@ -38,9 +38,19 @@ var j = /* @__PURE__ */ d({
 			extraStyle: (e) => ({ minWidth: `${Math.max(e.width, 240)}px` }),
 			closeOnScroll: !0
 		}), R = a({
-			get: () => M.modelValue?.key ?? null,
+			get: () => {
+				let e = M.modelValue?.key;
+				return e ? M.options.find((t) => t.value === e) ?? {
+					value: e,
+					label: e
+				} : null;
+			},
 			set: (e) => {
-				Array.isArray(e) || V(e, M.modelValue?.direction ?? "asc");
+				if (e == null) {
+					V(null, M.modelValue?.direction ?? "asc");
+					return;
+				}
+				Array.isArray(e) || V(e.value ?? null, M.modelValue?.direction ?? "asc");
 			}
 		}), z = a({
 			get: () => M.modelValue?.direction ?? "asc",

package/dist/admins-components83.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components83.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n  value: string\n  label: string\n  icon?: string\n}\n\nexport interface DataSortProps {\n  modelValue: { key: string; direction: SortDirection } | null\n  options: DataSortOption[]\n  placeholder?: string\n  handleUrl?: boolean\n  disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n  if (typeof window === 'undefined') return null\n  const params = new URLSearchParams(window.location.search)\n  const key = params.get('sortBy')\n  const dir = params.get('sortDir')\n  if (key && (dir === 'asc' || dir === 'desc')) {\n    return { key, direction: dir }\n  }\n  return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n  placeholder: 'Rendezés...',\n  handleUrl: false,\n  disabled: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n  'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n  closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n  get: () => props.modelValue?.key ?? null,\n  set: (v) => {\n    if (Array.isArray(v)) return\n    emitChange(v, props.modelValue?.direction ?? 'asc')\n  },\n})\n\nconst direction = computed<SortDirection>({\n  get: () => props.modelValue?.direction ?? 'asc',\n  set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n  if (!props.modelValue) return props.placeholder\n  const opt = props.options.find((o) => o.value === props.modelValue!.key)\n  const label = opt?.label ?? props.modelValue.key\n  return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n  if (key == null) {\n    if (props.handleUrl) {\n      writeUrlOrRemove('sortBy', null, { handleUrl: true })\n      writeUrlOrRemove('sortDir', null, { handleUrl: true })\n    }\n    emit('update:modelValue', null)\n    emit('sort-change', null)\n    return\n  }\n  if (props.handleUrl) {\n    writeUrlOrRemove('sortBy', key, { handleUrl: true })\n    writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n  }\n  const next = { key, direction: dir }\n  emit('update:modelValue', next)\n  emit('sort-change', next)\n}\n\nfunction clear() {\n  emitChange(null, 'asc')\n  isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n  isOpen,\n  (open) => {\n    if (!open || !props.handleUrl || props.modelValue) return\n    const sort = getDefaultSort()\n    if (sort) emitChange(sort.key, sort.direction)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n      <button\n        type=\"button\"\n        class=\"c-btn ds-sort-trigger lh-1\"\n        :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n        :disabled=\"disabled\"\n        :aria-label=\"`Rendezés: ${activeLabel}`\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <i\n          class=\"fa-solid fa-fw\"\n          :class=\"\n            !modelValue || modelValue.direction === 'asc'\n              ? 'fa-arrow-up-wide-short'\n              : 'fa-arrow-down-wide-short'\n          \"\n        ></i>\n        <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n        <button\n          v-if=\"modelValue\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n          aria-label=\"Rendezés törlése\"\n          title=\"Rendezés törlése\"\n          @click.stop=\"clear\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n            <div class=\"ds-sort-panel__row\">\n              <label class=\"ds-sort-panel__label\">Oszlop</label>\n              <DropdownSelect\n                :model-value=\"sortBy\"\n                :options=\"options\"\n                :config=\"{\n                  clearable: false,\n                  placeholder: 'Válassz oszlopot...',\n                  filterable: false,\n                }\"\n                @update:model-value=\"(v) => (sortBy = v)\"\n              />\n            </div>\n\n            <div class=\"ds-sort-panel__row\">\n              <span class=\"ds-sort-panel__label\">Irány</span>\n              <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn\"\n                  :class=\"{ 'is-active': direction === 'asc' }\"\n                  :aria-pressed=\"direction === 'asc'\"\n                  aria-label=\"Növekvő\"\n                  @click=\"direction = 'asc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n                  <span>Növekvő</span>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn dir-desc\"\n                  :class=\"{ 'is-active': direction === 'desc' }\"\n                  :aria-pressed=\"direction === 'desc'\"\n                  aria-label=\"Csökkenő\"\n                  @click=\"direction = 'desc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n                  <span>Csökkenő</span>\n                </button>\n              </div>\n            </div>\n\n            <div class=\"ds-sort-panel__footer\">\n              <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n            </div>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components83.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n  value: string\n  label: string\n  icon?: string\n}\n\nexport interface DataSortProps {\n  modelValue: { key: string; direction: SortDirection } | null\n  options: DataSortOption[]\n  placeholder?: string\n  handleUrl?: boolean\n  disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n  if (typeof window === 'undefined') return null\n  const params = new URLSearchParams(window.location.search)\n  const key = params.get('sortBy')\n  const dir = params.get('sortDir')\n  if (key && (dir === 'asc' || dir === 'desc')) {\n    return { key, direction: dir }\n  }\n  return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n  placeholder: 'Rendezés...',\n  handleUrl: false,\n  disabled: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n  'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n  closeOnScroll: true,\n})\n\nconst sortBy = computed<DropdownOption | DropdownOption[] | null>({\n  get: () => {\n    const key = props.modelValue?.key\n    if (!key) return null\n    const opt = props.options.find((o) => o.value === key)\n    return opt ?? { value: key, label: key }\n  },\n  set: (v) => {\n    if (v == null) {\n      emitChange(null, props.modelValue?.direction ?? 'asc')\n      return\n    }\n    if (Array.isArray(v)) return\n    emitChange(v.value ?? null, props.modelValue?.direction ?? 'asc')\n  },\n})\n\nconst direction = computed<SortDirection>({\n  get: () => props.modelValue?.direction ?? 'asc',\n  set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n  if (!props.modelValue) return props.placeholder\n  const opt = props.options.find((o) => o.value === props.modelValue!.key)\n  const label = opt?.label ?? props.modelValue.key\n  return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n  if (key == null) {\n    if (props.handleUrl) {\n      writeUrlOrRemove('sortBy', null, { handleUrl: true })\n      writeUrlOrRemove('sortDir', null, { handleUrl: true })\n    }\n    emit('update:modelValue', null)\n    emit('sort-change', null)\n    return\n  }\n  if (props.handleUrl) {\n    writeUrlOrRemove('sortBy', key, { handleUrl: true })\n    writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n  }\n  const next = { key, direction: dir }\n  emit('update:modelValue', next)\n  emit('sort-change', next)\n}\n\nfunction clear() {\n  emitChange(null, 'asc')\n  isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n  isOpen,\n  (open) => {\n    if (!open || !props.handleUrl || props.modelValue) return\n    const sort = getDefaultSort()\n    if (sort) emitChange(sort.key, sort.direction)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n      <button\n        type=\"button\"\n        class=\"c-btn ds-sort-trigger lh-1\"\n        :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n        :disabled=\"disabled\"\n        :aria-label=\"`Rendezés: ${activeLabel}`\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <i\n          class=\"fa-solid fa-fw\"\n          :class=\"\n            !modelValue || modelValue.direction === 'asc'\n              ? 'fa-arrow-up-wide-short'\n              : 'fa-arrow-down-wide-short'\n          \"\n        ></i>\n        <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n        <button\n          v-if=\"modelValue\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n          aria-label=\"Rendezés törlése\"\n          title=\"Rendezés törlése\"\n          @click.stop=\"clear\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n            <div class=\"ds-sort-panel__row\">\n              <label class=\"ds-sort-panel__label\">Oszlop</label>\n              <DropdownSelect\n                :model-value=\"sortBy\"\n                :options=\"options\"\n                :config=\"{\n                  clearable: false,\n                  placeholder: 'Válassz oszlopot...',\n                  filterable: false,\n                }\"\n                @update:model-value=\"(v) => (sortBy = v)\"\n              />\n            </div>\n\n            <div class=\"ds-sort-panel__row\">\n              <span class=\"ds-sort-panel__label\">Irány</span>\n              <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn\"\n                  :class=\"{ 'is-active': direction === 'asc' }\"\n                  :aria-pressed=\"direction === 'asc'\"\n                  aria-label=\"Növekvő\"\n                  @click=\"direction = 'asc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n                  <span>Növekvő</span>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn dir-desc\"\n                  :class=\"{ 'is-active': direction === 'desc' }\"\n                  :aria-pressed=\"direction === 'desc'\"\n                  aria-label=\"Csökkenő\"\n                  @click=\"direction = 'desc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n                  <span>Csökkenő</span>\n                </button>\n              </div>\n            </div>\n\n            <div class=\"ds-sort-panel__footer\">\n              <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n            </div>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components85.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n  value: string\n  label: string\n  icon?: string\n}\n\nexport interface DataSortProps {\n  modelValue: { key: string; direction: SortDirection } | null\n  options: DataSortOption[]\n  placeholder?: string\n  handleUrl?: boolean\n  disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n  if (typeof window === 'undefined') return null\n  const params = new URLSearchParams(window.location.search)\n  const key = params.get('sortBy')\n  const dir = params.get('sortDir')\n  if (key && (dir === 'asc' || dir === 'desc')) {\n    return { key, direction: dir }\n  }\n  return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n  placeholder: 'Rendezés...',\n  handleUrl: false,\n  disabled: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n  'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n  closeOnScroll: true,\n})\n\nconst sortBy = computed<string | string[] | null>({\n  get: () => props.modelValue?.key ?? null,\n  set: (v) => {\n    if (Array.isArray(v)) return\n    emitChange(v, props.modelValue?.direction ?? 'asc')\n  },\n})\n\nconst direction = computed<SortDirection>({\n  get: () => props.modelValue?.direction ?? 'asc',\n  set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n  if (!props.modelValue) return props.placeholder\n  const opt = props.options.find((o) => o.value === props.modelValue!.key)\n  const label = opt?.label ?? props.modelValue.key\n  return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n  if (key == null) {\n    if (props.handleUrl) {\n      writeUrlOrRemove('sortBy', null, { handleUrl: true })\n      writeUrlOrRemove('sortDir', null, { handleUrl: true })\n    }\n    emit('update:modelValue', null)\n    emit('sort-change', null)\n    return\n  }\n  if (props.handleUrl) {\n    writeUrlOrRemove('sortBy', key, { handleUrl: true })\n    writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n  }\n  const next = { key, direction: dir }\n  emit('update:modelValue', next)\n  emit('sort-change', next)\n}\n\nfunction clear() {\n  emitChange(null, 'asc')\n  isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n  isOpen,\n  (open) => {\n    if (!open || !props.handleUrl || props.modelValue) return\n    const sort = getDefaultSort()\n    if (sort) emitChange(sort.key, sort.direction)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n      <button\n        type=\"button\"\n        class=\"c-btn ds-sort-trigger lh-1\"\n        :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n        :disabled=\"disabled\"\n        :aria-label=\"`Rendezés: ${activeLabel}`\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <i\n          class=\"fa-solid fa-fw\"\n          :class=\"\n            !modelValue || modelValue.direction === 'asc'\n              ? 'fa-arrow-up-wide-short'\n              : 'fa-arrow-down-wide-short'\n          \"\n        ></i>\n        <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n        <button\n          v-if=\"modelValue\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n          aria-label=\"Rendezés törlése\"\n          title=\"Rendezés törlése\"\n          @click.stop=\"clear\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n            <div class=\"ds-sort-panel__row\">\n              <label class=\"ds-sort-panel__label\">Oszlop</label>\n              <DropdownSelect\n                :model-value=\"sortBy\"\n                :options=\"options\"\n                :config=\"{\n                  clearable: false,\n                  placeholder: 'Válassz oszlopot...',\n                  filterable: false,\n                }\"\n                @update:model-value=\"(v) => (sortBy = v)\"\n              />\n            </div>\n\n            <div class=\"ds-sort-panel__row\">\n              <span class=\"ds-sort-panel__label\">Irány</span>\n              <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn\"\n                  :class=\"{ 'is-active': direction === 'asc' }\"\n                  :aria-pressed=\"direction === 'asc'\"\n                  aria-label=\"Növekvő\"\n                  @click=\"direction = 'asc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n                  <span>Növekvő</span>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn dir-desc\"\n                  :class=\"{ 'is-active': direction === 'desc' }\"\n                  :aria-pressed=\"direction === 'desc'\"\n                  aria-label=\"Csökkenő\"\n                  @click=\"direction = 'desc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n                  <span>Csökkenő</span>\n                </button>\n              </div>\n            </div>\n\n            <div class=\"ds-sort-panel__footer\">\n              <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n            </div>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components85.js","names":[],"sources":["../src/components/data-table/DataSort.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SortDirection = 'asc' | 'desc'\n\nexport interface DataSortOption {\n  value: string\n  label: string\n  icon?: string\n}\n\nexport interface DataSortProps {\n  modelValue: { key: string; direction: SortDirection } | null\n  options: DataSortOption[]\n  placeholder?: string\n  handleUrl?: boolean\n  disabled?: boolean\n}\n\nexport function getDefaultSort(): { key: string; direction: SortDirection } | null {\n  if (typeof window === 'undefined') return null\n  const params = new URLSearchParams(window.location.search)\n  const key = params.get('sortBy')\n  const dir = params.get('sortDir')\n  if (key && (dir === 'asc' || dir === 'desc')) {\n    return { key, direction: dir }\n  }\n  return null\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport DropdownSelect, { type DropdownOption } from '@/components/DropdownSelect.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { writeUrlOrRemove } from '@/utils/url'\nimport Button from '../Button.vue'\n\nconst props = withDefaults(defineProps<DataSortProps>(), {\n  placeholder: 'Rendezés...',\n  handleUrl: false,\n  disabled: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [sort: { key: string; direction: SortDirection } | null]\n  'sort-change': [sort: { key: string; direction: SortDirection } | null]\n}>()\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({ minWidth: `${Math.max(rect.width, 240)}px` }),\n  closeOnScroll: true,\n})\n\nconst sortBy = computed<DropdownOption | DropdownOption[] | null>({\n  get: () => {\n    const key = props.modelValue?.key\n    if (!key) return null\n    const opt = props.options.find((o) => o.value === key)\n    return opt ?? { value: key, label: key }\n  },\n  set: (v) => {\n    if (v == null) {\n      emitChange(null, props.modelValue?.direction ?? 'asc')\n      return\n    }\n    if (Array.isArray(v)) return\n    emitChange(v.value ?? null, props.modelValue?.direction ?? 'asc')\n  },\n})\n\nconst direction = computed<SortDirection>({\n  get: () => props.modelValue?.direction ?? 'asc',\n  set: (d) => emitChange(props.modelValue?.key ?? null, d),\n})\n\nconst activeLabel = computed(() => {\n  if (!props.modelValue) return props.placeholder\n  const opt = props.options.find((o) => o.value === props.modelValue!.key)\n  const label = opt?.label ?? props.modelValue.key\n  return `${label} (${props.modelValue.direction === 'asc' ? 'növekvő' : 'csökkenő'})`\n})\n\nfunction emitChange(key: string | null, dir: SortDirection) {\n  if (key == null) {\n    if (props.handleUrl) {\n      writeUrlOrRemove('sortBy', null, { handleUrl: true })\n      writeUrlOrRemove('sortDir', null, { handleUrl: true })\n    }\n    emit('update:modelValue', null)\n    emit('sort-change', null)\n    return\n  }\n  if (props.handleUrl) {\n    writeUrlOrRemove('sortBy', key, { handleUrl: true })\n    writeUrlOrRemove('sortDir', dir, { handleUrl: true, default: 'asc' })\n  }\n  const next = { key, direction: dir }\n  emit('update:modelValue', next)\n  emit('sort-change', next)\n}\n\nfunction clear() {\n  emitChange(null, 'asc')\n  isOpen.value = false\n}\n\n// Read initial state from URL on mount when handleUrl is true and modelValue is empty.\nwatch(\n  isOpen,\n  (open) => {\n    if (!open || !props.handleUrl || props.modelValue) return\n    const sort = getDefaultSort()\n    if (sort) emitChange(sort.key, sort.direction)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-sort-wrapper\">\n      <button\n        type=\"button\"\n        class=\"c-btn ds-sort-trigger lh-1\"\n        :class=\"[modelValue && 'is-active', disabled && 'is-disabled', isOpen && 'is-open']\"\n        :disabled=\"disabled\"\n        :aria-label=\"`Rendezés: ${activeLabel}`\"\n        @click=\"isOpen = !isOpen\"\n      >\n        <i\n          class=\"fa-solid fa-fw\"\n          :class=\"\n            !modelValue || modelValue.direction === 'asc'\n              ? 'fa-arrow-up-wide-short'\n              : 'fa-arrow-down-wide-short'\n          \"\n        ></i>\n        <span class=\"ds-sort-label c-truncate\">{{ activeLabel }}</span>\n        <button\n          v-if=\"modelValue\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-sort-clear\"\n          aria-label=\"Rendezés törlése\"\n          title=\"Rendezés törlése\"\n          @click.stop=\"clear\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"ds-sort-panel\" :style=\"dropdownStyle\">\n\n            <div class=\"ds-sort-panel__row\">\n              <label class=\"ds-sort-panel__label\">Oszlop</label>\n              <DropdownSelect\n                :model-value=\"sortBy\"\n                :options=\"options\"\n                :config=\"{\n                  clearable: false,\n                  placeholder: 'Válassz oszlopot...',\n                  filterable: false,\n                }\"\n                @update:model-value=\"(v) => (sortBy = v)\"\n              />\n            </div>\n\n            <div class=\"ds-sort-panel__row\">\n              <span class=\"ds-sort-panel__label\">Irány</span>\n              <div class=\"ds-sort-direction\" role=\"group\" aria-label=\"Rendezés iránya\">\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn\"\n                  :class=\"{ 'is-active': direction === 'asc' }\"\n                  :aria-pressed=\"direction === 'asc'\"\n                  aria-label=\"Növekvő\"\n                  @click=\"direction = 'asc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-up-wide-short\"></i>\n                  <span>Növekvő</span>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"ds-sort-direction__btn dir-desc\"\n                  :class=\"{ 'is-active': direction === 'desc' }\"\n                  :aria-pressed=\"direction === 'desc'\"\n                  aria-label=\"Csökkenő\"\n                  @click=\"direction = 'desc'\"\n                >\n                  <i class=\"fa-solid fa-fw fa-arrow-down-wide-short\"></i>\n                  <span>Csökkenő</span>\n                </button>\n              </div>\n            </div>\n\n            <div class=\"ds-sort-panel__footer\">\n              <Button label=\"Rendben\" outline size=\"small\" @click=\"isOpen = false\" />\n            </div>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-sort.scss\"></style>\n"],"mappings":""}

package/dist/admins-components86.js

@@ -3,14 +3,9 @@ import { formatDate as e } from "./admins-components3.js";
 function t(t, r, i) {
 	if (i == null || i === "") return "";
 	let a = t.find((e) => e.key === r);
-	if (a?.type === "dropdown" && a.options) {
-		let e = n(i);
-		if (Array.isArray(e)) return e.map((e) => {
-			let t = a.options?.find((t) => t.value === e);
-			return t ? t.label : String(e);
-		}).join(", ");
-		let t = a.options.find((t) => t.value === e);
-		if (t) return t.label;
+	if (a?.type === "dropdown") {
+		let e = n(i, a.options);
+		if (e) return e;
 	}
 	if (a?.type === "checkbox") return i ? "Bekapcsolva" : "";
 	if (a?.type === "date" || a?.type === "datetime") {
@@ -31,16 +26,21 @@ function t(t, r, i) {
 	}
 	return typeof i == "object" ? JSON.stringify(i) : String(i);
 }
-function n(e) {
-	if (Array.isArray(e)) return e;
-	if (typeof e == "string") {
-		if (e.startsWith("[") && e.endsWith("]")) try {
-			let t = JSON.parse(e);
-			if (Array.isArray(t)) return t;
-		} catch {}
-		return e;
+function n(e, t) {
+	if (e == null) return null;
+	let n = (e) => {
+		if (e == null) return null;
+		if (typeof e == "object" && "label" in e) {
+			let n = e;
+			return t?.find((e) => e.value === n.value)?.label ?? n.label ?? null;
+		}
+		return typeof e == "string" ? t?.find((t) => t.value === e)?.label ?? e : null;
+	};
+	if (Array.isArray(e)) {
+		let t = e.map(n).filter((e) => e !== null);
+		return t.length > 0 ? t.join(", ") : null;
 	}
-	return e;
+	return n(e);
 }
 function r(e, n) {
 	let r = [];
@@ -57,4 +57,4 @@ function r(e, n) {
 	return r;
 }
 //#endregion
-export { r as buildFilterDisplay, t as displayFilterValue, n as parseDropdownValue };
+export { r as buildFilterDisplay, t as displayFilterValue };

package/dist/admins-components86.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components86.js","names":[],"sources":["../src/utils/filterDisplay.ts"],"sourcesContent":["import { formatDate } from '@/utils/date'\nimport type { FilterItem } from '@/components/data-table/DataFilters.vue'\n\nexport function displayFilterValue(items: FilterItem[], key: string, value: any): string {\n  if (value === null || value === undefined || value === '') return ''\n\n  const item = items.find((i) => i.key === key)\n\n  if (item?.type === 'dropdown' && item.options) {\n    const parsedValue = parseDropdownValue(value)\n\n    if (Array.isArray(parsedValue)) {\n      const labels = parsedValue.map((v) => {\n        const opt = item.options?.find((o) => o.value === v)\n        return opt ? opt.label : String(v)\n      })\n      return labels.join(', ')\n    }\n\n    const opt = item.options.find((o) => o.value === parsedValue)\n    if (opt) return opt.label\n  }\n  if (item?.type === 'checkbox') {\n    return value ? 'Bekapcsolva' : ''\n  }\n\n  if (item?.type === 'date' || item?.type === 'datetime') {\n    if (typeof value === 'object' && value !== null) {\n      const local: Date | string | null | undefined = value.local ?? value.utc ?? null\n      if (local == null) return ''\n      const d = local instanceof Date ? local : new Date(local)\n      if (!isNaN(d.getTime())) {\n        return formatDate(d, item.type === 'datetime' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD')\n      }\n    }\n    if (typeof value === 'string' && value) {\n      const d = new Date(value)\n      if (!isNaN(d.getTime())) {\n        return formatDate(d, item.type === 'datetime' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD')\n      }\n    }\n  }\n\n  if ((item?.type === 'daterange' || item?.type === 'datetimerange') && typeof value === 'object') {\n    const showTime = item.type === 'datetimerange'\n    const fmt = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\n    const from = value.fromUtc ? formatDate(new Date(value.fromUtc), fmt) : '…'\n    const to = value.toUtc ? formatDate(new Date(value.toUtc), fmt) : '…'\n    return `${from} - ${to}`\n  }\n\n  if (typeof value === 'object') return JSON.stringify(value)\n\n  return String(value)\n}\n\nexport function parseDropdownValue(value: any): unknown {\n  if (Array.isArray(value)) {\n    return value\n  }\n\n  if (typeof value === 'string') {\n    if (value.startsWith('[') && value.endsWith(']')) {\n      try {\n        const parsed = JSON.parse(value)\n        if (Array.isArray(parsed)) {\n          return parsed\n        }\n      } catch {\n        // If parsing fails, treat as string\n      }\n    }\n    return value\n  }\n\n  return value\n}\n\nexport interface FilterDisplayPart {\n  key: string\n  text: string\n  displayClass?: string\n}\n\nexport function buildFilterDisplay(\n  items: FilterItem[],\n  values: Record<string, any>,\n): FilterDisplayPart[] {\n  const parts: FilterDisplayPart[] = []\n  for (const [key, rawValue] of Object.entries(values)) {\n    const v = displayFilterValue(items, key, rawValue)\n    if (!v) continue\n    const item = items.find((i) => i.key === key)\n    const labelText = item?.label ?? key\n    parts.push({ key, text: `${labelText}: ${v}`, displayClass: item?.displayClass })\n  }\n\n  return parts\n}\n\nexport function buildFilterValues(items: FilterItem[], values: Record<string, any>): string[] {\n  return buildFilterDisplay(items, values).map((p) => p.text)\n}\n"],"mappings":";;AAGA,SAAgB,EAAmB,GAAqB,GAAa,GAAoB;CACvF,IAAI,KAAU,QAA+B,MAAU,IAAI,OAAO;CAElE,IAAM,IAAO,EAAM,MAAM,MAAM,EAAE,QAAQ,CAAG;CAE5C,IAAI,GAAM,SAAS,cAAc,EAAK,SAAS;EAC7C,IAAM,IAAc,EAAmB,CAAK;EAE5C,IAAI,MAAM,QAAQ,CAAW,GAK3B,OAJe,EAAY,KAAK,MAAM;GACpC,IAAM,IAAM,EAAK,SAAS,MAAM,MAAM,EAAE,UAAU,CAAC;GACnD,OAAO,IAAM,EAAI,QAAQ,OAAO,CAAC;EACnC,CACO,EAAO,KAAK,IAAI;EAGzB,IAAM,IAAM,EAAK,QAAQ,MAAM,MAAM,EAAE,UAAU,CAAW;EAC5D,IAAI,GAAK,OAAO,EAAI;CACtB;CACA,IAAI,GAAM,SAAS,YACjB,OAAO,IAAQ,gBAAgB;CAGjC,IAAI,GAAM,SAAS,UAAU,GAAM,SAAS,YAAY;EACtD,IAAI,OAAO,KAAU,YAAY,GAAgB;GAC/C,IAAM,IAA0C,EAAM,SAAS,EAAM,OAAO;GAC5E,IAAI,KAAS,MAAM,OAAO;GAC1B,IAAM,IAAI,aAAiB,OAAO,IAAQ,IAAI,KAAK,CAAK;GACxD,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GACpB,OAAO,EAAW,GAAG,EAAK,SAAS,aAAa,qBAAqB,YAAY;EAErF;EACA,IAAI,OAAO,KAAU,YAAY,GAAO;GACtC,IAAM,IAAI,IAAI,KAAK,CAAK;GACxB,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GACpB,OAAO,EAAW,GAAG,EAAK,SAAS,aAAa,qBAAqB,YAAY;EAErF;CACF;CAEA,KAAK,GAAM,SAAS,eAAe,GAAM,SAAS,oBAAoB,OAAO,KAAU,UAAU;EAE/F,IAAM,IADW,EAAK,SAAS,kBACR,qBAAqB;EAG5C,OAAO,GAFM,EAAM,UAAU,EAAW,IAAI,KAAK,EAAM,OAAO,GAAG,CAAG,IAAI,IAEzD,KADJ,EAAM,QAAQ,EAAW,IAAI,KAAK,EAAM,KAAK,GAAG,CAAG,IAAI;CAEpE;CAIA,OAFI,OAAO,KAAU,WAAiB,KAAK,UAAU,CAAK,IAEnD,OAAO,CAAK;AACrB;AAEA,SAAgB,EAAmB,GAAqB;CACtD,IAAI,MAAM,QAAQ,CAAK,GACrB,OAAO;CAGT,IAAI,OAAO,KAAU,UAAU;EAC7B,IAAI,EAAM,WAAW,GAAG,KAAK,EAAM,SAAS,GAAG,GAC7C,IAAI;GACF,IAAM,IAAS,KAAK,MAAM,CAAK;GAC/B,IAAI,MAAM,QAAQ,CAAM,GACtB,OAAO;EAEX,QAAQ,CAER;EAEF,OAAO;CACT;CAEA,OAAO;AACT;AAQA,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,IAA6B,CAAC;CACpC,KAAK,IAAM,CAAC,GAAK,MAAa,OAAO,QAAQ,CAAM,GAAG;EACpD,IAAM,IAAI,EAAmB,GAAO,GAAK,CAAQ;EACjD,IAAI,CAAC,GAAG;EACR,IAAM,IAAO,EAAM,MAAM,MAAM,EAAE,QAAQ,CAAG,GACtC,IAAY,GAAM,SAAS;EACjC,EAAM,KAAK;GAAE;GAAK,MAAM,GAAG,EAAU,IAAI;GAAK,cAAc,GAAM;EAAa,CAAC;CAClF;CAEA,OAAO;AACT"}
+{"version":3,"file":"admins-components86.js","names":[],"sources":["../src/utils/filterDisplay.ts"],"sourcesContent":["import { formatDate } from '@/utils/date'\nimport type { FilterItem } from '@/components/data-table/DataFilters.vue'\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport function displayFilterValue(items: FilterItem[], key: string, value: any): string {\n  if (value === null || value === undefined || value === '') return ''\n\n  const item = items.find((i) => i.key === key)\n\n  if (item?.type === 'dropdown') {\n    const labels = extractDropdownLabels(value, item.options)\n    if (labels) return labels\n  }\n  if (item?.type === 'checkbox') {\n    return value ? 'Bekapcsolva' : ''\n  }\n\n  if (item?.type === 'date' || item?.type === 'datetime') {\n    if (typeof value === 'object' && value !== null) {\n      const local: Date | string | null | undefined = value.local ?? value.utc ?? null\n      if (local == null) return ''\n      const d = local instanceof Date ? local : new Date(local)\n      if (!isNaN(d.getTime())) {\n        return formatDate(d, item.type === 'datetime' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD')\n      }\n    }\n    if (typeof value === 'string' && value) {\n      const d = new Date(value)\n      if (!isNaN(d.getTime())) {\n        return formatDate(d, item.type === 'datetime' ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD')\n      }\n    }\n  }\n\n  if ((item?.type === 'daterange' || item?.type === 'datetimerange') && typeof value === 'object') {\n    const showTime = item.type === 'datetimerange'\n    const fmt = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'\n    const from = value.fromUtc ? formatDate(new Date(value.fromUtc), fmt) : '…'\n    const to = value.toUtc ? formatDate(new Date(value.toUtc), fmt) : '…'\n    return `${from} - ${to}`\n  }\n\n  if (typeof value === 'object') return JSON.stringify(value)\n\n  return String(value)\n}\n\n/**\n * Extracts display labels from a dropdown filter value.\n * Supports both the new format (`DropdownOption | DropdownOption[]`)\n * and the legacy format (plain string / string[]).\n *\n * Prefers the label from the live `options` list when available,\n * otherwise falls back to the label stored on the option object itself.\n */\nfunction extractDropdownLabels(value: unknown, options?: DropdownOption[]): string | null {\n  if (value == null) return null\n\n  const labelFor = (entry: unknown): string | null => {\n    if (entry == null) return null\n    if (typeof entry === 'object' && 'label' in (entry as object)) {\n      const obj = entry as DropdownOption\n      const fromOptions = options?.find((o) => o.value === obj.value)?.label\n      return fromOptions ?? obj.label ?? null\n    }\n    if (typeof entry === 'string') {\n      return options?.find((o) => o.value === entry)?.label ?? entry\n    }\n    return null\n  }\n\n  if (Array.isArray(value)) {\n    const labels = value.map(labelFor).filter((l): l is string => l !== null)\n    return labels.length > 0 ? labels.join(', ') : null\n  }\n\n  return labelFor(value)\n}\n\nexport function parseDropdownValue(value: any): unknown {\n  if (Array.isArray(value)) {\n    return value\n  }\n\n  if (typeof value === 'string') {\n    if (value.startsWith('[') && value.endsWith(']')) {\n      try {\n        const parsed = JSON.parse(value)\n        if (Array.isArray(parsed)) {\n          return parsed\n        }\n      } catch {\n        // If parsing fails, treat as string\n      }\n    }\n    return value\n  }\n\n  return value\n}\n\nexport interface FilterDisplayPart {\n  key: string\n  text: string\n  displayClass?: string\n}\n\nexport function buildFilterDisplay(\n  items: FilterItem[],\n  values: Record<string, any>,\n): FilterDisplayPart[] {\n  const parts: FilterDisplayPart[] = []\n  for (const [key, rawValue] of Object.entries(values)) {\n    const v = displayFilterValue(items, key, rawValue)\n    if (!v) continue\n    const item = items.find((i) => i.key === key)\n    const labelText = item?.label ?? key\n    parts.push({ key, text: `${labelText}: ${v}`, displayClass: item?.displayClass })\n  }\n\n  return parts\n}\n\nexport function buildFilterValues(items: FilterItem[], values: Record<string, any>): string[] {\n  return buildFilterDisplay(items, values).map((p) => p.text)\n}\n"],"mappings":";;AAIA,SAAgB,EAAmB,GAAqB,GAAa,GAAoB;CACvF,IAAI,KAAU,QAA+B,MAAU,IAAI,OAAO;CAElE,IAAM,IAAO,EAAM,MAAM,MAAM,EAAE,QAAQ,CAAG;CAE5C,IAAI,GAAM,SAAS,YAAY;EAC7B,IAAM,IAAS,EAAsB,GAAO,EAAK,OAAO;EACxD,IAAI,GAAQ,OAAO;CACrB;CACA,IAAI,GAAM,SAAS,YACjB,OAAO,IAAQ,gBAAgB;CAGjC,IAAI,GAAM,SAAS,UAAU,GAAM,SAAS,YAAY;EACtD,IAAI,OAAO,KAAU,YAAY,GAAgB;GAC/C,IAAM,IAA0C,EAAM,SAAS,EAAM,OAAO;GAC5E,IAAI,KAAS,MAAM,OAAO;GAC1B,IAAM,IAAI,aAAiB,OAAO,IAAQ,IAAI,KAAK,CAAK;GACxD,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GACpB,OAAO,EAAW,GAAG,EAAK,SAAS,aAAa,qBAAqB,YAAY;EAErF;EACA,IAAI,OAAO,KAAU,YAAY,GAAO;GACtC,IAAM,IAAI,IAAI,KAAK,CAAK;GACxB,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,GACpB,OAAO,EAAW,GAAG,EAAK,SAAS,aAAa,qBAAqB,YAAY;EAErF;CACF;CAEA,KAAK,GAAM,SAAS,eAAe,GAAM,SAAS,oBAAoB,OAAO,KAAU,UAAU;EAE/F,IAAM,IADW,EAAK,SAAS,kBACR,qBAAqB;EAG5C,OAAO,GAFM,EAAM,UAAU,EAAW,IAAI,KAAK,EAAM,OAAO,GAAG,CAAG,IAAI,IAEzD,KADJ,EAAM,QAAQ,EAAW,IAAI,KAAK,EAAM,KAAK,GAAG,CAAG,IAAI;CAEpE;CAIA,OAFI,OAAO,KAAU,WAAiB,KAAK,UAAU,CAAK,IAEnD,OAAO,CAAK;AACrB;AAUA,SAAS,EAAsB,GAAgB,GAA2C;CACxF,IAAI,KAAS,MAAM,OAAO;CAE1B,IAAM,KAAY,MAAkC;EAClD,IAAI,KAAS,MAAM,OAAO;EAC1B,IAAI,OAAO,KAAU,YAAY,WAAY,GAAkB;GAC7D,IAAM,IAAM;GAEZ,OADoB,GAAS,MAAM,MAAM,EAAE,UAAU,EAAI,KAAK,GAAG,SAC3C,EAAI,SAAS;EACrC;EAIA,OAHI,OAAO,KAAU,WACZ,GAAS,MAAM,MAAM,EAAE,UAAU,CAAK,GAAG,SAAS,IAEpD;CACT;CAEA,IAAI,MAAM,QAAQ,CAAK,GAAG;EACxB,IAAM,IAAS,EAAM,IAAI,CAAQ,EAAE,QAAQ,MAAmB,MAAM,IAAI;EACxE,OAAO,EAAO,SAAS,IAAI,EAAO,KAAK,IAAI,IAAI;CACjD;CAEA,OAAO,EAAS,CAAK;AACvB;AA8BA,SAAgB,EACd,GACA,GACqB;CACrB,IAAM,IAA6B,CAAC;CACpC,KAAK,IAAM,CAAC,GAAK,MAAa,OAAO,QAAQ,CAAM,GAAG;EACpD,IAAM,IAAI,EAAmB,GAAO,GAAK,CAAQ;EACjD,IAAI,CAAC,GAAG;EACR,IAAM,IAAO,EAAM,MAAM,MAAM,EAAE,QAAQ,CAAG,GACtC,IAAY,GAAM,SAAS;EACjC,EAAM,KAAK;GAAE;GAAK,MAAM,GAAG,EAAU,IAAI;GAAK,cAAc,GAAM;EAAa,CAAC;CAClF;CAEA,OAAO;AACT"}

package/dist/admins-components87.js

@@ -1,34 +1,33 @@
 import { getFullStorageKey as e } from "./admins-components78.js";
 import { getUrlParam as t, removeUrlParam as n, setUrlParam as r } from "./admins-components79.js";
-import { parseDropdownValue as i } from "./admins-components86.js";
 //#region src/utils/dataFilters.ts
-function a(e, t, n = !0) {
-	let r = o(e), i = Object.keys(r).length > 0, a = (i ? null : c(t))?.values ?? {}, s = {};
+function i(e, t, n = !0) {
+	let r = a(e), i = Object.keys(r).length > 0, o = (i ? null : s(t))?.values ?? {}, c = {};
 	for (let t of e) {
 		if (t.type === "separator") continue;
 		let e;
 		if (t.key in r) e = r[t.key];
 		else if (i) continue;
-		else if (t.key in a) e = a[t.key];
+		else if (t.key in o) e = o[t.key];
 		else if (t.value !== void 0) e = t.value;
 		else continue;
 		if (e != null) if (n && t.transformer) {
 			let n = t.transformer(e);
-			n && Object.assign(s, n);
-		} else s[t.key] = e;
+			n && Object.assign(c, n);
+		} else c[t.key] = e;
 	}
-	return s;
+	return c;
 }
-function o(e) {
+function a(e) {
 	let n = {};
 	for (let r of e) {
 		if (r.type === "separator") continue;
 		let e = t(r.key);
-		e && (n[r.key] = u(r.type, e, r.value));
+		e && (n[r.key] = l(r.type, e, r.value));
 	}
 	return n;
 }
-function s(t) {
+function o(t) {
 	try {
 		let n = e("filters", t), r = JSON.parse(localStorage.getItem(n) ?? "[]");
 		return Array.isArray(r) ? r.filter((e) => e && typeof e == "object" && typeof e.id == "string" && e.values && typeof e.savedAt == "string") : [];
@@ -36,20 +35,48 @@ function s(t) {
 		return [];
 	}
 }
-function c(e) {
-	return s(e).find((e) => e.isDefault) ?? null;
+function s(e) {
+	return o(e).find((e) => e.isDefault) ?? null;
 }
-function l(e) {
+function c(e) {
 	return Object.fromEntries(Object.entries(e).filter(([e, t]) => t !== null && t !== "" && t !== void 0));
 }
-function u(e, t, n) {
+function l(e, t, n) {
 	if (e === "number") {
 		let e = Number(t);
 		return isNaN(e) ? n ?? null : e;
 	}
-	return e === "date" || e === "datetime" ? { utc: t } : e === "daterange" || e === "datetimerange" ? d(t, n) : e === "dropdown" ? i(t) : e === "checkbox" ? t === "true" : t;
+	return e === "date" || e === "datetime" ? { utc: t } : e === "daterange" || e === "datetimerange" ? f(t, n) : e === "dropdown" ? u(t) : e === "checkbox" ? t === "true" : t;
+}
+function u(e) {
+	if (e.startsWith("[") || e.startsWith("{")) try {
+		let t = JSON.parse(e);
+		if (Array.isArray(t)) {
+			let e = t.map(d).filter((e) => e !== null);
+			return e.length > 0 ? e : null;
+		}
+		if (t && typeof t == "object") return d(t);
+	} catch {}
+	return e ? {
+		value: e,
+		label: e
+	} : null;
+}
+function d(e) {
+	if (e == null) return null;
+	if (typeof e == "object" && "label" in e) {
+		let t = e;
+		if (t.value != null && typeof t.label == "string") return {
+			value: t.value,
+			label: t.label
+		};
+	}
+	return typeof e == "string" ? {
+		value: e,
+		label: e
+	} : null;
 }
-function d(e, t) {
+function f(e, t) {
 	try {
 		let t = JSON.parse(e);
 		return t && typeof t == "object" && "local" in t && t.local && (t.local = new Date(t.local)), t;
@@ -57,12 +84,29 @@ function d(e, t) {
 		return t ?? null;
 	}
 }
-function f(e, t) {
+function p(e, t) {
 	for (let i of e) {
 		if (i.type === "separator") continue;
 		let e = t[i.key];
-		e == null || e === "" ? n(i.key) : i.type === "date" || i.type === "datetime" ? r(i.key, e.utc) : typeof e == "object" ? r(i.key, JSON.stringify(e)) : r(i.key, String(e));
+		e == null || e === "" ? n(i.key) : i.type === "date" || i.type === "datetime" ? r(i.key, e.utc) : i.type === "dropdown" ? r(i.key, JSON.stringify(m(e))) : typeof e == "object" ? r(i.key, JSON.stringify(e)) : r(i.key, String(e));
+	}
+}
+function m(e, t) {
+	if (e == null) return null;
+	let n = (e) => {
+		if (e == null) return null;
+		if (typeof e == "object" && "label" in e) return e;
+		let n = String(e);
+		return {
+			value: n,
+			label: t?.find((e) => e.value === n)?.label ?? n
+		};
+	};
+	if (Array.isArray(e)) {
+		let t = e.map(n).filter((e) => e !== null);
+		return t.length > 0 ? t : null;
 	}
+	return n(e);
 }
 //#endregion
-export { l as filterEmptyValues, a as getDefaultFilters, c as getDefaultSavedFilter, o as getFilterUrlParams, s as getSavedFilters, f as writeFilterParams };
+export { c as filterEmptyValues, i as getDefaultFilters, s as getDefaultSavedFilter, a as getFilterUrlParams, o as getSavedFilters, p as writeFilterParams };

package/dist/admins-components87.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components87.js","names":[],"sources":["../src/utils/dataFilters.ts"],"sourcesContent":["import type { FilterItem } from '@/components/data-table/DataFilters.vue'\nimport type { SavedFilter } from '@/components/data-table/FiltersHistory.vue'\nimport { parseDropdownValue } from '@/utils/filterDisplay'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { getUrlParam, setUrlParam, removeUrlParam } from '@/utils/url'\n\n export function getDefaultFilters(\n  items: FilterItem[],\n  storageKey?: string,\n  useTransformers = true,\n): Record<string, unknown> {\n  const urlFilters = getFilterUrlParams(items)\n  const hasUrlParams = Object.keys(urlFilters).length > 0\n  const defaultFilter = hasUrlParams ? null : getDefaultSavedFilter(storageKey)\n  const defaultSavedValues = defaultFilter?.values ?? {}\n\n  const result: Record<string, unknown> = {}\n\n  for (const item of items) {\n    if (item.type === 'separator') continue\n\n    let value: unknown\n\n    if (item.key in urlFilters) {\n      value = urlFilters[item.key]\n    } else if (hasUrlParams) {\n      continue\n    } else if (item.key in defaultSavedValues) {\n      value = defaultSavedValues[item.key]\n    } else if (item.value !== undefined) {\n      value = item.value\n    } else {\n      continue\n    }\n\n    if (value == null) continue\n\n    if (useTransformers && item.transformer) {\n      const transformed = item.transformer(value)\n      if (transformed) {\n        Object.assign(result, transformed)\n      }\n    } else {\n      result[item.key] = value\n    }\n  }\n\n  return result\n}\n\nexport function getFilterUrlParams(items: FilterItem[]): Record<string, unknown> {\n  const result: Record<string, unknown> = {}\n\n  for (const item of items) {\n    if (item.type === 'separator') continue\n\n    const raw = getUrlParam(item.key)\n    if (raw) {\n      result[item.key] = parseFilterValue(item.type, raw, item.value)\n    }\n  }\n  return result\n}\n\nexport function getSavedFilters(storageKey?: string): SavedFilter[] {\n  try {\n    const fullStorageKey = getFullStorageKey('filters', storageKey)\n    const parsed = JSON.parse(localStorage.getItem(fullStorageKey) ?? '[]')\n    return Array.isArray(parsed)\n      ? parsed.filter(\n          (e) =>\n            e &&\n            typeof e === 'object' &&\n            typeof e.id === 'string' &&\n            e.values &&\n            typeof e.savedAt === 'string',\n        )\n      : []\n  } catch {\n    return []\n  }\n}\n\nexport function getDefaultSavedFilter(storageKey?: string): SavedFilter | null {\n  const savedFilters = getSavedFilters(storageKey)\n  return savedFilters.find((f) => f.isDefault) ?? null\n}\n\nexport function filterEmptyValues(filters: Record<string, any>): Record<string, any> {\n  return Object.fromEntries(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Object.entries(filters).filter(([_, val]) => val !== null && val !== '' && val !== undefined),\n  )\n}\n\nfunction parseFilterValue(type: FilterItem['type'], raw: string, fallback: unknown): unknown {\n  if (type === 'number') {\n    const n = Number(raw)\n    return isNaN(n) ? (fallback ?? null) : n\n  }\n  if (type === 'date' || type === 'datetime') {\n    return { utc: raw }\n  }\n  if (type === 'daterange' || type === 'datetimerange') {\n    return parseRangeValue(raw, fallback)\n  }\n  if (type === 'dropdown') {\n    return parseDropdownValue(raw)\n  }\n  if (type === 'checkbox') {\n    return raw === 'true'\n  }\n\n  return raw\n}\n\nfunction parseRangeValue(raw: string, fallback: unknown): unknown {\n  try {\n    const parsed = JSON.parse(raw)\n    if (parsed && typeof parsed === 'object' && 'local' in parsed && parsed.local) {\n      parsed.local = new Date(parsed.local)\n    }\n    return parsed\n  } catch {\n    return fallback ?? null\n  }\n}\n\nexport function writeFilterParams(items: FilterItem[], vals: Record<string, unknown>) {\n  for (const item of items) {\n    if (item.type === 'separator') continue\n    const v = vals[item.key]\n    if (v === null || v === undefined || v === '') {\n      removeUrlParam(item.key)\n    } else if (item.type === 'date' || item.type === 'datetime') {\n      setUrlParam(item.key, (v as { utc: string }).utc)\n    } else if (typeof v === 'object') {\n      setUrlParam(item.key, JSON.stringify(v))\n    } else {\n      setUrlParam(item.key, String(v))\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"admins-components87.js","names":[],"sources":["../src/utils/dataFilters.ts"],"sourcesContent":["import type { FilterItem } from '@/components/data-table/DataFilters.vue'\nimport type { SavedFilter } from '@/components/data-table/FiltersHistory.vue'\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport { getFullStorageKey } from '@/utils/storageKey'\nimport { getUrlParam, setUrlParam, removeUrlParam } from '@/utils/url'\n\n export function getDefaultFilters(\n  items: FilterItem[],\n  storageKey?: string,\n  useTransformers = true,\n): Record<string, unknown> {\n  const urlFilters = getFilterUrlParams(items)\n  const hasUrlParams = Object.keys(urlFilters).length > 0\n  const defaultFilter = hasUrlParams ? null : getDefaultSavedFilter(storageKey)\n  const defaultSavedValues = defaultFilter?.values ?? {}\n\n  const result: Record<string, unknown> = {}\n\n  for (const item of items) {\n    if (item.type === 'separator') continue\n\n    let value: unknown\n\n    if (item.key in urlFilters) {\n      value = urlFilters[item.key]\n    } else if (hasUrlParams) {\n      continue\n    } else if (item.key in defaultSavedValues) {\n      value = defaultSavedValues[item.key]\n    } else if (item.value !== undefined) {\n      value = item.value\n    } else {\n      continue\n    }\n\n    if (value == null) continue\n\n    if (useTransformers && item.transformer) {\n      const transformed = item.transformer(value)\n      if (transformed) {\n        Object.assign(result, transformed)\n      }\n    } else {\n      result[item.key] = value\n    }\n  }\n\n  return result\n}\n\nexport function getFilterUrlParams(items: FilterItem[]): Record<string, unknown> {\n  const result: Record<string, unknown> = {}\n\n  for (const item of items) {\n    if (item.type === 'separator') continue\n\n    const raw = getUrlParam(item.key)\n    if (raw) {\n      result[item.key] = parseFilterValue(item.type, raw, item.value)\n    }\n  }\n  return result\n}\n\nexport function getSavedFilters(storageKey?: string): SavedFilter[] {\n  try {\n    const fullStorageKey = getFullStorageKey('filters', storageKey)\n    const parsed = JSON.parse(localStorage.getItem(fullStorageKey) ?? '[]')\n    return Array.isArray(parsed)\n      ? parsed.filter(\n          (e) =>\n            e &&\n            typeof e === 'object' &&\n            typeof e.id === 'string' &&\n            e.values &&\n            typeof e.savedAt === 'string',\n        )\n      : []\n  } catch {\n    return []\n  }\n}\n\nexport function getDefaultSavedFilter(storageKey?: string): SavedFilter | null {\n  const savedFilters = getSavedFilters(storageKey)\n  return savedFilters.find((f) => f.isDefault) ?? null\n}\n\nexport function filterEmptyValues(filters: Record<string, any>): Record<string, any> {\n  return Object.fromEntries(\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    Object.entries(filters).filter(([_, val]) => val !== null && val !== '' && val !== undefined),\n  )\n}\n\nfunction parseFilterValue(type: FilterItem['type'], raw: string, fallback: unknown): unknown {\n  if (type === 'number') {\n    const n = Number(raw)\n    return isNaN(n) ? (fallback ?? null) : n\n  }\n  if (type === 'date' || type === 'datetime') {\n    return { utc: raw }\n  }\n  if (type === 'daterange' || type === 'datetimerange') {\n    return parseRangeValue(raw, fallback)\n  }\n  if (type === 'dropdown') {\n    return parseDropdownStoredValue(raw)\n  }\n  if (type === 'checkbox') {\n    return raw === 'true'\n  }\n\n  return raw\n}\n\nfunction parseDropdownStoredValue(raw: string): DropdownOption | DropdownOption[] | null {\n  // Try to parse as JSON first (new format or legacy array)\n  if (raw.startsWith('[') || raw.startsWith('{')) {\n    try {\n      const parsed = JSON.parse(raw)\n      if (Array.isArray(parsed)) {\n        const opts = parsed.map(toDropdownOption).filter((o): o is DropdownOption => o !== null)\n        return opts.length > 0 ? opts : null\n      }\n      if (parsed && typeof parsed === 'object') {\n        const opt = toDropdownOption(parsed)\n        return opt\n      }\n    } catch {\n      // fall through to legacy handling\n    }\n  }\n  // Legacy: plain string value\n  if (raw) return { value: raw, label: raw }\n  return null\n}\n\nfunction toDropdownOption(entry: unknown): DropdownOption | null {\n  if (entry == null) return null\n  if (typeof entry === 'object' && 'label' in (entry as object)) {\n    const obj = entry as DropdownOption\n    if (obj.value != null && typeof obj.label === 'string') {\n      return { value: obj.value, label: obj.label }\n    }\n  }\n  if (typeof entry === 'string') {\n    return { value: entry, label: entry }\n  }\n  return null\n}\n\nfunction parseRangeValue(raw: string, fallback: unknown): unknown {\n  try {\n    const parsed = JSON.parse(raw)\n    if (parsed && typeof parsed === 'object' && 'local' in parsed && parsed.local) {\n      parsed.local = new Date(parsed.local)\n    }\n    return parsed\n  } catch {\n    return fallback ?? null\n  }\n}\n\nexport function writeFilterParams(items: FilterItem[], vals: Record<string, unknown>) {\n  for (const item of items) {\n    if (item.type === 'separator') continue\n    const v = vals[item.key]\n    if (v === null || v === undefined || v === '') {\n      removeUrlParam(item.key)\n    } else if (item.type === 'date' || item.type === 'datetime') {\n      setUrlParam(item.key, (v as { utc: string }).utc)\n    } else if (item.type === 'dropdown') {\n      // Store the full option object(s) so the label is preserved even when\n      // the options list hasn't been loaded yet (e.g. lazy onInnerSearch).\n      setUrlParam(item.key, JSON.stringify(normalizeDropdownValue(v)))\n    } else if (typeof v === 'object') {\n      setUrlParam(item.key, JSON.stringify(v))\n    } else {\n      setUrlParam(item.key, String(v))\n    }\n  }\n}\n\nfunction normalizeDropdownValue(\n  v: unknown,\n  options?: DropdownOption[],\n): DropdownOption | DropdownOption[] | null {\n  if (v == null) return null\n  const toOption = (entry: unknown): DropdownOption | null => {\n    if (entry == null) return null\n    if (typeof entry === 'object' && 'label' in (entry as object)) {\n      return entry as DropdownOption\n    }\n    const value = String(entry)\n    const label = options?.find((o) => o.value === value)?.label ?? value\n    return { value, label }\n  }\n  if (Array.isArray(v)) {\n    const opts = v.map(toOption).filter((o): o is DropdownOption => o !== null)\n    return opts.length > 0 ? opts : null\n  }\n  const opt = toOption(v)\n  return opt\n}\n"],"mappings":"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"}

package/dist/admins-components91.js

@@ -60,7 +60,7 @@ var E = {
 			F.value = {
 				...F.value,
 				[e.key]: n
-			}, e.onChange && e.onChange(n), N.lazy || U();
+			}, e.onChange && e.onChange(n), N.lazy || W();
 		}
 		let V = f(() => Object.values(F.value).some((e) => e !== null && e !== "" && e !== void 0));
 		function H() {
@@ -68,45 +68,53 @@ var E = {
 			for (let t of N.items) {
 				if (t.type === "separator") continue;
 				let n = F.value[t.key];
-				t.transformer ? Object.assign(e, t.transformer(n) ?? {}) : t.type === "date" || t.type === "datetime" ? e[t.key] = n?.utc ?? n : e[t.key] = n;
+				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;
 			}
 			return {
 				values: s(F.value),
 				transformed: s(e)
 			};
 		}
-		function U() {
-			N.handleUrl && l(N.items, F.value), P("change", H());
+		function U(e) {
+			if (e == null) return null;
+			if (Array.isArray(e)) {
+				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);
+				return t.length > 0 ? t : null;
+			}
+			return typeof e == "object" && "value" in e ? e.value ?? null : typeof e == "string" ? e : null;
 		}
 		function W() {
-			U(), P("close");
+			N.handleUrl && l(N.items, F.value), P("change", H());
 		}
 		function G() {
-			F.value = {}, U();
+			W(), P("close");
 		}
-		function K(e) {
+		function K() {
+			F.value = {}, W();
+		}
+		function q(e) {
 			F.value = {
 				...F.value,
 				[e]: null
-			}, U();
+			}, W();
 		}
-		function q(e) {
+		function J(e) {
 			let t = I.value[e];
 			t && (typeof t.focusAndOpen == "function" ? t.focusAndOpen() : typeof t.focus == "function" && t.focus());
 		}
-		function J(e) {
+		function Y(e) {
 			let t = { ...F.value };
 			for (let n of N.items) n.type !== "separator" && n.key in e && (t[n.key] = e[n.key] ?? null);
-			F.value = t, U();
+			F.value = t, W();
 		}
 		j({
-			clearFilter: K,
-			focusFilter: q
+			clearFilter: q,
+			focusFilter: J
 		});
-		function Y(e) {
-			e.key === "Enter" && e.target?.tagName !== "TEXTAREA" && (e.preventDefault(), W());
+		function X(e) {
+			e.key === "Enter" && e.target?.tagName !== "TEXTAREA" && (e.preventDefault(), G());
 		}
-		function X(e, t) {
+		function Z(e, t) {
 			e.onInnerSearch && e.onInnerSearch(t);
 		}
 		return (s, c) => (x(), p(o, {
@@ -118,7 +126,7 @@ var E = {
 			default: T(() => [
 				g("div", {
 					class: "data-filters",
-					onKeydown: Y
+					onKeydown: X
 				}, [(x(!0), h(d, null, C(v.items, (e) => (x(), h("div", {
 					key: e.key,
 					class: b(["data-filters__field", { "data-filters__field--full": e.fullWidth || e.type === "separator" }])
@@ -190,7 +198,7 @@ var E = {
 						clearable: !0,
 						filterable: !0
 					},
-					onFilterInput: (t) => X(e, t),
+					onFilterInput: (t) => Z(e, t),
 					"onUpdate:modelValue": (t) => B(e, t)
 				}, null, 8, [
 					"model-value",
@@ -205,18 +213,18 @@ var E = {
 					label: "Szűrők törlése",
 					"aria-label": "Szűrők törlése",
 					size: "small",
-					onClick: G
+					onClick: K
 				}, null, 8, ["disabled"]), _(e, {
 					label: "Szűrés",
 					"aria-label": "Szűrés",
 					type: "success",
-					onClick: W
+					onClick: G
 				})]),
 				v.historyEnabled ? (x(), h(d, { key: 0 }, [c[1] ||= g("hr", { class: "separator my-3" }, null, -1), _(u, {
 					items: v.items,
 					values: F.value,
 					"storage-key": v.storageKey,
-					onLoad: J
+					onLoad: Y
 				}, null, 8, [
 					"items",
 					"values",

package/dist/admins-components91.js.map

@@ -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 string) ?? 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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"}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,IAC3B,EAAK,SAAS,aAIvB,EAAY,EAAK,OAAO,EAAsB,CAAG,IAEjD,EAAY,EAAK,OAAO;GAE5B;GACA,OAAO;IAAE,QAAQ,EAAkB,EAAO,KAAK;IAAG,aAAa,EAAkB,CAAW;GAAE;EAChG;EAOA,SAAS,EAAsB,GAAwC;GACrE,IAAI,KAAO,MAAM,OAAO;GACxB,IAAI,MAAM,QAAQ,CAAG,GAAG;IACtB,IAAM,IAAS,EACZ,KAAK,MACA,KAAS,OAAa,OACtB,OAAO,KAAU,YAAY,WAAW,IAClC,EAA6B,SAAS,OAE5C,OAAO,KAAU,WAAiB,IAC/B,IACR,EACA,QAAQ,MAAmB,MAAM,IAAI;IACxC,OAAO,EAAO,SAAS,IAAI,IAAS;GACtC;GAKA,OAJI,OAAO,KAAQ,YAAY,WAAW,IAChC,EAA2B,SAAS,OAE1C,OAAO,KAAQ,WAAiB,IAC7B;EACT;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"}

package/dist/admins-components93.js.map

@@ -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 string) ?? 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":""}
+{"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":""}

package/dist/src/components/DropdownSelect.vue.d.ts

@@ -20,7 +20,7 @@ export interface DropdownOption {
     callback?: () => void;
 }
 export interface DropdownSelectProps {
-    modelValue?: string | string[] | null;
+    modelValue?: DropdownOption | DropdownOption[] | string | string[] | null;
     options: DropdownOption[];
     config?: DropdownSelectConfig;
 }
@@ -29,12 +29,12 @@ export default _default;
 declare const __VLS_export: import('vue').DefineComponent<DropdownSelectProps, {
     focusAndOpen: () => void;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[] | null) => any;
+    "update:modelValue": (value: DropdownOption | DropdownOption[] | null) => any;
     "filter-input": (filterText: string) => any;
 }, string, import('vue').PublicProps, Readonly<DropdownSelectProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: DropdownOption | DropdownOption[] | null) => any) | undefined;
     "onFilter-input"?: ((filterText: string) => any) | undefined;
 }>, {
-    modelValue: string | string[] | null;
+    modelValue: DropdownOption | DropdownOption[] | string | string[] | null;
     config: DropdownSelectConfig;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admins-components",
-  "version": "9.0.71",
+  "version": "9.0.73",
   "type": "module",
   "module": "./dist/admins-components.js",
   "types": "./dist/index.d.ts",