admins-components 9.0.12 → 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

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components20.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\n}\n\nexport interface DropdownOption {\n  icon?: string\n  value?: string\n  label: string\n  callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n  modelValue?: string | string[] | null\n  options: DropdownOption[]\n  config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, useId } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\nconst filterInputId = `ds-input-filter-${useId()}`\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (open) {\n    filterText.value = ''\n    if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n    if (cfg.value.lazy) buffer.value = [...selection.value]\n  }\n})\n\n// Display\nconst selectedLabel = computed(() => {\n  if (selection.value.length === 0) return null\n  if (!cfg.value.multiple)\n    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).join(', ')\n})\n\nconst filteredOptions = computed(() => {\n  const q = filterText.value.toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst selectableOptions = computed(() => {\n  return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n  if (selectableOptions.value.length === 0) return false\n  const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n  return selectableOptions.value.every((o) => o.value && currentList.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\n    currentList.value = [...currentList.value, ...toAdd]\n  }\n\n  if (!cfg.value.lazy) {\n    emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n  }\n}\n\n// Actions\nfunction toggleList(list: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\n}\n\nfunction selectOption(opt: DropdownOption) {\n  if (opt.callback) {\n    opt.callback()\n    isOpen.value = false\n    return\n  }\n\n  const value = opt.value\n  if (!value) return\n\n  if (cfg.value.multiple) {\n    if (cfg.value.lazy) {\n      buffer.value = toggleList(buffer.value, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\n    isOpen.value = false\n  }\n}\n\nfunction confirm() {\n  if (cfg.value.lazy) {\n    selection.value = [...buffer.value]\n    emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n  }\n  isOpen.value = false\n}\n\nfunction clear() {\n  if (cfg.value.lazy) {\n    buffer.value = []\n  } else {\n    selection.value = []\n    emit('update:modelValue', null)\n  }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n  if (e.key === ' ') {\n    e.preventDefault()\n    selectOption(opt)\n  } else if (e.key === 'Enter') {\n    e.preventDefault()\n    confirm()\n  }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n      <div\n        class=\"c-input-row pointer\"\n        :class=\"{\n          'c-input-row--sm': cfg.size === 'small',\n          'c-input-row--lg': cfg.size === 'large',\n        }\"\n        @click=\"toggleOpen()\"\n      >\n        <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n        <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n        <button\n          v-if=\"cfg.clearable && selection.length > 0\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n          @click.stop=\"clearInput()\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </div>\n\n      <div\n        v-if=\"isOpen\"\n        class=\"c-dropdown ds-dropdown ac-component\"\n        :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n      >\n        <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n          <span\n            v-if=\"cfg.multiple\"\n            class=\"c-checkbox ds-select-all-checkbox\"\n            :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n            @click.stop=\"toggleAllOptions()\"\n            :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n          ></span>\n          <input\n            ref=\"filterInputRef\"\n            type=\"text\"\n            :id=\"filterInputId\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\n            @click.stop\n          />\n          <button\n            v-if=\"filterText\"\n            type=\"button\"\n            class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n            @click.stop=\"filterText = ''\"\n            aria-label=\"Szűrők törlése\"\n          >\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <ul class=\"ds-options c-scroll\">\n          <li\n            v-for=\"(opt, idx) in filteredOptions\"\n            :key=\"opt.value ?? `cb-${idx}`\"\n            class=\"d-option ds-option\"\n            :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n            tabindex=\"0\"\n            @click=\"selectOption(opt)\"\n            @keydown=\"onOptionKeydown($event, opt)\"\n          >\n            <span\n              v-if=\"cfg.multiple && opt.value\"\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n            ></span>\n            <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n            <span class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              opt.label\n            }}</span>\n          </li>\n          <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n            Nincs találat\n          </li>\n        </ul>\n\n        <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n          <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n          <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components22.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components22.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n  placeholder?: string\n  filterable?: boolean\n  clearable?: boolean\n  textEllipsis?: boolean\n  multiple?: boolean\n  lazy?: boolean\n  size?: ControlSize\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n  placeholder: 'Select...',\n  filterable: true,\n  clearable: true,\n  textEllipsis: true,\n  multiple: false,\n  lazy: false,\n  size: 'normal' as ControlSize,\n}\n\nexport interface DropdownOption {\n  icon?: string\n  value?: string\n  label: string\n  callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n  modelValue?: string | string[] | null\n  options: DropdownOption[]\n  config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick, onMounted, onBeforeUnmount, useId } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n  modelValue: null,\n  config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{ 'update:modelValue': [value: string | string[] | null] }>()\n\nconst filterInputId = `ds-input-filter-${useId()}`\n\nconst isOpen = ref(false)\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst filterInputRef = ref<HTMLInputElement | null>(null)\nconst buffer = ref<string[]>([])\nconst selection = ref<string[]>(toArray(props.modelValue))\n\nfunction toArray(val: string | string[] | null | undefined): string[] {\n  if (val == null) return []\n  return Array.isArray(val) ? [...val] : [val]\n}\n\nwatch(\n  () => props.modelValue,\n  (v) => {\n    selection.value = toArray(v)\n  },\n)\n\nwatch(isOpen, (open) => {\n  if (open) {\n    filterText.value = ''\n    if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n    if (cfg.value.lazy) buffer.value = [...selection.value]\n  }\n})\n\n// Display\nconst selectedLabel = computed(() => {\n  if (selection.value.length === 0) return null\n  if (!cfg.value.multiple)\n    return props.options.find((o) => o.value === selection.value[0])?.label ?? null\n  if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n  return selection.value.map((v) => props.options.find((o) => o.value === v)?.label ?? v).join(', ')\n})\n\nconst filteredOptions = computed(() => {\n  const q = filterText.value.toLowerCase()\n  return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nconst selectableOptions = computed(() => {\n  return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n  if (selectableOptions.value.length === 0) return false\n  const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n  return selectableOptions.value.every((o) => o.value && currentList.includes(o.value))\n})\n\nfunction isSelected(value: string): boolean {\n  return (cfg.value.lazy && isOpen.value ? buffer : selection).value.includes(value)\n}\n\nfunction toggleAllOptions() {\n  const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n  const selectableValues = selectableOptions.value.map((o) => o.value as string)\n\n  if (allOptionsSelected.value) {\n    currentList.value = currentList.value.filter((v) => !selectableValues.includes(v))\n  } else {\n    const toAdd = selectableValues.filter((v) => !currentList.value.includes(v))\n    currentList.value = [...currentList.value, ...toAdd]\n  }\n\n  if (!cfg.value.lazy) {\n    emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n  }\n}\n\n// Actions\nfunction toggleList(list: string[], value: string): string[] {\n  const idx = list.indexOf(value)\n  return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, value]\n}\n\nfunction selectOption(opt: DropdownOption) {\n  if (opt.callback) {\n    opt.callback()\n    isOpen.value = false\n    return\n  }\n\n  const value = opt.value\n  if (!value) return\n\n  if (cfg.value.multiple) {\n    if (cfg.value.lazy) {\n      buffer.value = toggleList(buffer.value, value)\n    } else {\n      selection.value = toggleList(selection.value, value)\n      emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n    }\n  } else {\n    selection.value = [value]\n    emit('update:modelValue', value)\n    isOpen.value = false\n  }\n}\n\nfunction confirm() {\n  if (cfg.value.lazy) {\n    selection.value = [...buffer.value]\n    emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n  }\n  isOpen.value = false\n}\n\nfunction clear() {\n  if (cfg.value.lazy) {\n    buffer.value = []\n  } else {\n    selection.value = []\n    emit('update:modelValue', null)\n  }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n  if (e.key === ' ') {\n    e.preventDefault()\n    selectOption(opt)\n  } else if (e.key === 'Enter') {\n    e.preventDefault()\n    confirm()\n  }\n}\n\nfunction onClickOutside(e: MouseEvent) {\n  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) isOpen.value = false\n}\n\nonMounted(() => document.addEventListener('mousedown', onClickOutside))\nonBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n  if (isOpen.value) filterText.value = ''\n}\n\nfunction clearInput() {\n  selection.value = []\n  emit('update:modelValue', null)\n  isOpen.value = false\n}\n\nfunction focusAndOpen() {\n  isOpen.value = true\n  if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n      <div\n        class=\"c-input-row pointer\"\n        :class=\"{\n          'c-input-row--sm': cfg.size === 'small',\n          'c-input-row--lg': cfg.size === 'large',\n        }\"\n        @click=\"toggleOpen()\"\n      >\n        <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n        <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n        <button\n          v-if=\"cfg.clearable && selection.length > 0\"\n          type=\"button\"\n          class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n          @click.stop=\"clearInput()\"\n          aria-label=\"Törlés\"\n        >\n          <i class=\"fa-solid fa-fw fa-xmark\"></i>\n        </button>\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </div>\n\n      <div\n        v-if=\"isOpen\"\n        class=\"c-dropdown ds-dropdown ac-component\"\n        :class=\"{ 'ds-dropdown--multiple': cfg.multiple }\"\n      >\n        <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n          <span\n            v-if=\"cfg.multiple\"\n            class=\"c-checkbox ds-select-all-checkbox\"\n            :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n            @click.stop=\"toggleAllOptions()\"\n            :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n          ></span>\n          <input\n            ref=\"filterInputRef\"\n            type=\"text\"\n            :id=\"filterInputId\"\n            class=\"c-focus ds-filter-input\"\n            v-model=\"filterText\"\n            placeholder=\"Filter...\"\n            @click.stop\n          />\n          <button\n            v-if=\"filterText\"\n            type=\"button\"\n            class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n            @click.stop=\"filterText = ''\"\n            aria-label=\"Szűrők törlése\"\n          >\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n\n        <ul class=\"ds-options c-scroll\">\n          <li\n            v-for=\"(opt, idx) in filteredOptions\"\n            :key=\"opt.value ?? `cb-${idx}`\"\n            class=\"d-option ds-option\"\n            :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n            tabindex=\"0\"\n            @click=\"selectOption(opt)\"\n            @keydown=\"onOptionKeydown($event, opt)\"\n          >\n            <span\n              v-if=\"cfg.multiple && opt.value\"\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n            ></span>\n            <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n            <span class=\"d-option__label\" :class=\"{ 'c-truncate': cfg.textEllipsis }\">{{\n              opt.label\n            }}</span>\n          </li>\n          <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n            Nincs találat\n          </li>\n        </ul>\n\n        <div v-if=\"cfg.multiple || (cfg.clearable && selection.length > 0)\" class=\"c-footer\">\n          <Button v-if=\"cfg.clearable\" label=\"Törlés\" outline @click=\"clear\" />\n          <Button v-if=\"cfg.multiple\" label=\"OK\" type=\"success\" @click=\"confirm\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}

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

