admins-components 9.0.13 → 9.0.14

package/dist/admins-components59.js

@@ -1,115 +1,120 @@
 import e from "./admins-components6.js";
-import t from "./admins-components24.js";
-import n from "./admins-components48.js";
-import { useSelection as r } from "./admins-components53.js";
-import { dataTableSettingsDefaults as i } from "./admins-components54.js";
-import { buildActionGroupMenuItems as a, isActionGroup as o } from "./admins-components55.js";
-import s from "./admins-components58.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeProps as _, normalizeClass as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, withModifiers as T } from "vue";
+import t from "./admins-components16.js";
+import n from "./admins-components24.js";
+import r from "./admins-components48.js";
+import { useSelection as i } from "./admins-components53.js";
+import { dataTableSettingsDefaults as a } from "./admins-components54.js";
+import { buildActionGroupMenuItems as o, isActionGroup as s } from "./admins-components55.js";
+import c from "./admins-components58.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, withModifiers as E } from "vue";
 //#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
-var E = { class: "c-table-wrapper ac-component" }, D = { key: 0 }, O = ["onClick"], k = {
+var D = { class: "ac-component" }, O = { class: "c-table-wrapper" }, k = { key: 0 }, A = ["onClick"], j = {
 	key: 1,
 	class: "c-actions-header"
-}, A = { key: 0 }, j = ["onClick"], M = {
+}, M = { key: 0 }, N = ["onClick"], P = {
 	key: 1,
 	class: "c-actions-cell"
-}, N = { class: "c-actions-wrap" }, P = { key: 1 }, F = { class: "c-table__loading-row" }, I = ["colspan"], L = { class: "c-table__loading-wrap" }, R = {
+}, F = { class: "c-actions-wrap" }, I = { key: 1 }, L = { class: "c-table__loading-row" }, R = ["colspan"], z = { class: "c-table__loading-wrap" }, B = {
 	key: 0,
 	class: "c-table__backdrop",
 	"aria-hidden": "true"
-}, z = /* @__PURE__ */ g({
+}, V = /* @__PURE__ */ _({
 	__name: "DataTable",
 	props: {
 		config: {},
 		items: {},
-		settings: { default: () => ({ ...i }) },
+		settings: { default: () => ({ ...a }) },
 		loading: {
 			type: Boolean,
 			default: !1
 		}
 	},
 	emits: ["selection-change", "sort-change"],
-	setup(i, { emit: g }) {
-		let z = i, B = g, V = x(null), { selectedKeys: H, allSelected: U, toggle: W, toggleAll: G } = r(() => z.items, () => z.config.selectableAttr, (e) => B("selection-change", e)), K = l(() => z.config.columns.filter((e) => e.visible !== !1));
-		function q(e) {
-			let t = V.value?.key === e && V.value.direction === "asc" ? "desc" : "asc";
-			V.value = {
+	setup(a, { emit: _ }) {
+		let V = a, H = _, U = S(null), { selectedKeys: W, allSelected: G, toggle: K, toggleAll: q } = i(() => V.items, () => V.config.selectableAttr, (e) => H("selection-change", e)), J = u(() => V.config.columns.filter((e) => e.visible !== !1));
+		function Y(e) {
+			let t = U.value?.key === e && U.value.direction === "asc" ? "desc" : "asc";
+			U.value = {
 				key: e,
 				direction: t
-			}, B("sort-change", {
+			}, H("sort-change", {
 				key: e,
 				direction: t
 			});
 		}
-		return (r, l) => (b(), f("div", E, [p("table", {
-			class: v(["c-table", {
-				"is-compact": i.settings.compact,
-				"is-loading": i.loading
+		return (i, u) => (x(), p("div", D, [m("div", O, [m("table", {
+			class: y(["c-table", {
+				"is-compact": a.settings.compact,
+				"is-loading": a.loading
 			}]),
-			style: y({ "--action-count": i.config.actions?.length ?? 0 })
-		}, [p("thead", null, [p("tr", null, [
-			i.config.selectableAttr ? (b(), f("th", D, [p("span", {
-				class: v(["c-checkbox", { "c-checkbox--checked": w(U) }]),
-				onClick: l[0] ||= (...e) => w(G) && w(G)(...e)
-			}, null, 2)])) : d("", !0),
-			(b(!0), f(c, null, S(K.value, (e) => (b(), f("th", {
+			style: b({ "--action-count": a.config.actions?.length ?? 0 })
+		}, [m("thead", null, [m("tr", null, [
+			a.config.selectableAttr ? (x(), p("th", k, [g(t, {
+				"model-value": T(G),
+				"onUpdate:modelValue": T(q)
+			}, null, 8, ["model-value", "onUpdate:modelValue"])])) : f("", !0),
+			(x(!0), p(l, null, C(J.value, (e) => (x(), p("th", {
 				key: e.property,
-				class: v({
+				class: y({
 					"c-sortable": e.sort,
-					"c-sortable--sorted": V.value?.key === e.property
+					"c-sortable--sorted": U.value?.key === e.property
 				}),
-				onClick: (t) => e.sort ? q(e.property) : void 0
-			}, [m(C(e.label) + " ", 1), e.sort ? (b(), f("span", {
+				onClick: (t) => e.sort ? Y(e.property) : void 0
+			}, [h(w(e.label) + " ", 1), e.sort ? (x(), p("span", {
 				key: 0,
-				class: v(["c-sort-icon fa-solid", {
-					"fa-sort": V.value?.key !== e.property,
-					"fa-sort-down": V.value?.key === e.property && V.value.direction === "desc",
-					"fa-sort-up": V.value?.key === e.property && V.value.direction === "asc",
-					"c-sort-icon--active": V.value?.key === e.property,
-					"is-asc": V.value?.key === e.property && V.value.direction === "asc",
-					"is-desc": V.value?.key === e.property && V.value.direction === "desc"
+				class: y(["c-sort-icon fa-solid", {
+					"fa-sort": U.value?.key !== e.property,
+					"fa-sort-down": U.value?.key === e.property && U.value.direction === "desc",
+					"fa-sort-up": U.value?.key === e.property && U.value.direction === "asc",
+					"c-sort-icon--active": U.value?.key === e.property,
+					"is-asc": U.value?.key === e.property && U.value.direction === "asc",
+					"is-desc": U.value?.key === e.property && U.value.direction === "desc"
 				}])
-			}, null, 2)) : d("", !0)], 10, O))), 128)),
-			i.config.actions ? (b(), f("th", k, C(i.config.actionHeader ?? ""), 1)) : d("", !0)
-		])]), !i.loading || i.items.length > 0 ? (b(), f("tbody", A, [(b(!0), f(c, null, S(i.items, (n, r) => (b(), f("tr", {
-			key: r,
-			class: v({
-				"is-selected": i.config.selectableAttr && w(H).has(n[i.config.selectableAttr]),
-				"is-striped": i.settings.striped && r % 2 == 1
+			}, null, 2)) : f("", !0)], 10, A))), 128)),
+			a.config.actions ? (x(), p("th", j, w(a.config.actionHeader ?? ""), 1)) : f("", !0)
+		])]), !a.loading || a.items.length > 0 ? (x(), p("tbody", M, [(x(!0), p(l, null, C(a.items, (r, i) => (x(), p("tr", {
+			key: i,
+			class: y({
+				"is-selected": a.config.selectableAttr && T(W).has(r[a.config.selectableAttr]),
+				"is-striped": a.settings.striped && i % 2 == 1
 			})
 		}, [
-			i.config.selectableAttr ? (b(), f("td", {
+			a.config.selectableAttr ? (x(), p("td", {
 				key: 0,
 				class: "pointer",
-				onClick: T((e) => w(W)(n), ["stop"])
-			}, [p("span", { class: v(["c-checkbox", { "c-checkbox--checked": w(H).has(n[i.config.selectableAttr]) }]) }, null, 2)], 8, j)) : d("", !0),
-			(b(!0), f(c, null, S(K.value, (e) => (b(), f("td", {
+				onClick: E((e) => T(K)(r), ["stop"])
+			}, [g(t, {
+				"model-value": !!T(W).has(r[a.config.selectableAttr]),
+				"onUpdate:modelValue": (e) => T(K)(r),
+				onClick: u[0] ||= E(() => {}, ["stop"])
+			}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, N)) : f("", !0),
+			(x(!0), p(l, null, C(J.value, (e) => (x(), p("td", {
 				key: e.property,
-				class: v(["c-table__cell", [e.class]])
-			}, [h(s, {
-				item: n,
+				class: y(["c-table__cell", [e.class]])
+			}, [g(c, {
+				item: r,
 				col: e
 			}, null, 8, ["item", "col"])], 2))), 128)),
-			i.config.actions ? (b(), f("td", M, [p("div", N, [(b(!0), f(c, null, S(i.config.actions, (r, i) => (b(), f(c, { key: i }, [w(o)(r) ? (b(), u(t, _({
+			a.config.actions ? (x(), p("td", P, [m("div", F, [(x(!0), p(l, null, C(a.config.actions, (t, i) => (x(), p(l, { key: i }, [T(s)(t) ? (x(), d(n, v({
 				key: 0,
-				icon: r.icon,
-				label: r.label,
-				items: w(a)(r, n)
-			}, { ref_for: !0 }, r.config), null, 16, [
+				icon: t.icon,
+				label: t.label,
+				items: T(o)(t, r)
+			}, { ref_for: !0 }, t.config), null, 16, [
 				"icon",
 				"label",
 				"items"
-			])) : (b(), u(e, _({
+			])) : (x(), d(e, v({
 				key: 1,
-				icon: r.icon,
-				label: r.label,
-				type: r.type,
-				disabled: r.disabled ? r.disabled(n) : !1,
-				size: r.label ? "small" : "normal",
-				ariaLabel: r.ariaLabel,
+				icon: t.icon,
+				label: t.label,
+				type: t.type,
+				disabled: t.disabled ? t.disabled(r) : !1,
+				size: t.label ? "small" : "normal",
+				ariaLabel: t.ariaLabel,
 				outline: "",
-				callback: () => r.callback(n)
-			}, { ref_for: !0 }, r.config), null, 16, [
+				callback: () => t.callback(r)
+			}, { ref_for: !0 }, t.config), null, 16, [
 				"icon",
 				"label",
 				"type",
@@ -117,18 +122,18 @@ var E = { class: "c-table-wrapper ac-component" }, D = { key: 0 }, O = ["onClick
 				"size",
 				"ariaLabel",
 				"callback"
-			]))], 64))), 128))])])) : d("", !0)
-		], 2))), 128))])) : (b(), f("tbody", P, [p("tr", F, [p("td", {
-			colspan: K.value.length + +!!i.config.selectableAttr + +!!i.config.actions,
+			]))], 64))), 128))])])) : f("", !0)
+		], 2))), 128))])) : (x(), p("tbody", I, [m("tr", L, [m("td", {
+			colspan: J.value.length + +!!a.config.selectableAttr + +!!a.config.actions,
 			class: "c-table__loading-cell"
-		}, [p("div", L, [h(n, {
+		}, [m("div", z, [g(r, {
 			loading: !0,
 			size: "2.5rem"
-		})])], 8, I)])]))], 6), i.loading && i.items.length > 0 ? (b(), f("div", R, [h(n, {
+		})])], 8, R)])]))], 6), a.loading && a.items.length > 0 ? (x(), p("div", B, [g(r, {
 			loading: !0,
 			size: "2.5rem"
-		})])) : d("", !0)]));
+		})])) : f("", !0)])]));
 	}
 });
 //#endregion
-export { z as default };
+export { V as default };

package/dist/admins-components59.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components59.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"c-table-wrapper ac-component\">\n    <table\n      class=\"c-table\"\n      :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n      :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n    >\n      <thead>\n        <tr>\n          <th v-if=\"config.selectableAttr\">\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': allSelected }\"\n              @click=\"toggleAll\"\n            ></span>\n          </th>\n\n          <th\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            :class=\"{\n              'c-sortable': col.sort,\n              'c-sortable--sorted': activeSort?.key === col.property,\n            }\"\n            @click=\"col.sort ? handleSort(col.property) : undefined\"\n          >\n            {{ col.label }}\n\n            <span\n              v-if=\"col.sort\"\n              class=\"c-sort-icon fa-solid\"\n              :class=\"{\n                'fa-sort': activeSort?.key !== col.property,\n                'fa-sort-down': activeSort?.key === col.property && activeSort.direction === 'desc',\n                'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'c-sort-icon--active': activeSort?.key === col.property,\n                'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n              }\"\n            ></span>\n          </th>\n\n          <th v-if=\"config.actions\" class=\"c-actions-header\">\n            {{ config.actionHeader ?? '' }}\n          </th>\n        </tr>\n      </thead>\n\n      <tbody v-if=\"!loading || items.length > 0\">\n        <tr\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"{\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n            'is-striped': settings.striped && index % 2 === 1,\n          }\"\n        >\n          <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': selectedKeys.has(item[config.selectableAttr]) }\"\n            ></span>\n          </td>\n\n          <td\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            class=\"c-table__cell\"\n            :class=\"[\n              col.class,\n              /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n            ]\"\n          >\n            <DataCell :item=\"item\" :col=\"col\" />\n          </td>\n\n          <td v-if=\"config.actions\" class=\"c-actions-cell\">\n            <div class=\"c-actions-wrap\">\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                  :items=\"buildActionGroupMenuItems(action, item)\"\n                  v-bind=\"action.config\"\n                />\n\n                <Button\n                  v-else\n                  :icon=\"action.icon\"\n                  :label=\"action.label\"\n                  :type=\"action.type\"\n                  :disabled=\"action.disabled ? action.disabled(item) : false\"\n                  :size=\"action.label ? 'small' : 'normal'\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  outline\n                  :callback=\"() => action.callback(item)\"\n                  v-bind=\"action.config\"\n                />\n              </template>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n      <tbody v-else>\n        <tr class=\"c-table__loading-row\">\n          <td\n            :colspan=\"\n              visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n            \"\n            class=\"c-table__loading-cell\"\n          >\n            <div class=\"c-table__loading-wrap\">\n              <Loader :loading=\"true\" size=\"2.5rem\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading && items.length > 0\" class=\"c-table__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-table.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components59.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-table-wrapper\">\n      <table\n        class=\"c-table\"\n        :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n        :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n      >\n        <thead>\n          <tr>\n            <th v-if=\"config.selectableAttr\">\n              <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n            </th>\n\n            <th\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              :class=\"{\n                'c-sortable': col.sort,\n                'c-sortable--sorted': activeSort?.key === col.property,\n              }\"\n              @click=\"col.sort ? handleSort(col.property) : undefined\"\n            >\n              {{ col.label }}\n\n              <span\n                v-if=\"col.sort\"\n                class=\"c-sort-icon fa-solid\"\n                :class=\"{\n                  'fa-sort': activeSort?.key !== col.property,\n                  'fa-sort-down':\n                    activeSort?.key === col.property && activeSort.direction === 'desc',\n                  'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'c-sort-icon--active': activeSort?.key === col.property,\n                  'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n                }\"\n              ></span>\n            </th>\n\n            <th v-if=\"config.actions\" class=\"c-actions-header\">\n              {{ config.actionHeader ?? '' }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody v-if=\"!loading || items.length > 0\">\n          <tr\n            v-for=\"(item, index) in items\"\n            :key=\"index\"\n            :class=\"{\n              'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n              'is-striped': settings.striped && index % 2 === 1,\n            }\"\n          >\n            <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </td>\n\n            <td\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-table__cell\"\n              :class=\"[\n                col.class,\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\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                    :items=\"buildActionGroupMenuItems(action, item)\"\n                    v-bind=\"action.config\"\n                  />\n\n                  <Button\n                    v-else\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :type=\"action.type\"\n                    :disabled=\"action.disabled ? action.disabled(item) : false\"\n                    :size=\"action.label ? 'small' : 'normal'\"\n                    :ariaLabel=\"action.ariaLabel\"\n                    outline\n                    :callback=\"() => action.callback(item)\"\n                    v-bind=\"action.config\"\n                  />\n                </template>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n        <tbody v-else>\n          <tr class=\"c-table__loading-row\">\n            <td\n              :colspan=\"\n                visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n              \"\n              class=\"c-table__loading-cell\"\n            >\n              <div class=\"c-table__loading-wrap\">\n                <Loader :loading=\"true\" size=\"2.5rem\" />\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"loading && items.length > 0\" class=\"c-table__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-table.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components6.js","names":[],"sources":["../src/components/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ButtonType = 'normal' | 'dark' | 'success' | 'error' | 'warning' | 'info'\n\nexport type IconPosition = 'left' | 'right'\n\nexport interface ButtonProps {\n  size?: ControlSize\n  type?: ButtonType\n  outline?: boolean\n  icon?: string\n  iconPosition?: IconPosition\n  label?: string\n  ariaLabel?: string\n  callback?: () => void\n  indicator?: string | number\n  labelAlignmentFix?: boolean\n}\n\nexport const buttonDefaults = {\n  size: 'normal' as ControlSize,\n  type: 'normal' as ButtonType,\n  outline: false,\n  icon: undefined,\n  iconPosition: 'left' as IconPosition,\n  labelAlignmentFix: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ControlSize } from '@/types/types'\nimport { sizeToClass, typeToClass } from '@/utils/dom'\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  ...buttonDefaults,\n})\n\nconst classes = computed(() => [\n  'c-btn',\n  sizeToClass(props.size, 'c-btn'),\n  props.outline && 'c-btn-outline',\n  typeToClass(props.type, 'c-btn'),\n])\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"classes\"\n    :aria-label=\"ariaLabel ?? label\"\n    :title=\"ariaLabel ?? label\"\n    @click=\"callback?.()\"\n  >\n    <i v-if=\"icon && iconPosition === 'left'\" :class=\"icon\"></i>\n\n    <span v-if=\"label\" :class=\"{ 'align-center-text-fix': labelAlignmentFix }\">\n      {{ label }}\n\n      <span v-if=\"indicator !== undefined && indicator !== null\" class=\"c-btn-indicator\">\n        {{ indicator }}\n      </span>\n    </span>\n\n    <i v-if=\"icon && iconPosition === 'right'\" :class=\"icon\"></i>\n  </button>\n</template>\n"],"mappings":""}
+{"version":3,"file":"admins-components6.js","names":[],"sources":["../src/components/Button.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type ButtonType = 'normal' | 'dark' | 'success' | 'error' | 'warning' | 'info'\n\nexport type IconPosition = 'left' | 'right'\n\nexport interface ButtonProps {\n  size?: ControlSize\n  type?: ButtonType\n  outline?: boolean\n  icon?: string\n  iconPosition?: IconPosition\n  label?: string\n  ariaLabel?: string\n  callback?: () => void\n  indicator?: string | number\n  labelAlignmentFix?: boolean\n}\n\nexport const buttonDefaults = {\n  size: 'normal' as ControlSize,\n  type: 'normal' as ButtonType,\n  outline: false,\n  icon: undefined,\n  iconPosition: 'left' as IconPosition,\n  labelAlignmentFix: false,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport type { ControlSize } from '@/types/types'\nimport { sizeToClass, typeToClass } from '@/utils/dom'\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  ...buttonDefaults,\n})\n\nconst classes = computed(() => [\n  'c-btn',\n  sizeToClass(props.size, 'c-btn'),\n  props.outline && 'c-btn-outline',\n  typeToClass(props.type, 'c-btn'),\n])\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :class=\"classes\"\n    :aria-label=\"ariaLabel ?? label\"\n    :title=\"ariaLabel ?? label\"\n    @click=\"callback?.()\"\n  >\n    <i v-if=\"icon && iconPosition === 'left'\" :class=\"icon\"></i>\n\n    <span v-if=\"label\" :class=\"{ 'align-center-fix': labelAlignmentFix }\">\n      {{ label }}\n\n      <span v-if=\"indicator !== undefined && indicator !== null\" class=\"c-btn-indicator\">\n        {{ indicator }}\n      </span>\n    </span>\n\n    <i v-if=\"icon && iconPosition === 'right'\" :class=\"icon\"></i>\n  </button>\n</template>\n"],"mappings":""}

package/dist/admins-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components61.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"c-table-wrapper ac-component\">\n    <table\n      class=\"c-table\"\n      :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n      :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n    >\n      <thead>\n        <tr>\n          <th v-if=\"config.selectableAttr\">\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': allSelected }\"\n              @click=\"toggleAll\"\n            ></span>\n          </th>\n\n          <th\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            :class=\"{\n              'c-sortable': col.sort,\n              'c-sortable--sorted': activeSort?.key === col.property,\n            }\"\n            @click=\"col.sort ? handleSort(col.property) : undefined\"\n          >\n            {{ col.label }}\n\n            <span\n              v-if=\"col.sort\"\n              class=\"c-sort-icon fa-solid\"\n              :class=\"{\n                'fa-sort': activeSort?.key !== col.property,\n                'fa-sort-down': activeSort?.key === col.property && activeSort.direction === 'desc',\n                'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'c-sort-icon--active': activeSort?.key === col.property,\n                'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n              }\"\n            ></span>\n          </th>\n\n          <th v-if=\"config.actions\" class=\"c-actions-header\">\n            {{ config.actionHeader ?? '' }}\n          </th>\n        </tr>\n      </thead>\n\n      <tbody v-if=\"!loading || items.length > 0\">\n        <tr\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          :class=\"{\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n            'is-striped': settings.striped && index % 2 === 1,\n          }\"\n        >\n          <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n            <span\n              class=\"c-checkbox\"\n              :class=\"{ 'c-checkbox--checked': selectedKeys.has(item[config.selectableAttr]) }\"\n            ></span>\n          </td>\n\n          <td\n            v-for=\"col in visibleColumns\"\n            :key=\"col.property\"\n            class=\"c-table__cell\"\n            :class=\"[\n              col.class,\n              /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n            ]\"\n          >\n            <DataCell :item=\"item\" :col=\"col\" />\n          </td>\n\n          <td v-if=\"config.actions\" class=\"c-actions-cell\">\n            <div class=\"c-actions-wrap\">\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                  :items=\"buildActionGroupMenuItems(action, item)\"\n                  v-bind=\"action.config\"\n                />\n\n                <Button\n                  v-else\n                  :icon=\"action.icon\"\n                  :label=\"action.label\"\n                  :type=\"action.type\"\n                  :disabled=\"action.disabled ? action.disabled(item) : false\"\n                  :size=\"action.label ? 'small' : 'normal'\"\n                  :ariaLabel=\"action.ariaLabel\"\n                  outline\n                  :callback=\"() => action.callback(item)\"\n                  v-bind=\"action.config\"\n                />\n              </template>\n            </div>\n          </td>\n        </tr>\n      </tbody>\n      <tbody v-else>\n        <tr class=\"c-table__loading-row\">\n          <td\n            :colspan=\"\n              visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n            \"\n            class=\"c-table__loading-cell\"\n          >\n            <div class=\"c-table__loading-wrap\">\n              <Loader :loading=\"true\" size=\"2.5rem\" />\n            </div>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n    <div v-if=\"loading && items.length > 0\" class=\"c-table__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-table.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components61.js","names":[],"sources":["../src/components/data-table/DataTable.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type {\n  LayoutMode,\n  DataListConfig,\n  DataListSettings,\n  DataTableSettings,\n  DataCardsSettings,\n  Column,\n  Sort,\n  Action,\n  ActionGroup,\n  FilterConfig,\n  FilterValue,\n} from '@/types/data-list'\n\nexport {\n  dataTableSettingsDefaults,\n  dataCardsSettingsDefaults,\n  dataListSettingsDefaults,\n} from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DropdownMenu from '../DropdownMenu.vue'\nimport { buildActionGroupMenuItems, isActionGroup } from '@/utils/dataList'\n\ntype SortDirection = 'asc' | 'desc'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataTableSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataTableSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n  'sort-change': [sort: { key: string; direction: SortDirection }]\n}>()\n\n//const CHARACTER_BREAKPOINT = 20\n\nconst activeSort = ref<{\n  key: string\n  direction: SortDirection\n} | null>(null)\n\nconst {\n  selectedKeys,\n  allSelected,\n  toggle: toggleRow,\n  toggleAll,\n} = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nfunction handleSort(key: string) {\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n\n  emit('sort-change', { key, direction })\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-table-wrapper\">\n      <table\n        class=\"c-table\"\n        :class=\"{ 'is-compact': settings.compact, 'is-loading': loading }\"\n        :style=\"{ '--action-count': config.actions?.length ?? 0 }\"\n      >\n        <thead>\n          <tr>\n            <th v-if=\"config.selectableAttr\">\n              <Checkbox :model-value=\"allSelected\" @update:model-value=\"toggleAll\" />\n            </th>\n\n            <th\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              :class=\"{\n                'c-sortable': col.sort,\n                'c-sortable--sorted': activeSort?.key === col.property,\n              }\"\n              @click=\"col.sort ? handleSort(col.property) : undefined\"\n            >\n              {{ col.label }}\n\n              <span\n                v-if=\"col.sort\"\n                class=\"c-sort-icon fa-solid\"\n                :class=\"{\n                  'fa-sort': activeSort?.key !== col.property,\n                  'fa-sort-down':\n                    activeSort?.key === col.property && activeSort.direction === 'desc',\n                  'fa-sort-up': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'c-sort-icon--active': activeSort?.key === col.property,\n                  'is-asc': activeSort?.key === col.property && activeSort.direction === 'asc',\n                  'is-desc': activeSort?.key === col.property && activeSort.direction === 'desc',\n                }\"\n              ></span>\n            </th>\n\n            <th v-if=\"config.actions\" class=\"c-actions-header\">\n              {{ config.actionHeader ?? '' }}\n            </th>\n          </tr>\n        </thead>\n\n        <tbody v-if=\"!loading || items.length > 0\">\n          <tr\n            v-for=\"(item, index) in items\"\n            :key=\"index\"\n            :class=\"{\n              'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n              'is-striped': settings.striped && index % 2 === 1,\n            }\"\n          >\n            <td v-if=\"config.selectableAttr\" class=\"pointer\" @click.stop=\"toggleRow(item)\">\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </td>\n\n            <td\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-table__cell\"\n              :class=\"[\n                col.class,\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\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                    :items=\"buildActionGroupMenuItems(action, item)\"\n                    v-bind=\"action.config\"\n                  />\n\n                  <Button\n                    v-else\n                    :icon=\"action.icon\"\n                    :label=\"action.label\"\n                    :type=\"action.type\"\n                    :disabled=\"action.disabled ? action.disabled(item) : false\"\n                    :size=\"action.label ? 'small' : 'normal'\"\n                    :ariaLabel=\"action.ariaLabel\"\n                    outline\n                    :callback=\"() => action.callback(item)\"\n                    v-bind=\"action.config\"\n                  />\n                </template>\n              </div>\n            </td>\n          </tr>\n        </tbody>\n        <tbody v-else>\n          <tr class=\"c-table__loading-row\">\n            <td\n              :colspan=\"\n                visibleColumns.length + (config.selectableAttr ? 1 : 0) + (config.actions ? 1 : 0)\n              \"\n              class=\"c-table__loading-cell\"\n            >\n              <div class=\"c-table__loading-wrap\">\n                <Loader :loading=\"true\" size=\"2.5rem\" />\n              </div>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n      <div v-if=\"loading && items.length > 0\" class=\"c-table__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-table.scss\"></style>\n"],"mappings":""}

package/dist/admins-components62.js

@@ -1,41 +1,42 @@
 import e from "./admins-components6.js";
-import t from "./admins-components24.js";
-import n from "./admins-components38.js";
-import r from "./admins-components48.js";
-import { useSelection as i } from "./admins-components53.js";
-import { dataCardsSettingsDefaults as a } from "./admins-components54.js";
-import { buildActionGroupMenuItems as o, getColumnValue as s, isActionGroup as c } from "./admins-components55.js";
-import l from "./admins-components58.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, vShow as T, watch as E, withDirectives as D, withModifiers as O } from "vue";
+import t from "./admins-components16.js";
+import n from "./admins-components24.js";
+import r from "./admins-components38.js";
+import i from "./admins-components48.js";
+import { useSelection as a } from "./admins-components53.js";
+import { dataCardsSettingsDefaults as o } from "./admins-components54.js";
+import { buildActionGroupMenuItems as s, getColumnValue as c, isActionGroup as l } from "./admins-components55.js";
+import u from "./admins-components58.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 k = ["onClick", "onPointerdown"], A = ["onClick"], j = { class: "c-card__heading" }, M = { class: "c-card__label" }, N = ["innerHTML"], P = { class: "c-card__body" }, F = { class: "c-card__field-label" }, I = {
+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"
-}, L = {
+}, z = {
 	key: 2,
 	class: "c-cards__backdrop",
 	"aria-hidden": "true"
-}, R = /* @__PURE__ */ _({
+}, B = /* @__PURE__ */ v({
 	__name: "DataCards",
 	props: {
 		config: {},
 		items: {},
-		settings: { default: () => ({ ...a }) },
+		settings: { default: () => ({ ...o }) },
 		loading: {
 			type: Boolean,
 			default: !1
 		}
 	},
 	emits: ["selection-change"],
-	setup(a, { emit: _ }) {
-		let R = a, z = _, { selectedKeys: B, toggle: V } = i(() => R.items, () => R.config.selectableAttr, (e) => z("selection-change", e)), H = x(/* @__PURE__ */ new Set());
-		E(() => R.items, () => {
-			H.value = /* @__PURE__ */ new Set();
+	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 U = d(() => R.config.columns.filter((e) => e.visible !== !1)), W = d(() => {
-			let e = R.settings;
+		let G = f(() => B.config.columns.filter((e) => e.visible !== !1)), K = f(() => {
+			let e = B.settings;
 			if (e?.cardHeaderColumns) {
-				let t = U.value.filter((t) => e.cardHeaderColumns[t.property]);
+				let t = G.value.filter((t) => e.cardHeaderColumns[t.property]);
 				if (t.length > 0) {
 					if (e.cardHeaderOrder) {
 						let n = e.cardHeaderOrder;
@@ -47,120 +48,124 @@ var k = ["onClick", "onPointerdown"], A = ["onClick"], j = { class: "c-card__hea
 					return t;
 				}
 			}
-			let t = U.value.filter((e) => e.primary);
-			return t.length > 0 ? t : U.value.slice(0, 1);
-		}), G = null, K = !1;
-		function q(e, t) {
-			R.config.selectableAttr && e.button === 0 && (K = !1, G = setTimeout(() => {
-				K = !0, V(t);
+			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 J() {
-			G &&= (clearTimeout(G), null);
+		function X() {
+			q &&= (clearTimeout(q), null);
 		}
-		function Y(e) {
-			K && e.preventDefault();
+		function Z(e) {
+			J && e.preventDefault();
 		}
-		function X(e) {
-			if (K) {
-				K = !1;
+		function Q(e) {
+			if (J) {
+				J = !1;
 				return;
 			}
-			Z(e);
+			$(e);
 		}
-		function Z(e) {
-			H.value.has(e) ? H.value.delete(e) : H.value.add(e), H.value = new Set(H.value);
+		function $(e) {
+			W.value.has(e) ? W.value.delete(e) : W.value.add(e), W.value = new Set(W.value);
 		}
-		return (i, d) => (b(), m("div", { class: y(["ac-component", { "is-loading": a.loading }]) }, [!a.loading || a.items.length > 0 ? (b(), m("div", {
+		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: y(["c-cards", { "is-compact": a.settings.compact }])
-		}, [(b(!0), m(u, null, S(a.items, (r, i) => (b(), m("div", {
-			key: i,
-			class: y(["c-card", {
-				"is-open": H.value.has(i),
-				"is-selected": a.config.selectableAttr && w(B).has(r[a.config.selectableAttr])
+			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])
 			}])
-		}, [h("button", {
+		}, [g("button", {
 			type: "button",
 			class: "c-card__header",
-			onClick: (e) => X(i),
-			onPointerdown: (e) => q(e, r),
-			onPointerup: d[0] ||= (e) => J(),
-			onPointerleave: d[1] ||= (e) => J(),
-			onContextmenu: Y
+			onClick: (e) => Q(a),
+			onPointerdown: (e) => Y(e, i),
+			onPointerup: f[1] ||= (e) => X(),
+			onPointerleave: f[2] ||= (e) => X(),
+			onContextmenu: Z
 		}, [
-			a.config.selectableAttr ? (b(), m("span", {
+			o.config.selectableAttr ? (x(), h("span", {
 				key: 0,
 				class: "c-card__check-zone",
-				onClick: O((e) => w(V)(r), ["stop"])
-			}, [h("span", { class: y(["c-card__check", { "is-checked": w(B).has(r[a.config.selectableAttr]) }]) }, [...d[3] ||= [h("i", { class: "fa-solid fa-check" }, null, -1)]], 2)], 8, A)) : p("", !0),
-			h("span", j, [(b(!0), m(u, null, S(W.value, (e, t) => (b(), m("span", {
+				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"
-			}, [h("span", M, C(e.label), 1), h("span", {
-				class: y(["c-card__title", { "c-truncate": a.settings.compact && t === 0 }]),
-				innerHTML: w(s)(r, e)
-			}, null, 10, N)]))), 128))]),
-			d[4] ||= h("span", {
+			}, [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"
-			}, [h("i", { class: "fa-solid fa-chevron-down" })], -1)
-		], 40, k), D(h("div", P, [(b(!0), m(u, null, S(U.value, (e) => (b(), m("div", {
+			}, [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"
 		}, [
-			h("span", F, C(e.label), 1),
-			g(l, {
-				item: r,
+			g("span", L, w(e.label), 1),
+			_(u, {
+				item: i,
 				col: e,
 				class: "c-card__field-value",
 				copy: !1
 			}, null, 8, ["item", "col"]),
-			w(s)(r, e) ? (b(), f(n, {
+			T(c)(i, e) ? (x(), p(r, {
 				key: 0,
 				class: "c-card__field-copy click-expand",
-				value: w(s)(r, e)
-			}, null, 8, ["value"])) : p("", !0)
-		]))), 128)), a.config.actions ? (b(), m("div", {
+				value: T(c)(i, e)
+			}, null, 8, ["value"])) : m("", !0)
+		]))), 128)), o.config.actions ? (x(), h("div", {
 			key: 0,
 			class: "c-card__actions",
-			onClick: d[2] ||= O(() => {}, ["stop"])
-		}, [(b(!0), m(u, null, S(a.config.actions, (n, i) => (b(), m(u, { key: i }, [w(c)(n) ? (b(), f(t, v({
+			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: n.icon,
-			label: n.label,
-			ariaLabel: n.ariaLabel,
-			items: w(o)(n, r)
-		}, { ref_for: !0 }, n.config), null, 16, [
+			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"
-		])) : (b(), f(e, v({
+		])) : (x(), p(e, y({
 			key: 1,
-			type: n.type,
-			icon: n.icon,
-			label: n.cardLabel ?? n.label,
-			ariaLabel: n.ariaLabel,
+			type: t.type,
+			icon: t.icon,
+			label: t.cardLabel ?? t.label,
+			ariaLabel: t.ariaLabel,
 			outline: "",
-			disabled: n.disabled ? n.disabled(r) : !1,
-			callback: () => n.callback(r)
-		}, { ref_for: !0 }, n.config), null, 16, [
+			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))])) : p("", !0)], 512), [[T, H.value.has(i)]])], 2))), 128))], 2)) : (b(), m("div", I, [g(r, {
+		]))], 64))), 128))])) : m("", !0)], 512), [[E, W.value.has(a)]])], 2))), 128))], 2)) : (x(), h("div", R, [_(i, {
 			loading: !0,
 			size: "2.5rem"
-		})])), a.loading && a.items.length > 0 ? (b(), m("div", L, [g(r, {
+		})])), o.loading && o.items.length > 0 ? (x(), h("div", z, [_(i, {
 			loading: !0,
 			size: "2.5rem"
-		})])) : p("", !0)], 2));
+		})])) : m("", !0)], 2)]));
 	}
 });
 //#endregion
-export { R as default };
+export { B as default };