admins-components 9.0.82 → 9.0.84

package/dist/admins-components71.js

@@ -9,14 +9,14 @@ import { shortUuid as s } from "./admins-components65.js";
 import c from "./admins-components67.js";
 import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, isVNode as _, nextTick as v, normalizeClass as y, openBlock as b, ref as x, renderList as S, renderSlot as C, resolveDirective as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, vShow as O, watch as k, withDirectives as A, withModifiers as j } from "vue";
 //#region src/components/data-table/DataCards.vue?vue&type=script&setup=true&lang.ts
-var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__heading" }, F = { class: "c-card__label" }, I = ["innerHTML"], L = ["innerHTML"], R = { class: "c-card__body" }, z = { class: "c-card__field-label" }, B = {
+var M = ["onClick"], N = ["onClick"], P = { class: "c-card__heading" }, F = { class: "c-card__label" }, I = ["innerHTML"], L = ["innerHTML"], R = ["onClick"], z = { class: "c-card__body" }, B = { class: "c-card__field-label" }, V = {
 	key: 1,
 	class: "c-cards__loading-wrap"
-}, V = {
+}, H = {
 	key: 2,
 	class: "c-cards__backdrop",
 	"aria-hidden": "true"
-}, H = /*@__PURE__*/ g({
+}, U = /*@__PURE__*/ g({
 	__name: "DataCards",
 	props: {
 		config: {},
@@ -29,19 +29,19 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 	},
 	emits: ["selection-change"],
 	setup(a, { emit: g }) {
-		let H = a, U = g, { selectedKeys: W, toggle: G } = i(() => H.items, () => H.config.selectableAttr, (e) => U("selection-change", e)), K = x(/* @__PURE__ */ new Set()), q = x(null);
-		k(() => H.loading, async (e) => {
-			e && (await v(), q.value?.scrollTo({
+		let U = a, W = g, { selectedKeys: G, toggle: K } = i(() => U.items, () => U.config.selectableAttr, (e) => W("selection-change", e)), q = x(/* @__PURE__ */ new Set()), J = x(null);
+		k(() => U.loading, async (e) => {
+			e && (await v(), J.value?.scrollTo({
 				top: 0,
 				behavior: "smooth"
 			}));
-		}), k(() => H.items, () => {
-			K.value = /* @__PURE__ */ new Set();
+		}), k(() => U.items, () => {
+			q.value = /* @__PURE__ */ new Set();
 		});
-		let J = u(() => H.config.columns.filter((e) => e.visible !== !1)), Y = u(() => {
-			let e = H.settings;
+		let Y = u(() => U.config.columns.filter((e) => e.visible !== !1)), X = u(() => {
+			let e = U.settings;
 			if (e?.cardHeaderColumns) {
-				let t = J.value.filter((t) => e.cardHeaderColumns[t.property]);
+				let t = Y.value.filter((t) => e.cardHeaderColumns[t.property]);
 				if (t.length > 0) {
 					if (e.cardHeaderOrder) {
 						let n = e.cardHeaderOrder;
@@ -53,35 +53,23 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 					return t;
 				}
 			}
-			let t = J.value.filter((e) => e.primary);
-			return t.length > 0 ? t : J.value.slice(0, 1);
-		}), X = null, Z = !1;
-		function Q(e, t) {
-			H.config.selectableAttr && e.button === 0 && (Z = !1, X = setTimeout(() => {
-				Z = !0, G(t);
-			}, 500));
-		}
-		function $() {
-			X &&= (clearTimeout(X), null);
-		}
-		function ee(e) {
-			Z && e.preventDefault();
+			let t = Y.value.filter((e) => e.primary);
+			return t.length > 0 ? t : Y.value.slice(0, 1);
+		});
+		function Z(e, t) {
+			U.config.selectableAttr ? K(t) : $(e);
 		}
-		function te(e) {
-			if (Z) {
-				Z = !1;
-				return;
-			}
-			ne(e);
+		function Q(e, t) {
+			t.stopPropagation(), $(e);
 		}
-		function ne(e) {
-			K.value.has(e) ? K.value.delete(e) : K.value.add(e), K.value = new Set(K.value);
+		function $(e) {
+			q.value.has(e) ? q.value.delete(e) : q.value.add(e), q.value = new Set(q.value);
 		}
 		return (i, u) => {
 			let g = w("tooltip");
 			return b(), p("div", {
 				ref_key: "cardsWrapperRef",
-				ref: q,
+				ref: J,
 				class: y(["ac-component c-cards-wrapper list-card-view", { "is-loading": a.loading }])
 			}, [!a.loading || a.items.length > 0 ? (b(), p("div", {
 				key: 0,
@@ -89,28 +77,24 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 			}, [(b(!0), p(l, null, S(a.items, (t, v) => (b(), p("div", {
 				key: v,
 				class: y(["c-card", {
-					"is-open": K.value.has(v),
-					"is-selected": a.config.selectableAttr && D(W).has(t[a.config.selectableAttr])
+					"is-open": q.value.has(v),
+					"is-selected": a.config.selectableAttr && D(G).has(t[a.config.selectableAttr])
 				}])
 			}, [m("button", {
 				type: "button",
 				class: "c-card__header",
-				onClick: (e) => te(v),
-				onPointerdown: (e) => Q(e, t),
-				onPointerup: u[1] ||= (e) => $(),
-				onPointerleave: u[2] ||= (e) => $(),
-				onContextmenu: ee
+				onClick: (e) => Z(v, t)
 			}, [
 				a.config.selectableAttr ? (b(), p("span", {
 					key: 0,
 					class: "c-card__check-zone",
-					onClick: j((e) => D(G)(t), ["stop"])
+					onClick: j((e) => D(K)(t), ["stop"])
 				}, [h(e, {
-					"model-value": !!D(W).has(t[a.config.selectableAttr]),
-					"onUpdate:modelValue": (e) => D(G)(t),
+					"model-value": !!D(G).has(t[a.config.selectableAttr]),
+					"onUpdate:modelValue": (e) => D(K)(t),
 					onClick: u[0] ||= j(() => {}, ["stop"])
 				}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, N)) : f("", !0),
-				m("span", P, [(b(!0), p(l, null, S(Y.value, (e, n) => (b(), p("span", {
+				m("span", P, [(b(!0), p(l, null, S(X.value, (e, n) => (b(), p("span", {
 					key: e.property,
 					class: y(["c-card__heading-item", [{ primary: e.primary }, e.headerClass]])
 				}, [m("span", F, E(e.hideHeader ? "" : e.label), 1), m("span", { class: y(["c-card__title", { "c-truncate": a.settings.compact && n === 0 }]) }, [_(D(o)(t, e)) ? (b(), d(T(D(o)(t, e)), { key: 0 })) : e.type === "uuid" ? A((b(), p("span", {
@@ -120,15 +104,16 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 					key: 2,
 					innerHTML: D(o)(t, e)
 				}, null, 8, L))], 2)], 2))), 128))]),
-				u[4] ||= m("span", {
+				m("span", {
 					class: "c-card__icon",
-					"aria-hidden": "true"
-				}, [m("i", { class: "fa-solid fa-chevron-down" })], -1)
-			], 40, M), A(m("div", R, [(b(!0), p(l, null, S(J.value, (e) => (b(), p("div", {
+					"aria-hidden": "true",
+					onClick: (e) => Q(v, e)
+				}, [...u[2] ||= [m("i", { class: "fa-solid fa-chevron-down" }, null, -1)]], 8, R)
+			], 8, M), A(m("div", z, [(b(!0), p(l, null, S(Y.value, (e) => (b(), p("div", {
 				key: e.property,
 				class: "c-card__field"
 			}, [
-				m("span", z, E(e.label), 1),
+				m("span", B, E(e.label), 1),
 				C(i.$slots, `cell:${e.property}`, {
 					item: t,
 					col: e
@@ -146,7 +131,7 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 			]))), 128)), a.config.actions ? (b(), p("div", {
 				key: 0,
 				class: "c-card__actions",
-				onClick: u[3] ||= j(() => {}, ["stop"])
+				onClick: u[1] ||= j(() => {}, ["stop"])
 			}, [C(i.$slots, "actions", {
 				item: t,
 				index: v,
@@ -154,10 +139,10 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 			}, () => [h(r, {
 				actions: a.config.actions,
 				item: t
-			}, null, 8, ["actions", "item"])])])) : f("", !0)], 512), [[O, K.value.has(v)]])], 2))), 128))], 2)) : (b(), p("div", B, [h(t, {
+			}, null, 8, ["actions", "item"])])])) : f("", !0)], 512), [[O, q.value.has(v)]])], 2))), 128))], 2)) : (b(), p("div", V, [h(t, {
 				loading: !0,
 				size: "2.5rem"
-			})])), a.loading && a.items.length > 0 ? (b(), p("div", V, [h(t, {
+			})])), a.loading && a.items.length > 0 ? (b(), p("div", H, [h(t, {
 				loading: !0,
 				size: "2.5rem"
 			})])) : f("", !0)], 2);
@@ -165,4 +150,4 @@ var M = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__hea
 	}
 });
 //#endregion
-export { H as default };
+export { U as default };

package/dist/admins-components71.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components71.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'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from '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 { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\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\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\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\n    ref=\"cardsWrapperRef\"\n    class=\"ac-component c-cards-wrapper list-card-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\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              :class=\"[{ primary: col.primary }, col.headerClass]\"\n            >\n              <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n              <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n                <component\n                  v-if=\"isVNode(getColumnValue(item, col))\"\n                  :is=\"getColumnValue(item, col)\"\n                />\n                <span\n                  v-else-if=\"col.type === 'uuid'\"\n                  v-tooltip=\"getColumnValue(item, col)\"\n                  v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n                ></span>\n                <span v-else v-html=\"getColumnValue(item, col)\"></span>\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 v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n            <span class=\"c-card__field-label\">{{ col.label }}</span>\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n            </slot>\n\n            <CopyToClipboard\n              v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\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            <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </slot>\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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components71.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'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from '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 { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\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\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\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\nfunction onHeaderClick(index: number, item: Record<string, unknown>) {\n  if (props.config.selectableAttr) {\n    toggleRow(item)\n  } else {\n    toggleAccordion(index)\n  }\n}\n\nfunction onChevronClick(index: number, e: MouseEvent) {\n  e.stopPropagation()\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\n    ref=\"cardsWrapperRef\"\n    class=\"ac-component c-cards-wrapper list-card-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\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 type=\"button\" class=\"c-card__header\" @click=\"onHeaderClick(index, item)\">\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              :class=\"[{ primary: col.primary }, col.headerClass]\"\n            >\n              <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n              <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n                <component\n                  v-if=\"isVNode(getColumnValue(item, col))\"\n                  :is=\"getColumnValue(item, col)\"\n                />\n                <span\n                  v-else-if=\"col.type === 'uuid'\"\n                  v-tooltip=\"getColumnValue(item, col)\"\n                  v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n                ></span>\n                <span v-else v-html=\"getColumnValue(item, col)\"></span>\n              </span>\n            </span>\n          </span>\n          <span class=\"c-card__icon\" aria-hidden=\"true\" @click=\"onChevronClick(index, $event)\"\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 v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n            <span class=\"c-card__field-label\">{{ col.label }}</span>\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n            </slot>\n\n            <CopyToClipboard\n              v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\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            <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </slot>\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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAaR,IAAO,GAIP,EAAE,iBAAc,QAAQ,MAAc,QACpC,EAAM,aACN,EAAM,OAAO,iBAClB,MAAM,EAAK,oBAAoB,CAAC,CACnC,GAEM,IAAiB,kBAAiB,IAAI,IAAI,CAAC,GAE3C,IAAkB,EAAwB,IAAI;EAYpD,AAVA,QACQ,EAAM,SACZ,OAAO,MAAc;GACnB,AAAI,MACF,MAAM,EAAS,GACf,EAAgB,OAAO,SAAS;IAAE,KAAK;IAAG,UAAU;GAAS,CAAC;EAElE,CACF,GAEA,QACQ,EAAM,aACN;GACJ,EAAe,wBAAQ,IAAI,IAAI;EACjC,CACF;EAEA,IAAM,IAAiB,QAAe,EAAM,OAAO,QAAQ,QAAQ,MAAM,EAAE,YAAY,EAAK,CAAC,GAEvF,IAAoB,QAAe;GACvC,IAAM,IAAI,EAAM;GAChB,IAAI,GAAG,mBAAmB;IACxB,IAAM,IAAO,EAAe,MAAM,QAAQ,MAAM,EAAE,kBAAkB,EAAE,SAAS;IAC/E,IAAI,EAAK,SAAS,GAAG;KACnB,IAAI,EAAE,iBAAiB;MACrB,IAAM,IAAQ,EAAE;MAChB,OAAO,CAAC,GAAG,CAAI,CAAC,CAAC,MAAM,GAAG,MAAM;OAC9B,IAAM,IAAK,EAAM,QAAQ,EAAE,QAAQ,GAC7B,IAAK,EAAM,QAAQ,EAAE,QAAQ;OACnC,QAAQ,MAAO,KAAK,MAAM,MAAO,MAAO,KAAK,MAAM;MACrD,CAAC;KACH;KACA,OAAO;IACT;GACF;GACA,IAAM,IAAU,EAAe,MAAM,QAAQ,MAAM,EAAE,OAAO;GAG5D,OAFI,EAAQ,SAAS,IAAU,IAExB,EAAe,MAAM,MAAM,GAAG,CAAC;EACxC,CAAC;EAED,SAAS,EAAc,GAAe,GAA+B;GACnE,AAAI,EAAM,OAAO,iBACf,EAAU,CAAI,IAEd,EAAgB,CAAK;EAEzB;EAEA,SAAS,EAAe,GAAe,GAAe;GAEpD,AADA,EAAE,gBAAgB,GAClB,EAAgB,CAAK;EACvB;EAEA,SAAS,EAAgB,GAAe;GAMtC,AALI,EAAe,MAAM,IAAI,CAAK,IAChC,EAAe,MAAM,OAAO,CAAK,IAEjC,EAAe,MAAM,IAAI,CAAK,GAEhC,EAAe,QAAQ,IAAI,IAAI,EAAe,KAAK;EACrD;;;GAIE,OAAA,EAAA,GAAA,EAsFM,OAAA;IArFA,SAAA;IAAJ,KAAI;IACJ,OAAK,EAAA,CAAC,+CAA6C,EAAA,cAC3B,EAAA,QAAO,CAAA,CAAA;GAGtB,GAAA,CAAA,CAAA,EAAA,WAAW,EAAA,MAAM,SAAM,KADhC,EAAA,GAAA,EA0EM,OAAA;;IAxEJ,OAAK,EAAA,CAAC,WAAS,EAAA,cACS,EAAA,SAAS,QAAO,CAAA,CAAA;GAExC,GAAA,EAAA,EAAA,EAAA,GAAA,EAoEM,GAAA,MAAA,EAnEoB,EAAA,QAAhB,GAAM,OADhB,EAAA,GAAA,EAoEM,OAAA;IAlEH,KAAK;IACN,OAAK,EAAA,CAAC,UAAQ;KACiB,WAAA,EAAA,MAAe,IAAI,CAAK;KAA4B,eAAA,EAAA,OAAO,kBAAkB,EAAA,CAAA,CAAY,CAAC,IAAI,EAAK,EAAA,OAAO,eAAc;;GAKvJ,GAAA,CAAA,EAqCS,UAAA;IArCD,MAAK;IAAS,OAAM;IAAkB,UAAK,MAAE,EAAc,GAAO,CAAI;;IAEpE,EAAA,OAAO,kBADf,EAAA,GAAA,EAUO,QAAA;;KARL,OAAM;KACL,SAAK,GAAA,MAAO,EAAA,CAAA,CAAS,CAAC,CAAI,GAAA,CAAA,MAAA,CAAA;IAE3B,GAAA,CAAA,EAIE,GAAA;KAHC,eAAW,CAAA,CAAI,EAAA,CAAA,CAAY,CAAC,IAAI,EAAK,EAAA,OAAO,eAAc;KAC1D,wBAAkB,MAAE,EAAA,CAAA,CAAS,CAAC,CAAI;KAClC,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IAGf,EAqBO,QArBP,GAqBO,EApBL,EAAA,EAAA,GAAA,EAmBO,GAAA,MAAA,EAlBc,EAAA,QAAX,GAAK,OADf,EAAA,GAAA,EAmBO,QAAA;KAjBJ,KAAK,EAAI;KACV,OAAK,EAAA,CAAC,wBAAsB,CAAA,EAAA,SACR,EAAI,QAAO,GAAI,EAAI,WAAW,CAAA,CAAA;IAElD,GAAA,CAAA,EAAyE,QAAzE,GAAyE,EAAzC,EAAI,aAAsB,KAAT,EAAI,KAAK,GAAA,CAAA,GAC1D,EAWO,QAAA,EAXD,OAAK,EAAA,CAAC,iBAAe,EAAA,cAAyB,EAAA,SAAS,WAAW,MAAC,EAAA,CAAA,CAAA,EAAA,GAAA,CAE/D,EAAQ,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG,CAAA,KADxC,EAAA,GAAA,EAGE,EADK,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA,KAGlB,EAAI,SAAI,SADrB,GAAA,EAAA,GAAA,EAIQ,QAAA;;KADN,WAAQ,EAAA,CAAA,CAAS,CAAA,CAAA,CAAG,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG,CAAA;IADjC,GAAA,MAAA,GAAA,CAAA,IAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG,CAAA,CAAA,CAAA,KAGrC,EAAA,GAAA,EAAuD,QAAA;;KAA1C,WAAQ,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG;;IAInD,EAEQ,QAAA;KAFF,OAAM;KAAe,eAAY;KAAQ,UAAK,MAAE,EAAe,GAAO,CAAM;IAC/E,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EACF,KAAA,EADK,OAAM,2BAA0B,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,GAAA,CAAA;GAIxC,GAAA,GAAA,CAAA,GAAA,EAAA,EAmBM,OAnBN,GAmBM,EAlBJ,EAAA,EAAA,GAAA,EAWM,GAAA,MAAA,EAXa,EAAA,QAAP,OAAZ,EAAA,GAAA,EAWM,OAAA;IAX8B,KAAK,EAAI;IAAU,OAAM;;IAC3D,EAAwD,QAAxD,GAAwD,EAAnB,EAAI,KAAK,GAAA,CAAA;IAC9C,EAEO,EAAA,QAAA,QAFc,EAAI,YAAQ;KAAW;KAAY;IAAxD,SAEO,CADL,EAA8E,GAAA;KAA7D;KAAY;KAAK,OAAM;KAAuB,MAAM;;IAI/D,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG,KAAA,CAAM,EAAI,uBAD1C,EAAA,GAAA,EAIE,GAAA;;KAFA,OAAM;KACL,OAAO,EAAA,CAAA,CAAc,CAAC,GAAM,CAAG;;MAIzB,GAAA,GAAA,IAAA,EAAA,OAAO,WAAlB,EAAA,GAAA,EAIM,OAAA;;IAJqB,OAAM;IAAmB,SAAK,AAAA,EAAA,OAAA,QAAN,CAAA,GAAW,CAAA,MAAA,CAAA;GAC5D,GAAA,CAAA,EAEO,EAAA,QAAA,WAAA;IAFqB;IAAc;IAAQ,SAAS,EAAA,OAAO;GAAlE,SAEO,CADL,EAA0D,GAAA;IAAxC,SAAS,EAAA,OAAO;IAAgB;GAhB3C,GAAA,MAAA,GAAA,CAAA,WAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,MAAe,IAAI,CAAK,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAsBzC,GAAA,GAAA,EAAA,GAAA,CAAA,MAAA,EAAA,GAAA,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;IAA/B,SAAS;IAAM,MAAK;GAEpB,CAAA,CAAA,CAAA,IAAA,EAAA,WAAW,EAAA,MAAM,SAAM,KAAlC,EAAA,GAAA,EAEM,OAFN,GAEM,CADJ,EAAwC,GAAA;IAA/B,SAAS;IAAM,MAAK"}

package/dist/admins-components73.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components73.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'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from '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 { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\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\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\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\n    ref=\"cardsWrapperRef\"\n    class=\"ac-component c-cards-wrapper list-card-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\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              :class=\"[{ primary: col.primary }, col.headerClass]\"\n            >\n              <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n              <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n                <component\n                  v-if=\"isVNode(getColumnValue(item, col))\"\n                  :is=\"getColumnValue(item, col)\"\n                />\n                <span\n                  v-else-if=\"col.type === 'uuid'\"\n                  v-tooltip=\"getColumnValue(item, col)\"\n                  v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n                ></span>\n                <span v-else v-html=\"getColumnValue(item, col)\"></span>\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 v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n            <span class=\"c-card__field-label\">{{ col.label }}</span>\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n            </slot>\n\n            <CopyToClipboard\n              v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\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            <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </slot>\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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components73.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'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode, nextTick } from '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 { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\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\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n  () => props.loading,\n  async (isLoading) => {\n    if (isLoading) {\n      await nextTick()\n      cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n    }\n  },\n)\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\nfunction onHeaderClick(index: number, item: Record<string, unknown>) {\n  if (props.config.selectableAttr) {\n    toggleRow(item)\n  } else {\n    toggleAccordion(index)\n  }\n}\n\nfunction onChevronClick(index: number, e: MouseEvent) {\n  e.stopPropagation()\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\n    ref=\"cardsWrapperRef\"\n    class=\"ac-component c-cards-wrapper list-card-view\"\n    :class=\"{ 'is-loading': loading }\"\n  >\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 type=\"button\" class=\"c-card__header\" @click=\"onHeaderClick(index, item)\">\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              :class=\"[{ primary: col.primary }, col.headerClass]\"\n            >\n              <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n              <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n                <component\n                  v-if=\"isVNode(getColumnValue(item, col))\"\n                  :is=\"getColumnValue(item, col)\"\n                />\n                <span\n                  v-else-if=\"col.type === 'uuid'\"\n                  v-tooltip=\"getColumnValue(item, col)\"\n                  v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n                ></span>\n                <span v-else v-html=\"getColumnValue(item, col)\"></span>\n              </span>\n            </span>\n          </span>\n          <span class=\"c-card__icon\" aria-hidden=\"true\" @click=\"onChevronClick(index, $event)\"\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 v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n            <span class=\"c-card__field-label\">{{ col.label }}</span>\n            <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n            </slot>\n\n            <CopyToClipboard\n              v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\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            <slot name=\"actions\" :item=\"item\" :index=\"index\" :actions=\"config.actions\">\n              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </slot>\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</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}

package/dist/src/components/Modal.vue.d.ts

@@ -9,6 +9,8 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<ModalP
 }, string, import('vue').PublicProps, Readonly<ModalProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
+    header?: (props: {}) => any;
+} & {
     default?: (props: {}) => any;
 } & {
     footer?: (props: {}) => any;

package/dist/src/vueformelements/config/ArticlePickerElementConfig.d.ts

@@ -2,6 +2,7 @@ export interface ArticlePickerElementConfig {
     searchArticleApiUrl: string;
     searchArticleWidgetUrl: string;
     showIds?: boolean;
+    articleModalActionsPosition?: 'header' | 'footer' | 'both';
 }
 export declare let apeConfig: ArticlePickerElementConfig;
 export declare function configureArticlePickerElement(apec: ArticlePickerElementConfig): ArticlePickerElementConfig;

package/dist/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css

@@ -1 +1 @@
-.ac-component .c-cards-wrapper,.ac-component.c-cards-wrapper{max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-data-list--fill-height>.ac-component .c-cards-wrapper,.c-data-list--fill-height>.ac-component.c-cards-wrapper{flex:auto;height:auto;min-height:0;max-height:none}.ac-component .c-cards-wrapper.is-loading,.ac-component.c-cards-wrapper.is-loading{touch-action:none;overflow:hidden}.ac-component .c-cards-wrapper.is-loading .c-cards,.ac-component.c-cards-wrapper.is-loading .c-cards{opacity:.45;transition:opacity .15s ease-out}.ac-component .c-cards-wrapper .c-cards,.ac-component.c-cards-wrapper .c-cards{border-top:2px solid var(--neutral-200);border-bottom:2px solid var(--neutral-200);flex-direction:column;gap:.5rem;padding:.5rem 0;font-size:.875rem;display:flex}.ac-component .c-cards-wrapper .c-cards.is-compact,.ac-component.c-cards-wrapper .c-cards.is-compact{gap:.25rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__header,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__header{--header-padding-y:.375rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__label,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__label{font-size:.6rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__field,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__field{min-height:unset;padding-top:.5rem;padding-bottom:.375rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__body,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__body{row-gap:.5rem;padding-bottom:.5rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__actions,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__actions{padding-top:0}.ac-component .c-cards-wrapper .c-cards__loading-wrap,.ac-component.c-cards-wrapper .c-cards__loading-wrap{border-top:2px solid var(--neutral-200);border-bottom:2px solid var(--neutral-200);justify-content:center;align-items:center;width:100%;padding:2rem;display:flex}.ac-component .c-cards-wrapper .c-cards__backdrop,.ac-component.c-cards-wrapper .c-cards__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;animation:.15s ease-out c-cards-backdrop-in;display:flex;position:absolute;inset:0}.ac-component .c-cards-wrapper .c-card,.ac-component.c-cards-wrapper .c-card{border:1px solid var(--neutral-200);background:var(--neutral-0);border-radius:.75rem;transition:border-color .15s,box-shadow .15s}.ac-component .c-cards-wrapper .c-card.is-open,.ac-component.c-cards-wrapper .c-card.is-open{border-color:var(--premium-500)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__header,.ac-component.c-cards-wrapper .c-card.is-open .c-card__header{background:var(--premium-50)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__header:hover,.ac-component.c-cards-wrapper .c-card.is-open .c-card__header:hover{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__icon,.ac-component.c-cards-wrapper .c-card.is-open .c-card__icon{transform:rotate(180deg)}.ac-component .c-cards-wrapper .c-card.is-selected,.ac-component.c-cards-wrapper .c-card.is-selected{border-color:var(--premium-400);box-shadow:0 0 0 1px var(--premium-200)}.ac-component .c-cards-wrapper .c-card.is-selected .c-card__header,.ac-component.c-cards-wrapper .c-card.is-selected .c-card__header{background:var(--site-100)}.ac-component .c-cards-wrapper .c-card.is-selected .c-card__header:hover,.ac-component.c-cards-wrapper .c-card.is-selected .c-card__header:hover{background:var(--site-200)}.ac-component .c-cards-wrapper .c-card__header,.ac-component.c-cards-wrapper .c-card__header{--header-padding-y:.75rem;--header-padding-x:.75rem;width:100%;padding:var(--header-padding-y) var(--header-padding-x);border-radius:inherit;background:var(--neutral-50);color:inherit;text-align:left;cursor:pointer;border:0;align-items:center;gap:.5rem;line-height:1.2;transition:background-color .15s;display:flex}.ac-component .c-cards-wrapper .c-card__header:hover,.ac-component.c-cards-wrapper .c-card__header:hover{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card__check-zone,.ac-component.c-cards-wrapper .c-card__check-zone{padding:0 .5rem 0 var(--header-padding-x);margin:calc(-1 * var(--header-padding-y)) -.5rem calc(-1 * var(--header-padding-y)) calc(-1 * var(--header-padding-x));align-self:stretch;align-items:center;display:flex}.ac-component .c-cards-wrapper .c-card__check-zone .c-checkbox,.ac-component.c-cards-wrapper .c-card__check-zone .c-checkbox{width:1.25rem;height:1.25rem}.ac-component .c-cards-wrapper .c-card__heading,.ac-component.c-cards-wrapper .c-card__heading{flex-direction:row;flex:auto;gap:.5rem;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item,.ac-component.c-cards-wrapper .c-card__heading-item{flex-direction:column;flex:1 1 0;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item.primary,.ac-component.c-cards-wrapper .c-card__heading-item.primary{flex:2 1 0}.ac-component .c-cards-wrapper .c-card__label,.ac-component.c-cards-wrapper .c-card__label{color:var(--neutral-600);text-transform:uppercase;letter-spacing:.03em;font-size:.675rem;font-weight:700}.ac-component .c-cards-wrapper .c-card__title,.ac-component.c-cards-wrapper .c-card__title{color:var(--neutral-800);font-size:.85rem;font-weight:600}.ac-component .c-cards-wrapper .c-card__icon,.ac-component.c-cards-wrapper .c-card__icon{color:var(--neutral-700);font-size:.9rem;transition:transform .2s}.ac-component .c-cards-wrapper .c-card__body,.ac-component.c-cards-wrapper .c-card__body{--field-gap-x:.375rem;gap:.75rem var(--field-gap-x);flex-wrap:wrap;padding:.625rem;display:flex;container-type:inline-size}.ac-component .c-cards-wrapper .c-card__field,.ac-component.c-cards-wrapper .c-card__field{flex:1 1 calc(50% - .5 * var(--field-gap-x));border:1px solid var(--neutral-200);border-radius:8px;align-items:center;min-height:2.5rem;padding:.5rem;display:flex;position:relative}.ac-component .c-cards-wrapper .c-card__field:hover .c-copy-btn,.ac-component.c-cards-wrapper .c-card__field:hover .c-copy-btn{opacity:1}.ac-component .c-cards-wrapper .c-card__field-value,.ac-component.c-cards-wrapper .c-card__field-value{overflow-wrap:break-word;word-break:break-word;flex:1;font-size:.875rem}.ac-component .c-cards-wrapper .c-card__field-label,.ac-component.c-cards-wrapper .c-card__field-label{letter-spacing:.02em;background:var(--neutral-0);color:var(--neutral-600);padding:0 .125rem;font-size:.7rem;font-weight:700;position:absolute;top:-.5lh;left:.5rem}.ac-component .c-cards-wrapper .c-card__field .c-copy-btn,.ac-component.c-cards-wrapper .c-card__field .c-copy-btn{opacity:0}.ac-component .c-cards-wrapper .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field-copy{background:var(--neutral-0);padding:.125rem;position:absolute;top:-.625lh;right:.375rem}.ac-component .c-cards-wrapper .c-card__field-copy:hover,.ac-component.c-cards-wrapper .c-card__field-copy:hover{color:var(--premium-600);background:var(--background-100)}@media (hover:none),(pointer:coarse){.ac-component .c-cards-wrapper .c-card__field:focus-within,.ac-component .c-cards-wrapper .c-card__field:hover,.ac-component.c-cards-wrapper .c-card__field:focus-within,.ac-component.c-cards-wrapper .c-card__field:hover{border-color:var(--neutral-300)}.ac-component .c-cards-wrapper .c-card__field:focus-within .c-card__field-copy,.ac-component .c-cards-wrapper .c-card__field:hover .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field:focus-within .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field:hover .c-card__field-copy{opacity:1}}.ac-component .c-cards-wrapper .c-card__actions,.ac-component.c-cards-wrapper .c-card__actions{flex-wrap:wrap;flex:100%;justify-content:space-around;align-items:center;gap:.5rem;padding-top:.25rem;display:flex}@keyframes c-cards-backdrop-in{0%{opacity:0}to{opacity:1}}@container (width<=526px){.ac-component .c-cards-wrapper .c-card__field,.ac-component.c-cards-wrapper .c-card__field{flex-basis:100%}}
+.ac-component .c-cards-wrapper,.ac-component.c-cards-wrapper{max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-data-list--fill-height>.ac-component .c-cards-wrapper,.c-data-list--fill-height>.ac-component.c-cards-wrapper{flex:auto;height:auto;min-height:0;max-height:none}.ac-component .c-cards-wrapper.is-loading,.ac-component.c-cards-wrapper.is-loading{touch-action:none;overflow:hidden}.ac-component .c-cards-wrapper.is-loading .c-cards,.ac-component.c-cards-wrapper.is-loading .c-cards{opacity:.45;transition:opacity .15s ease-out}.ac-component .c-cards-wrapper .c-cards,.ac-component.c-cards-wrapper .c-cards{border-top:2px solid var(--neutral-200);border-bottom:2px solid var(--neutral-200);flex-direction:column;gap:.5rem;padding:.5rem 0;font-size:.875rem;display:flex}.ac-component .c-cards-wrapper .c-cards.is-compact,.ac-component.c-cards-wrapper .c-cards.is-compact{gap:.25rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__header,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__header{--header-padding-y:.375rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__label,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__label{font-size:.6rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__field,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__field{min-height:unset;padding-top:.5rem;padding-bottom:.375rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__body,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__body{row-gap:.5rem;padding-bottom:.5rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__actions,.ac-component.c-cards-wrapper .c-cards.is-compact .c-card__actions{padding-top:0}.ac-component .c-cards-wrapper .c-cards__loading-wrap,.ac-component.c-cards-wrapper .c-cards__loading-wrap{border-top:2px solid var(--neutral-200);border-bottom:2px solid var(--neutral-200);justify-content:center;align-items:center;width:100%;padding:2rem;display:flex}.ac-component .c-cards-wrapper .c-cards__backdrop,.ac-component.c-cards-wrapper .c-cards__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;animation:.15s ease-out c-cards-backdrop-in;display:flex;position:absolute;inset:0}.ac-component .c-cards-wrapper .c-card,.ac-component.c-cards-wrapper .c-card{border:1px solid var(--neutral-200);background:var(--neutral-0);border-radius:.75rem;transition:border-color .15s,box-shadow .15s}.ac-component .c-cards-wrapper .c-card.is-open,.ac-component.c-cards-wrapper .c-card.is-open{border-color:var(--premium-500)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__header,.ac-component.c-cards-wrapper .c-card.is-open .c-card__header{background:var(--premium-50)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__header:hover,.ac-component.c-cards-wrapper .c-card.is-open .c-card__header:hover{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__icon,.ac-component.c-cards-wrapper .c-card.is-open .c-card__icon{transform:rotate(180deg)}.ac-component .c-cards-wrapper .c-card.is-selected,.ac-component.c-cards-wrapper .c-card.is-selected{border-color:var(--premium-400);box-shadow:0 0 0 1px var(--premium-200)}.ac-component .c-cards-wrapper .c-card.is-selected .c-card__header,.ac-component.c-cards-wrapper .c-card.is-selected .c-card__header{background:var(--site-100)}.ac-component .c-cards-wrapper .c-card.is-selected .c-card__header:hover,.ac-component.c-cards-wrapper .c-card.is-selected .c-card__header:hover{background:var(--site-200)}.ac-component .c-cards-wrapper .c-card__header,.ac-component.c-cards-wrapper .c-card__header{--header-padding-y:.75rem;--header-padding-x:.75rem;width:100%;padding:var(--header-padding-y) var(--header-padding-x);border-radius:inherit;background:var(--neutral-50);color:inherit;text-align:left;cursor:pointer;border:0;align-items:center;gap:.5rem;line-height:1.2;transition:background-color .15s;display:flex}.ac-component .c-cards-wrapper .c-card__header:hover,.ac-component.c-cards-wrapper .c-card__header:hover{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card__check-zone,.ac-component.c-cards-wrapper .c-card__check-zone{padding:0 .5rem 0 var(--header-padding-x);margin:calc(-1 * var(--header-padding-y)) -.5rem calc(-1 * var(--header-padding-y)) calc(-1 * var(--header-padding-x));align-self:stretch;align-items:center;display:flex}.ac-component .c-cards-wrapper .c-card__check-zone .c-checkbox,.ac-component.c-cards-wrapper .c-card__check-zone .c-checkbox{width:1.25rem;height:1.25rem}.ac-component .c-cards-wrapper .c-card__heading,.ac-component.c-cards-wrapper .c-card__heading{flex-direction:row;flex:auto;gap:.5rem;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item,.ac-component.c-cards-wrapper .c-card__heading-item{flex-direction:column;flex:1 1 0;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item.primary,.ac-component.c-cards-wrapper .c-card__heading-item.primary{flex:2 1 0}.ac-component .c-cards-wrapper .c-card__label,.ac-component.c-cards-wrapper .c-card__label{color:var(--neutral-600);text-transform:uppercase;letter-spacing:.03em;font-size:.675rem;font-weight:700}.ac-component .c-cards-wrapper .c-card__title,.ac-component.c-cards-wrapper .c-card__title{color:var(--neutral-800);font-size:.85rem;font-weight:600}.ac-component .c-cards-wrapper .c-card__icon,.ac-component.c-cards-wrapper .c-card__icon{margin:calc(-1 * var(--header-padding-y)) calc(-1 * var(--header-padding-x)) calc(-1 * var(--header-padding-y)) 0;color:var(--neutral-700);cursor:pointer;justify-content:center;align-self:stretch;align-items:center;padding:0 .75rem;font-size:.9rem;transition:transform .2s;display:flex}.ac-component .c-cards-wrapper .c-card__body,.ac-component.c-cards-wrapper .c-card__body{--field-gap-x:.375rem;gap:.75rem var(--field-gap-x);flex-wrap:wrap;padding:.625rem;display:flex;container-type:inline-size}.ac-component .c-cards-wrapper .c-card__field,.ac-component.c-cards-wrapper .c-card__field{flex:1 1 calc(50% - .5 * var(--field-gap-x));border:1px solid var(--neutral-200);border-radius:8px;align-items:center;min-height:2.5rem;padding:.5rem;display:flex;position:relative}.ac-component .c-cards-wrapper .c-card__field:hover .c-copy-btn,.ac-component.c-cards-wrapper .c-card__field:hover .c-copy-btn{opacity:1}.ac-component .c-cards-wrapper .c-card__field-value,.ac-component.c-cards-wrapper .c-card__field-value{overflow-wrap:break-word;word-break:break-word;flex:1;font-size:.875rem}.ac-component .c-cards-wrapper .c-card__field-label,.ac-component.c-cards-wrapper .c-card__field-label{letter-spacing:.02em;background:var(--neutral-0);color:var(--neutral-600);padding:0 .125rem;font-size:.7rem;font-weight:700;position:absolute;top:-.5lh;left:.5rem}.ac-component .c-cards-wrapper .c-card__field .c-copy-btn,.ac-component.c-cards-wrapper .c-card__field .c-copy-btn{opacity:0}.ac-component .c-cards-wrapper .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field-copy{background:var(--neutral-0);padding:.125rem;position:absolute;top:-.625lh;right:.375rem}.ac-component .c-cards-wrapper .c-card__field-copy:hover,.ac-component.c-cards-wrapper .c-card__field-copy:hover{color:var(--premium-600);background:var(--background-100)}@media (hover:none),(pointer:coarse){.ac-component .c-cards-wrapper .c-card__field:focus-within,.ac-component .c-cards-wrapper .c-card__field:hover,.ac-component.c-cards-wrapper .c-card__field:focus-within,.ac-component.c-cards-wrapper .c-card__field:hover{border-color:var(--neutral-300)}.ac-component .c-cards-wrapper .c-card__field:focus-within .c-card__field-copy,.ac-component .c-cards-wrapper .c-card__field:hover .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field:focus-within .c-card__field-copy,.ac-component.c-cards-wrapper .c-card__field:hover .c-card__field-copy{opacity:1}}.ac-component .c-cards-wrapper .c-card__actions,.ac-component.c-cards-wrapper .c-card__actions{flex-wrap:wrap;flex:100%;justify-content:space-around;align-items:center;gap:.5rem;padding-top:.25rem;display:flex}@keyframes c-cards-backdrop-in{0%{opacity:0}to{opacity:1}}@container (width<=526px){.ac-component .c-cards-wrapper .c-card__field,.ac-component.c-cards-wrapper .c-card__field{flex-basis:100%}}

package/dist/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css

@@ -1 +1 @@
-.ac-component .c-modal-backdrop{z-index:1100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ac-component .c-modal{background:var(--neutral-0);border-radius:.75rem;flex-direction:column;min-width:clamp(18rem,60dvw,26rem);max-width:calc(100dvw - 2rem);max-height:calc(100dvh - 4rem);animation:.15s ease-out c-modal-enter;display:flex;overflow:hidden;box-shadow:0 8px 32px #0000001f}.ac-component .c-modal-header{border-bottom:1px solid var(--neutral-100);justify-content:space-between;align-items:center;padding:.5rem;display:flex}.ac-component .c-modal-title{color:var(--neutral-900);padding-left:.5rem;font-size:1rem;font-weight:600}.ac-component .c-modal-close{color:var(--neutral-600);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;padding:.5rem .625rem;font-size:1rem;transition:background-color .15s,color .15s;display:inline-flex}.ac-component .c-modal-close i{transform:translate(.5px)}.ac-component .c-modal-close:hover{background:var(--neutral-100);color:var(--neutral-900)}.ac-component .c-modal-close:focus-visible{outline:none;box-shadow:0 0 0 2px #f265221f}.ac-component .c-modal-body{flex-direction:column;flex:1;padding:.5rem .75rem;display:flex;overflow-y:auto}.ac-component .c-modal-footer{border-top:1px solid var(--neutral-100);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.ac-component .c-confirm-modal-message{color:var(--neutral-700);margin:0;font-size:.875rem;line-height:1.5}@keyframes c-modal-enter{0%{opacity:0;transform:scale(.95)translateY(-.5rem)}to{opacity:1;transform:scale(1)translateY(0)}}
+.ac-component dialog.c-modal::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006}.ac-component dialog.c-modal{color:var(--neutral-900);background:var(--neutral-0);border:0;border-radius:.75rem;flex-direction:column;min-width:clamp(18rem,60dvw,26rem);max-width:calc(100dvw - 2rem);max-height:calc(100dvh - 4rem);margin:auto;padding:0;animation:.15s ease-out c-modal-enter;display:flex;overflow:hidden;box-shadow:0 8px 32px #0000001f}.ac-component .c-modal-header{border-bottom:1px solid var(--neutral-100);justify-content:space-between;align-items:center;padding:.5rem;display:flex}.ac-component .c-modal-title{color:var(--neutral-900);padding-left:.5rem;font-size:1rem;font-weight:600}.ac-component .c-modal-close{color:var(--neutral-600);cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;padding:.5rem .625rem;font-size:1rem;transition:background-color .15s,color .15s;display:inline-flex}.ac-component .c-modal-close i{transform:translate(.5px)}.ac-component .c-modal-close:hover{background:var(--neutral-100);color:var(--neutral-900)}.ac-component .c-modal-close:focus-visible{outline:none;box-shadow:0 0 0 2px #f265221f}.ac-component .c-modal-body{flex-direction:column;flex:1;padding:.5rem .75rem;display:flex;overflow-y:auto}.ac-component .c-modal-footer{border-top:1px solid var(--neutral-100);justify-content:flex-end;align-items:center;gap:.5rem;padding:.75rem 1.25rem;display:flex}.ac-component .c-confirm-modal-message{color:var(--neutral-700);margin:0;font-size:.875rem;line-height:1.5}@keyframes c-modal-enter{0%{opacity:0;transform:scale(.95)translateY(-.5rem)}to{opacity:1;transform:scale(1)translateY(0)}}

package/dist/test.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+  <meta charset="UTF-8" />
+  <title>search-posts-widget standalone test</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 2rem; }
+    #log {
+      margin-top: 1rem;
+      padding: 1rem;
+      background: #f4f4f4;
+      border: 1px solid #ddd;
+      font-family: monospace;
+      white-space: pre-wrap;
+      font-size: 12px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    dialog {
+      padding: 0;
+      border: 1px solid #999;
+      border-radius: 8px;
+      width: 90vw;
+      height: 80vh;
+    }
+    dialog::backdrop { background: rgba(0,0,0,0.4); }
+  </style>
+</head>
+<body>
+  <h1>search-posts-widget standalone test</h1>
+
+  <p>
+    Bundle:
+    <select id="bundle-version">
+      <option value="1.0.181">1.0.181</option>
+      <option value="1.0.188" selected>1.0.188</option>
+    </select>
+    <button id="reload">Reload bundle</button>
+  </p>
+
+  <p>
+    <strong>apiurl:</strong>
+    <input id="apiurl" style="width: 360px" value="http://172.22.0.15:8080" />
+    <br />
+    <strong>environment:</strong>
+    <input id="environment" value="dev" />
+    <br />
+    <strong>id (causationid):</strong>
+    <input id="causationid" value="test-1" />
+    <br />
+    <strong>searchurl:</strong>
+    <input id="searchurl" style="width: 360px" value="" />
+  </p>
+
+  <button id="open-selector">Open selector</button>
+  <button id="open-non-selector">Open non-selector</button>
+
+  <dialog id="dialog">
+    <search-posts-widget
+      id="widget"
+      selector="true"
+      environment="dev"
+      id="causationid"
+      apiurl="http://172.22.0.15:8080"
+      searchurl=""
+    ></search-posts-widget>
+  </dialog>
+
+  <h3>Console log</h3>
+  <div id="log"></div>
+
+  <script>
+    const log = (msg, data) => {
+      const el = document.getElementById('log')
+      const line = document.createElement('div')
+      line.textContent = `[${new Date().toISOString()}] ${msg}` +
+        (data !== undefined ? ' ' + JSON.stringify(data) : '')
+      el.appendChild(line)
+      console.log(msg, data ?? '')
+    }
+
+    window.addEventListener('error', (e) => log('ERROR', { msg: e.message, file: e.filename, line: e.lineno }))
+    window.addEventListener('unhandledrejection', (e) => log('UNHANDLED REJECTION', { reason: String(e.reason) }))
+
+    const widgetScriptId = 'search-posts-widget-script'
+    const CDN_BASE = 'https://cdn.hvg.hu/search-posts-widget'
+
+    function loadBundle(version) {
+      return new Promise((resolve, reject) => {
+        const existing = document.getElementById(widgetScriptId)
+        if (existing) existing.remove()
+        if (customElements.get('search-posts-widget')) {
+          // Force re-registration by re-defining on a new class
+          // (customElements.define cannot be called twice for the same name,
+          //  but since the script reassigns via const, we just reload.)
+        }
+        const s = document.createElement('script')
+        s.id = widgetScriptId
+        //s.src = `${CDN_BASE}/${version}/search-posts-widget.umd.js`
+        s.src = '/widget/dist/search-posts-widget.umd.js'
+        s.onload = () => resolve(version)
+        s.onerror = () => reject(new Error(`Failed to load ${version}`))
+        document.head.appendChild(s)
+      })
+    }
+
+    function applyAttrs() {
+      const w = document.getElementById('widget')
+      w.setAttribute('apiurl', document.getElementById('apiurl').value)
+      w.setAttribute('environment', document.getElementById('environment').value)
+      w.setAttribute('id', document.getElementById('causationid').value)
+      w.setAttribute('searchurl', document.getElementById('searchurl').value)
+      log('widget attrs', {
+        apiurl: w.getAttribute('apiurl'),
+        environment: w.getAttribute('environment'),
+        id: w.getAttribute('id'),
+        searchurl: w.getAttribute('searchurl'),
+        selector: w.getAttribute('selector'),
+      })
+    }
+
+    function openWidget(selector) {
+      const w = document.getElementById('widget')
+      w.setAttribute('selector', selector ? 'true' : 'false')
+      applyAttrs()
+      // Re-create the element so the new selector prop takes effect
+      const fresh = w.cloneNode(true)
+      w.replaceWith(fresh)
+      document.getElementById('dialog').showModal()
+      // v1.0.188 needs open() to display selector content
+      try {
+        console.log('fresh element before open:', fresh)
+        fresh.open?.()
+        log('called open()', { hasOpen: typeof fresh.open === 'function' })
+      } catch (e) {
+        log('open() threw', { error: String(e) })
+      }
+    }
+
+    document.getElementById('reload').addEventListener('click', async () => {
+      const v = document.getElementById('bundle-version').value
+      try {
+        await loadBundle(v)
+        log('bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') })
+      } catch (e) {
+        log('bundle load failed', { error: String(e) })
+      }
+    })
+
+    document.getElementById('open-selector').addEventListener('click', () => openWidget(true))
+    document.getElementById('open-non-selector').addEventListener('click', () => openWidget(false))
+
+    window.addEventListener('search_posts_selected', (e) => {
+      log('search_posts_selected', e.detail)
+    })
+
+    // Initial load of selected version
+    loadBundle(document.getElementById('bundle-version').value)
+      .then((v) => log('initial bundle loaded', { version: v, defined: !!customElements.get('search-posts-widget') }))
+      .catch((e) => log('initial bundle failed', { error: String(e) }))
+  </script>
+</body>
+</html>