admins-components 9.0.41 → 9.0.42

package/dist/admins-components26.js

@@ -1,79 +1,223 @@
-import { sizeToClass as e } from "./admins-components4.js";
-import { useDropdownAnchor as t } from "./admins-components12.js";
-import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h } from "vue";
-//#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ds-options c-scroll" }, y = ["onClick", "aria-label"], b = /* @__PURE__ */ c({
-	__name: "DropdownMenu",
+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 c, defineComponent as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, onMounted as ee, openBlock as p, ref as m, renderList as h, toDisplayString as g, watch as _, withModifiers as v } from "vue";
+//#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "ac-component" }, te = {
+	key: 0,
+	class: "c-truncate ds-value"
+}, ne = {
+	key: 1,
+	class: "c-placeholder"
+}, re = {
+	key: 0,
+	class: "ds-filter"
+}, b = ["title"], x = ["value", "placeholder"], S = { class: "ds-options c-scroll" }, C = {
+	key: 0,
+	class: "ds-option ds-option--loading"
+}, w = ["onClick", "onKeydown"], T = ["innerHTML"], E = {
+	key: 0,
+	class: "ds-option ds-option--empty"
+}, D = {
+	key: 1,
+	class: "c-footer"
+}, O = {
+	placeholder: "Válassz...",
+	filterable: !0,
+	filterPlaceholder: "Kezdj el gépelni...",
+	clearable: !0,
+	textEllipsis: !0,
+	multiple: !1,
+	lazy: !1,
+	loading: !1,
+	size: "normal",
+	highlight: !0
+}, k = /* @__PURE__ */ l({
+	__name: "DropdownSelect",
 	props: {
-		size: { default: "normal" },
-		icon: { default: void 0 },
-		label: { default: void 0 },
-		ariaLabel: {},
-		textEllipsis: {
-			type: Boolean,
-			default: !0
-		},
-		type: { default: "normal" },
-		items: {},
-		labelAlignmentFix: {
-			type: Boolean,
-			default: !1
-		}
+		modelValue: { default: null },
+		options: {},
+		config: { default: () => ({ ...O }) }
 	},
-	setup(c) {
-		let b = c, x = f(null), S = f(null), { isOpen: C, dropdownStyle: w } = t(x, S, { extraStyle: (e) => ({
-			minWidth: `${e.width}px`,
-			maxWidth: `${e.width * 2}px`
-		}) });
-		function T() {
-			C.value = !C.value;
-		}
-		function E(e) {
-			e.callback?.(), C.value = !1;
-		}
-		return (t, f) => (d(), o("div", g, [s("div", {
+	emits: ["update:modelValue", "filter-input"],
+	setup(l, { expose: k, emit: A }) {
+		let j = l, M = r(() => ({
+			...O,
+			...j.config
+		})), N = A, P = m(!1), F = m(""), I = m(null), L = m(null), R = m([]), z = m(B(j.modelValue));
+		function B(e) {
+			return e == null ? [] : Array.isArray(e) ? [...e] : [e];
+		}
+		_(() => j.modelValue, (e) => {
+			z.value = B(e);
+		}), _(P, (e) => {
+			e && (F.value = "", M.value.filterable && u(() => L.value?.focus()), M.value.lazy && (R.value = [...z.value]));
+		});
+		function V(e) {
+			F.value = e, N("filter-input", e);
+		}
+		let H = r(() => z.value.length === 0 ? null : M.value.multiple ? z.value.length > 2 ? `${z.value.length} kiválasztva` : z.value.map((e) => j.options.find((t) => t.value === e)?.label ?? e).join(", ") : j.options.find((e) => e.value === z.value[0])?.label ?? null), U = r(() => {
+			let e = F.value.toLowerCase();
+			return e ? j.options.filter((t) => t.label.toLowerCase().includes(e)) : j.options;
+		});
+		function W(e) {
+			return e.replace(/[&<>"']/g, (e) => ({
+				"&": "&amp;",
+				"<": "&lt;",
+				">": "&gt;",
+				"\"": "&quot;",
+				"'": "&#39;"
+			})[e]);
+		}
+		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 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.includes(t.value));
+		});
+		function J(e) {
+			return (M.value.lazy && P.value ? R : z).value.includes(e);
+		}
+		function Y() {
+			let e = M.value.lazy && P.value ? R : z, t = K.value.map((e) => e.value);
+			if (q.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];
+			}
+			M.value.lazy || N("update:modelValue", z.value.length > 0 ? [...z.value] : null);
+		}
+		function X(e, t) {
+			let n = e.indexOf(t);
+			return n >= 0 ? e.filter((e, t) => t !== n) : [...e, t];
+		}
+		function Z(e) {
+			if (e.callback) {
+				e.callback(), P.value = !1;
+				return;
+			}
+			let t = e.value;
+			t && (M.value.multiple ? M.value.lazy ? R.value = X(R.value, t) : (z.value = X(z.value, t), N("update:modelValue", z.value.length > 0 ? [...z.value] : null)) : (z.value = [t], N("update:modelValue", t), P.value = !1));
+		}
+		function Q() {
+			M.value.lazy && (z.value = [...R.value], N("update:modelValue", R.value.length > 0 ? [...R.value] : null)), P.value = !1;
+		}
+		function ie() {
+			M.value.lazy ? R.value = [] : (z.value = [], N("update:modelValue", null));
+		}
+		function ae(e, t) {
+			e.key === " " ? (e.preventDefault(), Z(t)) : e.key === "Enter" && (e.preventDefault(), Q());
+		}
+		function $(e) {
+			I.value && !I.value.contains(e.target) && (P.value = !1);
+		}
+		ee(() => document.addEventListener("mousedown", $)), f(() => {
+			document.removeEventListener("mousedown", $);
+		});
+		function oe() {
+			P.value = !P.value, P.value && M.value.filterable && (F.value = "", N("filter-input", ""));
+		}
+		function se() {
+			z.value = [], N("update:modelValue", null), P.value = !1;
+		}
+		function ce() {
+			P.value = !0, M.value.filterable && u(() => L.value?.focus());
+		}
+		function le() {
+			F.value = "", N("filter-input", "");
+		}
+		return k({ focusAndOpen: ce }), (r, l) => (p(), o("div", y, [s("div", {
 			ref_key: "wrapperRef",
-			ref: x,
-			class: "ds-wrapper d-inline-block"
-		}, [s("button", {
-			type: "button",
-			class: l(["c-btn dm-trigger", [
-				c.size === "small" && "c-btn-sm",
-				c.size === "large" && "c-btn-lg",
-				c.type !== "normal" && `c-btn-${c.type}`
-			]]),
-			"aria-label": c.ariaLabel ?? c.label,
-			onClick: f[0] ||= (e) => T()
+			ref: I,
+			class: "c-wrapper ds-wrapper"
+		}, [s("div", {
+			class: d(["c-input-row pointer", {
+				"c-input-row--sm": M.value.size === "small",
+				"c-input-row--lg": M.value.size === "large"
+			}]),
+			onClick: l[1] ||= (e) => oe()
 		}, [
-			c.icon ? (d(), o("i", {
+			H.value ? (p(), o("span", te, g(H.value), 1)) : (p(), o("span", ne, g(M.value.placeholder), 1)),
+			M.value.clearable && z.value.length > 0 ? (p(), o("button", {
+				key: 2,
+				type: "button",
+				class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
+				onClick: l[0] ||= v((e) => se(), ["stop"]),
+				"aria-label": "Törlés"
+			}, [...l[6] ||= [s("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : a("", !0),
+			s("span", { class: d(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": P.value }]) }, [...l[7] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 2), P.value ? (p(), o("div", {
+			key: 0,
+			class: d(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": M.value.multiple }])
+		}, [
+			M.value.filterable ? (p(), o("div", re, [
+				M.value.multiple ? (p(), o("span", {
+					key: 0,
+					class: d(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": q.value }]),
+					onClick: l[2] ||= v((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: L,
+					type: "text",
+					id: "ds-filter-input",
+					class: "c-focus ds-filter-input",
+					value: F.value,
+					onInput: l[3] ||= (e) => V(e.target.value),
+					autocomplete: "off",
+					placeholder: M.value.filterPlaceholder,
+					onClick: l[4] ||= v(() => {}, ["stop"])
+				}, null, 40, x),
+				F.value ? (p(), o("button", {
+					key: 1,
+					type: "button",
+					class: "c-icon-btn c-icon-btn--clear ds-filter-clear",
+					onClick: l[5] ||= v((e) => le(), ["stop"]),
+					"aria-label": "Szűrők törlése"
+				}, [...l[8] ||= [s("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : a("", !0)
+			])) : a("", !0),
+			s("ul", S, [M.value.loading ? (p(), o("li", C, [c(t, {
+				size: "2rem",
+				color: "var(--neutral-300)",
+				class: "m-auto p-3"
+			})])) : (p(), o(n, { key: 1 }, [(p(!0), o(n, null, h(U.value, (e, t) => (p(), o("li", {
+				key: e.value ?? `cb-${t}`,
+				class: d(["d-option ds-option", { "ds-option--selected": e.value && J(e.value) }]),
+				tabindex: "0",
+				onClick: (t) => Z(e),
+				onKeydown: (t) => ae(t, e)
+			}, [
+				M.value.multiple && e.value ? (p(), o("span", {
+					key: 0,
+					class: d(["c-checkbox", { "c-checkbox--checked": J(e.value) }])
+				}, null, 2)) : a("", !0),
+				e.icon ? (p(), o("i", {
+					key: 1,
+					class: d(["fa-fw", e.icon])
+				}, null, 2)) : a("", !0),
+				s("span", {
+					class: d(["d-option__label", { "c-truncate": M.value.textEllipsis }]),
+					innerHTML: G(e.label)
+				}, null, 10, T)
+			], 42, w))), 128)), U.value.length === 0 ? (p(), o("li", E, " Nincs találat ")) : a("", !0)], 64))]),
+			M.value.multiple || M.value.clearable && z.value.length > 0 ? (p(), o("div", D, [M.value.clearable ? (p(), i(e, {
 				key: 0,
-				class: l(["fa-fw", c.icon])
-			}, null, 2)) : a("", !0),
-			c.label ? (d(), o("span", {
+				label: "Törlés",
+				outline: "",
+				onClick: ie
+			})) : a("", !0), M.value.multiple ? (p(), i(e, {
 				key: 1,
-				class: l({ "align-center-fix ": b.labelAlignmentFix })
-			}, m(c.label), 3)) : a("", !0),
-			s("span", { class: l(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": h(C) }]) }, [...f[1] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, _), (d(), i(r, { to: "body" }, [h(C) ? (d(), o("div", {
-			key: 0,
-			ref_key: "dropdownRef",
-			ref: S,
-			class: "c-dropdown ds-wrapper ac-component",
-			style: u(h(w))
-		}, [s("ul", v, [(d(!0), o(n, null, p(c.items, (t, n) => (d(), o("li", {
-			key: `cb-${n}`,
-			class: l(["d-option dm-option c-field-size c-type-color", {
-				[`c-field-size--${h(e)(t.size)}`]: t.size,
-				[`c-type-color--${t.type}`]: t.type
-			}]),
-			tabindex: "0",
-			onClick: (e) => E(t),
-			"aria-label": t.ariaLabel ?? t.label
-		}, [t.icon ? (d(), o("i", {
-			key: 0,
-			class: l(["fa-fw", t.icon])
-		}, null, 2)) : a("", !0), s("span", { class: l(["d-option__label", { "c-truncate": b.textEllipsis }]) }, m(t.label), 3)], 10, y))), 128))])], 4)) : a("", !0)]))], 512)]));
+				label: "OK",
+				type: "success",
+				onClick: Q
+			})) : a("", !0)])) : a("", !0)
+		], 2)) : a("", !0)], 512)]));
 	}
 });
 //#endregion
-export { b as default };
+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/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\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\n          v-if=\"isOpen\"\n          ref=\"dropdownRef\"\n          class=\"c-dropdown ds-wrapper ac-component\"\n          :style=\"dropdownStyle\"\n        >\n          <ul class=\"ds-options c-scroll\">\n            <li\n              v-for=\"(item, idx) in items\"\n              :key=\"`cb-${idx}`\"\n              class=\"d-option dm-option c-field-size c-type-color\"\n              :class=\"{\n                [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                [`c-type-color--${item.type}`]: item.type,\n              }\"\n              tabindex=\"0\"\n              @click=\"selectItem(item)\"\n              :aria-label=\"item.ariaLabel ?? item.label\"\n            >\n              <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n              <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                item.label\n              }}</span>\n            </li>\n          </ul>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6BA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa,EAC3E,aAAa,OAAU;GACrB,UAAU,GAAG,EAAK,MAAM;GACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;EAC9B,GACF,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;yBAIE,EAuDM,OAvDN,GAuDM,CAtDJ,EAqDM,OAAA;YArDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAsBS,UAAA;GArBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACJ,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAKrI,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAA,EAAA,GAAT,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAC7B,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFW,OAAK,EAAA,EAAA,qBAAyB,EAAM,kBAAiB,CAAA;QACvE,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BACA,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAE5C,EAA8C,KAAA,EAA3C,OAAM,iCAAgC,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;mBAI7C,EA2BW,GAAA,EA3BD,IAAG,OAAM,GAAA,CAET,EAAA,CAAA,KAAA,EAAA,GADR,EAyBM,OAAA;;YAvBA;GAAJ,KAAI;GACJ,OAAM;GACL,OAAK,EAAE,EAAA,CAAA,CAAa;MAErB,EAkBK,MAlBL,GAkBK,EAAA,EAAA,EAAA,GAjBH,EAgBK,GAAA,MAAA,EAfmB,EAAA,QAAd,GAAM,YADhB,EAgBK,MAAA;GAdF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;sBACR,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAAwC,EAAK,SAAS,EAAK;;GAIvI,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;MAE3B,EAAK,QAAA,EAAA,GAAd,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;4BACnD,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EAAA,GAAA,EACtE,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}
+{"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}\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}\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  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  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\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        }\"\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

@@ -1,52 +1,7 @@
-import { computed as e, onBeforeUnmount as t, onMounted as n, ref as r } from "vue";
-//#region src/composables/useSwipeToClose.ts
-function i(i, a) {
-	let { position: o, onClose: s, distanceThreshold: c = .35, velocityThreshold: l = .4, verticalRatio: u = .7, closeDirections: d = "away" } = a, f = r(!1), p = r(0), m = 0, h = 0, g = 0, _ = null, v = 0, y = e(() => o.value === "left" || o.value === "right");
-	function b(e) {
-		if (!y.value || e.touches.length !== 1) return;
-		let t = e.touches[0];
-		if (!t) return;
-		let n = i.value;
-		n && (m = t.clientX, h = t.clientY, g = performance.now(), v = n.offsetWidth, f.value = !0, p.value = 0, _ = t.identifier);
-	}
-	function x(e) {
-		if (!f.value || _ === null) return;
-		let t = Array.from(e.touches).find((e) => e.identifier === _);
-		if (!t) return;
-		let n = t.clientX - m, r = t.clientY - h;
-		if (Math.abs(r) > Math.abs(n) * u && Math.abs(r) > 10) {
-			f.value = !1, p.value = 0;
-			return;
-		}
-		o.value === "left" ? p.value = d === "both" ? n : Math.min(0, n) : p.value = d === "both" ? n : Math.max(0, n), e.cancelable && e.preventDefault();
-	}
-	function S(e) {
-		if (!f.value) return;
-		let t = Array.from(e.changedTouches).find((e) => e.identifier === _) ?? e.changedTouches[0], n = t ? t.clientX - m : 0, r = Math.max(1, performance.now() - g), i = Math.abs(n) / r, a = Math.abs(n) / Math.max(v, 1) >= c || i >= l, u = o.value === "left" && n < 0 || o.value === "right" && n > 0;
-		a && (d === "both" || u) && s(), f.value = !1, _ = null, p.value = 0;
-	}
-	function C() {
-		f.value = !1, _ = null, p.value = 0;
-	}
-	let w = e(() => {
-		if (!(!f.value || p.value === 0)) return {
-			transform: `translateX(${p.value}px)`,
-			transition: "none"
-		};
-	});
-	return n(() => {
-		document.addEventListener("touchmove", x, { passive: !1 });
-	}), t(() => {
-		document.removeEventListener("touchmove", x);
-	}), {
-		isDragging: f,
-		panelStyle: w,
-		touchHandlers: {
-			onTouchstart: b,
-			onTouchend: S,
-			onTouchcancel: C
-		}
-	};
-}
+import './src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css';
+import e from "./admins-components26.js";
+/* empty css                    */
+//#region src/components/DropdownSelect.vue
+var t = e;
 //#endregion
-export { i as useSwipeToClose };
+export { t as default };

package/dist/admins-components28.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components28.js","names":[],"sources":["../src/composables/useSwipeToClose.ts"],"sourcesContent":["import { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport type { Ref } from 'vue'\n\nexport interface UseSwipeToCloseOptions {\n  /**\n   * The panel's anchor position. The composable only attempts to close on\n   * horizontal positions ('left' / 'right').\n   */\n  position: Ref<'left' | 'right' | 'top' | 'bottom'>\n  /** Called when the user completes a qualifying swipe-to-close gesture. */\n  onClose: () => void\n  /**\n   * Fraction of the panel width that must be covered by the swipe to trigger\n   * a close. Defaults to 0.35 (35%).\n   */\n  distanceThreshold?: number\n  /**\n   * Horizontal velocity (px/ms) above which a shorter swipe still closes.\n   * Defaults to 0.4.\n   */\n  velocityThreshold?: number\n  /**\n   * Vertical-movement ratio above which the gesture is treated as a scroll\n   * and ignored. Defaults to 0.7 (vertical must be ≤ 70% of horizontal).\n   */\n  verticalRatio?: number\n  /**\n   * Which swipe directions count as a close gesture.\n   *\n   * - `'away'` (default): only swipes toward the anchored edge close the\n   *   panel (left-positioned panel closes on left swipe, right-positioned\n   *   on right swipe).\n   * - `'both'`: swipes in either horizontal direction close the panel.\n   *\n   * Swipes against the anchored edge are visually constrained so the panel\n   * doesn't get pushed past its anchor.\n   */\n  closeDirections?: 'away' | 'both'\n}\n\nexport interface UseSwipeToCloseReturn {\n  /** Whether a swipe is currently in progress. */\n  isDragging: Ref<boolean>\n  /** Inline style to apply to the panel element (transform + transition). */\n  panelStyle: Ref<Record<string, string> | undefined>\n  /** Handlers to bind to the panel element's touch events. */\n  touchHandlers: {\n    onTouchstart: (e: TouchEvent) => void\n    onTouchend: (e: TouchEvent) => void\n    onTouchcancel: () => void\n  }\n}\n\nexport function useSwipeToClose(\n  panelRef: Ref<HTMLElement | null>,\n  options: UseSwipeToCloseOptions,\n): UseSwipeToCloseReturn {\n  const {\n    position,\n    onClose,\n    distanceThreshold = 0.35,\n    velocityThreshold = 0.4,\n    verticalRatio = 0.7,\n    closeDirections = 'away',\n  } = options\n\n  const isDragging = ref(false)\n  const dragOffset = ref(0)\n\n  let startX = 0\n  let startY = 0\n  let startTime = 0\n  let trackingPointer: number | null = null\n  let panelWidth = 0\n\n  const isHorizontal = computed(\n    () => position.value === 'left' || position.value === 'right',\n  )\n\n  function onTouchStart(e: TouchEvent) {\n    if (!isHorizontal.value || e.touches.length !== 1) return\n    const touch = e.touches[0]\n    if (!touch) return\n    const panel = panelRef.value\n    if (!panel) return\n\n    startX = touch.clientX\n    startY = touch.clientY\n    startTime = performance.now()\n    panelWidth = panel.offsetWidth\n    isDragging.value = true\n    dragOffset.value = 0\n    trackingPointer = touch.identifier\n  }\n\n  function onTouchMove(e: TouchEvent) {\n    if (!isDragging.value || trackingPointer === null) return\n    const touch = Array.from(e.touches).find((t) => t.identifier === trackingPointer)\n    if (!touch) return\n\n    const dx = touch.clientX - startX\n    const dy = touch.clientY - startY\n\n    // Vertical-dominant gesture: let the browser scroll the panel content.\n    if (Math.abs(dy) > Math.abs(dx) * verticalRatio && Math.abs(dy) > 10) {\n      isDragging.value = false\n      dragOffset.value = 0\n      return\n    }\n\n    // The panel can't be dragged past its anchor: the edge closest to the\n    // panel's position acts as a wall. When closeDirections === 'away' the\n    // inward direction (away from the anchor) is also clamped at 0 so the\n    // gesture mirrors a \"dismiss\" only toward the screen edge.\n    if (position.value === 'left') {\n      dragOffset.value = closeDirections === 'both' ? dx : Math.min(0, dx)\n    } else {\n      dragOffset.value = closeDirections === 'both' ? dx : Math.max(0, dx)\n    }\n\n    if (e.cancelable) e.preventDefault()\n  }\n\n  function onTouchEnd(e: TouchEvent) {\n    if (!isDragging.value) return\n\n    const touch =\n      Array.from(e.changedTouches).find((t) => t.identifier === trackingPointer) ??\n      e.changedTouches[0]\n\n    const dx = touch ? touch.clientX - startX : 0\n    const dt = Math.max(1, performance.now() - startTime)\n    const velocity = Math.abs(dx) / dt\n    const distanceRatio = Math.abs(dx) / Math.max(panelWidth, 1)\n\n    const shouldClose =\n      distanceRatio >= distanceThreshold || velocity >= velocityThreshold\n    const swipedTowardEdge =\n      (position.value === 'left' && dx < 0) || (position.value === 'right' && dx > 0)\n\n    if (shouldClose && (closeDirections === 'both' || swipedTowardEdge)) {\n      onClose()\n    }\n\n    isDragging.value = false\n    trackingPointer = null\n    dragOffset.value = 0\n  }\n\n  function onTouchCancel() {\n    isDragging.value = false\n    trackingPointer = null\n    dragOffset.value = 0\n  }\n\n  const panelStyle = computed<Record<string, string> | undefined>(() => {\n    if (!isDragging.value || dragOffset.value === 0) return undefined\n    return {\n      transform: `translateX(${dragOffset.value}px)`,\n      transition: 'none',\n    }\n  })\n\n  onMounted(() => {\n    // Non-passive so we can preventDefault and stop the page from scrolling\n    // horizontally while the panel is being dragged.\n    document.addEventListener('touchmove', onTouchMove, { passive: false })\n  })\n\n  onBeforeUnmount(() => {\n    document.removeEventListener('touchmove', onTouchMove)\n  })\n\n  return {\n    isDragging,\n    panelStyle,\n    touchHandlers: {\n      onTouchstart: onTouchStart,\n      onTouchend: onTouchEnd,\n      onTouchcancel: onTouchCancel,\n    },\n  }\n}\n"],"mappings":";;AAqDA,SAAgB,EACd,GACA,GACuB;CACvB,IAAM,EACJ,aACA,YACA,uBAAoB,KACpB,uBAAoB,IACpB,mBAAgB,IAChB,qBAAkB,WAChB,GAEE,IAAa,EAAI,EAAK,GACtB,IAAa,EAAI,CAAC,GAEpB,IAAS,GACT,IAAS,GACT,IAAY,GACZ,IAAiC,MACjC,IAAa,GAEX,IAAe,QACb,EAAS,UAAU,UAAU,EAAS,UAAU,OACxD;CAEA,SAAS,EAAa,GAAe;EACnC,IAAI,CAAC,EAAa,SAAS,EAAE,QAAQ,WAAW,GAAG;EACnD,IAAM,IAAQ,EAAE,QAAQ;EACxB,IAAI,CAAC,GAAO;EACZ,IAAM,IAAQ,EAAS;EAClB,MAEL,IAAS,EAAM,SACf,IAAS,EAAM,SACf,IAAY,YAAY,IAAI,GAC5B,IAAa,EAAM,aACnB,EAAW,QAAQ,IACnB,EAAW,QAAQ,GACnB,IAAkB,EAAM;CAC1B;CAEA,SAAS,EAAY,GAAe;EAClC,IAAI,CAAC,EAAW,SAAS,MAAoB,MAAM;EACnD,IAAM,IAAQ,MAAM,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,EAAE,eAAe,CAAe;EAChF,IAAI,CAAC,GAAO;EAEZ,IAAM,IAAK,EAAM,UAAU,GACrB,IAAK,EAAM,UAAU;EAG3B,IAAI,KAAK,IAAI,CAAE,IAAI,KAAK,IAAI,CAAE,IAAI,KAAiB,KAAK,IAAI,CAAE,IAAI,IAAI;GAEpE,AADA,EAAW,QAAQ,IACnB,EAAW,QAAQ;GACnB;EACF;EAYA,AANI,EAAS,UAAU,SACrB,EAAW,QAAQ,MAAoB,SAAS,IAAK,KAAK,IAAI,GAAG,CAAE,IAEnE,EAAW,QAAQ,MAAoB,SAAS,IAAK,KAAK,IAAI,GAAG,CAAE,GAGjE,EAAE,cAAY,EAAE,eAAe;CACrC;CAEA,SAAS,EAAW,GAAe;EACjC,IAAI,CAAC,EAAW,OAAO;EAEvB,IAAM,IACJ,MAAM,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,EAAE,eAAe,CAAe,KACzE,EAAE,eAAe,IAEb,IAAK,IAAQ,EAAM,UAAU,IAAS,GACtC,IAAK,KAAK,IAAI,GAAG,YAAY,IAAI,IAAI,CAAS,GAC9C,IAAW,KAAK,IAAI,CAAE,IAAI,GAG1B,IAFgB,KAAK,IAAI,CAAE,IAAI,KAAK,IAAI,GAAY,CAAC,KAGxC,KAAqB,KAAY,GAC9C,IACH,EAAS,UAAU,UAAU,IAAK,KAAO,EAAS,UAAU,WAAW,IAAK;EAQ/E,AANI,MAAgB,MAAoB,UAAU,MAChD,EAAQ,GAGV,EAAW,QAAQ,IACnB,IAAkB,MAClB,EAAW,QAAQ;CACrB;CAEA,SAAS,IAAgB;EAGvB,AAFA,EAAW,QAAQ,IACnB,IAAkB,MAClB,EAAW,QAAQ;CACrB;CAEA,IAAM,IAAa,QAAmD;EAChE,OAAC,EAAW,SAAS,EAAW,UAAU,IAC9C,OAAO;GACL,WAAW,cAAc,EAAW,MAAM;GAC1C,YAAY;EACd;CACF,CAAC;CAYD,OAVA,QAAgB;EAGd,SAAS,iBAAiB,aAAa,GAAa,EAAE,SAAS,GAAM,CAAC;CACxE,CAAC,GAED,QAAsB;EACpB,SAAS,oBAAoB,aAAa,CAAW;CACvD,CAAC,GAEM;EACL;EACA;EACA,eAAe;GACb,cAAc;GACd,YAAY;GACZ,eAAe;EACjB;CACF;AACF"}
+{"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}\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}\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  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  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\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        }\"\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-components29.js

@@ -1,75 +1,79 @@
-import e from "./admins-components6.js";
-import { useSwipeToClose as t } from "./admins-components28.js";
-import { Teleport as n, Transition as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeDefaults as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, withCtx as x, withModifiers as S } from "vue";
-//#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "ac-component" }, w = {
-	key: 0,
-	class: "sb-header"
-}, T = { class: "sb-title" }, E = { class: "sb-content c-scroll" }, D = {
-	open: !1,
-	position: "left",
-	hasHeader: !0,
-	withBackdrop: !0
-}, O = /* @__PURE__ */ l({
-	__name: "Sidebar",
-	props: /* @__PURE__ */ u({
-		open: { type: Boolean },
-		position: {},
-		title: {},
-		hasHeader: { type: Boolean },
-		withBackdrop: { type: Boolean }
-	}, { ...D }),
-	emits: ["close"],
-	setup(l, { emit: u }) {
-		let D = l, O = u;
-		function k() {
-			O("close");
+import { sizeToClass as e } from "./admins-components4.js";
+import { useDropdownAnchor as t } from "./admins-components12.js";
+import { Fragment as n, Teleport as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as h } from "vue";
+//#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ac-component" }, y = { class: "ds-options c-scroll" }, b = ["onClick", "aria-label"], x = /* @__PURE__ */ c({
+	__name: "DropdownMenu",
+	props: {
+		size: { default: "normal" },
+		icon: { default: void 0 },
+		label: { default: void 0 },
+		ariaLabel: {},
+		textEllipsis: {
+			type: Boolean,
+			default: !0
+		},
+		type: { default: "normal" },
+		items: {},
+		labelAlignmentFix: {
+			type: Boolean,
+			default: !1
 		}
-		function A() {
-			k();
+	},
+	setup(c) {
+		let x = c, S = f(null), C = f(null), { isOpen: w, dropdownStyle: T } = t(S, C, { extraStyle: (e) => ({
+			minWidth: `${e.width}px`,
+			maxWidth: `${e.width * 2}px`
+		}) });
+		function E() {
+			w.value = !w.value;
 		}
-		function j(e) {
-			e.key === "Escape" && k();
+		function D(e) {
+			e.callback?.(), w.value = !1;
 		}
-		let M = g(null), { isDragging: N, panelStyle: P, touchHandlers: F } = t(M, {
-			position: y(D, "position"),
-			onClose: k,
-			closeDirections: "both"
-		});
-		return m(() => {
-			document.addEventListener("keydown", j);
-		}), p(() => {
-			document.removeEventListener("keydown", j);
-		}), (t, u) => (h(), i(n, { to: "body" }, [s("div", C, [c(r, { name: "sb-fade" }, {
-			default: x(() => [l.open && l.withBackdrop ? (h(), o("div", {
+		return (t, f) => (d(), o("div", g, [s("div", {
+			ref_key: "wrapperRef",
+			ref: S,
+			class: "ds-wrapper d-inline-block"
+		}, [s("button", {
+			type: "button",
+			class: l(["c-btn dm-trigger", [
+				c.size === "small" && "c-btn-sm",
+				c.size === "large" && "c-btn-lg",
+				c.type !== "normal" && `c-btn-${c.type}`
+			]]),
+			"aria-label": c.ariaLabel ?? c.label,
+			onClick: f[0] ||= (e) => E()
+		}, [
+			c.icon ? (d(), o("i", {
 				key: 0,
-				class: "sb-backdrop",
-				onClick: S(A, ["self"])
-			})) : a("", !0)]),
-			_: 1
-		}), c(r, { name: `sb-slide-${l.position}` }, {
-			default: x(() => [l.open ? (h(), o("div", {
-				key: 0,
-				ref_key: "panelRef",
-				ref: M,
-				class: d(["sb-panel", [`sb-panel--${l.position}`, { "sb-panel--dragging": b(N) }]]),
-				style: f(b(P)),
-				onTouchstart: u[2] ||= (...e) => b(F).onTouchstart && b(F).onTouchstart(...e),
-				onTouchend: u[3] ||= (...e) => b(F).onTouchend && b(F).onTouchend(...e),
-				onTouchcancel: u[4] ||= (...e) => b(F).onTouchcancel && b(F).onTouchcancel(...e)
-			}, [l.hasHeader ? (h(), o("div", w, [s("span", T, v(l.title ?? ""), 1), c(e, {
-				class: "sb-close",
-				icon: "fa-solid fa-xmark",
-				onClick: u[0] ||= (e) => k()
-			})])) : (h(), i(e, {
+				class: l(["fa-fw", c.icon])
+			}, null, 2)) : a("", !0),
+			c.label ? (d(), o("span", {
 				key: 1,
-				class: "sb-close sb-close--absolute",
-				icon: "fa-solid fa-xmark",
-				onClick: u[1] ||= (e) => k()
-			})), s("div", E, [_(t.$slots, "default")])], 38)) : a("", !0)]),
-			_: 3
-		}, 8, ["name"])])]));
+				class: l({ "align-center-fix ": x.labelAlignmentFix })
+			}, m(c.label), 3)) : a("", !0),
+			s("span", { class: l(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": h(w) }]) }, [...f[1] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 10, _), (d(), i(r, { to: "body" }, [s("div", v, [h(w) ? (d(), o("div", {
+			key: 0,
+			ref_key: "dropdownRef",
+			ref: C,
+			class: "c-dropdown ds-wrapper",
+			style: u(h(T))
+		}, [s("ul", y, [(d(!0), o(n, null, p(c.items, (t, n) => (d(), o("li", {
+			key: `cb-${n}`,
+			class: l(["d-option dm-option c-field-size c-type-color", {
+				[`c-field-size--${h(e)(t.size)}`]: t.size,
+				[`c-type-color--${t.type}`]: t.type
+			}]),
+			tabindex: "0",
+			onClick: (e) => D(t),
+			"aria-label": t.ariaLabel ?? t.label
+		}, [t.icon ? (d(), o("i", {
+			key: 0,
+			class: l(["fa-fw", t.icon])
+		}, null, 2)) : a("", !0), s("span", { class: l(["d-option__label", { "c-truncate": x.textEllipsis }]) }, m(t.label), 3)], 10, b))), 128))])], 4)) : a("", !0)])]))], 512)]));
 	}
 });
 //#endregion
-export { O as default, D as sidebarDefaults };
+export { x as default };