admins-components 9.0.27 → 9.0.29

package/dist/admins-components66.js

@@ -1,275 +1,171 @@
 import e from "./admins-components6.js";
-import t from "./admins-components27.js";
-import { dataCardsSettingsDefaults as n, dataListSettingsDefaults as r, dataTableSettingsDefaults as i } from "./admins-components54.js";
-import { deepMerge as ee } from "./admins-components65.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, onMounted as h, openBlock as g, ref as _, renderList as v, resolveDirective as y, toDisplayString as b, withCtx as x, withDirectives as S, withModifiers as C } from "vue";
-//#region src/components/data-table/DataListOptions.vue?vue&type=script&setup=true&lang.ts
-var te = { class: "table-options" }, ne = { class: "table-options__col" }, re = { class: "table-options__list" }, ie = { class: "table-options__col" }, ae = { class: "table-options__title" }, oe = { class: "table-options__title-value" }, se = { class: "layout-switch" }, ce = { class: "table-options__col" }, le = { class: "table-options__title flex-center gap-1" }, ue = { class: "table-options__list" }, de = [
-	"draggable",
-	"onDragstart",
-	"onDragover",
-	"onClick"
-], fe = {
-	key: 0,
-	class: "fa-solid fa-grip-vertical table-options__drag-handle"
-}, pe = ["onClick"], me = {
-	key: 0,
-	class: "table-options__move-actions"
-}, he = ["disabled"], w = ["disabled"], T = { class: "table-options__col" }, E = { class: "table-options__list" }, D = [
-	"draggable",
-	"onDragstart",
-	"onDragover",
-	"onClick"
-], O = {
-	key: 0,
-	class: "fa-solid fa-grip-vertical table-options__drag-handle"
-}, k = ["onClick"], A = {
-	key: 0,
-	class: "table-options__move-actions"
-}, j = ["disabled"], M = ["disabled"], N = { class: "table-options__footer" }, P = /* @__PURE__ */ p({
-	__name: "DataListOptions",
+import t from "./admins-components19.js";
+import n from "./admins-components27.js";
+import r from "./admins-components42.js";
+import i from "./admins-components52.js";
+import { useSelection as a } from "./admins-components57.js";
+import { dataCardsSettingsDefaults as o } from "./admins-components58.js";
+import { buildActionGroupMenuItems as s, getColumnValue as c, isActionGroup as l } from "./admins-components59.js";
+import u from "./admins-components62.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createVNode as _, defineComponent as v, mergeProps as y, normalizeClass as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, vShow as E, watch as D, withDirectives as O, withModifiers as k } from "vue";
+//#region src/components/data-table/DataCards.vue?vue&type=script&setup=true&lang.ts
+var A = { class: "ac-component" }, j = ["onClick", "onPointerdown"], M = ["onClick"], N = { class: "c-card__heading" }, P = { class: "c-card__label" }, F = ["innerHTML"], I = { class: "c-card__body" }, L = { class: "c-card__field-label" }, R = {
+	key: 1,
+	class: "c-cards__loading-wrap"
+}, z = {
+	key: 2,
+	class: "c-cards__backdrop",
+	"aria-hidden": "true"
+}, B = /* @__PURE__ */ v({
+	__name: "DataCards",
 	props: {
-		open: { type: Boolean },
-		columns: {},
-		settings: {},
-		position: {},
-		storageKey: {},
-		orderable: {
+		config: {},
+		items: {},
+		settings: { default: () => ({ ...o }) },
+		loading: {
 			type: Boolean,
 			default: !1
 		}
 	},
-	emits: ["close", "change"],
-	setup(p, { emit: P }) {
-		let F = p, I = P, L = _(z()), R = o(() => `data-list-${F.storageKey}`), ge = o(() => JSON.stringify(L.value) !== JSON.stringify(z()));
-		function z() {
-			return {
-				...n,
-				...i,
-				...r,
-				...F.settings,
-				columns: Object.fromEntries(F.columns.map((e) => [e.property, F.settings.columns?.[e.property] ?? e.visible !== !1])),
-				cardHeaderColumns: Object.fromEntries(F.columns.map((e) => [e.property, F.settings.cardHeaderColumns?.[e.property] ?? e.primary === !0])),
-				columnOrder: F.settings.columnOrder ?? F.columns.map((e) => e.property),
-				cardHeaderOrder: F.settings.cardHeaderOrder ?? F.columns.map((e) => e.property)
-			};
-		}
-		function _e() {
-			try {
-				let e = localStorage.getItem(R.value), t = z();
-				if (e) {
-					let n = JSON.parse(e);
-					L.value = n.settings ? ve(ee(t, n.settings), F.columns) : t;
-				} else L.value = t;
-			} catch {
-				L.value = z();
+	emits: ["selection-change"],
+	setup(o, { emit: v }) {
+		let B = o, V = v, { selectedKeys: H, toggle: U } = a(() => B.items, () => B.config.selectableAttr, (e) => V("selection-change", e)), W = S(/* @__PURE__ */ new Set());
+		D(() => B.items, () => {
+			W.value = /* @__PURE__ */ new Set();
+		});
+		let G = f(() => B.config.columns.filter((e) => e.visible !== !1)), K = f(() => {
+			let e = B.settings;
+			if (e?.cardHeaderColumns) {
+				let t = G.value.filter((t) => e.cardHeaderColumns[t.property]);
+				if (t.length > 0) {
+					if (e.cardHeaderOrder) {
+						let n = e.cardHeaderOrder;
+						return [...t].sort((e, t) => {
+							let r = n.indexOf(e.property), i = n.indexOf(t.property);
+							return (r === -1 ? 999 : r) - (i === -1 ? 999 : i);
+						});
+					}
+					return t;
+				}
 			}
-			I("change", L.value);
-		}
-		function ve(e, t) {
-			let n = t.map((e) => e.property), r = (e) => {
-				let t = new Set(n), r = (e ?? []).filter((e) => t.has(e)), i = n.filter((e) => !r.includes(e));
-				return [...r, ...i];
-			};
-			return {
-				...e,
-				columnOrder: r(e.columnOrder),
-				cardHeaderOrder: r(e.cardHeaderOrder)
-			};
-		}
-		function ye() {
-			try {
-				let e = R.value, t = localStorage.getItem(e), n = t ? JSON.parse(t) : {};
-				n.settings = L.value, localStorage.setItem(e, JSON.stringify(n));
-			} catch {}
-			I("change", L.value);
-		}
-		function B(e, t) {
-			L.value = {
-				...L.value,
-				[e]: t
-			}, ye();
-		}
-		function V(e) {
-			B("columns", {
-				...L.value.columns,
-				[e]: !L.value.columns[e]
-			});
-		}
-		function H(e) {
-			B("cardHeaderColumns", {
-				...L.value.cardHeaderColumns,
-				[e]: !L.value.cardHeaderColumns[e]
-			});
-		}
-		function U(e) {
-			B(e, !L.value[e]);
-		}
-		function W(e, t) {
-			return [...e].sort((e, n) => {
-				let r = t.indexOf(e.property), i = t.indexOf(n.property);
-				return (r === -1 ? 999 : r) - (i === -1 ? 999 : i);
-			});
-		}
-		let G = o(() => W(F.columns, L.value.columnOrder)), K = o(() => W(F.columns, L.value.cardHeaderOrder)), q = _(null), J = _(null), Y = _(null), X = _(null);
-		function be(e) {
-			q.value = e;
+			let t = G.value.filter((e) => e.primary);
+			return t.length > 0 ? t : G.value.slice(0, 1);
+		}), q = null, J = !1;
+		function Y(e, t) {
+			B.config.selectableAttr && e.button === 0 && (J = !1, q = setTimeout(() => {
+				J = !0, U(t);
+			}, 500));
 		}
-		function xe(e, t) {
-			if (e.preventDefault(), q.value === null || q.value === t) return;
-			let n = [...L.value.columnOrder], r = n.splice(q.value, 1)[0];
-			r && (n.splice(t, 0, r), q.value = t, B("columnOrder", n));
-		}
-		function Se() {
-			q.value = null;
-		}
-		function Ce(e) {
-			J.value = J.value === e ? null : e;
+		function X() {
+			q &&= (clearTimeout(q), null);
 		}
 		function Z(e) {
-			if (J.value === null) return;
-			let t = J.value + e;
-			if (t < 0 || t >= L.value.columnOrder.length) return;
-			let n = [...L.value.columnOrder], r = n[J.value];
-			n[J.value] = n[t], n[t] = r, B("columnOrder", n), J.value = t;
-		}
-		function we(e) {
-			Y.value = e;
-		}
-		function Q(e, t) {
-			if (e.preventDefault(), Y.value === null || Y.value === t) return;
-			let n = [...L.value.cardHeaderOrder], r = n.splice(Y.value, 1)[0];
-			r && (n.splice(t, 0, r), Y.value = t, B("cardHeaderOrder", n));
+			J && e.preventDefault();
 		}
-		function Te() {
-			Y.value = null;
-		}
-		function Ee(e) {
-			X.value = X.value === e ? null : e;
+		function Q(e) {
+			if (J) {
+				J = !1;
+				return;
+			}
+			$(e);
 		}
 		function $(e) {
-			if (X.value === null) return;
-			let t = X.value + e;
-			if (t < 0 || t >= L.value.cardHeaderOrder.length) return;
-			let n = [...L.value.cardHeaderOrder], r = n[X.value];
-			n[X.value] = n[t], n[t] = r, B("cardHeaderOrder", n), X.value = t;
-		}
-		function De() {
-			localStorage.removeItem(R.value), L.value = z(), I("change", L.value);
-		}
-		return h(_e), (n, r) => {
-			let i = y("tooltip");
-			return g(), s(t, {
-				open: p.open,
-				title: "Lista beállítások",
-				position: F.position,
-				onClose: r[16] ||= (e) => I("close")
-			}, {
-				default: x(() => [u("div", te, [
-					u("div", ne, [r[19] ||= u("h4", { class: "table-options__title" }, "Megjelenés", -1), u("ul", re, [u("li", {
-						class: "table-options__item",
-						onClick: r[1] ||= (e) => U("compact"),
-						title: "A sorok közötti térköz csökkentése"
-					}, [u("span", {
-						class: m(["c-checkbox", { "c-checkbox--checked": L.value.compact }]),
-						onClick: r[0] ||= C((e) => U("compact"), ["stop"])
-					}, null, 2), r[17] ||= u("span", null, "Kompakt", -1)]), u("li", {
-						class: "table-options__item",
-						onClick: r[3] ||= (e) => U("striped"),
-						title: "A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)"
-					}, [u("span", {
-						class: m(["c-checkbox", { "c-checkbox--checked": L.value.striped }]),
-						onClick: r[2] ||= C((e) => U("striped"), ["stop"])
-					}, null, 2), r[18] ||= u("span", null, "Sávos (striped)", -1)])])]),
-					u("div", ie, [u("h4", ae, [r[20] ||= d(" Elrendezés ", -1), u("span", oe, "— " + b(L.value.layout === "screen" ? "Auto" : L.value.layout === "table" ? "Táblázat" : "Kártyák"), 1)]), u("div", se, [
-						u("button", {
-							class: m(["layout-switch__btn", { "layout-switch__btn--active": L.value.layout === "screen" }]),
-							title: "Kijelző méretéhez igazodó elrendezés",
-							onClick: r[4] ||= (e) => B("layout", "screen")
-						}, [...r[21] ||= [u("i", { class: "fa-solid fa-display" }, null, -1)]], 2),
-						u("button", {
-							class: m(["layout-switch__btn", { "layout-switch__btn--active": L.value.layout === "table" }]),
-							title: "Táblázat nézet",
-							onClick: r[5] ||= (e) => B("layout", "table")
-						}, [...r[22] ||= [u("i", { class: "fa-solid fa-table-list" }, null, -1)]], 2),
-						u("button", {
-							class: m(["layout-switch__btn", { "layout-switch__btn--active": L.value.layout === "cards" }]),
-							title: "Kártya nézet",
-							onClick: r[6] ||= (e) => B("layout", "cards")
-						}, [...r[23] ||= [u("i", { class: "fa-solid fa-list" }, null, -1)]], 2)
-					])]),
-					u("div", ce, [
-						S((g(), l("h4", le, [...r[24] ||= [d(" Kártya fejléc ", -1), u("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[i, "Kártya nézetben, a sorok fejlécén megjelenő oszlopok"]]),
-						u("ul", ue, [(g(!0), l(a, null, v(K.value, (e, t) => (g(), l("li", {
-							key: "ch-" + e.property,
-							class: m(["table-options__item", {
-								"table-options__item--disabled": e.primary,
-								"table-options__item--selected": p.orderable && X.value === t,
-								"table-options__item--dragging": p.orderable && Y.value === t
-							}]),
-							draggable: p.orderable,
-							onDragstart: C((e) => p.orderable && we(t), ["stop"]),
-							onDragover: C((e) => p.orderable && Q(e, t), ["prevent"]),
-							onDrop: r[7] ||= C(() => {}, ["prevent"]),
-							onDragend: r[8] ||= (e) => p.orderable && Te(),
-							onClick: C((n) => p.orderable ? Ee(t) : !e.primary && H(e.property), ["prevent"])
-						}, [p.orderable ? (g(), l("i", fe)) : c("", !0), u("span", {
-							class: "table-options__toggle",
-							onClick: C((t) => !e.primary && H(e.property), ["stop"])
-						}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": L.value.cardHeaderColumns[e.property] }]) }, null, 2), u("span", null, b(e.label), 1)], 8, pe)], 42, de))), 128))]),
-						p.orderable && X.value !== null ? (g(), l("div", me, [u("button", {
-							class: "table-options__move-btn",
-							disabled: X.value === 0,
-							onClick: r[9] ||= (e) => $(-1)
-						}, [...r[25] ||= [u("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, he), u("button", {
-							class: "table-options__move-btn",
-							disabled: X.value === K.value.length - 1,
-							onClick: r[10] ||= (e) => $(1)
-						}, [...r[26] ||= [u("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, w)])) : c("", !0)
-					]),
-					u("div", T, [
-						r[29] ||= u("h4", { class: "table-options__title" }, "Oszlopok", -1),
-						u("ul", E, [(g(!0), l(a, null, v(G.value, (e, t) => (g(), l("li", {
-							key: e.property,
-							class: m(["table-options__item", {
-								"table-options__item--disabled": e.primary,
-								"table-options__item--selected": p.orderable && J.value === t,
-								"table-options__item--dragging": p.orderable && q.value === t
-							}]),
-							draggable: p.orderable,
-							onDragstart: C((e) => p.orderable && be(t), ["stop"]),
-							onDragover: C((e) => p.orderable && xe(e, t), ["prevent"]),
-							onDrop: r[11] ||= C(() => {}, ["prevent"]),
-							onDragend: r[12] ||= (e) => p.orderable && Se(),
-							onClick: C((n) => p.orderable ? Ce(t) : !e.primary && V(e.property), ["prevent"])
-						}, [p.orderable ? (g(), l("i", O)) : c("", !0), u("span", {
-							class: "table-options__toggle",
-							onClick: C((t) => !e.primary && V(e.property), ["stop"])
-						}, [u("span", { class: m(["c-checkbox", { "c-checkbox--checked": L.value.columns[e.property] }]) }, null, 2), u("span", null, b(e.label), 1)], 8, k)], 42, D))), 128))]),
-						p.orderable && J.value !== null ? (g(), l("div", A, [u("button", {
-							class: "table-options__move-btn",
-							disabled: J.value === 0,
-							onClick: r[13] ||= (e) => Z(-1)
-						}, [...r[27] ||= [u("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, j), u("button", {
-							class: "table-options__move-btn",
-							disabled: J.value === G.value.length - 1,
-							onClick: r[14] ||= (e) => Z(1)
-						}, [...r[28] ||= [u("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, M)])) : c("", !0)
-					])
-				]), u("div", N, [f(e, {
-					icon: "fa-solid  fa-triangle-exclamation",
-					disabled: !ge.value,
-					label: "Alapértelmezés visszaállítása",
-					size: "small",
-					onClick: De
-				}, null, 8, ["disabled"]), f(e, {
-					label: "OK",
-					onClick: r[15] ||= (e) => I("close")
-				})])]),
-				_: 1
-			}, 8, ["open", "position"]);
-		};
+			W.value.has(e) ? W.value.delete(e) : W.value.add(e), W.value = new Set(W.value);
+		}
+		return (a, f) => (x(), h("div", A, [g("div", { class: b(["c-cards-wrapper", { "is-loading": o.loading }]) }, [!o.loading || o.items.length > 0 ? (x(), h("div", {
+			key: 0,
+			class: b(["c-cards", { "is-compact": o.settings.compact }])
+		}, [(x(!0), h(d, null, C(o.items, (i, a) => (x(), h("div", {
+			key: a,
+			class: b(["c-card", {
+				"is-open": W.value.has(a),
+				"is-selected": o.config.selectableAttr && T(H).has(i[o.config.selectableAttr])
+			}])
+		}, [g("button", {
+			type: "button",
+			class: "c-card__header",
+			onClick: (e) => Q(a),
+			onPointerdown: (e) => Y(e, i),
+			onPointerup: f[1] ||= (e) => X(),
+			onPointerleave: f[2] ||= (e) => X(),
+			onContextmenu: Z
+		}, [
+			o.config.selectableAttr ? (x(), h("span", {
+				key: 0,
+				class: "c-card__check-zone",
+				onClick: k((e) => T(U)(i), ["stop"])
+			}, [_(t, {
+				"model-value": !!T(H).has(i[o.config.selectableAttr]),
+				"onUpdate:modelValue": (e) => T(U)(i),
+				onClick: f[0] ||= k(() => {}, ["stop"])
+			}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, M)) : m("", !0),
+			g("span", N, [(x(!0), h(d, null, C(K.value, (e, t) => (x(), h("span", {
+				key: e.property,
+				class: "c-card__heading-item"
+			}, [g("span", P, w(e.label), 1), g("span", {
+				class: b(["c-card__title", { "c-truncate": o.settings.compact && t === 0 }]),
+				innerHTML: T(c)(i, e)
+			}, null, 10, F)]))), 128))]),
+			f[4] ||= g("span", {
+				class: "c-card__icon",
+				"aria-hidden": "true"
+			}, [g("i", { class: "fa-solid fa-chevron-down" })], -1)
+		], 40, j), O(g("div", I, [(x(!0), h(d, null, C(G.value, (e) => (x(), h("div", {
+			key: e.property,
+			class: "c-card__field",
+			tabindex: "0"
+		}, [
+			g("span", L, w(e.label), 1),
+			_(u, {
+				item: i,
+				col: e,
+				class: "c-card__field-value",
+				copy: !1
+			}, null, 8, ["item", "col"]),
+			T(c)(i, e) ? (x(), p(r, {
+				key: 0,
+				class: "c-card__field-copy click-expand",
+				value: T(c)(i, e)
+			}, null, 8, ["value"])) : m("", !0)
+		]))), 128)), o.config.actions ? (x(), h("div", {
+			key: 0,
+			class: "c-card__actions",
+			onClick: f[3] ||= k(() => {}, ["stop"])
+		}, [(x(!0), h(d, null, C(o.config.actions, (t, r) => (x(), h(d, { key: r }, [T(l)(t) ? (x(), p(n, y({
+			key: 0,
+			icon: t.icon,
+			label: t.label,
+			ariaLabel: t.ariaLabel,
+			items: T(s)(t, i)
+		}, { ref_for: !0 }, t.config), null, 16, [
+			"icon",
+			"label",
+			"ariaLabel",
+			"items"
+		])) : (x(), p(e, y({
+			key: 1,
+			type: t.type,
+			icon: t.icon,
+			label: t.cardLabel ?? t.label,
+			ariaLabel: t.ariaLabel,
+			outline: "",
+			disabled: t.disabled ? t.disabled(i) : !1,
+			callback: () => t.callback(i)
+		}, { ref_for: !0 }, t.config), null, 16, [
+			"type",
+			"icon",
+			"label",
+			"ariaLabel",
+			"disabled",
+			"callback"
+		]))], 64))), 128))])) : m("", !0)], 512), [[E, W.value.has(a)]])], 2))), 128))], 2)) : (x(), h("div", R, [_(i, {
+			loading: !0,
+			size: "2.5rem"
+		})])), o.loading && o.items.length > 0 ? (x(), h("div", z, [_(i, {
+			loading: !0,
+			size: "2.5rem"
+		})])) : m("", !0)], 2)]));
 	}
 });
 //#endregion
-export { P as default };
+export { B as default };

package/dist/admins-components66.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components66.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n  open?: boolean\n  columns: Column[]\n  settings: Partial<DataListSettings>\n  position?: SidebarPosition\n  storageKey: string\n  orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n  orderable: false,\n})\n\nconst emit = defineEmits<{\n  close: []\n  change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n  () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction getDefaults(): DataListSettings {\n  return {\n    ...dataCardsSettingsDefaults,\n    ...dataTableSettingsDefaults,\n    ...dataListSettingsDefaults,\n    ...props.settings,\n    columns: Object.fromEntries(\n      props.columns.map((c) => [\n        c.property,\n        props.settings.columns?.[c.property] ?? c.visible !== false,\n      ]),\n    ),\n    cardHeaderColumns: Object.fromEntries(\n      props.columns.map((c) => [\n        c.property,\n        props.settings.cardHeaderColumns?.[c.property] ?? c.primary === true,\n      ]),\n    ),\n    columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n    cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n  } as DataListSettings\n}\n\nfunction load() {\n  try {\n    const raw = localStorage.getItem(storageKey.value)\n    const defaults = getDefaults()\n    if (raw) {\n      const data = JSON.parse(raw)\n      local.value = data.settings\n        ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n        : defaults\n    } else {\n      local.value = defaults\n    }\n  } catch {\n    local.value = getDefaults()\n  }\n  emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n  const props = columns.map((c) => c.property)\n  const reconcile = (order: string[] | undefined): string[] => {\n    const known = new Set(props)\n    const filtered = (order ?? []).filter((p) => known.has(p))\n    const missing = props.filter((p) => !filtered.includes(p))\n    return [...filtered, ...missing]\n  }\n  return {\n    ...settings,\n    columnOrder: reconcile(settings.columnOrder),\n    cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n  }\n}\n\nfunction save() {\n  try {\n    const key = storageKey.value\n    const raw = localStorage.getItem(key)\n    const data = raw ? JSON.parse(raw) : {}\n    data.settings = local.value\n    localStorage.setItem(key, JSON.stringify(data))\n  } catch {\n    /* ignore */\n  }\n  emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n  local.value = { ...local.value, [key]: value }\n  save()\n}\n\nfunction toggleColumn(property: string) {\n  update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n  update('cardHeaderColumns', {\n    ...local.value.cardHeaderColumns,\n    [property]: !local.value.cardHeaderColumns[property],\n  })\n}\n\nfunction toggle(key: 'striped' | 'compact') {\n  update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n  return [...cols].sort((a, b) => {\n    const ai = order.indexOf(a.property)\n    const bi = order.indexOf(b.property)\n    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n  })\n}\n\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n  sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n  dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n  e.preventDefault()\n  if (dragIndex.value === null || dragIndex.value === index) return\n  const order = [...local.value.columnOrder]\n  const moved = order.splice(dragIndex.value, 1)[0]\n  if (!moved) return\n  order.splice(index, 0, moved)\n  dragIndex.value = index\n  update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n  dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n  selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n  if (selectedReorderIndex.value === null) return\n  const target = selectedReorderIndex.value + direction\n  if (target < 0 || target >= local.value.columnOrder.length) return\n  const order = [...local.value.columnOrder]\n  const tmp = order[selectedReorderIndex.value]!\n  order[selectedReorderIndex.value] = order[target]!\n  order[target] = tmp\n  update('columnOrder', order)\n  selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n  cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n  e.preventDefault()\n  if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n  const order = [...local.value.cardHeaderOrder]\n  const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n  if (!moved) return\n  order.splice(index, 0, moved)\n  cardHeaderDragIndex.value = index\n  update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n  cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n  selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n  if (selectedCardHeaderIndex.value === null) return\n  const target = selectedCardHeaderIndex.value + direction\n  if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n  const order = [...local.value.cardHeaderOrder]\n  const tmp = order[selectedCardHeaderIndex.value]!\n  order[selectedCardHeaderIndex.value] = order[target]!\n  order[target] = tmp\n  update('cardHeaderOrder', order)\n  selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n  localStorage.removeItem(storageKey.value)\n  local.value = getDefaults()\n  emit('change', local.value)\n}\n\nonMounted(load)\n</script>\n\n<template>\n  <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n    <div class=\"table-options\">\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">Megjelenés</h4>\n        <ul class=\"table-options__list\">\n          <li\n            class=\"table-options__item\"\n            @click=\"toggle('compact')\"\n            title=\"A sorok közötti térköz csökkentése\"\n          >\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': local.compact }\"\n              @click.stop=\"toggle('compact')\"\n            ></span>\n            <span>Kompakt</span>\n          </li>\n          <li\n            class=\"table-options__item\"\n            @click=\"toggle('striped')\"\n            title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n          >\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': local.striped }\"\n              @click.stop=\"toggle('striped')\"\n            ></span>\n            <span>Sávos (striped)</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">\n          Elrendezés\n          <span class=\"table-options__title-value\"\n            >—\n            {{\n              local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n            }}</span\n          >\n        </h4>\n        <div class=\"layout-switch\">\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n            title=\"Kijelző méretéhez igazodó elrendezés\"\n            @click=\"update('layout', 'screen')\"\n          >\n            <i class=\"fa-solid fa-display\"></i>\n          </button>\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n            title=\"Táblázat nézet\"\n            @click=\"update('layout', 'table')\"\n          >\n            <i class=\"fa-solid fa-table-list\"></i>\n          </button>\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n            title=\"Kártya nézet\"\n            @click=\"update('layout', 'cards')\"\n          >\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"table-options__col\">\n        <h4\n          class=\"table-options__title flex-center gap-1\"\n          v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n        >\n          Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n        </h4>\n        <ul class=\"table-options__list\">\n          <li\n            v-for=\"(col, index) in orderedCardHeaderColumns\"\n            :key=\"'ch-' + col.property\"\n            class=\"table-options__item\"\n            :class=\"{\n              'table-options__item--disabled': col.primary,\n              'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n              'table-options__item--dragging': orderable && cardHeaderDragIndex === index,\n            }\"\n            :draggable=\"orderable\"\n            @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n            @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n            @drop.prevent\n            @dragend=\"orderable && onCardHeaderDragEnd()\"\n            @click.prevent=\"\n              orderable\n                ? selectCardHeader(index)\n                : !col.primary && toggleCardHeaderColumn(col.property)\n            \"\n          >\n            <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n            <span\n              class=\"table-options__toggle\"\n              @click.stop=\"!col.primary && toggleCardHeaderColumn(col.property)\"\n            >\n              <span\n                class=\"c-checkbox\"\n                :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n              ></span>\n              <span>{{ col.label }}</span>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"orderable && selectedCardHeaderIndex !== null\"\n          class=\"table-options__move-actions\"\n        >\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedCardHeaderIndex === 0\"\n            @click=\"moveCardHeader(-1)\"\n          >\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n            @click=\"moveCardHeader(1)\"\n          >\n            <i class=\"fa-solid fa-arrow-down\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">Oszlopok</h4>\n        <ul class=\"table-options__list\">\n          <li\n            v-for=\"(col, index) in orderedColumns\"\n            :key=\"col.property\"\n            class=\"table-options__item\"\n            :class=\"{\n              'table-options__item--disabled': col.primary,\n              'table-options__item--selected': orderable && selectedReorderIndex === index,\n              'table-options__item--dragging': orderable && dragIndex === index,\n            }\"\n            :draggable=\"orderable\"\n            @dragstart.stop=\"orderable && onDragStart(index)\"\n            @dragover.prevent=\"orderable && onDragOver($event, index)\"\n            @drop.prevent\n            @dragend=\"orderable && onDragEnd()\"\n            @click.prevent=\"\n              orderable ? selectForReorder(index) : !col.primary && toggleColumn(col.property)\n            \"\n          >\n            <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n            <span\n              class=\"table-options__toggle\"\n              @click.stop=\"!col.primary && toggleColumn(col.property)\"\n            >\n              <span\n                class=\"c-checkbox\"\n                :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n              ></span>\n              <span>{{ col.label }}</span>\n            </span>\n          </li>\n        </ul>\n        <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"table-options__move-actions\">\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedReorderIndex === 0\"\n            @click=\"moveSelected(-1)\"\n          >\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n            @click=\"moveSelected(1)\"\n          >\n            <i class=\"fa-solid fa-arrow-down\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"table-options__footer\">\n      <Button\n        icon=\"fa-solid  fa-triangle-exclamation\"\n        :disabled=\"!hasCustomSettings\"\n        label=\"Alapértelmezés visszaállítása\"\n        size=\"small\"\n        @click=\"reset\"\n      />\n      <Button label=\"OK\" @click=\"emit('close')\" />\n    </div>\n  </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components66.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataCardsSettings, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport { getColumnValue } from '@/utils/dataList'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n              >\n                <span class=\"c-card__label\">{{ col.label }}</span>\n                <span\n                  class=\"c-card__title\"\n                  :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n                  v-html=\"getColumnValue(item, col)\"\n                ></span>\n              </span>\n            </span>\n            <span class=\"c-card__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-solid fa-chevron-down\"></i\n            ></span>\n          </button>\n\n          <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n            <div\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-card__field\"\n              tabindex=\"0\"\n            >\n              <span class=\"c-card__field-label\">{{ col.label }}</span>\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n\n              <CopyToClipboard\n                v-if=\"getColumnValue(item, col)\"\n                class=\"c-card__field-copy click-expand\"\n                :value=\"getColumnValue(item, col)\"\n              />\n            </div>\n\n            <div v-if=\"config.actions\" class=\"c-card__actions\" @click.stop>\n              <template v-for=\"(action, ai) in config.actions\" :key=\"ai\">\n                <DropdownMenu\n                  v-if=\"isActionGroup(action)\"\n                  :icon=\"action.icon\"\n                  :label=\"action.label\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  :items=\"buildActionGroupMenuItems(action, item)\"\n                  v-bind=\"action.config\"\n                />\n\n                <Button\n                  v-else\n                  :type=\"action.type\"\n                  :icon=\"action.icon\"\n                  :label=\"action.cardLabel ?? action.label\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  outline\n                  :disabled=\"action.disabled ? action.disabled(item) : false\"\n                  :callback=\"() => action.callback(item)\"\n                  v-bind=\"action.config\"\n                />\n              </template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components68.js

@@ -1,7 +1,8 @@
-import './src/styles/components/data-table/data-list-options.scss_vue_type_style_index_0_src_true_lang.css';
+import './src/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css';
+import "./admins-components58.js";
 import e from "./admins-components66.js";
 /* empty css                    */
-//#region src/components/data-table/DataListOptions.vue
+//#region src/components/data-table/DataCards.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/admins-components68.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components68.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n  open?: boolean\n  columns: Column[]\n  settings: Partial<DataListSettings>\n  position?: SidebarPosition\n  storageKey: string\n  orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n  orderable: false,\n})\n\nconst emit = defineEmits<{\n  close: []\n  change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n  () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction getDefaults(): DataListSettings {\n  return {\n    ...dataCardsSettingsDefaults,\n    ...dataTableSettingsDefaults,\n    ...dataListSettingsDefaults,\n    ...props.settings,\n    columns: Object.fromEntries(\n      props.columns.map((c) => [\n        c.property,\n        props.settings.columns?.[c.property] ?? c.visible !== false,\n      ]),\n    ),\n    cardHeaderColumns: Object.fromEntries(\n      props.columns.map((c) => [\n        c.property,\n        props.settings.cardHeaderColumns?.[c.property] ?? c.primary === true,\n      ]),\n    ),\n    columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n    cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n  } as DataListSettings\n}\n\nfunction load() {\n  try {\n    const raw = localStorage.getItem(storageKey.value)\n    const defaults = getDefaults()\n    if (raw) {\n      const data = JSON.parse(raw)\n      local.value = data.settings\n        ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n        : defaults\n    } else {\n      local.value = defaults\n    }\n  } catch {\n    local.value = getDefaults()\n  }\n  emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n  const props = columns.map((c) => c.property)\n  const reconcile = (order: string[] | undefined): string[] => {\n    const known = new Set(props)\n    const filtered = (order ?? []).filter((p) => known.has(p))\n    const missing = props.filter((p) => !filtered.includes(p))\n    return [...filtered, ...missing]\n  }\n  return {\n    ...settings,\n    columnOrder: reconcile(settings.columnOrder),\n    cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n  }\n}\n\nfunction save() {\n  try {\n    const key = storageKey.value\n    const raw = localStorage.getItem(key)\n    const data = raw ? JSON.parse(raw) : {}\n    data.settings = local.value\n    localStorage.setItem(key, JSON.stringify(data))\n  } catch {\n    /* ignore */\n  }\n  emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n  local.value = { ...local.value, [key]: value }\n  save()\n}\n\nfunction toggleColumn(property: string) {\n  update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n  update('cardHeaderColumns', {\n    ...local.value.cardHeaderColumns,\n    [property]: !local.value.cardHeaderColumns[property],\n  })\n}\n\nfunction toggle(key: 'striped' | 'compact') {\n  update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n  return [...cols].sort((a, b) => {\n    const ai = order.indexOf(a.property)\n    const bi = order.indexOf(b.property)\n    return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n  })\n}\n\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n  sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n  dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n  e.preventDefault()\n  if (dragIndex.value === null || dragIndex.value === index) return\n  const order = [...local.value.columnOrder]\n  const moved = order.splice(dragIndex.value, 1)[0]\n  if (!moved) return\n  order.splice(index, 0, moved)\n  dragIndex.value = index\n  update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n  dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n  selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n  if (selectedReorderIndex.value === null) return\n  const target = selectedReorderIndex.value + direction\n  if (target < 0 || target >= local.value.columnOrder.length) return\n  const order = [...local.value.columnOrder]\n  const tmp = order[selectedReorderIndex.value]!\n  order[selectedReorderIndex.value] = order[target]!\n  order[target] = tmp\n  update('columnOrder', order)\n  selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n  cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n  e.preventDefault()\n  if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n  const order = [...local.value.cardHeaderOrder]\n  const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n  if (!moved) return\n  order.splice(index, 0, moved)\n  cardHeaderDragIndex.value = index\n  update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n  cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n  selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n  if (selectedCardHeaderIndex.value === null) return\n  const target = selectedCardHeaderIndex.value + direction\n  if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n  const order = [...local.value.cardHeaderOrder]\n  const tmp = order[selectedCardHeaderIndex.value]!\n  order[selectedCardHeaderIndex.value] = order[target]!\n  order[target] = tmp\n  update('cardHeaderOrder', order)\n  selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n  localStorage.removeItem(storageKey.value)\n  local.value = getDefaults()\n  emit('change', local.value)\n}\n\nonMounted(load)\n</script>\n\n<template>\n  <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n    <div class=\"table-options\">\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">Megjelenés</h4>\n        <ul class=\"table-options__list\">\n          <li\n            class=\"table-options__item\"\n            @click=\"toggle('compact')\"\n            title=\"A sorok közötti térköz csökkentése\"\n          >\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': local.compact }\"\n              @click.stop=\"toggle('compact')\"\n            ></span>\n            <span>Kompakt</span>\n          </li>\n          <li\n            class=\"table-options__item\"\n            @click=\"toggle('striped')\"\n            title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n          >\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': local.striped }\"\n              @click.stop=\"toggle('striped')\"\n            ></span>\n            <span>Sávos (striped)</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">\n          Elrendezés\n          <span class=\"table-options__title-value\"\n            >—\n            {{\n              local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n            }}</span\n          >\n        </h4>\n        <div class=\"layout-switch\">\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n            title=\"Kijelző méretéhez igazodó elrendezés\"\n            @click=\"update('layout', 'screen')\"\n          >\n            <i class=\"fa-solid fa-display\"></i>\n          </button>\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n            title=\"Táblázat nézet\"\n            @click=\"update('layout', 'table')\"\n          >\n            <i class=\"fa-solid fa-table-list\"></i>\n          </button>\n          <button\n            class=\"layout-switch__btn\"\n            :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n            title=\"Kártya nézet\"\n            @click=\"update('layout', 'cards')\"\n          >\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"table-options__col\">\n        <h4\n          class=\"table-options__title flex-center gap-1\"\n          v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n        >\n          Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n        </h4>\n        <ul class=\"table-options__list\">\n          <li\n            v-for=\"(col, index) in orderedCardHeaderColumns\"\n            :key=\"'ch-' + col.property\"\n            class=\"table-options__item\"\n            :class=\"{\n              'table-options__item--disabled': col.primary,\n              'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n              'table-options__item--dragging': orderable && cardHeaderDragIndex === index,\n            }\"\n            :draggable=\"orderable\"\n            @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n            @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n            @drop.prevent\n            @dragend=\"orderable && onCardHeaderDragEnd()\"\n            @click.prevent=\"\n              orderable\n                ? selectCardHeader(index)\n                : !col.primary && toggleCardHeaderColumn(col.property)\n            \"\n          >\n            <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n            <span\n              class=\"table-options__toggle\"\n              @click.stop=\"!col.primary && toggleCardHeaderColumn(col.property)\"\n            >\n              <span\n                class=\"c-checkbox\"\n                :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n              ></span>\n              <span>{{ col.label }}</span>\n            </span>\n          </li>\n        </ul>\n        <div\n          v-if=\"orderable && selectedCardHeaderIndex !== null\"\n          class=\"table-options__move-actions\"\n        >\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedCardHeaderIndex === 0\"\n            @click=\"moveCardHeader(-1)\"\n          >\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n            @click=\"moveCardHeader(1)\"\n          >\n            <i class=\"fa-solid fa-arrow-down\"></i>\n          </button>\n        </div>\n      </div>\n      <div class=\"table-options__col\">\n        <h4 class=\"table-options__title\">Oszlopok</h4>\n        <ul class=\"table-options__list\">\n          <li\n            v-for=\"(col, index) in orderedColumns\"\n            :key=\"col.property\"\n            class=\"table-options__item\"\n            :class=\"{\n              'table-options__item--disabled': col.primary,\n              'table-options__item--selected': orderable && selectedReorderIndex === index,\n              'table-options__item--dragging': orderable && dragIndex === index,\n            }\"\n            :draggable=\"orderable\"\n            @dragstart.stop=\"orderable && onDragStart(index)\"\n            @dragover.prevent=\"orderable && onDragOver($event, index)\"\n            @drop.prevent\n            @dragend=\"orderable && onDragEnd()\"\n            @click.prevent=\"\n              orderable ? selectForReorder(index) : !col.primary && toggleColumn(col.property)\n            \"\n          >\n            <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n            <span\n              class=\"table-options__toggle\"\n              @click.stop=\"!col.primary && toggleColumn(col.property)\"\n            >\n              <span\n                class=\"c-checkbox\"\n                :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n              ></span>\n              <span>{{ col.label }}</span>\n            </span>\n          </li>\n        </ul>\n        <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"table-options__move-actions\">\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedReorderIndex === 0\"\n            @click=\"moveSelected(-1)\"\n          >\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            class=\"table-options__move-btn\"\n            :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n            @click=\"moveSelected(1)\"\n          >\n            <i class=\"fa-solid fa-arrow-down\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n    <div class=\"table-options__footer\">\n      <Button\n        icon=\"fa-solid  fa-triangle-exclamation\"\n        :disabled=\"!hasCustomSettings\"\n        label=\"Alapértelmezés visszaállítása\"\n        size=\"small\"\n        @click=\"reset\"\n      />\n      <Button label=\"OK\" @click=\"emit('close')\" />\n    </div>\n  </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components68.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataCardsSettings, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport DropdownMenu from '@/components/DropdownMenu.vue'\nimport { getColumnValue } from '@/utils/dataList'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n              >\n                <span class=\"c-card__label\">{{ col.label }}</span>\n                <span\n                  class=\"c-card__title\"\n                  :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n                  v-html=\"getColumnValue(item, col)\"\n                ></span>\n              </span>\n            </span>\n            <span class=\"c-card__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-solid fa-chevron-down\"></i\n            ></span>\n          </button>\n\n          <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n            <div\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-card__field\"\n              tabindex=\"0\"\n            >\n              <span class=\"c-card__field-label\">{{ col.label }}</span>\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n\n              <CopyToClipboard\n                v-if=\"getColumnValue(item, col)\"\n                class=\"c-card__field-copy click-expand\"\n                :value=\"getColumnValue(item, col)\"\n              />\n            </div>\n\n            <div v-if=\"config.actions\" class=\"c-card__actions\" @click.stop>\n              <template v-for=\"(action, ai) in config.actions\" :key=\"ai\">\n                <DropdownMenu\n                  v-if=\"isActionGroup(action)\"\n                  :icon=\"action.icon\"\n                  :label=\"action.label\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  :items=\"buildActionGroupMenuItems(action, item)\"\n                  v-bind=\"action.config\"\n                />\n\n                <Button\n                  v-else\n                  :type=\"action.type\"\n                  :icon=\"action.icon\"\n                  :label=\"action.cardLabel ?? action.label\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  outline\n                  :disabled=\"action.disabled ? action.disabled(item) : false\"\n                  :callback=\"() => action.callback(item)\"\n                  v-bind=\"action.config\"\n                />\n              </template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}