admins-components 9.0.48 → 9.0.50

package/dist/admins-components58.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n  type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n  key: string\n  placeholder?: string\n  options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n  striped: boolean\n  compact: boolean\n}\n\nexport interface DataCardsSettings {\n  compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n  layout: LayoutMode\n  columns: Record<string, boolean>\n  cardHeaderColumns: Record<string, boolean>\n  columnOrder: string[]\n  cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n  page: number\n  pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n  total: number\n}\n\nexport interface DataListConfig {\n  selectableAttr?: string | undefined\n  columns: Column[]\n\n  actions?: Array<Action | ActionGroup> | undefined\n  actionHeader?: string | undefined\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n  visible?: boolean | undefined\n  primary?: boolean | undefined\n  label: string\n  property: string\n  sort?: undefined | Sort\n  type?: ColumnType\n  class?: string | undefined\n  headerClass?: string | undefined\n  hideCopyToClipboard?: boolean | undefined\n\n  converter?: undefined | ((v: any, item: any) => any)\n  loading?: (() => boolean) | undefined\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n  label: string\n  active: Ref<boolean> | undefined\n  direction?: Ref<SortDirection> | undefined\n  callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n  icon: string\n  label?: string\n  ariaLabel?: string\n  cardLabel?: string\n  type?: ButtonType\n  config?: Record<string, any> | undefined\n  disabled?: (item: any) => boolean\n  callback: (item: any) => any\n  withConfirm?: boolean\n  withConfirmConfig?: (item: any) => ConfirmModalProps\n}\n\nexport interface ActionGroup {\n  isGroup: true\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  cardLabel?: string\n  config?: Record<string, any> | undefined\n  items: Action[]\n  disabled?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n  striped: true,\n  compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n  compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n  layout: 'screen',\n  compact: false,\n}\n"],"mappings":";AAqGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}
+{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { PickedDate, PickedUtcRange } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport type { ConfirmModalProps } from '@/components/ConfirmModal.vue'\n\nexport type FilterValue = string | PickedDate | PickedUtcRange | string[] | null | undefined\n\nexport interface FilterConfig {\n  type: 'text' | 'date' | 'date-range' | 'select' | 'multi-select'\n  key: string\n  placeholder?: string\n  options?: DropdownOption[]\n}\n\nexport type LayoutMode = 'table' | 'cards' | 'screen'\n\nexport interface DataTableSettings {\n  striped: boolean\n  compact: boolean\n}\n\nexport interface DataCardsSettings {\n  compact: boolean\n}\n\nexport interface DataListSettings extends DataTableSettings, DataCardsSettings {\n  layout: LayoutMode\n  columns: Record<string, boolean>\n  cardHeaderColumns: Record<string, boolean>\n  columnOrder: string[]\n  cardHeaderOrder: string[]\n}\n\nexport interface PageSettings {\n  page: number\n  pageSize: number\n}\n\nexport interface PaginatorSettings extends PageSettings {\n  total: number\n}\n\nexport interface DataListConfig {\n  selectableAttr?: string\n  columns: Column[]\n\n  actions?: Array<Action | ActionGroup>\n  actionHeader?: string\n}\n\nexport type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime'\n\nexport interface Column {\n  visible?: boolean\n  primary?: boolean\n  label: string\n  property: string\n  sort?: Sort\n  type?: ColumnType\n  class?: string\n  headerClass?: string\n  hideCopyToClipboard?: boolean\n  hideHeader?: boolean\n\n  converter?: ((v: any, item: any) => any)\n  loading?: (() => boolean)\n}\n\nexport type SortDirection = 'asc' | 'desc' | null\n\nexport interface Sort {\n  label: string\n  callback: (property: string, direction: SortDirection) => any\n}\n\nexport interface Action {\n  icon: string\n  label?: string\n  ariaLabel?: string\n  cardLabel?: string\n  type?: ButtonType\n  config?: Record<string, any>\n  disabled?: (item: any) => boolean\n  callback: (item: any) => any\n  withConfirm?: boolean\n  withConfirmConfig?: (item: any) => ConfirmModalProps\n}\n\nexport interface ActionGroup {\n  isGroup: true\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  cardLabel?: string\n  config?: Record<string, any>\n  items: Action[]\n  disabled?: (item: any) => boolean\n}\n\nexport const dataTableSettingsDefaults: DataTableSettings = {\n  striped: true,\n  compact: false,\n}\n\nexport const dataCardsSettingsDefaults: DataCardsSettings = {\n  compact: false,\n}\n\nexport const dataListSettingsDefaults: Partial<DataListSettings> = {\n  layout: 'screen',\n  compact: false,\n}\n"],"mappings":";AAmGA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;AACX"}

package/dist/admins-components61.js

@@ -4,16 +4,16 @@ import { getColumnValue as n } from "./admins-components59.js";
 import { shortUuid as r } from "./admins-components60.js";
 import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, isVNode as d, openBlock as f, resolveDirective as p, resolveDynamicComponent as m, toDisplayString as h, withDirectives as g } from "vue";
 //#region src/components/data-table/DataCell.vue?vue&type=script&setup=true&lang.ts
