npm - admins-components - Versions diffs - 10.0.0 → 10.0.1 - Mend

admins-components 10.0.0 → 10.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/admins-components26.js +16 -13
package/dist/admins-components26.js.map +1 -1
package/dist/admins-components28.js.map +1 -1
package/dist/admins-components83.js +39 -31
package/dist/admins-components83.js.map +1 -1
package/dist/admins-components85.js.map +1 -1
package/dist/src/components/DropdownSelect.vue.d.ts +1 -0
package/package.json +1 -1

package/dist/admins-components26.js CHANGED Viewed

@@ -3,19 +3,19 @@ import { useDropdownAnchor as t } from "./admins-components12.js";
 import n from "./admins-components25.js";
 import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, nextTick as f, normalizeClass as p, normalizeStyle as ee, openBlock as m, ref as h, renderList as te, toDisplayString as g, unref as _, watch as v, withModifiers as y } from "vue";
 //#region src/components/DropdownSelect.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
+var b = { class: "ac-component" }, x = ["aria-disabled"], S = {
 	key: 0,
 	class: "c-truncate ds-value"
-}, re = {
+}, ne = {
 	key: 1,
 	class: "c-placeholder"
-}, ie = { class: "ac-component" }, ae = {
+}, re = { class: "ac-component" }, ie = {
 	key: 0,
 	class: "ds-filter"
-}, S = ["title"], C = ["value", "placeholder"], w = { class: "ds-options c-scroll" }, oe = {
+}, ae = ["title"], C = ["value", "placeholder"], w = { class: "ds-options c-scroll" }, T = {
 	key: 0,
 	class: "ds-option ds-option--loading"
-}, se = ["onClick", "onKeydown"], T = ["innerHTML"], E = {
+}, oe = ["onClick", "onKeydown"], se = ["innerHTML"], E = {
 	key: 0,
 	class: "ds-option ds-option--empty"
 }, D = {
@@ -143,7 +143,10 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 		function he() {
 			P.value = "", N("filter-input", "");
 		}
-		return k({ focusAndOpen: me }), (t, a) => (m(), c("div", b, [l("div", {
+		return k({
+			focusAndOpen: me,
+			dropdownEl: I
+		}), (t, a) => (m(), c("div", b, [l("div", {
 			ref_key: "wrapperRef",
 			ref: F,
 			class: "c-wrapper ds-wrapper"
@@ -157,7 +160,7 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 			"aria-disabled": M.value.disabled || void 0,
 			onClick: a[1] ||= (e) => fe()
 		}, [
-			G.value ? (m(), c("span", ne, g(G.value), 1)) : (m(), c("span", re, g(M.value.placeholder), 1)),
+			G.value ? (m(), c("span", S, g(G.value), 1)) : (m(), c("span", ne, g(M.value.placeholder), 1)),
 			M.value.clearable && z.value.length > 0 ? (m(), c("button", {
 				key: 2,
 				type: "button",
@@ -166,7 +169,7 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 				"aria-label": "Törlés"
 			}, [...a[6] ||= [l("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : s("", !0),
 			l("span", { class: p(["c-icon-btn c-icon-btn--chevron mr-2", { "c-icon-btn--chevron-open": _(B) }]) }, [...a[7] ||= [l("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, x)], 512), (m(), o(i, { to: "body" }, [l("div", ie, [_(B) ? (m(), c("div", {
+		], 10, x)], 512), (m(), o(i, { to: "body" }, [l("div", re, [_(B) ? (m(), c("div", {
 			key: 0,
 			ref_key: "dropdownRef",
 			ref: I,
@@ -176,13 +179,13 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 			}]),
 			style: ee(_(V))
 		}, [
-			M.value.filterable ? (m(), c("div", ae, [
+			M.value.filterable ? (m(), c("div", ie, [
 				M.value.multiple ? (m(), c("span", {
 					key: 0,
 					class: p(["c-checkbox ds-select-all-checkbox", { "c-checkbox--checked": Y.value }]),
 					onClick: a[2] ||= y((e) => le(), ["stop"]),
 					title: Y.value ? "Összes kijelölés törlése" : "Összes kijelölése"
-				}, null, 10, S)) : s("", !0),
+				}, null, 10, ae)) : s("", !0),
 				l("input", {
 					ref_key: "filterInputRef",
 					ref: L,
@@ -203,7 +206,7 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 					"aria-label": "Szűrők törlése"
 				}, [...a[8] ||= [l("i", { class: "fa-solid fa-xmark" }, null, -1)]])) : s("", !0)
 			])) : s("", !0),
-			l("ul", w, [M.value.loading ? (m(), c("li", oe, [u(n, {
+			l("ul", w, [M.value.loading ? (m(), c("li", T, [u(n, {
 				size: "2rem",
 				color: "var(--ac-c-neutral-300)",
 				class: "m-auto p-3"
@@ -225,8 +228,8 @@ var b = { class: "ac-component" }, x = ["aria-disabled"], ne = {
 				l("span", {
 					class: p(["d-option__label", { "c-truncate": M.value.textEllipsis }]),
 					innerHTML: ce(e.label)
-				}, null, 10, T)
-			], 42, se))), 128)), K.value.length === 0 ? (m(), c("li", E, " Nincs találat ")) : s("", !0)], 64))]),
+				}, null, 10, se)
+			], 42, oe))), 128)), K.value.length === 0 ? (m(), c("li", E, " Nincs találat ")) : s("", !0)], 64))]),
 			M.value.multiple ? (m(), c("div", D, [M.value.clearable && z.value.length > 0 ? (m(), o(e, {
 				key: 0,
 				label: "Törlés",

package/dist/admins-components26.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption \| DropdownOption[] \| string \| string[] \| null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption \| DropdownOption[] \| null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst filterInputRef = ref<HTMLInputElement \| null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle, placement } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width}px`,\n }),\n maxHeight: '20rem',\n})\n\nfunction normalizeToOptions(\n val: DropdownOption \| DropdownOption[] \| string \| string[] \| null \| undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption \| null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n}\n\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q \|\| !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every(\n (o) => o.value && currentList.some((s) => s.value === o.value),\n )\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n 'c-input-row--open': isOpen,\n }\"\n :aria-disabled=\"cfg.disabled \|\| undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple, 'ds-dropdown--up': placement === 'up' }\"\n :style=\"dropdownStyle\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--ac-c-neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n <div v-if=\"cfg.multiple\" class=\"c-footer\">\n <Button\n v-if=\"cfg.clearable && selection.length > 0\"\n label=\"Törlés\"\n outline\n @click=\"clear\"\n />\n <Button label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;GAea,IAAqD;CAChE,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,WAAW;CACX,cAAc;CACd,UAAU;CACV,MAAM;CACN,SAAS;CACT,MAAM;CACN,WAAW;CACX,UAAU;AACZ;;;;;;;;;EAuBA,IAAM,IAAQ,GAKR,IAAM,SAAgB;GAAE,GAAG;GAA8B,GAAG,EAAM;EAAO,EAAE,GAE3E,IAAO,GAKP,IAAa,EAAI,EAAE,GACnB,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,IAAiB,EAA6B,IAAI,GAClD,IAAS,EAAsB,CAAC,CAAC,GACjC,IAAY,EAAsB,EAAmB,EAAM,YAAY,EAAM,OAAO,CAAC,GAErF,EAAE,WAAQ,kBAAe,iBAAc,EAAkB,GAAY,GAAa;GACtF,aAAa,OAAU;IACrB,UAAU,GAAG,EAAK,MAAM;IACxB,UAAU,GAAG,EAAK,MAAM;GAC1B;GACA,WAAW;EACb,CAAC;EAED,SAAS,EACP,GACA,GACkB;GAGlB,OAFI,KAAO,OAAa,CAAC,KACb,MAAM,QAAQ,CAAG,IAAI,IAAM,CAAC,CAAG,EAAA,CAExC,KAAK,MACA,KAAS,OAAa,OACtB,OAAO,KAAU,YAAY,WAAW,IACnC,IAEL,OAAO,KAAU,WACL,EAAQ,MAAM,MAAM,EAAE,UAAU,CACvC,KAAS;IAAE,OAAO;IAAO,OAAO;GAAM,IAExC,IACR,CAAA,CACA,QAAQ,MAA2B,MAAM,IAAI;EAClD;EASA,AAPA,QACQ,CAAC,EAAM,YAAY,EAAM,OAAO,IACrC,CAAC,OAAO;GACP,EAAU,QAAQ,EAAmB,GAA8B,EAAM,OAAO;EAClF,CACF,GAEA,EAAM,IAAS,MAAS;GACtB,AAAI,MACF,EAAW,QAAQ,IACf,EAAI,MAAM,cAAY,QAAe,EAAe,OAAO,MAAM,CAAC,GAClE,EAAI,MAAM,SAAM,EAAO,QAAQ,CAAC,GAAG,EAAU,KAAK;EAE1D,CAAC;EAED,SAAS,EAAc,GAAc;GAEnC,AADA,EAAW,QAAQ,GACnB,EAAK,gBAAgB,CAAI;EAC3B;EAEA,IAAM,IAAgB,QAAe;GACnC,IAAI,EAAU,MAAM,WAAW,GAAG,OAAO;GACzC,IAAI,CAAC,EAAI,MAAM,UAAU;IACvB,IAAM,IAAM,EAAU,MAAM;IAE5B,OAAO,EAAM,QAAQ,MAAM,MAAM,EAAE,UAAU,GAAK,KAAK,CAAC,EAAE,SAAS,GAAK,SAAS;GACnF;GAEA,OADI,EAAU,MAAM,SAAS,IAAU,GAAG,EAAU,MAAM,OAAO,gBAC1D,EAAU,MACd,KAAK,MAAQ,EAAM,QAAQ,MAAM,MAAM,EAAE,UAAU,EAAI,KAAK,CAAC,EAAE,SAAS,EAAI,SAAS,EAAI,KAAK,CAAA,CAC9F,KAAK,IAAI;EACd,CAAC,GAEK,IAAkB,QAAe;GACrC,IAAM,IAAI,EAAW,MAAM,YAAY;GACvC,OAAO,IAAI,EAAM,QAAQ,QAAQ,MAAM,EAAE,MAAM,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,EAAM;EACpF,CAAC;EAED,SAAS,EAAW,GAAa;GAC/B,OAAO,EAAI,QACT,aACC,OAAO;IAAE,KAAK;IAAS,KAAK;IAAQ,KAAK;IAAQ,MAAK;IAAU,KAAK;GAAQ,EAAA,CAAG,EACnF;EACF;EAEA,SAAS,GAAU,GAAe;GAChC,IAAM,IAAI,EAAW,MAAM,KAAK;GAChC,IAAI,CAAC,KAAK,CAAC,EAAI,MAAM,WAAW,OAAO,EAAW,CAAK;GAEvD,IAAM,IAAY,EAAW,CAAK,GAC5B,IAAQ,EAAW,CAAC,GAEpB,IAAK,IAAI,OAAO,EAAM,QAAQ,uBAAuB,MAAM,GAAG,IAAI;GACxE,OAAO,EAAU,QAAQ,IAAK,MAAM,sCAAsC,EAAE,QAAQ;EACtF;EAEA,IAAM,IAAoB,QACjB,EAAgB,MAAM,QAAQ,MAAM,EAAE,KAAK,CACnD,GAEK,IAAqB,QAAe;GACxC,IAAI,EAAkB,MAAM,WAAW,GAAG,OAAO;GACjD,IAAM,IAAc,EAAI,MAAM,QAAQ,EAAO,QAAQ,EAAO,QAAQ,EAAU;GAC9E,OAAO,EAAkB,MAAM,OAC5B,MAAM,EAAE,SAAS,EAAY,MAAM,MAAM,EAAE,UAAU,EAAE,KAAK,CAC/D;EACF,CAAC;EAED,SAAS,EAAW,GAAwB;GAE1C,QADa,EAAI,MAAM,QAAQ,EAAO,QAAQ,IAAS,EAAA,CAC3C,MAAM,MAAM,MAAM,EAAE,UAAU,CAAK;EACjD;EAEA,SAAS,KAAmB;GAC1B,IAAM,IAAc,EAAI,MAAM,QAAQ,EAAO,QAAQ,IAAS,GACxD,IAAiB,EAAkB,MAAM,QAAQ,MAAM,EAAE,KAAK;GAEpE,IAAI,EAAmB,OAAO;IAC5B,IAAM,IAAmB,IAAI,IAAI,EAAe,KAAK,MAAM,EAAE,KAAe,CAAC;IAC7E,EAAY,QAAQ,EAAY,MAAM,QAAQ,MAAM,CAAC,EAAiB,IAAI,EAAE,SAAS,EAAE,CAAC;GAC1F,OAAO;IACL,IAAM,IAAiB,IAAI,IAAI,EAAY,MAAM,KAAK,MAAM,EAAE,KAAK,CAAC,GAC9D,IAAQ,EAAe,QAAQ,MAAM,CAAC,EAAe,IAAI,EAAE,KAAe,CAAC;IACjF,EAAY,QAAQ,CAAC,GAAG,EAAY,OAAO,GAAG,CAAK;GACrD;GAEA,AAAK,EAAI,MAAM,QACb,EAAK,qBAAqB,EAAU,MAAM,SAAS,IAAI,CAAC,GAAG,EAAU,KAAK,IAAI,IAAI;EAEtF;EAEA,SAAS,EAAW,GAAwB,GAAuC;GACjF,IAAM,IAAM,EAAK,WAAW,MAAM,EAAE,UAAU,EAAI,KAAK;GACvD,OAAO,KAAO,IAAI,EAAK,QAAQ,GAAG,MAAM,MAAM,CAAG,IAAI,CAAC,GAAG,GAAM,CAAG;EACpE;EAEA,SAAS,EAAa,GAAqB;GACzC,IAAI,EAAI,UAAU;IAEhB,AADA,EAAI,SAAS,GACb,EAAO,QAAQ;IACf;GACF;GAEc,EAAI,UAGd,EAAI,MAAM,WACR,EAAI,MAAM,OACZ,EAAO,QAAQ,EAAW,EAAO,OAAO,CAAG,KAE3C,EAAU,QAAQ,EAAW,EAAU,OAAO,CAAG,GACjD,EAAK,qBAAqB,EAAU,MAAM,SAAS,IAAI,CAAC,GAAG,EAAU,KAAK,IAAI,IAAI,MAGpF,EAAU,QAAQ,CAAC,CAAG,GACtB,EAAK,qBAAqB,CAAG,GAC7B,EAAO,QAAQ;EAEnB;EAEA,SAAS,IAAU;GAKjB,AAJI,EAAI,MAAM,SACZ,EAAU,QAAQ,CAAC,GAAG,EAAO,KAAK,GAClC,EAAK,qBAAqB,EAAO,MAAM,SAAS,IAAI,CAAC,GAAG,EAAO,KAAK,IAAI,IAAI,IAE9E,EAAO,QAAQ;EACjB;EAEA,SAAS,KAAQ;GACf,AAAI,EAAI,MAAM,OACZ,EAAO,QAAQ,CAAC,KAEhB,EAAU,QAAQ,CAAC,GACnB,EAAK,qBAAqB,IAAI;EAElC;EAEA,SAAS,GAAgB,GAAkB,GAAqB;GAC9D,AAAI,EAAE,QAAQ,OACZ,EAAE,eAAe,GACjB,EAAa,CAAG,KACP,EAAE,QAAQ,YACnB,EAAE,eAAe,GACjB,EAAQ;EAEZ;EAEA,SAAS,KAAa;GAChB,EAAI,MAAM,aACd,EAAO,QAAQ,CAAC,EAAO,OACnB,EAAO,SACL,EAAI,MAAM,eACZ,EAAW,QAAQ,IACnB,EAAK,gBAAgB,EAAE;EAG7B;EAEA,SAAS,KAAa;GAChB,EAAI,MAAM,aACd,EAAU,QAAQ,CAAC,GACnB,EAAK,qBAAqB,IAAI,GAC9B,EAAO,QAAQ;EACjB;EAEA,SAAS,KAAe;GAClB,EAAI,MAAM,aACd,EAAO,QAAQ,IACX,EAAI,MAAM,cAAY,QAAe,EAAe,OAAO,MAAM,CAAC;EACxE;EAEA,SAAS,KAAoB;GAE3B,AADA,EAAW,QAAQ,IACnB,EAAK,gBAAgB,EAAE;EACzB;SAEA,EAAa,EAAE,iBAAa,CAAC,cAI3B,EAAA,GAAA,EAkHM,OAlHN,GAkHM,CAjHJ,EA8BM,OAAA;GA9BG,SAAA;GAAJ,KAAI;GAAa,OAAM;EAC1B,GAAA,CAAA,EA4BM,OAAA;GA3BJ,OAAK,EAAA,CAAC,uBAAqB;IACY,mBAAA,EAAA,MAAI,SAAI;IAA2C,mBAAA,EAAA,MAAI,SAAI;IAAiD,yBAAA,EAAA,MAAI;IAAyC,qBAAA,EAAA,CAAA;;GAM/L,iBAAe,EAAA,MAAI,YAAY,KAAA;GAC/B,SAAK,AAAA,EAAA,QAAA,MAAE,GAAU;;GAEN,EAAA,SAAZ,EAAA,GAAA,EAAiF,QAAjF,IAAiF,EAAvB,EAAA,KAAa,GAAA,CAAA,MACvE,EAAA,GAAA,EAA+D,QAA/D,IAA+D,EAAzB,EAAA,MAAI,WAAW,GAAA,CAAA;GAE7C,EAAA,MAAI,aAAa,EAAA,MAAU,SAAM,KADzC,EAAA,GAAA,EAQS,UAAA;;IANP,MAAK;IACL,OAAM;IACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,GAAU,GAAA,CAAA,MAAA,CAAA;IACvB,cAAW;GAEX,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAuC,KAAA,EAApC,OAAM,0BAAyB,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAEpC,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,uCAAqC,EAAA,4BACL,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;EAI/C,GAAA,IAAA,CAAA,CAAA,GAAA,GAAA,IAAA,EAAA,GAAA,EAiFW,GAAA,EAjFD,IAAG,OAAM,GAAA,CACjB,EA+EM,OA/EN,IA+EM,CA7EI,EAAA,CAAA,KADR,EAAA,GAAA,EA6EM,OAAA;;GA3EA,SAAA;GAAJ,KAAI;GACJ,OAAK,EAAA,CAAC,qCAAmC;IAAA,yBACN,EAAA,MAAI;IAAQ,mBAAqB,EAAA,CAAA,MAAS;GAAA,CAAA,CAAA;GAC5E,OAAK,GAAE,EAAA,CAAA,CAAa;;GAEV,EAAA,MAAI,cAAf,EAAA,GAAA,EA4BM,OA5BN,IA4BM;IA1BI,EAAA,MAAI,YADZ,EAAA,GAAA,EAMQ,QAAA;;KAJN,OAAK,EAAA,CAAC,qCAAmC,EAAA,uBACR,EAAA,MAAkB,CAAA,CAAA;KAClD,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,GAAgB,GAAA,CAAA,MAAA,CAAA;KAC5B,OAAO,EAAA,QAAkB,6BAAA;;IAE5B,EAUE,SAAA;KATI,SAAA;KAAJ,KAAI;KACJ,MAAK;KACL,IAAG;KACH,OAAM;KACL,OAAO,EAAA;KACP,SAAK,AAAA,EAAA,QAAA,MAAE,EAAe,EAAO,OAA4B,KAAK;KAC/D,cAAa;KACZ,aAAa,EAAA,MAAI;KACjB,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IAGL,EAAA,SADR,EAAA,GAAA,EAQS,UAAA;;KANP,MAAK;KACL,OAAM;KACL,SAAK,AAAA,EAAA,OAAA,GAAA,MAAO,GAAiB,GAAA,CAAA,MAAA,CAAA;KAC9B,cAAW;IAEX,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAiC,KAAA,EAA9B,OAAM,oBAAmB,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;;GAIhC,EA8BK,MA9BL,GA8BK,CA7BO,EAAA,MAAI,WAAd,EAAA,GAAA,EAEK,MAFL,IAEK,CADH,EAAyE,GAAA;IAAjE,MAAK;IAAO,OAAM;IAA0B,OAAM;GAE5D,CAAA,CAAA,CAAA,MAAA,EAAA,GAAA,EAyBW,GAAA,EAAA,KAAA,EAAA,GAAA,EAxBT,EAAA,EAAA,GAAA,EAoBK,GAAA,MAAA,GAnBkB,EAAA,QAAb,GAAK,OADf,EAAA,GAAA,EAoBK,MAAA;IAlBF,KAAK,EAAI,SAAK,MAAU;IACzB,OAAK,EAAA,CAAC,sBAAoB,EAAA,uBACO,EAAI,SAAS,EAAW,EAAI,KAAK,EAAA,CAAA,CAAA;IAClE,UAAS;IACR,UAAK,MAAE,EAAa,CAAG;IACvB,YAAO,MAAE,GAAgB,GAAQ,CAAG;;IAG7B,EAAA,MAAI,YAAY,EAAI,SAD5B,EAAA,GAAA,EAIQ,QAAA;;KAFN,OAAK,EAAA,CAAC,cAAY,EAAA,uBACe,EAAW,EAAI,KAAK,EAAA,CAAA,CAAA;;IAE9C,EAAI,QAAb,EAAA,GAAA,EAAuD,KAAA;;KAApC,OAAK,EAAA,CAAC,SAAgB,EAAI,IAAI,CAAA;;IACjD,EAIQ,QAAA;KAHN,OAAK,EAAA,CAAC,mBAAiB,EAAA,cACC,EAAA,MAAI,aAAY,CAAA,CAAA;KACxC,WAAQ,GAAU,EAAI,KAAK;;cAGrB,GAAA,GAAA,IAAA,EAAA,MAAgB,WAAM,KAAhC,EAAA,GAAA,EAEK,MAFL,GAA2E,iBAE3E,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,EAAA,EAAA,CAAA;GAGO,EAAA,MAAI,YAAf,EAAA,GAAA,EAQM,OARN,GAQM,CANI,EAAA,MAAI,aAAa,EAAA,MAAU,SAAM,KADzC,EAAA,GAAA,EAKE,GAAA;;IAHA,OAAM;IACN,SAAA;IACC,SAAO;GAEV,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,EAAqD,GAAA;IAA7C,OAAM;IAAK,MAAK;IAAW,SAAO"}
1	+ {"version":3,"file":"admins-components26.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption \| DropdownOption[] \| string \| string[] \| null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption \| DropdownOption[] \| null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst filterInputRef = ref<HTMLInputElement \| null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle, placement } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width}px`,\n }),\n maxHeight: '20rem',\n})\n\nfunction normalizeToOptions(\n val: DropdownOption \| DropdownOption[] \| string \| string[] \| null \| undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption \| null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n}\n\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q \|\| !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every(\n (o) => o.value && currentList.some((s) => s.value === o.value),\n )\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen, dropdownEl: dropdownRef })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n 'c-input-row--open': isOpen,\n }\"\n :aria-disabled=\"cfg.disabled \|\| undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple, 'ds-dropdown--up': placement === 'up' }\"\n :style=\"dropdownStyle\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--ac-c-neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n <div v-if=\"cfg.multiple\" class=\"c-footer\">\n <Button\n v-if=\"cfg.clearable && selection.length > 0\"\n label=\"Törlés\"\n outline\n @click=\"clear\"\n />\n <Button label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components28.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption \| DropdownOption[] \| string \| string[] \| null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption \| DropdownOption[] \| null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst filterInputRef = ref<HTMLInputElement \| null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle, placement } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width}px`,\n }),\n maxHeight: '20rem',\n})\n\nfunction normalizeToOptions(\n val: DropdownOption \| DropdownOption[] \| string \| string[] \| null \| undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption \| null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n}\n\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q \|\| !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every(\n (o) => o.value && currentList.some((s) => s.value === o.value),\n )\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n 'c-input-row--open': isOpen,\n }\"\n :aria-disabled=\"cfg.disabled \|\| undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple, 'ds-dropdown--up': placement === 'up' }\"\n :style=\"dropdownStyle\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--ac-c-neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n <div v-if=\"cfg.multiple\" class=\"c-footer\">\n <Button\n v-if=\"cfg.clearable && selection.length > 0\"\n label=\"Törlés\"\n outline\n @click=\"clear\"\n />\n <Button label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}
1	+ {"version":3,"file":"admins-components28.js","names":[],"sources":["../src/components/DropdownSelect.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownSelectConfig {\n placeholder?: string\n filterable?: boolean\n filterPlaceholder?: string\n clearable?: boolean\n textEllipsis?: boolean\n multiple?: boolean\n lazy?: boolean\n size?: ControlSize\n loading?: boolean\n highlight?: boolean\n disabled?: boolean\n}\n\nexport const dropdownSelectConfigDefaults: DropdownSelectConfig = {\n placeholder: 'Válassz...',\n filterable: true,\n filterPlaceholder: 'Kezdj el gépelni...',\n clearable: true,\n textEllipsis: true,\n multiple: false,\n lazy: false,\n loading: false,\n size: 'normal' as ControlSize,\n highlight: true,\n disabled: false,\n}\n\nexport interface DropdownOption {\n icon?: string\n value?: string\n label: string\n callback?: () => void\n}\n\nexport interface DropdownSelectProps {\n modelValue?: DropdownOption \| DropdownOption[] \| string \| string[] \| null\n options: DropdownOption[]\n config?: DropdownSelectConfig\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch, nextTick } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { ControlSize } from '@/types/types'\nimport Loader from '@/components/Loader.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\n\nconst props = withDefaults(defineProps<DropdownSelectProps>(), {\n modelValue: null,\n config: () => ({ ...dropdownSelectConfigDefaults }),\n})\n\nconst cfg = computed(() => ({ ...dropdownSelectConfigDefaults, ...props.config }))\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: DropdownOption \| DropdownOption[] \| null]\n 'filter-input': [filterText: string]\n}>()\n\nconst filterText = ref('')\nconst wrapperRef = ref<HTMLElement \| null>(null)\nconst dropdownRef = ref<HTMLElement \| null>(null)\nconst filterInputRef = ref<HTMLInputElement \| null>(null)\nconst buffer = ref<DropdownOption[]>([])\nconst selection = ref<DropdownOption[]>(normalizeToOptions(props.modelValue, props.options))\n\nconst { isOpen, dropdownStyle, placement } = useDropdownAnchor(wrapperRef, dropdownRef, {\n extraStyle: (rect) => ({\n minWidth: `${rect.width}px`,\n maxWidth: `${rect.width}px`,\n }),\n maxHeight: '20rem',\n})\n\nfunction normalizeToOptions(\n val: DropdownOption \| DropdownOption[] \| string \| string[] \| null \| undefined,\n options: DropdownOption[],\n): DropdownOption[] {\n if (val == null) return []\n const arr = Array.isArray(val) ? val : [val]\n return arr\n .map((entry): DropdownOption \| null => {\n if (entry == null) return null\n if (typeof entry === 'object' && 'label' in entry) {\n return entry as DropdownOption\n }\n if (typeof entry === 'string') {\n const found = options.find((o) => o.value === entry)\n return found ?? { value: entry, label: entry }\n }\n return null\n })\n .filter((o): o is DropdownOption => o !== null)\n}\n\nwatch(\n () => [props.modelValue, props.options],\n ([v]) => {\n selection.value = normalizeToOptions(v as typeof props.modelValue, props.options)\n },\n)\n\nwatch(isOpen, (open) => {\n if (open) {\n filterText.value = ''\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n if (cfg.value.lazy) buffer.value = [...selection.value]\n }\n})\n\nfunction onFilterInput(text: string) {\n filterText.value = text\n emit('filter-input', text)\n}\n\nconst selectedLabel = computed(() => {\n if (selection.value.length === 0) return null\n if (!cfg.value.multiple) {\n const sel = selection.value[0]\n\n return props.options.find((o) => o.value === sel?.value)?.label ?? sel?.label ?? null\n }\n if (selection.value.length > 2) return `${selection.value.length} kiválasztva`\n return selection.value\n .map((sel) => props.options.find((o) => o.value === sel.value)?.label ?? sel.label ?? sel.value)\n .join(', ')\n})\n\nconst filteredOptions = computed(() => {\n const q = filterText.value.toLowerCase()\n return q ? props.options.filter((o) => o.label.toLowerCase().includes(q)) : props.options\n})\n\nfunction escapeHtml(str: string) {\n return str.replace(\n /[&<>\"']/g,\n (m) => ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m]!,\n )\n}\n\nfunction highlight(label: string) {\n const q = filterText.value.trim()\n if (!q \|\| !cfg.value.highlight) return escapeHtml(label)\n\n const safeLabel = escapeHtml(label)\n const safeQ = escapeHtml(q)\n\n const re = new RegExp(safeQ.replace(/[.*+?^${}()\|[\\]\\\\]/g, '\\\\$&'), 'ig')\n return safeLabel.replace(re, (m) => `<mark class=\"ds-option__highlight\">${m}</mark>`)\n}\n\nconst selectableOptions = computed(() => {\n return filteredOptions.value.filter((o) => o.value)\n})\n\nconst allOptionsSelected = computed(() => {\n if (selectableOptions.value.length === 0) return false\n const currentList = cfg.value.lazy && isOpen.value ? buffer.value : selection.value\n return selectableOptions.value.every(\n (o) => o.value && currentList.some((s) => s.value === o.value),\n )\n})\n\nfunction isSelected(value: string): boolean {\n const list = cfg.value.lazy && isOpen.value ? buffer : selection\n return list.value.some((s) => s.value === value)\n}\n\nfunction toggleAllOptions() {\n const currentList = cfg.value.lazy && isOpen.value ? buffer : selection\n const selectableOpts = selectableOptions.value.filter((o) => o.value)\n\n if (allOptionsSelected.value) {\n const selectableValues = new Set(selectableOpts.map((o) => o.value as string))\n currentList.value = currentList.value.filter((s) => !selectableValues.has(s.value ?? ''))\n } else {\n const existingValues = new Set(currentList.value.map((s) => s.value))\n const toAdd = selectableOpts.filter((o) => !existingValues.has(o.value as string))\n currentList.value = [...currentList.value, ...toAdd]\n }\n\n if (!cfg.value.lazy) {\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n}\n\nfunction toggleList(list: DropdownOption[], opt: DropdownOption): DropdownOption[] {\n const idx = list.findIndex((s) => s.value === opt.value)\n return idx >= 0 ? list.filter((_, i) => i !== idx) : [...list, opt]\n}\n\nfunction selectOption(opt: DropdownOption) {\n if (opt.callback) {\n opt.callback()\n isOpen.value = false\n return\n }\n\n const value = opt.value\n if (!value) return\n\n if (cfg.value.multiple) {\n if (cfg.value.lazy) {\n buffer.value = toggleList(buffer.value, opt)\n } else {\n selection.value = toggleList(selection.value, opt)\n emit('update:modelValue', selection.value.length > 0 ? [...selection.value] : null)\n }\n } else {\n selection.value = [opt]\n emit('update:modelValue', opt)\n isOpen.value = false\n }\n}\n\nfunction confirm() {\n if (cfg.value.lazy) {\n selection.value = [...buffer.value]\n emit('update:modelValue', buffer.value.length > 0 ? [...buffer.value] : null)\n }\n isOpen.value = false\n}\n\nfunction clear() {\n if (cfg.value.lazy) {\n buffer.value = []\n } else {\n selection.value = []\n emit('update:modelValue', null)\n }\n}\n\nfunction onOptionKeydown(e: KeyboardEvent, opt: DropdownOption) {\n if (e.key === ' ') {\n e.preventDefault()\n selectOption(opt)\n } else if (e.key === 'Enter') {\n e.preventDefault()\n confirm()\n }\n}\n\nfunction toggleOpen() {\n if (cfg.value.disabled) return\n isOpen.value = !isOpen.value\n if (isOpen.value) {\n if (cfg.value.filterable) {\n filterText.value = ''\n emit('filter-input', '')\n }\n }\n}\n\nfunction clearInput() {\n if (cfg.value.disabled) return\n selection.value = []\n emit('update:modelValue', null)\n isOpen.value = false\n}\n\nfunction focusAndOpen() {\n if (cfg.value.disabled) return\n isOpen.value = true\n if (cfg.value.filterable) nextTick(() => filterInputRef.value?.focus())\n}\n\nfunction handleFilterClear() {\n filterText.value = ''\n emit('filter-input', '')\n}\n\ndefineExpose({ focusAndOpen, dropdownEl: dropdownRef })\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div ref=\"wrapperRef\" class=\"c-wrapper ds-wrapper\">\n <div\n class=\"c-input-row pointer\"\n :class=\"{\n 'c-input-row--sm': cfg.size === 'small',\n 'c-input-row--lg': cfg.size === 'large',\n 'c-input-row--disabled': cfg.disabled,\n 'c-input-row--open': isOpen,\n }\"\n :aria-disabled=\"cfg.disabled \|\| undefined\"\n @click=\"toggleOpen()\"\n >\n <span v-if=\"selectedLabel\" class=\"c-truncate ds-value\">{{ selectedLabel }}</span>\n <span v-else class=\"c-placeholder\">{{ cfg.placeholder }}</span>\n <button\n v-if=\"cfg.clearable && selection.length > 0\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-clear-btn\"\n @click.stop=\"clearInput()\"\n aria-label=\"Törlés\"\n >\n <i class=\"fa-solid fa-fw fa-xmark\"></i>\n </button>\n <span\n class=\"c-icon-btn c-icon-btn--chevron mr-2\"\n :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n >\n <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n </span>\n </div>\n </div>\n <Teleport to=\"body\">\n <div class=\"ac-component\">\n <div\n v-if=\"isOpen\"\n ref=\"dropdownRef\"\n class=\"c-dropdown ds-dropdown ds-wrapper\"\n :class=\"{ 'ds-dropdown--multiple': cfg.multiple, 'ds-dropdown--up': placement === 'up' }\"\n :style=\"dropdownStyle\"\n >\n <div v-if=\"cfg.filterable\" class=\"ds-filter\">\n <span\n v-if=\"cfg.multiple\"\n class=\"c-checkbox ds-select-all-checkbox\"\n :class=\"{ 'c-checkbox--checked': allOptionsSelected }\"\n @click.stop=\"toggleAllOptions()\"\n :title=\"allOptionsSelected ? 'Összes kijelölés törlése' : 'Összes kijelölése'\"\n ></span>\n <input\n ref=\"filterInputRef\"\n type=\"text\"\n id=\"ds-filter-input\"\n class=\"c-focus ds-filter-input\"\n :value=\"filterText\"\n @input=\"onFilterInput(($event.target as HTMLInputElement).value)\"\n autocomplete=\"off\"\n :placeholder=\"cfg.filterPlaceholder\"\n @click.stop\n />\n <button\n v-if=\"filterText\"\n type=\"button\"\n class=\"c-icon-btn c-icon-btn--clear ds-filter-clear\"\n @click.stop=\"handleFilterClear()\"\n aria-label=\"Szűrők törlése\"\n >\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n\n <ul class=\"ds-options c-scroll\">\n <li v-if=\"cfg.loading\" class=\"ds-option ds-option--loading\">\n <Loader size=\"2rem\" color=\"var(--ac-c-neutral-300)\" class=\"m-auto p-3\" />\n </li>\n <template v-else>\n <li\n v-for=\"(opt, idx) in filteredOptions\"\n :key=\"opt.value ?? `cb-${idx}`\"\n class=\"d-option ds-option\"\n :class=\"{ 'ds-option--selected': opt.value && isSelected(opt.value) }\"\n tabindex=\"0\"\n @click=\"selectOption(opt)\"\n @keydown=\"onOptionKeydown($event, opt)\"\n >\n <span\n v-if=\"cfg.multiple && opt.value\"\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': isSelected(opt.value) }\"\n ></span>\n <i v-if=\"opt.icon\" class=\"fa-fw\" :class=\"opt.icon\"></i>\n <span\n class=\"d-option__label\"\n :class=\"{ 'c-truncate': cfg.textEllipsis }\"\n v-html=\"highlight(opt.label)\"\n ></span>\n </li>\n <li v-if=\"filteredOptions.length === 0\" class=\"ds-option ds-option--empty\">\n Nincs találat\n </li>\n </template>\n </ul>\n <div v-if=\"cfg.multiple\" class=\"c-footer\">\n <Button\n v-if=\"cfg.clearable && selection.length > 0\"\n label=\"Törlés\"\n outline\n @click=\"clear\"\n />\n <Button label=\"OK\" type=\"success\" @click=\"confirm\" />\n </div>\n </div>\n </div>\n </Teleport>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}

package/dist/admins-components83.js CHANGED Viewed

@@ -35,19 +35,25 @@ var A = /*@__PURE__*/ d({
 	},
 	emits: ["update:modelValue", "sort-change"],
 	setup(d, { emit: A }) {
-		let j = d, M = A, N = h(null), P = h(null), { isOpen: F, dropdownStyle: I } = t(N, P, {
+		let j = d, M = A, N = h(null), P = h(null), F = h(null), { isOpen: I, dropdownStyle: L } = t(N, P, {
 			extraStyle: (e) => ({ minWidth: `${Math.max(e.width, 240)}px` }),
-			closeOnScroll: !0
-		}), L = a({
+			closeOnScroll: !0,
+			isOutsideClick: (e) => {
+				let t = e.target;
+				if (N.value?.contains(t) || P.value?.contains(t)) return !1;
+				let n = F.value?.dropdownEl;
+				return !(n && n.contains(t));
+			}
+		}), R = a({
 			get: () => j.modelValue?.key ?? null,
 			set: (e) => {
-				Array.isArray(e) || B(typeof e == "string" ? e : null, j.modelValue?.direction ?? "asc");
+				Array.isArray(e) || V(typeof e == "string" ? e : null, j.modelValue?.direction ?? "asc");
 			}
-		}), R = a({
+		}), z = a({
 			get: () => j.modelValue?.direction ?? "asc",
-			set: (e) => B(j.modelValue?.key ?? null, e)
-		}), z = a(() => j.modelValue ? `${j.options.find((e) => e.value === j.modelValue.key)?.label ?? j.modelValue.key} (${j.modelValue.direction === "asc" ? "növekvő" : "csökkenő"})` : j.placeholder);
-		function B(e, t) {
+			set: (e) => V(j.modelValue?.key ?? null, e)
+		}), B = a(() => j.modelValue ? `${j.options.find((e) => e.value === j.modelValue.key)?.label ?? j.modelValue.key} (${j.modelValue.direction === "asc" ? "növekvő" : "csökkenő"})` : j.placeholder);
+		function V(e, t) {
 			if (e == null) {
 				j.handleUrl && (r("sortBy", null, { handleUrl: !0 }), r("sortDir", null, { handleUrl: !0 })), M("update:modelValue", null), M("sort-change", null);
 				return;
@@ -62,16 +68,16 @@ var A = /*@__PURE__*/ d({
 			};
 			M("update:modelValue", n), M("sort-change", n);
 		}
-		function V() {
-			B(null, "asc"), F.value = !1;
+		function H() {
+			V(null, "asc"), I.value = !1;
 		}
-		function H(e) {
-			Array.isArray(e) || (L.value = e?.value ?? null);
+		function U(e) {
+			Array.isArray(e) || (R.value = e?.value ?? null);
 		}
-		return v(F, (e) => {
+		return v(I, (e) => {
 			if (!e || !j.handleUrl || j.modelValue) return;
 			let t = k();
-			t && B(t.key, t.direction);
+			t && V(t.key, t.direction);
 		}, { immediate: !0 }), (t, r) => (m(), c("div", b, [l("div", {
 			ref_key: "wrapperRef",
 			ref: N,
@@ -81,58 +87,60 @@ var A = /*@__PURE__*/ d({
 			class: f(["c-btn ds-sort-trigger lh-1", [
 				d.modelValue && "is-active",
 				d.disabled && "is-disabled",
-				_(F) && "is-open"
+				_(I) && "is-open"
 			]]),
 			disabled: d.disabled,
-			"aria-label": `Rendezés: ${z.value}`,
-			onClick: r[0] ||= (e) => F.value = !_(F)
+			"aria-label": `Rendezés: ${B.value}`,
+			onClick: r[0] ||= (e) => I.value = !_(I)
 		}, [
 			l("i", { class: f(["fa-solid fa-fw", !d.modelValue || d.modelValue.direction === "asc" ? "fa-arrow-up-wide-short" : "fa-arrow-down-wide-short"]) }, null, 2),
-			l("span", S, g(z.value), 1),
+			l("span", S, g(B.value), 1),
 			d.modelValue ? (m(), c("button", {
 				key: 0,
 				type: "button",
 				class: "c-icon-btn c-icon-btn--clear ds-sort-clear",
 				"aria-label": "Rendezés törlése",
 				title: "Rendezés törlése",
-				onClick: y(V, ["stop"])
+				onClick: y(H, ["stop"])
 			}, [...r[4] ||= [l("i", { class: "fa-solid fa-fw fa-xmark" }, null, -1)]])) : s("", !0),
-			l("span", { class: f(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": _(F) }]) }, [...r[5] ||= [l("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
-		], 10, x), (m(), o(i, { to: "body" }, [l("div", { class: f(["ac-component", [`is-font-${d.fontSize}`]]) }, [_(F) ? (m(), c("div", {
+			l("span", { class: f(["c-icon-btn c-icon-btn--chevron", { "c-icon-btn--chevron-open": _(I) }]) }, [...r[5] ||= [l("i", { class: "fa-solid fa-fw fa-chevron-down" }, null, -1)]], 2)
+		], 10, x), (m(), o(i, { to: "body" }, [l("div", { class: f(["ac-component", [`is-font-${d.fontSize}`]]) }, [_(I) ? (m(), c("div", {
 			key: 0,
 			ref_key: "dropdownRef",
 			ref: P,
 			class: "ds-sort-panel",
-			style: p(_(I))
+			style: p(_(L))
 		}, [
 			l("div", C, [r[6] ||= l("label", { class: "ds-sort-panel__label" }, "Oszlop", -1), u(n, {
-				"model-value": L.value,
+				ref_key: "columnSelectRef",
+				ref: F,
+				"model-value": R.value,
 				options: d.options,
 				config: {
 					clearable: !1,
 					placeholder: "Válassz oszlopot...",
 					filterable: !1
 				},
-				"onUpdate:modelValue": H
+				"onUpdate:modelValue": U
 			}, null, 8, ["model-value", "options"])]),
 			l("div", w, [r[9] ||= l("span", { class: "ds-sort-panel__label" }, "Irány", -1), l("div", T, [l("button", {
 				type: "button",
-				class: f(["ds-sort-direction__btn", { "is-active": R.value === "asc" }]),
-				"aria-pressed": R.value === "asc",
+				class: f(["ds-sort-direction__btn", { "is-active": z.value === "asc" }]),
+				"aria-pressed": z.value === "asc",
 				"aria-label": "Növekvő",
-				onClick: r[1] ||= (e) => R.value = "asc"
+				onClick: r[1] ||= (e) => z.value = "asc"
 			}, [...r[7] ||= [l("i", { class: "fa-solid fa-fw fa-arrow-up-wide-short" }, null, -1), l("span", null, "Növekvő", -1)]], 10, E), l("button", {
 				type: "button",
-				class: f(["ds-sort-direction__btn dir-desc", { "is-active": R.value === "desc" }]),
-				"aria-pressed": R.value === "desc",
+				class: f(["ds-sort-direction__btn dir-desc", { "is-active": z.value === "desc" }]),
+				"aria-pressed": z.value === "desc",
 				"aria-label": "Csökkenő",
-				onClick: r[2] ||= (e) => R.value = "desc"
+				onClick: r[2] ||= (e) => z.value = "desc"
 			}, [...r[8] ||= [l("i", { class: "fa-solid fa-fw fa-arrow-down-wide-short" }, null, -1), l("span", null, "Csökkenő", -1)]], 10, D)])]),
 			l("div", O, [u(e, {
 				label: "Rendben",
 				outline: "",
 				size: "small",
-				onClick: r[3] ||= (e) => F.value = !1
+				onClick: r[3] ||= (e) => I.value = !1
 			})])
 		], 4)) : s("", !0)], 2)]))], 2)]));
 	}

package/dist/admins-components83.js.map CHANGED Viewed

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

package/dist/admins-components85.js.map CHANGED Viewed

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

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

@@ -28,6 +28,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import('vue').DefineComponent<DropdownSelectProps, {
     focusAndOpen: () => void;
+    dropdownEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: DropdownOption | DropdownOption[] | null) => any;
     "filter-input": (filterText: string) => any;

package/package.json CHANGED Viewed

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