admins-components 9.0.23 → 9.0.24

package/dist/admins-components20.js

@@ -1,22 +1,22 @@
 import e from "./admins-components6.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, useId as g, vModelText as _, watch as v, withDirectives as y, withModifiers as b } from "vue";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, vModelText as g, watch as _, withDirectives as v, withModifiers as y } from "vue";
 //#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
-var x = { class: "ac-component" }, S = {
+var b = { class: "ac-component" }, x = {
 	key: 0,
 	class: "c-truncate ds-value"
-}, C = {
+}, S = {
 	key: 1,
 	class: "c-placeholder"
-}, w = {
+}, C = {
 	key: 0,
 	class: "ds-filter"
-}, T = ["title"], E = { class: "ds-options c-scroll" }, D = ["onClick", "onKeydown"], O = {
+}, w = ["title"], T = { class: "ds-options c-scroll" }, E = ["onClick", "onKeydown"], D = {
 	key: 0,
 	class: "ds-option ds-option--empty"
-}, k = {
+}, O = {
 	key: 1,
 	class: "c-footer"
-}, A = {
+}, k = {
 	placeholder: "Select...",
 	filterable: !0,
 	clearable: !0,
@@ -24,160 +24,160 @@ var x = { class: "ac-component" }, S = {
 	multiple: !1,
 	lazy: !1,
 	size: "normal"
-}, j = /* @__PURE__ */ s({
+}, A = /* @__PURE__ */ s({
 	__name: "DropdownSelect",
 	props: {
 		modelValue: { default: null },
 		options: {},
-		config: { default: () => ({ ...A }) }
+		config: {}
 	},
 	emits: ["update:modelValue"],
-	setup(s, { expose: j, emit: M }) {
-		let N = s, P = n(() => ({
-			...A,
-			...N.config
-		})), F = M, ee = `ds-input-filter-${g()}`, I = p(!1), L = p(""), R = p(null), z = p(null), B = p([]), V = p(H(N.modelValue));
-		function H(e) {
+	setup(s, { expose: A, emit: j }) {
+		let M = s, N = n(() => ({
+			...k,
+			...M.config
+		})), P = j, F = p(!1), I = p(""), L = p(null), R = p(null), z = p([]), B = p(V(M.modelValue));
+		function V(e) {
 			return e == null ? [] : Array.isArray(e) ? [...e] : [e];
 		}
-		v(() => N.modelValue, (e) => {
-			V.value = H(e);
-		}), v(I, (e) => {
-			e && (L.value = "", P.value.filterable && c(() => z.value?.focus()), P.value.lazy && (B.value = [...V.value]));
+		_(() => M.modelValue, (e) => {
+			B.value = V(e);
+		}), _(F, (e) => {
+			e && (I.value = "", N.value.filterable && c(() => R.value?.focus()), N.value.lazy && (z.value = [...B.value]));
 		});
-		let U = n(() => V.value.length === 0 ? null : P.value.multiple ? V.value.length > 2 ? `${V.value.length} kiválasztva` : V.value.map((e) => N.options.find((t) => t.value === e)?.label ?? e).join(", ") : N.options.find((e) => e.value === V.value[0])?.label ?? null), W = n(() => {
-			let e = L.value.toLowerCase();
-			return e ? N.options.filter((t) => t.label.toLowerCase().includes(e)) : N.options;
-		}), G = n(() => W.value.filter((e) => e.value)), K = n(() => {
-			if (G.value.length === 0) return !1;
-			let e = P.value.lazy && I.value ? B.value : V.value;
-			return G.value.every((t) => t.value && e.includes(t.value));
+		let H = n(() => 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), U = n(() => {
+			let e = I.value.toLowerCase();
+			return e ? M.options.filter((t) => t.label.toLowerCase().includes(e)) : M.options;
+		}), W = n(() => U.value.filter((e) => e.value)), G = n(() => {
+			if (W.value.length === 0) return !1;
+			let e = N.value.lazy && F.value ? z.value : B.value;
+			return W.value.every((t) => t.value && e.includes(t.value));
 		});
-		function q(e) {
-			return (P.value.lazy && I.value ? B : V).value.includes(e);
+		function K(e) {
+			return (N.value.lazy && F.value ? z : B).value.includes(e);
 		}
-		function J() {
-			let e = P.value.lazy && I.value ? B : V, t = G.value.map((e) => e.value);
-			if (K.value) e.value = e.value.filter((e) => !t.includes(e));
+		function q() {
+			let e = N.value.lazy && F.value ? z : B, t = W.value.map((e) => e.value);
+			if (G.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];
 			}
-			P.value.lazy || F("update:modelValue", V.value.length > 0 ? [...V.value] : null);
+			N.value.lazy || P("update:modelValue", B.value.length > 0 ? [...B.value] : null);
 		}
-		function Y(e, t) {
+		function J(e, t) {
 			let n = e.indexOf(t);
 			return n >= 0 ? e.filter((e, t) => t !== n) : [...e, t];
 		}
-		function X(e) {
+		function Y(e) {
 			if (e.callback) {
-				e.callback(), I.value = !1;
+				e.callback(), F.value = !1;
 				return;
 			}
 			let t = e.value;
-			t && (P.value.multiple ? P.value.lazy ? B.value = Y(B.value, t) : (V.value = Y(V.value, t), F("update:modelValue", V.value.length > 0 ? [...V.value] : null)) : (V.value = [t], F("update:modelValue", t), I.value = !1));
+			t && (N.value.multiple ? N.value.lazy ? z.value = J(z.value, t) : (B.value = J(B.value, t), P("update:modelValue", B.value.length > 0 ? [...B.value] : null)) : (B.value = [t], P("update:modelValue", t), F.value = !1));
 		}
-		function Z() {
-			P.value.lazy && (V.value = [...B.value], F("update:modelValue", B.value.length > 0 ? [...B.value] : null)), I.value = !1;
+		function X() {
+			N.value.lazy && (B.value = [...z.value], P("update:modelValue", z.value.length > 0 ? [...z.value] : null)), F.value = !1;
 		}
-		function Q() {
-			P.value.lazy ? B.value = [] : (V.value = [], F("update:modelValue", null));
+		function Z() {
+			N.value.lazy ? z.value = [] : (B.value = [], P("update:modelValue", null));
 		}
-		function te(e, t) {
-			e.key === " " ? (e.preventDefault(), X(t)) : e.key === "Enter" && (e.preventDefault(), Z());
+		function Q(e, t) {
+			e.key === " " ? (e.preventDefault(), Y(t)) : e.key === "Enter" && (e.preventDefault(), X());
 		}
 		function $(e) {
-			R.value && !R.value.contains(e.target) && (I.value = !1);
+			L.value && !L.value.contains(e.target) && (F.value = !1);
 		}
 		d(() => document.addEventListener("mousedown", $)), u(() => document.removeEventListener("mousedown", $));
-		function ne() {
-			I.value = !I.value, I.value && (L.value = "");
+		function ee() {
+			F.value = !F.value, F.value && (I.value = "");
 		}
-		function re() {
-			V.value = [], F("update:modelValue", null), I.value = !1;
+		function te() {
+			B.value = [], P("update:modelValue", null), F.value = !1;
 		}
-		function ie() {
-			I.value = !0, P.value.filterable && c(() => z.value?.focus());
+		function ne() {
+			F.value = !0, N.value.filterable && c(() => R.value?.focus());
 		}
-		return j({ focusAndOpen: ie }), (n, s) => (f(), a("div", x, [o("div", {
+		return A({ focusAndOpen: ne }), (n, s) => (f(), a("div", b, [o("div", {
 			ref_key: "wrapperRef",
-			ref: R,
+			ref: L,
 			class: "c-wrapper ds-wrapper"
 		}, [o("div", {
 			class: l(["c-input-row pointer", {
-				"c-input-row--sm": P.value.size === "small",
-				"c-input-row--lg": P.value.size === "large"
+				"c-input-row--sm": N.value.size === "small",
+				"c-input-row--lg": N.value.size === "large"
 			}]),
-			onClick: s[1] ||= (e) => ne()
+			onClick: s[1] ||= (e) => ee()
 		}, [
-			U.value ? (f(), a("span", S, h(U.value), 1)) : (f(), a("span", C, h(P.value.placeholder), 1)),
-			P.value.clearable && V.value.length > 0 ? (f(), a("button", {
+			H.value ? (f(), a("span", x, h(H.value), 1)) : (f(), a("span", S, h(N.value.placeholder), 1)),
+			N.value.clearable && B.value.length > 0 ? (f(), a("button", {
 				key: 2,
 				type: "button",
 				class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
-				onClick: s[0] ||= b((e) => re(), ["stop"]),
+				onClick: s[0] ||= y((e) => te(), ["stop"]),
 				"aria-label": "Törlés"
 			}, [...s[6] ||= [o("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : i("", !0),
-			o("span", { class: l(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": I.value }]) }, [...s[7] ||= [o("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 2), I.value ? (f(), a("div", {
+			o("span", { class: l(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": F.value }]) }, [...s[7] ||= [o("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 2), F.value ? (f(), a("div", {
 			key: 0,
-			class: l(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": P.value.multiple }])
+			class: l(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": N.value.multiple }])
 		}, [
-			P.value.filterable ? (f(), a("div", w, [
-				P.value.multiple ? (f(), a("span", {
+			N.value.filterable ? (f(), a("div", C, [
+				N.value.multiple ? (f(), a("span", {
 					key: 0,
-					class: l(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": K.value }]),
-					onClick: s[2] ||= b((e) => J(), ["stop"]),
-					title: K.value ? "Összes kijelölés törlése" : "Összes kijelölése"
-				}, null, 10, T)) : i("", !0),
-				y(o("input", {
+					class: l(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": G.value }]),
+					onClick: s[2] ||= y((e) => q(), ["stop"]),
+					title: G.value ? "Összes kijelölés törlése" : "Összes kijelölése"
+				}, null, 10, w)) : i("", !0),
+				v(o("input", {
 					ref_key: "filterInputRef",
-					ref: z,
+					ref: R,
 					type: "text",
-					id: ee,
+					id: "ds-filter-input",
 					class: "c-focus ds-filter-input",
-					"onUpdate:modelValue": s[3] ||= (e) => L.value = e,
+					"onUpdate:modelValue": s[3] ||= (e) => I.value = e,
 					placeholder: "Filter...",
-					onClick: s[4] ||= b(() => {}, ["stop"])
-				}, null, 512), [[_, L.value]]),
-				L.value ? (f(), a("button", {
+					onClick: s[4] ||= y(() => {}, ["stop"])
+				}, null, 512), [[g, I.value]]),
+				I.value ? (f(), a("button", {
 					key: 1,
 					type: "button",
 					class: "c-icon-btn c-icon-btn--clear ds-filter-clear",
-					onClick: s[5] ||= b((e) => L.value = "", ["stop"]),
+					onClick: s[5] ||= y((e) => I.value = "", ["stop"]),
 					"aria-label": "Szűrők törlése"
 				}, [...s[8] ||= [o("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : i("", !0)
 			])) : i("", !0),
-			o("ul", E, [(f(!0), a(t, null, m(W.value, (e, t) => (f(), a("li", {
+			o("ul", T, [(f(!0), a(t, null, m(U.value, (e, t) => (f(), a("li", {
 				key: e.value ?? `cb-${t}`,
-				class: l(["d-option ds-option", { "ds-option--selected": e.value && q(e.value) }]),
+				class: l(["d-option ds-option", { "ds-option--selected": e.value && K(e.value) }]),
 				tabindex: "0",
-				onClick: (t) => X(e),
-				onKeydown: (t) => te(t, e)
+				onClick: (t) => Y(e),
+				onKeydown: (t) => Q(t, e)
 			}, [
-				P.value.multiple && e.value ? (f(), a("span", {
+				N.value.multiple && e.value ? (f(), a("span", {
 					key: 0,
-					class: l(["c-checkbox", { "c-checkbox--checked": q(e.value) }])
+					class: l(["c-checkbox", { "c-checkbox--checked": K(e.value) }])
 				}, null, 2)) : i("", !0),
 				e.icon ? (f(), a("i", {
 					key: 1,
 					class: l(["fa-fw", e.icon])
 				}, null, 2)) : i("", !0),
-				o("span", { class: l(["d-option__label", { "c-truncate": P.value.textEllipsis }]) }, h(e.label), 3)
-			], 42, D))), 128)), W.value.length === 0 ? (f(), a("li", O, " Nincs találat ")) : i("", !0)]),
-			P.value.multiple || P.value.clearable && V.value.length > 0 ? (f(), a("div", k, [P.value.clearable ? (f(), r(e, {
+				o("span", { class: l(["d-option__label", { "c-truncate": N.value.textEllipsis }]) }, h(e.label), 3)
+			], 42, E))), 128)), U.value.length === 0 ? (f(), a("li", D, " Nincs találat ")) : i("", !0)]),
+			N.value.multiple || N.value.clearable && B.value.length > 0 ? (f(), a("div", O, [N.value.clearable ? (f(), r(e, {
 				key: 0,
 				label: "Törlés",
 				outline: "",
-				onClick: Q
-			})) : i("", !0), P.value.multiple ? (f(), r(e, {
+				onClick: Z
+			})) : i("", !0), N.value.multiple ? (f(), r(e, {
 				key: 1,
 				label: "OK",
 				type: "success",
-				onClick: Z
+				onClick: X
 			})) : i("", !0)])) : i("", !0)
 		], 2)) : i("", !0)], 512)]));
 	}
 });
 //#endregion
-export { j as default, A as dropdownSelectConfigDefaults };
+export { A as default, k as dropdownSelectConfigDefaults };

package/dist/admins-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components20.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\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, useId } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\nconst filterInputId = `ds-input-filter-${useId()}`\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\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\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(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\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        }\"\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=\"filterInputId\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\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=\"filterText = ''\"\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\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 class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              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        </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-components20.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\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'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\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\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\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(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\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        }\"\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            v-model=\"filterText\"\n            placeholder=\"Filter...\"\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=\"filterText = ''\"\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\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 class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              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        </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-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components22.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\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, useId } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\nconst filterInputId = `ds-input-filter-${useId()}`\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\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\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(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\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        }\"\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=\"filterInputId\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\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=\"filterText = ''\"\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\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 class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              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        </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-components22.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\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'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\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\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\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(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\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        }\"\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            v-model=\"filterText\"\n            placeholder=\"Filter...\"\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=\"filterText = ''\"\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\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 class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              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        </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-components69.js

@@ -107,6 +107,7 @@ var D = /* @__PURE__ */ o({
 			]),
 			i("div", b, [i("select", {
 				class: "c-paginator__select",
+				id: "page-size-select",
 				value: o.settings.pageSize,
 				onChange: I
 			}, [(c(), r(t, null, l(C, (e) => i("option", {

package/dist/admins-components69.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components69.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst STORAGE_KEY_PREFIX = 'pagesize-'\n\nexport function getPageSize(storageKey: string): number {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY_PREFIX + storageKey)\n    if (raw) {\n      const size = Number(raw)\n      if (size > 0) return size\n    }\n  } catch {\n    /* ignore */\n  }\n  return 25\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n  return {\n    total: 0,\n    page: 1,\n    pageSize: getPageSize(storageKey),\n  } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\n\nconst props = defineProps<{ settings: PaginatorSettings; storageKey: string }>()\n\nconst emit = defineEmits<{\n  'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n  try {\n    localStorage.setItem(STORAGE_KEY_PREFIX + props.storageKey, String(size))\n  } catch {\n    /* ignore */\n  }\n}\n\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n  props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n  Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n  const total = totalPages.value\n  const current = props.settings.page\n\n  if (total <= SLOT_COUNT) {\n    const pages: number[] = []\n    for (let i = 1; i <= total; i++) pages.push(i)\n    return pages\n  }\n\n  const inner = SLOT_COUNT - 2\n  let winStart = current - 1\n  let winEnd = current + 1\n  if (winStart < 2) {\n    winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n    winStart = 2\n  }\n  if (winEnd > total - 1) {\n    winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n    winEnd = total - 1\n  }\n\n  while (winEnd - winStart + 1 < inner) {\n    const canExtendLeft = winStart > 2\n    const canExtendRight = winEnd < total - 1\n    if (!canExtendLeft && !canExtendRight) break\n\n    const roomLeft = winStart - 2\n    const roomRight = total - 1 - winEnd\n\n    const ellipsisIfExtendLeft =\n      ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n    const ellipsisIfExtendRight =\n      (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n    const newSize = winEnd - winStart + 2\n\n    let extended = false\n    if (\n      canExtendLeft &&\n      (roomLeft >= roomRight || !canExtendRight) &&\n      newSize + ellipsisIfExtendLeft <= inner\n    ) {\n      winStart--\n      extended = true\n    } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n      winEnd++\n      extended = true\n    }\n    if (!extended) break\n  }\n  const showLeftEllipsis = winStart > 2\n  const showRightEllipsis = winEnd < total - 1\n\n  const pages: (number | '...')[] = []\n  pages.push(1)\n  if (showLeftEllipsis) pages.push('...')\n  for (let p = winStart; p <= winEnd; p++) pages.push(p)\n  if (showRightEllipsis) pages.push('...')\n  pages.push(total)\n\n  return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n  const current = props.settings.page\n  const total = totalPages.value\n\n  const isEdge = page === 1 || page === total\n  const isCurrent = page === current\n\n  const isMiddleRange = current > 3 && current < total - 2\n\n  return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n  if (page < 1 || page > totalPages.value || page === props.settings.page) return\n  emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n  const size = Number((event.target as HTMLSelectElement).value)\n  savePageSize(size)\n  emit('update:pagination', { page: 1, pageSize: size })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-paginator-wrapper\">\n      <div class=\"c-paginator\">\n        <div class=\"c-paginator__info\">\n          <span class=\"c-paginator__range\">{{ rangeStart }}&ndash;{{ rangeEnd }}</span>\n          <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n        </div>\n\n        <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n          <Button\n            icon=\"fa-solid fa-chevron-left\"\n            rel=\"prev\"\n            :disabled=\"settings.page <= 1\"\n            :callback=\"() => goToPage(settings.page - 1)\"\n          />\n\n          <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n            <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">&hellip;</span>\n            <button\n              v-else\n              type=\"button\"\n              class=\"c-paginator__page\"\n              :class=\"{\n                'is-active': p === settings.page,\n                'is-hidden-sm': shouldHideOnSmall(p),\n              }\"\n              @click=\"goToPage(p)\"\n            >\n              {{ p }}\n            </button>\n          </template>\n\n          <Button\n            icon=\"fa-solid fa-chevron-right\"\n            rel=\"next\"\n            :disabled=\"settings.page >= totalPages\"\n            :callback=\"() => goToPage(settings.page + 1)\"\n          />\n        </nav>\n\n        <div class=\"c-paginator__size\">\n          <select class=\"c-paginator__select\" :value=\"settings.pageSize\" @change=\"changePageSize\">\n            <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components69.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst STORAGE_KEY_PREFIX = 'pagesize-'\n\nexport function getPageSize(storageKey: string): number {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY_PREFIX + storageKey)\n    if (raw) {\n      const size = Number(raw)\n      if (size > 0) return size\n    }\n  } catch {\n    /* ignore */\n  }\n  return 25\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n  return {\n    total: 0,\n    page: 1,\n    pageSize: getPageSize(storageKey),\n  } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\n\nconst props = defineProps<{ settings: PaginatorSettings; storageKey: string }>()\n\nconst emit = defineEmits<{\n  'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n  try {\n    localStorage.setItem(STORAGE_KEY_PREFIX + props.storageKey, String(size))\n  } catch {\n    /* ignore */\n  }\n}\n\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n  props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n  Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n  const total = totalPages.value\n  const current = props.settings.page\n\n  if (total <= SLOT_COUNT) {\n    const pages: number[] = []\n    for (let i = 1; i <= total; i++) pages.push(i)\n    return pages\n  }\n\n  const inner = SLOT_COUNT - 2\n  let winStart = current - 1\n  let winEnd = current + 1\n  if (winStart < 2) {\n    winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n    winStart = 2\n  }\n  if (winEnd > total - 1) {\n    winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n    winEnd = total - 1\n  }\n\n  while (winEnd - winStart + 1 < inner) {\n    const canExtendLeft = winStart > 2\n    const canExtendRight = winEnd < total - 1\n    if (!canExtendLeft && !canExtendRight) break\n\n    const roomLeft = winStart - 2\n    const roomRight = total - 1 - winEnd\n\n    const ellipsisIfExtendLeft =\n      ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n    const ellipsisIfExtendRight =\n      (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n    const newSize = winEnd - winStart + 2\n\n    let extended = false\n    if (\n      canExtendLeft &&\n      (roomLeft >= roomRight || !canExtendRight) &&\n      newSize + ellipsisIfExtendLeft <= inner\n    ) {\n      winStart--\n      extended = true\n    } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n      winEnd++\n      extended = true\n    }\n    if (!extended) break\n  }\n  const showLeftEllipsis = winStart > 2\n  const showRightEllipsis = winEnd < total - 1\n\n  const pages: (number | '...')[] = []\n  pages.push(1)\n  if (showLeftEllipsis) pages.push('...')\n  for (let p = winStart; p <= winEnd; p++) pages.push(p)\n  if (showRightEllipsis) pages.push('...')\n  pages.push(total)\n\n  return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n  const current = props.settings.page\n  const total = totalPages.value\n\n  const isEdge = page === 1 || page === total\n  const isCurrent = page === current\n\n  const isMiddleRange = current > 3 && current < total - 2\n\n  return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n  if (page < 1 || page > totalPages.value || page === props.settings.page) return\n  emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n  const size = Number((event.target as HTMLSelectElement).value)\n  savePageSize(size)\n  emit('update:pagination', { page: 1, pageSize: size })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-paginator-wrapper\">\n      <div class=\"c-paginator\">\n        <div class=\"c-paginator__info\">\n          <span class=\"c-paginator__range\">{{ rangeStart }}&ndash;{{ rangeEnd }}</span>\n          <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n        </div>\n\n        <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n          <Button\n            icon=\"fa-solid fa-chevron-left\"\n            rel=\"prev\"\n            :disabled=\"settings.page <= 1\"\n            :callback=\"() => goToPage(settings.page - 1)\"\n          />\n\n          <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n            <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">&hellip;</span>\n            <button\n              v-else\n              type=\"button\"\n              class=\"c-paginator__page\"\n              :class=\"{\n                'is-active': p === settings.page,\n                'is-hidden-sm': shouldHideOnSmall(p),\n              }\"\n              @click=\"goToPage(p)\"\n            >\n              {{ p }}\n            </button>\n          </template>\n\n          <Button\n            icon=\"fa-solid fa-chevron-right\"\n            rel=\"next\"\n            :disabled=\"settings.page >= totalPages\"\n            :callback=\"() => goToPage(settings.page + 1)\"\n          />\n        </nav>\n\n        <div class=\"c-paginator__size\">\n          <select class=\"c-paginator__select\" id=\"page-size-select\" :value=\"settings.pageSize\" @change=\"changePageSize\">\n            <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components71.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst STORAGE_KEY_PREFIX = 'pagesize-'\n\nexport function getPageSize(storageKey: string): number {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY_PREFIX + storageKey)\n    if (raw) {\n      const size = Number(raw)\n      if (size > 0) return size\n    }\n  } catch {\n    /* ignore */\n  }\n  return 25\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n  return {\n    total: 0,\n    page: 1,\n    pageSize: getPageSize(storageKey),\n  } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\n\nconst props = defineProps<{ settings: PaginatorSettings; storageKey: string }>()\n\nconst emit = defineEmits<{\n  'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n  try {\n    localStorage.setItem(STORAGE_KEY_PREFIX + props.storageKey, String(size))\n  } catch {\n    /* ignore */\n  }\n}\n\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n  props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n  Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n  const total = totalPages.value\n  const current = props.settings.page\n\n  if (total <= SLOT_COUNT) {\n    const pages: number[] = []\n    for (let i = 1; i <= total; i++) pages.push(i)\n    return pages\n  }\n\n  const inner = SLOT_COUNT - 2\n  let winStart = current - 1\n  let winEnd = current + 1\n  if (winStart < 2) {\n    winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n    winStart = 2\n  }\n  if (winEnd > total - 1) {\n    winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n    winEnd = total - 1\n  }\n\n  while (winEnd - winStart + 1 < inner) {\n    const canExtendLeft = winStart > 2\n    const canExtendRight = winEnd < total - 1\n    if (!canExtendLeft && !canExtendRight) break\n\n    const roomLeft = winStart - 2\n    const roomRight = total - 1 - winEnd\n\n    const ellipsisIfExtendLeft =\n      ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n    const ellipsisIfExtendRight =\n      (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n    const newSize = winEnd - winStart + 2\n\n    let extended = false\n    if (\n      canExtendLeft &&\n      (roomLeft >= roomRight || !canExtendRight) &&\n      newSize + ellipsisIfExtendLeft <= inner\n    ) {\n      winStart--\n      extended = true\n    } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n      winEnd++\n      extended = true\n    }\n    if (!extended) break\n  }\n  const showLeftEllipsis = winStart > 2\n  const showRightEllipsis = winEnd < total - 1\n\n  const pages: (number | '...')[] = []\n  pages.push(1)\n  if (showLeftEllipsis) pages.push('...')\n  for (let p = winStart; p <= winEnd; p++) pages.push(p)\n  if (showRightEllipsis) pages.push('...')\n  pages.push(total)\n\n  return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n  const current = props.settings.page\n  const total = totalPages.value\n\n  const isEdge = page === 1 || page === total\n  const isCurrent = page === current\n\n  const isMiddleRange = current > 3 && current < total - 2\n\n  return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n  if (page < 1 || page > totalPages.value || page === props.settings.page) return\n  emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n  const size = Number((event.target as HTMLSelectElement).value)\n  savePageSize(size)\n  emit('update:pagination', { page: 1, pageSize: size })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-paginator-wrapper\">\n      <div class=\"c-paginator\">\n        <div class=\"c-paginator__info\">\n          <span class=\"c-paginator__range\">{{ rangeStart }}&ndash;{{ rangeEnd }}</span>\n          <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n        </div>\n\n        <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n          <Button\n            icon=\"fa-solid fa-chevron-left\"\n            rel=\"prev\"\n            :disabled=\"settings.page <= 1\"\n            :callback=\"() => goToPage(settings.page - 1)\"\n          />\n\n          <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n            <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">&hellip;</span>\n            <button\n              v-else\n              type=\"button\"\n              class=\"c-paginator__page\"\n              :class=\"{\n                'is-active': p === settings.page,\n                'is-hidden-sm': shouldHideOnSmall(p),\n              }\"\n              @click=\"goToPage(p)\"\n            >\n              {{ p }}\n            </button>\n          </template>\n\n          <Button\n            icon=\"fa-solid fa-chevron-right\"\n            rel=\"next\"\n            :disabled=\"settings.page >= totalPages\"\n            :callback=\"() => goToPage(settings.page + 1)\"\n          />\n        </nav>\n\n        <div class=\"c-paginator__size\">\n          <select class=\"c-paginator__select\" :value=\"settings.pageSize\" @change=\"changePageSize\">\n            <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components71.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst STORAGE_KEY_PREFIX = 'pagesize-'\n\nexport function getPageSize(storageKey: string): number {\n  try {\n    const raw = localStorage.getItem(STORAGE_KEY_PREFIX + storageKey)\n    if (raw) {\n      const size = Number(raw)\n      if (size > 0) return size\n    }\n  } catch {\n    /* ignore */\n  }\n  return 25\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n  return {\n    total: 0,\n    page: 1,\n    pageSize: getPageSize(storageKey),\n  } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\n\nconst props = defineProps<{ settings: PaginatorSettings; storageKey: string }>()\n\nconst emit = defineEmits<{\n  'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n  try {\n    localStorage.setItem(STORAGE_KEY_PREFIX + props.storageKey, String(size))\n  } catch {\n    /* ignore */\n  }\n}\n\nconst totalPages = computed(() =>\n  Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n  props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n  Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n  const total = totalPages.value\n  const current = props.settings.page\n\n  if (total <= SLOT_COUNT) {\n    const pages: number[] = []\n    for (let i = 1; i <= total; i++) pages.push(i)\n    return pages\n  }\n\n  const inner = SLOT_COUNT - 2\n  let winStart = current - 1\n  let winEnd = current + 1\n  if (winStart < 2) {\n    winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n    winStart = 2\n  }\n  if (winEnd > total - 1) {\n    winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n    winEnd = total - 1\n  }\n\n  while (winEnd - winStart + 1 < inner) {\n    const canExtendLeft = winStart > 2\n    const canExtendRight = winEnd < total - 1\n    if (!canExtendLeft && !canExtendRight) break\n\n    const roomLeft = winStart - 2\n    const roomRight = total - 1 - winEnd\n\n    const ellipsisIfExtendLeft =\n      ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n    const ellipsisIfExtendRight =\n      (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n    const newSize = winEnd - winStart + 2\n\n    let extended = false\n    if (\n      canExtendLeft &&\n      (roomLeft >= roomRight || !canExtendRight) &&\n      newSize + ellipsisIfExtendLeft <= inner\n    ) {\n      winStart--\n      extended = true\n    } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n      winEnd++\n      extended = true\n    }\n    if (!extended) break\n  }\n  const showLeftEllipsis = winStart > 2\n  const showRightEllipsis = winEnd < total - 1\n\n  const pages: (number | '...')[] = []\n  pages.push(1)\n  if (showLeftEllipsis) pages.push('...')\n  for (let p = winStart; p <= winEnd; p++) pages.push(p)\n  if (showRightEllipsis) pages.push('...')\n  pages.push(total)\n\n  return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n  const current = props.settings.page\n  const total = totalPages.value\n\n  const isEdge = page === 1 || page === total\n  const isCurrent = page === current\n\n  const isMiddleRange = current > 3 && current < total - 2\n\n  return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n  if (page < 1 || page > totalPages.value || page === props.settings.page) return\n  emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n  const size = Number((event.target as HTMLSelectElement).value)\n  savePageSize(size)\n  emit('update:pagination', { page: 1, pageSize: size })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-paginator-wrapper\">\n      <div class=\"c-paginator\">\n        <div class=\"c-paginator__info\">\n          <span class=\"c-paginator__range\">{{ rangeStart }}&ndash;{{ rangeEnd }}</span>\n          <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n        </div>\n\n        <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n          <Button\n            icon=\"fa-solid fa-chevron-left\"\n            rel=\"prev\"\n            :disabled=\"settings.page <= 1\"\n            :callback=\"() => goToPage(settings.page - 1)\"\n          />\n\n          <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n            <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">&hellip;</span>\n            <button\n              v-else\n              type=\"button\"\n              class=\"c-paginator__page\"\n              :class=\"{\n                'is-active': p === settings.page,\n                'is-hidden-sm': shouldHideOnSmall(p),\n              }\"\n              @click=\"goToPage(p)\"\n            >\n              {{ p }}\n            </button>\n          </template>\n\n          <Button\n            icon=\"fa-solid fa-chevron-right\"\n            rel=\"next\"\n            :disabled=\"settings.page >= totalPages\"\n            :callback=\"() => goToPage(settings.page + 1)\"\n          />\n        </nav>\n\n        <div class=\"c-paginator__size\">\n          <select class=\"c-paginator__select\" id=\"page-size-select\" :value=\"settings.pageSize\" @change=\"changePageSize\">\n            <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n          </select>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":""}