-var _ = {
+var _ = { class: "dc-cell" }, v = {
 	key: 0,
 	class: "dc-loading"
-}, v = { key: 2 }, y = ["innerHTML"], b = {
+}, y = { key: 2 }, b = ["innerHTML"], x = {
 	key: 3,
 	class: "dc-datetime"
-}, x = { class: "dc-datetime__part" }, S = {
+}, S = { class: "dc-datetime__part" }, C = {
 	key: 0,
 	class: "dc-datetime__sep"
-}, C = { class: "dc-datetime__part" }, w = { key: 4 }, T = ["innerHTML"], E = /* @__PURE__ */ u({
+}, w = { class: "dc-datetime__part" }, T = { key: 4 }, E = ["innerHTML"], D = /* @__PURE__ */ u({
 	__name: "DataCell",
 	props: {
 		item: {},
@@ -24,9 +24,9 @@ var _ = {
 		}
 	},
 	setup(u) {
-		let E = u, D = i(() => n(E.item, E.col)), O = i(() => d(D.value)), k = i(() => r()(D.value)), A = i(() => {
-			if (E.col.type !== "datetime") return null;
-			let e = D.value;
+		let D = u, O = i(() => n(D.item, D.col)), k = i(() => d(O.value)), A = i(() => r()(O.value)), j = i(() => {
+			if (D.col.type !== "datetime") return null;
+			let e = O.value;
 			if (!e) return {
 				date: "",
 				time: ""
@@ -42,26 +42,26 @@ var _ = {
 		});
 		return (n, r) => {
 			let i = p("tooltip");
-			return u.col.loading?.() ? (f(), s("span", _, [l(e, {
+			return f(), s("span", _, [u.col.loading?.() ? (f(), s("span", v, [l(e, {
 				loading: !0,
 				size: "1rem"
-			})])) : O.value ? (f(), a(m(D.value), { key: 1 })) : u.col.type === "uuid" ? g((f(), s("span", v, [c("span", { innerHTML: k.value }, null, 8, y), u.copy && D.value ? (f(), a(t, {
+			})])) : k.value ? (f(), a(m(O.value), { key: 1 })) : u.col.type === "uuid" ? g((f(), s("span", y, [c("span", { innerHTML: A.value }, null, 8, b), u.copy && O.value ? (f(), a(t, {
 				key: 0,
-				value: D.value
-			}, null, 8, ["value"])) : o("", !0)])), [[i, D.value]]) : u.col.type === "datetime" ? (f(), s("span", b, [
-				c("span", x, h(A.value?.date), 1),
-				A.value?.time ? (f(), s("span", S)) : o("", !0),
-				c("span", C, h(A.value?.time), 1),
-				u.copy && D.value ? (f(), a(t, {
+				value: O.value
+			}, null, 8, ["value"])) : o("", !0)])), [[i, O.value]]) : u.col.type === "datetime" ? (f(), s("span", x, [
+				c("span", S, h(j.value?.date), 1),
+				j.value?.time ? (f(), s("span", C)) : o("", !0),
+				c("span", w, h(j.value?.time), 1),
+				u.copy && O.value ? (f(), a(t, {
 					key: 1,
-					value: D.value
+					value: O.value
 				}, null, 8, ["value"])) : o("", !0)
-			])) : (f(), s("span", w, [c("span", { innerHTML: D.value }, null, 8, T), u.copy && D.value ? (f(), a(t, {
+			])) : (f(), s("span", T, [c("span", { innerHTML: O.value }, null, 8, E), u.copy && O.value ? (f(), a(t, {
 				key: 0,
-				value: D.value
-			}, null, 8, ["value"])) : o("", !0)]));
+				value: O.value
+			}, null, 8, ["value"])) : o("", !0)]))]);
 		};
 	}
 });
 //#endregion
-export { E as default };
+export { D as default };

package/dist/admins-components61.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components61.js","names":[],"sources":["../src/components/data-table/DataCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Column } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { computed, isVNode, type VNode } from 'vue'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n  defineProps<{\n    item: Record<string, unknown>\n    col: Column\n    copy?: boolean\n  }>(),\n  {\n    copy: true,\n  },\n)\n\nconst columnValue = computed<string | VNode>(() => getColumnValue(props.item, props.col))\nconst isVnodeValue = computed(() => isVNode(columnValue.value))\n\nconst uuIdValue = computed(() => {\n  return shortUuid()(columnValue.value as string)\n})\n\nconst datetimeParts = computed<{ date: string; time: string } | null>(() => {\n  if (props.col.type !== 'datetime') return null\n  const value = columnValue.value as string\n  if (!value) return { date: '', time: '' }\n  const spaceIdx = value.indexOf(' ')\n  if (spaceIdx === -1) return { date: value, time: '' }\n  return {\n    date: value.slice(0, spaceIdx),\n    time: value.slice(spaceIdx + 1),\n  }\n})\n</script>\n<template>\n  <span v-if=\"col.loading?.()\" class=\"dc-loading\">\n    <Loader :loading=\"true\" size=\"1rem\" />\n  </span>\n\n  <component :is=\"columnValue\" v-else-if=\"isVnodeValue\" />\n\n  <span v-else-if=\"col.type === 'uuid'\" v-tooltip=\"columnValue\">\n    <span v-html=\"uuIdValue\"></span>\n    <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n  <span v-else-if=\"col.type === 'datetime'\" class=\"dc-datetime\">\n    <span class=\"dc-datetime__part\">{{ datetimeParts?.date }}</span\n    ><span v-if=\"datetimeParts?.time\" class=\"dc-datetime__sep\"> </span\n    ><span class=\"dc-datetime__part\">{{ datetimeParts?.time }}</span>\n    <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n\n  <span v-else\n    ><span v-html=\"columnValue\"></span\n    ><CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAWR,IAAc,QAA+B,EAAe,EAAM,MAAM,EAAM,GAAG,CAAC,GAClF,IAAe,QAAe,EAAQ,EAAY,KAAK,CAAC,GAExD,IAAY,QACT,EAAU,EAAE,EAAY,KAAe,CAC/C,GAEK,IAAgB,QAAsD;GAC1E,IAAI,EAAM,IAAI,SAAS,YAAY,OAAO;GAC1C,IAAM,IAAQ,EAAY;GAC1B,IAAI,CAAC,GAAO,OAAO;IAAE,MAAM;IAAI,MAAM;GAAG;GACxC,IAAM,IAAW,EAAM,QAAQ,GAAG;GAElC,OADI,MAAa,KAAW;IAAE,MAAM;IAAO,MAAM;GAAG,IAC7C;IACL,MAAM,EAAM,MAAM,GAAG,CAAQ;IAC7B,MAAM,EAAM,MAAM,IAAW,CAAC;GAChC;EACF,CAAC;;;UAGa,EAAA,IAAI,UAAO,KAAA,EAAA,GAAvB,EAEO,QAFP,GAEO,CADL,EAAsC,GAAA;IAA7B,SAAS;IAAM,MAAK;WAGS,EAAA,SAAA,EAAA,GAAxC,EAAwD,EAAxC,EAAA,KAAW,GAAA,EAAA,KAAA,EAAA,CAAA,KAEV,EAAA,IAAI,SAAI,SAAA,GAAA,EAAA,GAAzB,EAGO,QAAA,GAAA,CAFL,EAAgC,QAAA,EAA1B,WAAQ,EAAA,MAAS,GAAA,MAAA,GAAA,CAAA,GACA,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;IAAtB,OAAO,EAAA;gDAFL,EAAA,KAAW,CAAA,CAAA,IAI3C,EAAA,IAAI,SAAI,cAAA,EAAA,GAAzB,EAKO,QALP,GAKO;IAJL,EACC,QADD,GACC,EADkC,EAAA,OAAe,IAAI,GAAA,CAAA;IACzC,EAAA,OAAe,QAAA,EAAA,GAA3B,EACA,QADA,CACA,KAAA,EAAA,IAAA,EAAA;IAAA,EAAgE,QAAhE,GAAgE,EAA7B,EAAA,OAAe,IAAI,GAAA,CAAA;IAChC,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;KAAtB,OAAO,EAAA;;eAGtD,EAGO,QAAA,GAAA,CAFJ,EACA,QAAA,EADM,WAAQ,EAAA,MAAW,GAAA,MAAA,GAAA,CAAA,GACF,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;IAAtB,OAAO,EAAA"}
+{"version":3,"file":"admins-components61.js","names":[],"sources":["../src/components/data-table/DataCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Column } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { computed, isVNode, type VNode } from 'vue'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n  defineProps<{\n    item: Record<string, unknown>\n    col: Column\n    copy?: boolean\n  }>(),\n  {\n    copy: true,\n  },\n)\n\nconst columnValue = computed<string | VNode>(() => getColumnValue(props.item, props.col))\nconst isVnodeValue = computed(() => isVNode(columnValue.value))\n\nconst uuIdValue = computed(() => {\n  return shortUuid()(columnValue.value as string)\n})\n\nconst datetimeParts = computed<{ date: string; time: string } | null>(() => {\n  if (props.col.type !== 'datetime') return null\n  const value = columnValue.value as string\n  if (!value) return { date: '', time: '' }\n  const spaceIdx = value.indexOf(' ')\n  if (spaceIdx === -1) return { date: value, time: '' }\n  return {\n    date: value.slice(0, spaceIdx),\n    time: value.slice(spaceIdx + 1),\n  }\n})\n</script>\n<template>\n  <span class=\"dc-cell\">\n    <span v-if=\"col.loading?.()\" class=\"dc-loading\">\n      <Loader :loading=\"true\" size=\"1rem\" />\n    </span>\n\n    <component :is=\"columnValue\" v-else-if=\"isVnodeValue\" />\n\n    <span v-else-if=\"col.type === 'uuid'\" v-tooltip=\"columnValue\">\n      <span v-html=\"uuIdValue\"></span>\n      <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n    <span v-else-if=\"col.type === 'datetime'\" class=\"dc-datetime\">\n      <span class=\"dc-datetime__part\">{{ datetimeParts?.date }}</span\n      ><span v-if=\"datetimeParts?.time\" class=\"dc-datetime__sep\"> </span\n      ><span class=\"dc-datetime__part\">{{ datetimeParts?.time }}</span>\n      <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n\n    <span v-else\n      ><span v-html=\"columnValue\"></span\n      ><CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n  </span>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAQA,IAAM,IAAQ,GAWR,IAAc,QAA+B,EAAe,EAAM,MAAM,EAAM,GAAG,CAAC,GAClF,IAAe,QAAe,EAAQ,EAAY,KAAK,CAAC,GAExD,IAAY,QACT,EAAU,EAAE,EAAY,KAAe,CAC/C,GAEK,IAAgB,QAAsD;GAC1E,IAAI,EAAM,IAAI,SAAS,YAAY,OAAO;GAC1C,IAAM,IAAQ,EAAY;GAC1B,IAAI,CAAC,GAAO,OAAO;IAAE,MAAM;IAAI,MAAM;GAAG;GACxC,IAAM,IAAW,EAAM,QAAQ,GAAG;GAElC,OADI,MAAa,KAAW;IAAE,MAAM;IAAO,MAAM;GAAG,IAC7C;IACL,MAAM,EAAM,MAAM,GAAG,CAAQ;IAC7B,MAAM,EAAM,MAAM,IAAW,CAAC;GAChC;EACF,CAAC;;;eAGC,EAsBO,QAtBP,GAsBO,CArBO,EAAA,IAAI,UAAO,KAAA,EAAA,GAAvB,EAEO,QAFP,GAEO,CADL,EAAsC,GAAA;IAA7B,SAAS;IAAM,MAAK;WAGS,EAAA,SAAA,EAAA,GAAxC,EAAwD,EAAxC,EAAA,KAAW,GAAA,EAAA,KAAA,EAAA,CAAA,KAEV,EAAA,IAAI,SAAI,SAAA,GAAA,EAAA,GAAzB,EAGO,QAAA,GAAA,CAFL,EAAgC,QAAA,EAA1B,WAAQ,EAAA,MAAS,GAAA,MAAA,GAAA,CAAA,GACA,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;IAAtB,OAAO,EAAA;gDAFL,EAAA,KAAW,CAAA,CAAA,IAI3C,EAAA,IAAI,SAAI,cAAA,EAAA,GAAzB,EAKO,QALP,GAKO;IAJL,EACC,QADD,GACC,EADkC,EAAA,OAAe,IAAI,GAAA,CAAA;IACzC,EAAA,OAAe,QAAA,EAAA,GAA3B,EACA,QADA,CACA,KAAA,EAAA,IAAA,EAAA;IAAA,EAAgE,QAAhE,GAAgE,EAA7B,EAAA,OAAe,IAAI,GAAA,CAAA;IAChC,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;KAAtB,OAAO,EAAA;;eAGtD,EAGO,QAAA,GAAA,CAFJ,EACA,QAAA,EADM,WAAQ,EAAA,MAAW,GAAA,MAAA,GAAA,CAAA,GACF,EAAA,QAAQ,EAAA,SAAA,EAAA,GAA/B,EAAmE,GAAA;;IAAtB,OAAO,EAAA"}

package/dist/admins-components62.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components62.js","names":[],"sources":["../src/components/data-table/DataCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Column } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { computed, isVNode, type VNode } from 'vue'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n  defineProps<{\n    item: Record<string, unknown>\n    col: Column\n    copy?: boolean\n  }>(),\n  {\n    copy: true,\n  },\n)\n\nconst columnValue = computed<string | VNode>(() => getColumnValue(props.item, props.col))\nconst isVnodeValue = computed(() => isVNode(columnValue.value))\n\nconst uuIdValue = computed(() => {\n  return shortUuid()(columnValue.value as string)\n})\n\nconst datetimeParts = computed<{ date: string; time: string } | null>(() => {\n  if (props.col.type !== 'datetime') return null\n  const value = columnValue.value as string\n  if (!value) return { date: '', time: '' }\n  const spaceIdx = value.indexOf(' ')\n  if (spaceIdx === -1) return { date: value, time: '' }\n  return {\n    date: value.slice(0, spaceIdx),\n    time: value.slice(spaceIdx + 1),\n  }\n})\n</script>\n<template>\n  <span v-if=\"col.loading?.()\" class=\"dc-loading\">\n    <Loader :loading=\"true\" size=\"1rem\" />\n  </span>\n\n  <component :is=\"columnValue\" v-else-if=\"isVnodeValue\" />\n\n  <span v-else-if=\"col.type === 'uuid'\" v-tooltip=\"columnValue\">\n    <span v-html=\"uuIdValue\"></span>\n    <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n  <span v-else-if=\"col.type === 'datetime'\" class=\"dc-datetime\">\n    <span class=\"dc-datetime__part\">{{ datetimeParts?.date }}</span\n    ><span v-if=\"datetimeParts?.time\" class=\"dc-datetime__sep\"> </span\n    ><span class=\"dc-datetime__part\">{{ datetimeParts?.time }}</span>\n    <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n\n  <span v-else\n    ><span v-html=\"columnValue\"></span\n    ><CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"admins-components62.js","names":[],"sources":["../src/components/data-table/DataCell.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Column } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { computed, isVNode, type VNode } from 'vue'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n  defineProps<{\n    item: Record<string, unknown>\n    col: Column\n    copy?: boolean\n  }>(),\n  {\n    copy: true,\n  },\n)\n\nconst columnValue = computed<string | VNode>(() => getColumnValue(props.item, props.col))\nconst isVnodeValue = computed(() => isVNode(columnValue.value))\n\nconst uuIdValue = computed(() => {\n  return shortUuid()(columnValue.value as string)\n})\n\nconst datetimeParts = computed<{ date: string; time: string } | null>(() => {\n  if (props.col.type !== 'datetime') return null\n  const value = columnValue.value as string\n  if (!value) return { date: '', time: '' }\n  const spaceIdx = value.indexOf(' ')\n  if (spaceIdx === -1) return { date: value, time: '' }\n  return {\n    date: value.slice(0, spaceIdx),\n    time: value.slice(spaceIdx + 1),\n  }\n})\n</script>\n<template>\n  <span class=\"dc-cell\">\n    <span v-if=\"col.loading?.()\" class=\"dc-loading\">\n      <Loader :loading=\"true\" size=\"1rem\" />\n    </span>\n\n    <component :is=\"columnValue\" v-else-if=\"isVnodeValue\" />\n\n    <span v-else-if=\"col.type === 'uuid'\" v-tooltip=\"columnValue\">\n      <span v-html=\"uuIdValue\"></span>\n      <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n    <span v-else-if=\"col.type === 'datetime'\" class=\"dc-datetime\">\n      <span class=\"dc-datetime__part\">{{ datetimeParts?.date }}</span\n      ><span v-if=\"datetimeParts?.time\" class=\"dc-datetime__sep\"> </span\n      ><span class=\"dc-datetime__part\">{{ datetimeParts?.time }}</span>\n      <CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n\n    <span v-else\n      ><span v-html=\"columnValue\"></span\n      ><CopyToClipboard v-if=\"copy && columnValue\" :value=\"columnValue\" />\n    </span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/admins-components65.js

@@ -6,7 +6,7 @@ import i from "./admins-components62.js";
 import a from "./admins-components64.js";
 import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, withModifiers as x } from "vue";
 //#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key: 0 }, T = ["onClick"], E = {
+var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key: 0 }, T = ["title", "onClick"], E = {
 	key: 1,
 	class: "c-actions-header"
 }, D = { key: 0 }, O = ["onClick"], k = {
@@ -31,13 +31,13 @@ var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key:
 	setup(r, { emit: p }) {
 		let I = r, L = p, R = _(null), { selectedKeys: z, allSelected: B, toggle: V, toggleAll: H } = n(() => I.items, () => I.config.selectableAttr, (e) => L("selection-change", e)), U = s(() => I.config.columns.filter((e) => e.visible !== !1));
 		function W(e) {
-			let t = R.value?.key === e && R.value.direction === "asc" ? "desc" : "asc";
+			let t = e.property, n = R.value?.key === t && R.value.direction === "asc" ? "desc" : "asc";
 			R.value = {
-				key: e,
-				direction: t
-			}, L("sort-change", {
-				key: e,
-				direction: t
+				key: t,
+				direction: n
+			}, e.sort?.callback?.(t, n), L("sort-change", {
+				key: t,
+				direction: n
 			});
 		}
 		return (n, s) => (g(), l("div", S, [u("div", C, [u("table", {
@@ -58,8 +58,9 @@ var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key:
 					"c-sortable--sorted": R.value?.key === e.property,
 					"primary-col": e.primary
 				}, e.headerClass]),
-				onClick: (t) => e.sort ? W(e.property) : void 0
-			}, [d(y(e.label) + " ", 1), e.sort ? (g(), l("span", {
+				title: e.sort ? `Sorrendezés ${e.label} alapján` : void 0,
+				onClick: (t) => e.sort ? W(e) : void 0
+			}, [d(y(e.hideHeader ? "" : e.label) + " ", 1), e.sort ? (g(), l("span", {
 				key: 0,
 				class: m(["c-sort-icon fa-solid", {
 					"fa-sort": R.value?.key !== e.property,

package/dist/admins-components65.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components65.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 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 DataListActions from './DataListActions.vue'\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                {\n                  'c-sortable': col.sort,\n                  'c-sortable--sorted': activeSort?.key === col.property,\n                  'primary-col': col.primary,\n                },\n                col.headerClass,\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                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <DataListActions :actions=\"config.actions\" :item=\"item\" />\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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"}
+{"version":3,"file":"admins-components65.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 Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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(col: Column) {\n  const key = col.property\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n  col.sort?.callback?.(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                {\n                  'c-sortable': col.sort,\n                  'c-sortable--sorted': activeSort?.key === col.property,\n                  'primary-col': col.primary,\n                },\n                col.headerClass,\n              ]\"\n              :title=\"col.sort ? `Sorrendezés ${col.label} alapján` : undefined\"\n              @click=\"col.sort ? handleSort(col) : undefined\"\n            >\n              {{ !col.hideHeader ? 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                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <DataListActions :actions=\"config.actions\" :item=\"item\" />\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-components67.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components67.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 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 DataListActions from './DataListActions.vue'\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                {\n                  'c-sortable': col.sort,\n                  'c-sortable--sorted': activeSort?.key === col.property,\n                  'primary-col': col.primary,\n                },\n                col.headerClass,\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                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <DataListActions :actions=\"config.actions\" :item=\"item\" />\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":""}
+{"version":3,"file":"admins-components67.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 Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings } from '@/types/data-list'\nimport Loader from '@/components/Loader.vue'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\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(col: Column) {\n  const key = col.property\n  const direction: SortDirection =\n    activeSort.value?.key === key && activeSort.value.direction === 'asc' ? 'desc' : 'asc'\n\n  activeSort.value = { key, direction }\n  col.sort?.callback?.(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                {\n                  'c-sortable': col.sort,\n                  'c-sortable--sorted': activeSort?.key === col.property,\n                  'primary-col': col.primary,\n                },\n                col.headerClass,\n              ]\"\n              :title=\"col.sort ? `Sorrendezés ${col.label} alapján` : undefined\"\n              @click=\"col.sort ? handleSort(col) : undefined\"\n            >\n              {{ !col.hideHeader ? 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                { 'primary-col': col.primary },\n                /* { 'is-nowrap': String(getColumnValue(item, col) ?? '').length < CHARACTER_BREAKPOINT}, */\n              ]\"\n            >\n              <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n            </td>\n\n            <td v-if=\"config.actions\" class=\"c-actions-cell\">\n              <div class=\"c-actions-wrap\">\n                <DataListActions :actions=\"config.actions\" :item=\"item\" />\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-components68.js

@@ -6,16 +6,16 @@ import { dataCardsSettingsDefaults as i } from "./admins-components58.js";
 import { getColumnValue as a } from "./admins-components59.js";
 import o from "./admins-components62.js";
 import s from "./admins-components64.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, toDisplayString as b, unref as x, vShow as S, watch as C, withDirectives as w, withModifiers as T } from "vue";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineComponent as h, isVNode as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, vShow as w, watch as T, withDirectives as E, withModifiers as D } from "vue";
 //#region src/components/data-table/DataCards.vue?vue&type=script&setup=true&lang.ts
-var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onClick"], k = { class: "c-card__heading" }, A = { class: "c-card__label" }, j = ["innerHTML"], M = { class: "c-card__body" }, N = { class: "c-card__field-label" }, P = {
+var O = { class: "ac-component" }, 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 = {
 	key: 1,
 	class: "c-cards__loading-wrap"
-}, F = {
+}, L = {
 	key: 2,
 	class: "c-cards__backdrop",
 	"aria-hidden": "true"
-}, I = /* @__PURE__ */ h({
+}, R = /* @__PURE__ */ h({
 	__name: "DataCards",
 	props: {
 		config: {},
@@ -28,14 +28,14 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
 	},
 	emits: ["selection-change"],
 	setup(i, { emit: h }) {
-		let I = i, L = h, { selectedKeys: R, toggle: z } = r(() => I.items, () => I.config.selectableAttr, (e) => L("selection-change", e)), B = v(/* @__PURE__ */ new Set());
-		C(() => I.items, () => {
-			B.value = /* @__PURE__ */ new Set();
+		let R = i, z = h, { selectedKeys: B, toggle: V } = r(() => R.items, () => R.config.selectableAttr, (e) => z("selection-change", e)), H = y(/* @__PURE__ */ new Set());
+		T(() => R.items, () => {
+			H.value = /* @__PURE__ */ new Set();
 		});
-		let V = l(() => I.config.columns.filter((e) => e.visible !== !1)), H = l(() => {
-			let e = I.settings;
+		let U = l(() => R.config.columns.filter((e) => e.visible !== !1)), W = l(() => {
+			let e = R.settings;
 			if (e?.cardHeaderColumns) {
-				let t = V.value.filter((t) => e.cardHeaderColumns[t.property]);
+				let t = U.value.filter((t) => e.cardHeaderColumns[t.property]);
 				if (t.length > 0) {
 					if (e.cardHeaderOrder) {
 						let n = e.cardHeaderOrder;
@@ -47,99 +47,99 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
 					return t;
 				}
 			}
-			let t = V.value.filter((e) => e.primary);
-			return t.length > 0 ? t : V.value.slice(0, 1);
-		}), U = null, W = !1;
-		function G(e, t) {
-			I.config.selectableAttr && e.button === 0 && (W = !1, U = setTimeout(() => {
-				W = !0, z(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);
 			}, 500));
 		}
-		function K() {
-			U &&= (clearTimeout(U), null);
+		function J() {
+			G &&= (clearTimeout(G), null);
 		}
-		function q(e) {
-			W && e.preventDefault();
+		function Y(e) {
+			K && e.preventDefault();
 		}
-		function J(e) {
-			if (W) {
-				W = !1;
+		function X(e) {
+			if (K) {
+				K = !1;
 				return;
 			}
-			Y(e);
+			Z(e);
 		}
-		function Y(e) {
-			B.value.has(e) ? B.value.delete(e) : B.value.add(e), B.value = new Set(B.value);
+		function Z(e) {
+			H.value.has(e) ? H.value.delete(e) : H.value.add(e), H.value = new Set(H.value);
 		}
-		return (r, l) => (_(), f("div", E, [p("div", { class: g(["c-cards-wrapper", { "is-loading": i.loading }]) }, [!i.loading || i.items.length > 0 ? (_(), f("div", {
+		return (r, l) => (v(), f("div", O, [p("div", { class: _(["c-cards-wrapper", { "is-loading": i.loading }]) }, [!i.loading || i.items.length > 0 ? (v(), f("div", {
 			key: 0,
-			class: g(["c-cards", { "is-compact": i.settings.compact }])
-		}, [(_(!0), f(c, null, y(i.items, (t, r) => (_(), f("div", {
+			class: _(["c-cards", { "is-compact": i.settings.compact }])
+		}, [(v(!0), f(c, null, b(i.items, (t, r) => (v(), f("div", {
 			key: r,
-			class: g(["c-card", {
-				"is-open": B.value.has(r),
-				"is-selected": i.config.selectableAttr && x(R).has(t[i.config.selectableAttr])
+			class: _(["c-card", {
+				"is-open": H.value.has(r),
+				"is-selected": i.config.selectableAttr && C(B).has(t[i.config.selectableAttr])
 			}])
 		}, [p("button", {
 			type: "button",
 			class: "c-card__header",
-			onClick: (e) => J(r),
-			onPointerdown: (e) => G(e, t),
-			onPointerup: l[1] ||= (e) => K(),
-			onPointerleave: l[2] ||= (e) => K(),
-			onContextmenu: q
+			onClick: (e) => X(r),
+			onPointerdown: (e) => q(e, t),
+			onPointerup: l[1] ||= (e) => J(),
+			onPointerleave: l[2] ||= (e) => J(),
+			onContextmenu: Y
 		}, [
-			i.config.selectableAttr ? (_(), f("span", {
+			i.config.selectableAttr ? (v(), f("span", {
 				key: 0,
 				class: "c-card__check-zone",
-				onClick: T((e) => x(z)(t), ["stop"])
+				onClick: D((e) => C(V)(t), ["stop"])
 			}, [m(e, {
-				"model-value": !!x(R).has(t[i.config.selectableAttr]),
-				"onUpdate:modelValue": (e) => x(z)(t),
-				onClick: l[0] ||= T(() => {}, ["stop"])
-			}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, O)) : d("", !0),
-			p("span", k, [(_(!0), f(c, null, y(H.value, (e, n) => (_(), f("span", {
+				"model-value": !!C(B).has(t[i.config.selectableAttr]),
+				"onUpdate:modelValue": (e) => C(V)(t),
+				onClick: l[0] ||= D(() => {}, ["stop"])
+			}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, A)) : d("", !0),
+			p("span", j, [(v(!0), f(c, null, b(W.value, (e, n) => (v(), f("span", {
 				key: e.property,
-				class: "c-card__heading-item"
-			}, [p("span", A, b(e.label), 1), p("span", {
-				class: g(["c-card__title", { "c-truncate": i.settings.compact && n === 0 }]),
-				innerHTML: x(a)(t, e)
-			}, null, 10, j)]))), 128))]),
+				class: _(["c-card__heading-item", { primary: e.primary }])
+			}, [p("span", M, S(e.hideHeader ? "" : e.label), 1), p("span", { class: _(["c-card__title", { "c-truncate": i.settings.compact && n === 0 }]) }, [g(C(a)(t, e)) ? (v(), u(x(C(a)(t, e)), { key: 0 })) : (v(), f("span", {
+				key: 1,
+				innerHTML: C(a)(t, e)
+			}, null, 8, N))], 2)], 2))), 128))]),
 			l[4] ||= p("span", {
 				class: "c-card__icon",
 				"aria-hidden": "true"
 			}, [p("i", { class: "fa-solid fa-chevron-down" })], -1)
-		], 40, D), w(p("div", M, [(_(!0), f(c, null, y(V.value, (e) => (_(), f("div", {
+		], 40, k), E(p("div", P, [(v(!0), f(c, null, b(U.value, (e) => (v(), f("div", {
 			key: e.property,
 			class: "c-card__field"
 		}, [
-			p("span", N, b(e.label), 1),
+			p("span", F, S(e.label), 1),
 			m(o, {
 				item: t,
 				col: e,
 				class: "c-card__field-value",
 				copy: !1
 			}, null, 8, ["item", "col"]),
-			x(a)(t, e) && !e.hideCopyToClipboard ? (_(), u(n, {
+			C(a)(t, e) && !e.hideCopyToClipboard ? (v(), u(n, {
 				key: 0,
 				class: "c-card__field-copy click-expand",
-				value: x(a)(t, e)
+				value: C(a)(t, e)
 			}, null, 8, ["value"])) : d("", !0)
-		]))), 128)), i.config.actions ? (_(), f("div", {
+		]))), 128)), i.config.actions ? (v(), f("div", {
 			key: 0,
 			class: "c-card__actions",
-			onClick: l[3] ||= T(() => {}, ["stop"])
+			onClick: l[3] ||= D(() => {}, ["stop"])
 		}, [m(s, {
 			actions: i.config.actions,
 			item: t
-		}, null, 8, ["actions", "item"])])) : d("", !0)], 512), [[S, B.value.has(r)]])], 2))), 128))], 2)) : (_(), f("div", P, [m(t, {
+		}, null, 8, ["actions", "item"])])) : d("", !0)], 512), [[w, H.value.has(r)]])], 2))), 128))], 2)) : (v(), f("div", I, [m(t, {
 			loading: !0,
 			size: "2.5rem"
-		})])), i.loading && i.items.length > 0 ? (_(), f("div", F, [m(t, {
+		})])), i.loading && i.items.length > 0 ? (v(), f("div", L, [m(t, {
 			loading: !0,
 			size: "2.5rem"
 		})])) : d("", !0)], 2)]));
 	}
 });
 //#endregion
-export { I as default };
+export { R as default };

package/dist/admins-components68.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components68.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataCardsSettings, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } 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'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n              >\n                <span class=\"c-card__label\">{{ col.label }}</span>\n                <span\n                  class=\"c-card__title\"\n                  :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n                  v-html=\"getColumnValue(item, col)\"\n                ></span>\n              </span>\n            </span>\n            <span class=\"c-card__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-solid fa-chevron-down\"></i\n            ></span>\n          </button>\n\n          <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n            <div\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-card__field\"\n            >\n              <span class=\"c-card__field-label\">{{ col.label }}</span>\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n\n              <CopyToClipboard\n                v-if=\"getColumnValue(item, col) && !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              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}
+{"version":3,"file":"admins-components68.js","names":[],"sources":["../src/components/data-table/DataCards.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DataListConfig, DataCardsSettings, DataListSettings } from '@/types/data-list'\nimport DataCell from './DataCell.vue'\nimport DataListActions from './DataListActions.vue'\nexport { dataCardsSettingsDefaults } from '@/types/data-list'\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, isVNode } 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'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n  return isVNode(value)\n} */\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n                :class=\"{ primary: col.primary }\"\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 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              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\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              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":"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"}

package/dist/admins-components70.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components70.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 } 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'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n              >\n                <span class=\"c-card__label\">{{ col.label }}</span>\n                <span\n                  class=\"c-card__title\"\n                  :class=\"{ 'c-truncate': settings.compact && i === 0 }\"\n                  v-html=\"getColumnValue(item, col)\"\n                ></span>\n              </span>\n            </span>\n            <span class=\"c-card__icon\" aria-hidden=\"true\"\n              ><i class=\"fa-solid fa-chevron-down\"></i\n            ></span>\n          </button>\n\n          <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n            <div\n              v-for=\"col in visibleColumns\"\n              :key=\"col.property\"\n              class=\"c-card__field\"\n            >\n              <span class=\"c-card__field-label\">{{ col.label }}</span>\n              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n\n              <CopyToClipboard\n                v-if=\"getColumnValue(item, col) && !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              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components70.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 } 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'\n\nconst props = withDefaults(\n  defineProps<{\n    config: DataListConfig\n    items: Record<string, unknown>[]\n    settings?: DataCardsSettings | DataListSettings\n    loading?: boolean\n  }>(),\n  {\n    settings: () => ({ ...dataCardsSettingsDefaults }),\n    loading: false,\n  },\n)\n\nconst emit = defineEmits<{\n  'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n  () => props.items,\n  () => props.config.selectableAttr,\n  (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nwatch(\n  () => props.items,\n  () => {\n    openRowIndexes.value = new Set()\n  },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n  const s = props.settings as any\n  if (s?.cardHeaderColumns) {\n    const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n    if (cols.length > 0) {\n      if (s.cardHeaderOrder) {\n        const order = s.cardHeaderOrder as string[]\n        return [...cols].sort((a, b) => {\n          const ai = order.indexOf(a.property)\n          const bi = order.indexOf(b.property)\n          return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n        })\n      }\n      return cols\n    }\n  }\n  const primary = visibleColumns.value.filter((c) => c.primary)\n  if (primary.length > 0) return primary\n\n  return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n  if (!props.config.selectableAttr) return\n  if (e.button !== 0) return\n  longPressTriggered = false\n  longPressTimer = setTimeout(() => {\n    longPressTriggered = true\n    toggleRow(item)\n  }, 500)\n}\n\nfunction onPointerUp() {\n  if (longPressTimer) {\n    clearTimeout(longPressTimer)\n    longPressTimer = null\n  }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n  if (longPressTriggered) {\n    e.preventDefault()\n  }\n}\n\nfunction onHeaderClick(index: number) {\n  if (longPressTriggered) {\n    longPressTriggered = false\n    return\n  }\n  toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n  if (openRowIndexes.value.has(index)) {\n    openRowIndexes.value.delete(index)\n  } else {\n    openRowIndexes.value.add(index)\n  }\n  openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n  return isVNode(value)\n} */\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div class=\"c-cards-wrapper\" :class=\"{ 'is-loading': loading }\">\n      <div\n        v-if=\"!loading || items.length > 0\"\n        class=\"c-cards\"\n        :class=\"{ 'is-compact': settings.compact }\"\n      >\n        <div\n          v-for=\"(item, index) in items\"\n          :key=\"index\"\n          class=\"c-card\"\n          :class=\"{\n            'is-open': openRowIndexes.has(index),\n            'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n          }\"\n        >\n          <button\n            type=\"button\"\n            class=\"c-card__header\"\n            @click=\"onHeaderClick(index)\"\n            @pointerdown=\"onPointerDown($event, item)\"\n            @pointerup=\"onPointerUp()\"\n            @pointerleave=\"onPointerUp()\"\n            @contextmenu=\"onContextMenu\"\n          >\n            <span\n              v-if=\"config.selectableAttr\"\n              class=\"c-card__check-zone\"\n              @click.stop=\"toggleRow(item)\"\n            >\n              <Checkbox\n                :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n                @update:model-value=\"toggleRow(item)\"\n                @click.stop\n              />\n            </span>\n            <span class=\"c-card__heading\">\n              <span\n                v-for=\"(col, i) in cardHeaderColumns\"\n                :key=\"col.property\"\n                class=\"c-card__heading-item\"\n                :class=\"{ primary: col.primary }\"\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 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              <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\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              <DataListActions :actions=\"config.actions\" :item=\"item\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <div v-else class=\"c-cards__loading-wrap\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n      <div v-if=\"loading && items.length > 0\" class=\"c-cards__backdrop\" aria-hidden=\"true\">\n        <Loader :loading=\"true\" size=\"2.5rem\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-cards.scss\"></style>\n"],"mappings":""}

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

@@ -1 +1 @@
-.ac-component .c-cards-wrapper{max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.ac-component .c-cards-wrapper.is-loading .c-cards{opacity:.45;transition:opacity .15s ease-out}.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{gap:.25rem}.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{font-size:.6rem}.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{row-gap:.5rem;padding-bottom:.5rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__actions{padding-top:0}.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{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{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{border-color:var(--premium-500)}.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{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__icon{transform:rotate(180deg)}.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{background:var(--site-100)}.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{--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{background:var(--premium-100)}.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{width:1.25rem;height:1.25rem}.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{flex-direction:column;flex:1 1 0;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item:first-child{flex:2 1 0}.ac-component .c-cards-wrapper .c-card__label{color:var(--neutral-600);text-transform:uppercase;letter-spacing:.03em;font-size:.7rem;font-weight:700}.ac-component .c-cards-wrapper .c-card__title{color:var(--neutral-900);font-size:.95rem;font-weight:700}.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{--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{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{opacity:1}.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{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{opacity:0}.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{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{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{opacity:1}}.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{flex-basis:100%}}
+.ac-component .c-cards-wrapper{max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.ac-component .c-cards-wrapper.is-loading .c-cards{opacity:.45;transition:opacity .15s ease-out}.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{gap:.25rem}.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{font-size:.6rem}.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{row-gap:.5rem;padding-bottom:.5rem}.ac-component .c-cards-wrapper .c-cards.is-compact .c-card__actions{padding-top:0}.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{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{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{border-color:var(--premium-500)}.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{background:var(--premium-100)}.ac-component .c-cards-wrapper .c-card.is-open .c-card__icon{transform:rotate(180deg)}.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{background:var(--site-100)}.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{--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{background:var(--premium-100)}.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{width:1.25rem;height:1.25rem}.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{flex-direction:column;flex:1 1 0;min-width:0;display:flex}.ac-component .c-cards-wrapper .c-card__heading-item.primary{flex:2 1 0}.ac-component .c-cards-wrapper .c-card__label{color:var(--neutral-600);text-transform:uppercase;letter-spacing:.03em;font-size:.7rem;font-weight:700}.ac-component .c-cards-wrapper .c-card__title{color:var(--neutral-900);font-size:.95rem;font-weight:700}.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{--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{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{opacity:1}.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{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{opacity:0}.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{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{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{opacity:1}}.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{flex-basis:100%}}

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

@@ -1 +1 @@
-.c-table-wrapper{--table-col-max-width:28rem;--table-primary-col-min-width:12rem;--table-primary-col-max-width:32rem;max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.5rem .375rem;--action-count:0;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width)}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}
+.c-table-wrapper{--table-col-max-width:28rem;--table-primary-col-min-width:12rem;--table-primary-col-max-width:32rem;max-height:var(--data-list-max-height,75dvh);-webkit-overflow-scrolling:touch;position:relative;overflow:auto}.c-table-wrapper .c-table{--cell-padding:.5rem .375rem;--action-count:0;border-collapse:collapse;width:100%;min-width:48rem;font-size:.875rem}.c-table-wrapper .c-table thead{z-index:2;background-color:var(--neutral-150);position:sticky;top:0;box-shadow:0 2px 5px -1px #32325d40,0 1px 3px -1px #0000004d}.c-table-wrapper .c-table th,.c-table-wrapper .c-table td{padding:var(--cell-padding);text-align:left;border-bottom:1px solid var(--neutral-200);overflow-wrap:break-word}.c-table-wrapper .c-table .primary-col{min-width:var(--table-primary-col-min-width);max-width:var(--table-primary-col-max-width)}.c-table-wrapper .c-table th.c-sortable{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap}.c-table-wrapper .c-table th.c-sortable--sorted{color:var(--premium-500)}.c-table-wrapper .c-table th.c-sortable:hover{color:#1e2627}.c-table-wrapper .c-table th .c-sort-icon{color:var(--neutral-400);margin-left:.25rem;transition:color .15s}.c-table-wrapper .c-table th .c-sort-icon--active{color:var(--premium-500)}.c-table-wrapper .c-table td{max-width:var(--table-col-max-width)}.c-table-wrapper .c-table td.is-nowrap{white-space:nowrap}.c-table-wrapper .c-table.is-compact th{padding-top:.5rem;padding-bottom:.5rem}.c-table-wrapper .c-table.is-compact td{padding-top:.1875rem;padding-bottom:.1875rem}.c-table-wrapper .c-table tbody tr.is-striped{background-color:var(--neutral-50)}.c-table-wrapper .c-table tbody tr.is-selected,.c-table-wrapper .c-table tbody tr.is-striped.is-selected{background-color:var(--premium-200)}.c-table-wrapper .c-table tbody .c-table__loading-row,.c-table-wrapper .c-table tbody .c-table__loading-row:hover{background-color:#0000}.c-table-wrapper .c-table tbody .c-table__loading-cell{text-align:center;border-bottom:1px solid var(--neutral-200);padding:2rem}.c-table-wrapper .c-table tbody .c-table__loading-wrap{justify-content:center;align-items:center;width:100%;display:flex}@media (hover:hover) and (pointer:fine){.c-table-wrapper .c-table th.c-sortable:hover .c-sort-icon{color:var(--neutral-700)}.c-table-wrapper .c-table tbody tr:hover,.c-table-wrapper .c-table tbody tr.is-striped:hover{background-color:var(--premium-100)}.c-table-wrapper .c-table tbody tr:hover td,.c-table-wrapper .c-table tbody tr.is-striped:hover td{border-color:var(--premium-400)}.c-table-wrapper .c-table tbody tr.is-selected:hover,.c-table-wrapper .c-table tbody tr.is-striped.is-selected:hover{background-color:var(--premium-300)}}.c-table-wrapper .c-table .c-actions-header{text-align:center}.c-table-wrapper .c-table .c-actions-cell .c-actions-wrap{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem;display:flex}.c-table-wrapper .c-table__cell{position:relative}@media (hover:none),(pointer:coarse){.c-table-wrapper .c-table__cell{transition:background-color .15s}.c-table-wrapper .c-table__cell:focus-within,.c-table-wrapper .c-table__cell:hover{background-color:#dfefef80}}.c-table-wrapper .c-table__cell .c-copy-btn{opacity:0;position:absolute;top:0;right:0}.c-table-wrapper .c-table__cell:hover .c-copy-btn,.c-table-wrapper .c-table__cell:focus-within .c-copy-btn{opacity:1}.c-table-wrapper .c-table__backdrop{z-index:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;background:#fff9;justify-content:center;align-items:center;padding-top:3rem;animation:.15s ease-out c-table-backdrop-in;display:flex;position:absolute;inset:0}.c-table-wrapper.is-loading .c-table tbody{opacity:.45;transition:opacity .15s ease-out}@keyframes c-table-backdrop-in{0%{opacity:0}to{opacity:1}}

package/dist/src/types/data-list.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from 'vue';
 import { DropdownOption } from '../components/DropdownSelect.vue';
 import { PickedDate, PickedUtcRange } from './types';
 import { ButtonType } from '../components/Button.vue';
@@ -33,30 +32,29 @@ export interface PaginatorSettings extends PageSettings {
     total: number;
 }
 export interface DataListConfig {
-    selectableAttr?: string | undefined;
+    selectableAttr?: string;
     columns: Column[];
-    actions?: Array<Action | ActionGroup> | undefined;
-    actionHeader?: string | undefined;
+    actions?: Array<Action | ActionGroup>;
+    actionHeader?: string;
 }
 export type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime';
 export interface Column {
-    visible?: boolean | undefined;
-    primary?: boolean | undefined;
+    visible?: boolean;
+    primary?: boolean;
     label: string;
     property: string;
-    sort?: undefined | Sort;
+    sort?: Sort;
     type?: ColumnType;
-    class?: string | undefined;
-    headerClass?: string | undefined;
-    hideCopyToClipboard?: boolean | undefined;
-    converter?: undefined | ((v: any, item: any) => any);
-    loading?: (() => boolean) | undefined;
+    class?: string;
+    headerClass?: string;
+    hideCopyToClipboard?: boolean;
+    hideHeader?: boolean;
+    converter?: ((v: any, item: any) => any);
+    loading?: (() => boolean);
 }
 export type SortDirection = 'asc' | 'desc' | null;
 export interface Sort {
     label: string;
-    active: Ref<boolean> | undefined;
-    direction?: Ref<SortDirection> | undefined;
     callback: (property: string, direction: SortDirection) => any;
 }
 export interface Action {
@@ -65,7 +63,7 @@ export interface Action {
     ariaLabel?: string;
     cardLabel?: string;
     type?: ButtonType;
-    config?: Record<string, any> | undefined;
+    config?: Record<string, any>;
     disabled?: (item: any) => boolean;
     callback: (item: any) => any;
     withConfirm?: boolean;
@@ -77,7 +75,7 @@ export interface ActionGroup {
     label?: string;
     ariaLabel?: string;
     cardLabel?: string;
-    config?: Record<string, any> | undefined;
+    config?: Record<string, any>;
     items: Action[];
     disabled?: (item: any) => boolean;
 }

package/package.json

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