@@ -0,0 +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 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

@@ -0,0 +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 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-components25.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components25.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\n\nwithDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => document.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div v-if=\"open\" class=\"sb-panel\" :class=\"`sb-panel--${position}`\">\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":";;;;;;oEAWa,IAAkB;CAC7B,MAAM;CACN,UAAU;CACV,WAAW;CACX,cAAc;AAChB;;;;;;;;;;;EAWA,IAAM,IAAO;EAIb,SAAS,IAAQ;GACf,EAAK,OAAO;EACd;EAEA,SAAS,IAAkB;GACzB,EAAM;EACR;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YAAU,EAAM;EAChC;SAEA,QAAgB,SAAS,iBAAiB,WAAW,CAAS,CAAC,GAC/D,QAAsB,SAAS,oBAAoB,WAAW,CAAS,CAAC,mBAItE,EAuBW,GAAA,EAvBD,IAAG,OAAM,GAAA,CACjB,EAqBM,OArBN,GAqBM,CApBJ,EAEa,GAAA,EAFD,MAAK,UAAS,GAAA;oBACiE,CAA9E,EAAA,QAAQ,EAAA,gBAAA,EAAA,GAAnB,EAAyF,OAAA;;IAAxD,OAAM;IAAe,SAAK,EAAO,GAAe,CAAA,MAAA,CAAA;;;MAEnF,EAgBa,GAAA,EAhBA,MAAI,YAAc,EAAA,WAAA,GAAA;oBAevB,CAdK,EAAA,QAAA,EAAA,GAAX,EAcM,OAAA;;IAdW,OAAK,EAAA,CAAC,YAAU,aAAsB,EAAA,UAAQ,CAAA;OAClD,EAAA,aAAA,EAAA,GAAX,EAGM,OAHN,GAGM,CAFJ,EAA+C,QAA/C,GAA+C,EAArB,EAAA,SAAK,EAAA,GAAA,CAAA,GAC/B,EAAqE,GAAA;IAA7D,OAAM;IAAW,MAAK;IAAqB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;iBAEjE,EAKE,GAAA;;IAHA,OAAM;IACN,MAAK;IACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;QAEf,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/admins-components27.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components27.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onBeforeUnmount } from 'vue'\nimport Button from '@/components/Button.vue'\n\nwithDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nonMounted(() => document.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div v-if=\"open\" class=\"sb-panel\" :class=\"`sb-panel--${position}`\">\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.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 };

