admins-components 9.0.13 → 9.0.14

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";
 //#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
-var x = {
+var x = { class: "ac-component" }, S = {
 	key: 0,
 	class: "c-truncate ds-value"
-}, S = {
+}, C = {
 	key: 1,
 	class: "c-placeholder"
-}, C = {
+}, w = {
 	key: 0,
 	class: "ds-filter"
-}, w = ["title"], T = { class: "ds-options c-scroll" }, E = ["onClick", "onKeydown"], D = {
+}, T = ["title"], E = { class: "ds-options c-scroll" }, D = ["onClick", "onKeydown"], O = {
 	key: 0,
 	class: "ds-option ds-option--empty"
-}, O = {
+}, k = {
 	key: 1,
 	class: "c-footer"
-}, k = {
+}, A = {
 	placeholder: "Select...",
 	filterable: !0,
 	clearable: !0,
@@ -24,46 +24,46 @@ var x = {
 	multiple: !1,
 	lazy: !1,
 	size: "normal"
-}, A = /* @__PURE__ */ s({
+}, j = /* @__PURE__ */ s({
 	__name: "DropdownSelect",
 	props: {
 		modelValue: { default: null },
 		options: {},
-		config: { default: () => ({ ...k }) }
+		config: { default: () => ({ ...A }) }
 	},
 	emits: ["update:modelValue"],
-	setup(s, { expose: A, emit: j }) {
-		let M = s, N = n(() => ({
-			...k,
-			...M.config
-		})), P = j, F = `ds-input-filter-${g()}`, I = p(!1), L = p(""), R = p(null), z = p(null), B = p([]), V = p(H(M.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) {
 			return e == null ? [] : Array.isArray(e) ? [...e] : [e];
 		}
-		v(() => M.modelValue, (e) => {
+		v(() => N.modelValue, (e) => {
 			V.value = H(e);
 		}), v(I, (e) => {
-			e && (L.value = "", N.value.filterable && c(() => z.value?.focus()), N.value.lazy && (B.value = [...V.value]));
+			e && (L.value = "", P.value.filterable && c(() => z.value?.focus()), P.value.lazy && (B.value = [...V.value]));
 		});
-		let U = n(() => V.value.length === 0 ? null : N.value.multiple ? V.value.length > 2 ? `${V.value.length} kiválasztva` : V.value.map((e) => M.options.find((t) => t.value === e)?.label ?? e).join(", ") : M.options.find((e) => e.value === V.value[0])?.label ?? null), W = n(() => {
+		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 ? M.options.filter((t) => t.label.toLowerCase().includes(e)) : M.options;
+			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 = N.value.lazy && I.value ? B.value : V.value;
+			let e = P.value.lazy && I.value ? B.value : V.value;
 			return G.value.every((t) => t.value && e.includes(t.value));
 		});
 		function q(e) {
-			return (N.value.lazy && I.value ? B : V).value.includes(e);
+			return (P.value.lazy && I.value ? B : V).value.includes(e);
 		}
 		function J() {
-			let e = N.value.lazy && I.value ? B : V, t = G.value.map((e) => e.value);
+			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));
 			else {
 				let n = t.filter((t) => !e.value.includes(t));
 				e.value = [...e.value, ...n];
 			}
-			N.value.lazy || P("update:modelValue", V.value.length > 0 ? [...V.value] : null);
+			P.value.lazy || F("update:modelValue", V.value.length > 0 ? [...V.value] : null);
 		}
 		function Y(e, t) {
 			let n = e.indexOf(t);
@@ -75,66 +75,66 @@ var x = {
 				return;
 			}
 			let t = e.value;
-			t && (N.value.multiple ? N.value.lazy ? B.value = Y(B.value, t) : (V.value = Y(V.value, t), P("update:modelValue", V.value.length > 0 ? [...V.value] : null)) : (V.value = [t], P("update:modelValue", t), I.value = !1));
+			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));
 		}
 		function Z() {
-			N.value.lazy && (V.value = [...B.value], P("update:modelValue", B.value.length > 0 ? [...B.value] : null)), I.value = !1;
+			P.value.lazy && (V.value = [...B.value], F("update:modelValue", B.value.length > 0 ? [...B.value] : null)), I.value = !1;
 		}
 		function Q() {
-			N.value.lazy ? B.value = [] : (V.value = [], P("update:modelValue", null));
+			P.value.lazy ? B.value = [] : (V.value = [], F("update:modelValue", null));
 		}
-		function ee(e, t) {
+		function te(e, t) {
 			e.key === " " ? (e.preventDefault(), X(t)) : e.key === "Enter" && (e.preventDefault(), Z());
 		}
 		function $(e) {
 			R.value && !R.value.contains(e.target) && (I.value = !1);
 		}
 		d(() => document.addEventListener("mousedown", $)), u(() => document.removeEventListener("mousedown", $));
-		function te() {
-			I.value = !I.value, I.value && (L.value = "");
-		}
 		function ne() {
-			V.value = [], P("update:modelValue", null), I.value = !1;
+			I.value = !I.value, I.value && (L.value = "");
 		}
 		function re() {
-			I.value = !0, N.value.filterable && c(() => z.value?.focus());
+			V.value = [], F("update:modelValue", null), I.value = !1;
+		}
+		function ie() {
+			I.value = !0, P.value.filterable && c(() => z.value?.focus());
 		}
-		return A({ focusAndOpen: re }), (n, s) => (f(), a("div", {
+		return j({ focusAndOpen: ie }), (n, s) => (f(), a("div", x, [o("div", {
 			ref_key: "wrapperRef",
 			ref: R,
-			class: "c-wrapper ds-wrapper ac-component"
+			class: "c-wrapper ds-wrapper"
 		}, [o("div", {
 			class: l(["c-input-row pointer", {
-				"c-input-row--sm": N.value.size === "small",
-				"c-input-row--lg": N.value.size === "large"
+				"c-input-row--sm": P.value.size === "small",
+				"c-input-row--lg": P.value.size === "large"
 			}]),
-			onClick: s[1] ||= (e) => te()
+			onClick: s[1] ||= (e) => ne()
 		}, [
-			U.value ? (f(), a("span", x, h(U.value), 1)) : (f(), a("span", S, h(N.value.placeholder), 1)),
-			N.value.clearable && V.value.length > 0 ? (f(), a("button", {
+			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", {
 				key: 2,
 				type: "button",
 				class: "c-icon-btn c-icon-btn--clear ds-clear-btn",
-				onClick: s[0] ||= b((e) => ne(), ["stop"]),
+				onClick: s[0] ||= b((e) => re(), ["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", {
 			key: 0,
-			class: l(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": N.value.multiple }])
+			class: l(["c-dropdown ds-dropdown ac-component", { "ds-dropdown--multiple": P.value.multiple }])
 		}, [
-			N.value.filterable ? (f(), a("div", C, [
-				N.value.multiple ? (f(), a("span", {
+			P.value.filterable ? (f(), a("div", w, [
+				P.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, w)) : i("", !0),
+				}, null, 10, T)) : i("", !0),
 				y(o("input", {
 					ref_key: "filterInputRef",
 					ref: z,
 					type: "text",
-					id: F,
+					id: ee,
 					class: "c-focus ds-filter-input",
 					"onUpdate:modelValue": s[3] ||= (e) => L.value = e,
 					placeholder: "Filter...",
@@ -148,14 +148,14 @@ var x = {
 					"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", T, [(f(!0), a(t, null, m(W.value, (e, t) => (f(), a("li", {
+			o("ul", E, [(f(!0), a(t, null, m(W.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) }]),
 				tabindex: "0",
 				onClick: (t) => X(e),
-				onKeydown: (t) => ee(t, e)
+				onKeydown: (t) => te(t, e)
 			}, [
-				N.value.multiple && e.value ? (f(), a("span", {
+				P.value.multiple && e.value ? (f(), a("span", {
 					key: 0,
 					class: l(["c-checkbox", { "c-checkbox--checked": q(e.value) }])
 				}, null, 2)) : i("", !0),
@@ -163,21 +163,21 @@ var x = {
 					key: 1,
 					class: l(["fa-fw", e.icon])
 				}, null, 2)) : i("", !0),
-				o("span", { class: l(["d-option__label", { "c-truncate": N.value.textEllipsis }]) }, h(e.label), 3)
-			], 42, E))), 128)), W.value.length === 0 ? (f(), a("li", D, " Nincs találat ")) : i("", !0)]),
-			N.value.multiple || N.value.clearable && V.value.length > 0 ? (f(), a("div", O, [N.value.clearable ? (f(), r(e, {
+				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, {
 				key: 0,
 				label: "Törlés",
 				outline: "",
 				onClick: Q
-			})) : i("", !0), N.value.multiple ? (f(), r(e, {
+			})) : i("", !0), P.value.multiple ? (f(), r(e, {
 				key: 1,
 				label: "OK",
 				type: "success",
 				onClick: Z
 			})) : i("", !0)])) : i("", !0)
-		], 2)) : i("", !0)], 512));
+		], 2)) : i("", !0)], 512)]));
 	}
 });
 //#endregion
-export { A as default, k as dropdownSelectConfigDefaults };
+export { j as default, A 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 ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper ac-component\">\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 v-if=\"isOpen\" class=\"c-dropdown ds-dropdown ac-component\"\n    :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\">\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</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, 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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"}

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 ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper ac-component\">\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 v-if=\"isOpen\" class=\"c-dropdown ds-dropdown ac-component\"\n    :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\">\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</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, 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":""}

package/dist/admins-components23.js

@@ -2,7 +2,7 @@ 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 = ["aria-label"], _ = { class: "ds-options c-scroll" }, v = ["onClick", "aria-label"], y = /* @__PURE__ */ c({
+var g = { class: "ac-component" }, _ = ["aria-label"], v = { class: "ds-options c-scroll" }, y = ["onClick", "aria-label"], b = /* @__PURE__ */ c({
 	__name: "DropdownMenu",
 	props: {
 		size: { default: "normal" },
@@ -21,20 +21,20 @@ var g = ["aria-label"], _ = { class: "ds-options c-scroll" }, v = ["onClick", "a
 		}
 	},
 	setup(c) {
-		let y = c, b = f(null), x = f(null), { isOpen: S, dropdownStyle: C } = t(b, x, { extraStyle: (e) => ({
+		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 w() {
-			S.value = !S.value;
+		function T() {
+			C.value = !C.value;
 		}
-		function T(e) {
-			e.callback?.(), S.value = !1;
+		function E(e) {
+			e.callback?.(), C.value = !1;
 		}
-		return (t, f) => (d(), o("div", {
+		return (t, f) => (d(), o("div", g, [s("div", {
 			ref_key: "wrapperRef",
-			ref: b,
-			class: "ds-wrapper ac-component d-inline-block"
+			ref: x,
+			class: "ds-wrapper d-inline-block"
 		}, [s("button", {
 			type: "button",
 			class: l(["c-btn dm-trigger", [
@@ -43,7 +43,7 @@ var g = ["aria-label"], _ = { class: "ds-options c-scroll" }, v = ["onClick", "a
 				c.type !== "normal" && `c-btn-${c.type}`
 			]]),
 			"aria-label": c.ariaLabel ?? c.label,
-			onClick: f[0] ||= (e) => w()
+			onClick: f[0] ||= (e) => T()
 		}, [
 			c.icon ? (d(), o("i", {
 				key: 0,
@@ -51,29 +51,29 @@ var g = ["aria-label"], _ = { class: "ds-options c-scroll" }, v = ["onClick", "a
 			}, null, 2)) : a("", !0),
 			c.label ? (d(), o("span", {
 				key: 1,
-				class: l({ "align-center-text-fix ": y.labelAlignmentFix })
+				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(S) }]) }, [...f[1] ||= [s("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, g), (d(), i(r, { to: "body" }, [h(S) ? (d(), o("div", {
+			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: x,
+			ref: S,
 			class: "c-dropdown ds-wrapper ac-component",
-			style: u(h(C))
-		}, [s("ul", _, [(d(!0), o(n, null, p(c.items, (t, n) => (d(), o("li", {
+			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) => T(t),
+			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": y.textEllipsis }]) }, m(t.label), 3)], 10, v))), 128))])], 4)) : a("", !0)]))], 512));
+		}, 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)]));
 	}
 });
 //#endregion
-export { y as default };
+export { b as default };

package/dist/admins-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components23.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 ref=\"wrapperRef\" class=\"ds-wrapper ac-component 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-text-fix ': props.labelAlignmentFix }\">{{\n        label\n      }}</span>\n\n      <span class=\"c-icon-btn c-icon-btn--chevron\" :class=\"{ 'c-icon-btn--chevron-open': isOpen }\">\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</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,EAkDM,OAAA;YAlDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAmBS,UAAA;GAlBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACN,EAAA,SAAI,WAAA;IAAoC,EAAA,SAAI,WAAA;IAAoC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAK/H,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,0BAA8B,EAAM,kBAAiB,CAAA;QAC5E,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAEO,QAAA,EAFD,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BAAuC,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CACvF,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;sBACV,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAAsC,EAAK,SAAS,EAAK;;GAInI,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-components23.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"}

package/dist/admins-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components24.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 ref=\"wrapperRef\" class=\"ds-wrapper ac-component 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-text-fix ': props.labelAlignmentFix }\">{{\n        label\n      }}</span>\n\n      <span class=\"c-icon-btn c-icon-btn--chevron\" :class=\"{ 'c-icon-btn--chevron-open': isOpen }\">\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</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components24.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":""}

package/dist/admins-components28.js

@@ -1,45 +1,62 @@
 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, mergeDefaults as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, toDisplayString as p } from "vue";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeDefaults as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m } from "vue";
 //#region src/components/HeaderComponent.vue?vue&type=script&setup=true&lang.ts
-var m = { class: "ac-component" }, h = { class: "hc-header" }, g = { class: "hc-left" }, _ = { class: "hc-title-group" }, v = { class: "hc-title" }, y = {
+var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-left" }, v = { class: "hc-title-group" }, y = { class: "hc-title" }, b = {
+	key: 1,
+	class: "hc-slot hc-slot--left"
+}, x = {
 	key: 0,
-	class: "hc-toolbars"
-}, b = {
+	class: "hc-slot hc-slot--center"
+}, S = {
+	key: 1,
+	class: "hc-slot hc-slot--right"
+}, C = {
 	icon: void 0,
 	showBackButton: !1,
 	toolbars: () => []
-}, x = /* @__PURE__ */ s({
+}, w = /* @__PURE__ */ s({
 	__name: "HeaderComponent",
 	props: /* @__PURE__ */ c({
 		title: {},
 		icon: {},
 		showBackButton: { type: Boolean },
 		toolbars: {}
-	}, { ...b }),
+	}, { ...C }),
 	emits: ["back"],
 	setup(s, { emit: c }) {
-		let b = s, x = c, S = n(() => {
+		let C = s, w = c, T = n(() => {
 			let e = {
 				left: 0,
 				center: 1,
 				right: 2
 			};
-			return [...b.toolbars].sort((t, n) => e[t.align] - e[n.align]);
+			return [...C.toolbars].sort((t, n) => e[t.align] - e[n.align]);
 		});
-		return (n, c) => (d(), a("div", m, [o("header", h, [o("div", g, [s.showBackButton ? (d(), r(e, {
-			key: 0,
-			class: "hc-back-btn",
-			icon: "fa-solid fa-chevron-left",
-			"aria-label": "Vissza",
-			onClick: c[0] ||= (e) => x("back")
-		})) : i("", !0), o("div", _, [s.icon ? (d(), a("i", {
-			key: 0,
-			class: u([s.icon, "hc-title-icon"])
-		}, null, 2)) : i("", !0), o("h1", v, p(s.title), 1)])]), S.value.length ? (d(), a("div", y, [(d(!0), a(t, null, f(S.value, (n, i) => (d(), a("div", {
-			key: i,
-			class: u(["hc-buttons", `hc-buttons--${n.align}`])
-		}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))], 2))), 128))])) : i("", !0)])]));
+		return (n, c) => (d(), a("div", h, [o("header", g, [
+			o("div", _, [
+				s.showBackButton ? (d(), r(e, {
+					key: 0,
+					class: "hc-back-btn",
+					icon: "fa-solid fa-chevron-left",
+					"aria-label": "Vissza",
+					onClick: c[0] ||= (e) => w("back")
+				})) : i("", !0),
+				o("div", v, [s.icon ? (d(), a("i", {
+					key: 0,
+					class: u([s.icon, "hc-title-icon"])
+				}, null, 2)) : i("", !0), o("h1", y, m(s.title), 1)]),
+				n.$slots.left ? (d(), a("div", b, [p(n.$slots, "left")])) : i("", !0)
+			]),
+			n.$slots.center || T.value.some((e) => e.align === "center") ? (d(), a("div", x, [p(n.$slots, "center"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "center"), (n, i) => (d(), a("div", {
+				key: `c-${i}`,
+				class: "hc-buttons"
+			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0),
+			n.$slots.right || T.value.some((e) => e.align === "right") ? (d(), a("div", S, [p(n.$slots, "right"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "right"), (n, i) => (d(), a("div", {
+				key: `r-${i}`,
+				class: "hc-buttons"
+			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0)
+		])]));
 	}
 });
 //#endregion
-export { x as default, b as headerComponentDefaults };
+export { w as default, C as headerComponentDefaults };