package/dist/admins-components28.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components28.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAgBa,IAA0B;CACrC,MAAM,KAAA;CACN,gBAAgB;CAChB,gBAAgB,CAAC;AACnB;;;;;;;;;;EAOA,IAAM,IAAQ,GAIR,IAAO,GAEP,IAAiB,QAAe;GACpC,IAAM,IAA6C;IAAE,MAAM;IAAG,QAAQ;IAAG,OAAO;GAAE;GAClF,OAAO,CAAC,GAAG,EAAM,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAM,EAAE,SAAS,EAAM,EAAE,MAAM;EAC3E,CAAC;yBAIC,EAiDM,OAjDN,GAiDM,CAhDJ,EA+CS,UA/CT,GA+CS;GA9CP,EAiBM,OAjBN,GAiBM;IAfI,EAAA,kBAAA,EAAA,GADR,EAME,GAAA;;KAJA,OAAM;KACN,MAAK;KACL,cAAW;KACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,MAAA;;IAGd,EAGM,OAHN,GAGM,CAFK,EAAA,QAAA,EAAA,GAAT,EAAuD,KAAA;;KAAvC,OAAK,EAAA,CAAE,EAAA,MAAY,eAAe,CAAA;8BAClD,EAAqC,MAArC,GAAqC,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IAGpBA,EAAAA,OAAO,QAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAKhBA,EAAAA,OAAO,UAAU,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,QAAA,KAAA,EAAA,GAD3D,EAYM,OAZN,GAYM,CARJ,EAAsB,EAAA,QAAA,QAAA,IAAA,EAAA,EAAA,GACtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,QAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;GAK5DA,EAAAA,OAAO,SAAS,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,OAAA,KAAA,EAAA,GAD1D,EAYM,OAZN,GAYM,CARJ,EAAqB,EAAA,QAAA,OAAA,IAAA,EAAA,EAAA,GACrB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,OAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA"}

package/dist/admins-components3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components3.js","names":[],"sources":["../src/utils/date.ts"],"sourcesContent":["export function formatDate(date: Date, format: string): string {\n  const tokens: Record<string, string> = {\n    YYYY: String(date.getFullYear()),\n    MM: String(date.getMonth() + 1).padStart(2, '0'),\n    DD: String(date.getDate()).padStart(2, '0'),\n    HH: String(date.getHours()).padStart(2, '0'),\n    mm: String(date.getMinutes()).padStart(2, '0'),\n    ss: String(date.getSeconds()).padStart(2, '0'),\n  }\n\n  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => tokens[match] ?? match)\n}\n\nexport function parseDate(value: string, format: string): Date | null {\n  if (!value) return null\n\n  const tokenRegex = /YYYY|MM|DD|HH|mm|ss/g\n  let match: RegExpExecArray | null\n  const parts: { token: string; start: number; end: number }[] = []\n\n  while ((match = tokenRegex.exec(format)) !== null) {\n    parts.push({ token: match[0], start: match.index, end: match.index + match[0].length })\n  }\n\n  let year = 1970\n  let month = 0\n  let day = 1\n  let hour = 0\n  let minute = 0\n  let second = 0\n\n  for (const part of parts) {\n    const raw = value.slice(part.start, part.start + part.token.length)\n    const n = parseInt(raw, 10)\n    if (isNaN(n)) return null\n\n    switch (part.token) {\n      case 'YYYY':\n        year = n\n        break\n      case 'MM':\n        month = n - 1\n        break\n      case 'DD':\n        day = n\n        break\n      case 'HH':\n        hour = n\n        break\n      case 'mm':\n        minute = n\n        break\n      case 'ss':\n        second = n\n        break\n    }\n  }\n\n  return new Date(year, month, day, hour, minute, second)\n}\n\nexport function localToUTCString(date: Date, includeTime = false): string {\n  if (includeTime) {\n    return date.toISOString()\n  }\n\n  const y = date.getFullYear()\n  const m = String(date.getMonth() + 1).padStart(2, '0')\n  const d = String(date.getDate()).padStart(2, '0')\n  return `${y}-${m}-${d}T00:00:00.000Z`\n}\n\nexport function castToDate(v: any): Date | null {\n  if (!v) return null\n  if (v instanceof Date) return v\n  const d = new Date(v)\n  return isNaN(d.getTime()) ? null : d\n}\nexport function startOfDay(date: Date) {\n  const d = new Date(date)\n  d.setHours(0, 0, 0, 0)\n  return d\n}\n\nexport function endOfDay(date: Date) {\n  const d = new Date(date)\n  d.setHours(23, 59, 0, 0)\n  return d\n}\n\nexport function startOfWeek(date: Date) {\n  const d = startOfDay(date)\n  const day = d.getDay()\n  const diff = day === 0 ? -6 : 1 - day // Monday start\n  d.setDate(d.getDate() + diff)\n  return d\n}\n\nexport function isSameCalendarDay(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  )\n}\n\nexport function laterOf(a: Date | null | undefined, b: Date | null | undefined): Date | null {\n  if (a && b) return a.getTime() > b.getTime() ? a : b\n  return a ?? b ?? null\n}\n\nexport function earlierOf(a: Date | null | undefined, b: Date | null | undefined): Date | null {\n  if (a && b) return a.getTime() < b.getTime() ? a : b\n  return a ?? b ?? null\n}\n"],"mappings":"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"}

package/dist/admins-components30.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components30.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}

package/dist/admins-components31.js

@@ -1,37 +1,37 @@
 import { Teleport as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, onMounted as o, onUnmounted as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
 //#region src/components/Modal.vue?vue&type=script&setup=true&lang.ts
-var d = { class: "c-modal" }, f = { class: "c-modal-header" }, p = { class: "c-modal-title" }, m = { class: "c-modal-body c-scroll" }, h = {
+var d = { class: "ac-component" }, f = { class: "c-modal" }, p = { class: "c-modal-header" }, m = { class: "c-modal-title" }, h = { class: "c-modal-body c-scroll" }, g = {
 	key: 0,
 	class: "c-modal-footer"
-}, g = /* @__PURE__ */ a({
+}, _ = /* @__PURE__ */ a({
 	__name: "Modal",
 	props: { title: {} },
 	emits: ["close"],
-	setup(a, { emit: g }) {
-		let _ = g;
-		function v(e) {
-			e.target === e.currentTarget && _("close");
-		}
+	setup(a, { emit: _ }) {
+		let v = _;
 		function y(e) {
-			e.key === "Escape" && _("close");
+			e.target === e.currentTarget && v("close");
+		}
+		function b(e) {
+			e.key === "Escape" && v("close");
 		}
 		return o(() => {
-			document.addEventListener("keydown", y);
+			document.addEventListener("keydown", b);
 		}), s(() => {
-			document.removeEventListener("keydown", y);
-		}), (o, s) => (c(), t(e, { to: "body" }, [i("div", {
-			class: "c-modal-backdrop ac-component",
-			onMousedown: v
-		}, [i("div", d, [
-			i("div", f, [i("h3", p, u(a.title), 1), i("button", {
+			document.removeEventListener("keydown", b);
+		}), (o, s) => (c(), t(e, { to: "body" }, [i("div", d, [i("div", {
+			class: "c-modal-backdrop",
+			onMousedown: y
+		}, [i("div", f, [
+			i("div", p, [i("h3", m, u(a.title), 1), i("button", {
 				type: "button",
 				class: "c-modal-close",
-				onClick: s[0] ||= (e) => _("close")
+				onClick: s[0] ||= (e) => v("close")
 			}, [...s[1] ||= [i("i", { class: "ri-close-line" }, null, -1)]])]),
-			i("div", m, [l(o.$slots, "default")]),
-			o.$slots.footer ? (c(), r("div", h, [l(o.$slots, "footer")])) : n("", !0)
-		])], 32)]));
+			i("div", h, [l(o.$slots, "default")]),
+			o.$slots.footer ? (c(), r("div", g, [l(o.$slots, "footer")])) : n("", !0)
+		])], 32)])]));
 	}
 });
 //#endregion
-export { g as default };
+export { _ as default };