admins-components 9.0.49 → 9.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admins-components58.js.map +1 -1
- package/dist/admins-components61.js +20 -20
- package/dist/admins-components61.js.map +1 -1
- package/dist/admins-components62.js.map +1 -1
- package/dist/admins-components65.js +1 -1
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js.map +1 -1
- package/dist/admins-components68.js +58 -58
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/src/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/types/data-list.d.ts +14 -16
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components58.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"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"}
|
|
@@ -4,16 +4,16 @@ import { getColumnValue as n } from "./admins-components59.js";
|
|
|
4
4
|
import { shortUuid as r } from "./admins-components60.js";
|
|
5
5
|
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";
|
|
6
6
|
//#region src/components/data-table/DataCell.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
-
var _ = {
|
|
7
|
+
var _ = { class: "dc-cell" }, v = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "dc-loading"
|
|
10
|
-
},
|
|
10
|
+
}, y = { key: 2 }, b = ["innerHTML"], x = {
|
|
11
11
|
key: 3,
|
|
12
12
|
class: "dc-datetime"
|
|
13
|
-
},
|
|
13
|
+
}, S = { class: "dc-datetime__part" }, C = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "dc-datetime__sep"
|
|
16
|
-
},
|
|
16
|
+
}, w = { class: "dc-datetime__part" }, T = { key: 4 }, E = ["innerHTML"], D = /* @__PURE__ */ u({
|
|
17
17
|
__name: "DataCell",
|
|
18
18
|
props: {
|
|
19
19
|
item: {},
|
|
@@ -24,9 +24,9 @@ var _ = {
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
setup(u) {
|
|
27
|
-
let
|
|
28
|
-
if (
|
|
29
|
-
let e =
|
|
27
|
+
let D = u, O = i(() => n(D.item, D.col)), k = i(() => d(O.value)), A = i(() => r()(O.value)), j = i(() => {
|
|
28
|
+
if (D.col.type !== "datetime") return null;
|
|
29
|
+
let e = O.value;
|
|
30
30
|
if (!e) return {
|
|
31
31
|
date: "",
|
|
32
32
|
time: ""
|
|
@@ -42,26 +42,26 @@ var _ = {
|
|
|
42
42
|
});
|
|
43
43
|
return (n, r) => {
|
|
44
44
|
let i = p("tooltip");
|
|
45
|
-
return u.col.loading?.() ? (f(), s("span",
|
|
45
|
+
return f(), s("span", _, [u.col.loading?.() ? (f(), s("span", v, [l(e, {
|
|
46
46
|
loading: !0,
|
|
47
47
|
size: "1rem"
|
|
48
|
-
})])) :
|
|
48
|
+
})])) : 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, {
|
|
49
49
|
key: 0,
|
|
50
|
-
value:
|
|
51
|
-
}, null, 8, ["value"])) : o("", !0)])), [[i,
|
|
52
|
-
c("span",
|
|
53
|
-
|
|
54
|
-
c("span",
|
|
55
|
-
u.copy &&
|
|
50
|
+
value: O.value
|
|
51
|
+
}, null, 8, ["value"])) : o("", !0)])), [[i, O.value]]) : u.col.type === "datetime" ? (f(), s("span", x, [
|
|
52
|
+
c("span", S, h(j.value?.date), 1),
|
|
53
|
+
j.value?.time ? (f(), s("span", C)) : o("", !0),
|
|
54
|
+
c("span", w, h(j.value?.time), 1),
|
|
55
|
+
u.copy && O.value ? (f(), a(t, {
|
|
56
56
|
key: 1,
|
|
57
|
-
value:
|
|
57
|
+
value: O.value
|
|
58
58
|
}, null, 8, ["value"])) : o("", !0)
|
|
59
|
-
])) : (f(), s("span",
|
|
59
|
+
])) : (f(), s("span", T, [c("span", { innerHTML: O.value }, null, 8, E), u.copy && O.value ? (f(), a(t, {
|
|
60
60
|
key: 0,
|
|
61
|
-
value:
|
|
62
|
-
}, null, 8, ["value"])) : o("", !0)]));
|
|
61
|
+
value: O.value
|
|
62
|
+
}, null, 8, ["value"])) : o("", !0)]))]);
|
|
63
63
|
};
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
66
|
//#endregion
|
|
67
|
-
export {
|
|
67
|
+
export { D as default };
|
|
@@ -1 +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
|
|
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 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"}
|
|
@@ -1 +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
|
|
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 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":""}
|
|
@@ -60,7 +60,7 @@ var S = { class: "ac-component" }, C = { class: "c-table-wrapper" }, w = { key:
|
|
|
60
60
|
}, e.headerClass]),
|
|
61
61
|
title: e.sort ? `Sorrendezés ${e.label} alapján` : void 0,
|
|
62
62
|
onClick: (t) => e.sort ? W(e) : void 0
|
|
63
|
-
}, [d(y(e.label) + " ", 1), e.sort ? (g(), l("span", {
|
|
63
|
+
}, [d(y(e.hideHeader ? "" : e.label) + " ", 1), e.sort ? (g(), l("span", {
|
|
64
64
|
key: 0,
|
|
65
65
|
class: m(["c-sort-icon fa-solid", {
|
|
66
66
|
"fa-sort": R.value?.key !== e.property,
|
|
@@ -1 +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 { 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.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCA,IAAM,IAAQ,GAaR,IAAO,GAOP,IAAa,EAGT,IAAI,GAER,EACJ,iBACA,gBACA,QAAQ,GACR,iBACE,QACI,EAAM,aACN,EAAM,OAAO,iBAClB,MAAM,EAAK,oBAAoB,CAAC,CACnC,GAEM,IAAiB,QAAe,EAAM,OAAO,QAAQ,QAAQ,MAAM,EAAE,YAAY,EAAK,CAAC;EAE7F,SAAS,EAAW,GAAa;GAC/B,IAAM,IAAM,EAAI,UACV,IACJ,EAAW,OAAO,QAAQ,KAAO,EAAW,MAAM,cAAc,QAAQ,SAAS;GAKnF,AAHA,EAAW,QAAQ;IAAE;IAAK;GAAU,GACpC,EAAI,MAAM,WAAW,GAAK,CAAS,GAEnC,EAAK,eAAe;IAAE;IAAK;GAAU,CAAC;EACxC;yBAIE,EA0GM,OA1GN,GA0GM,CAzGJ,EAwGM,OAxGN,GAwGM,CAvGJ,EAmGQ,SAAA;GAlGN,OAAK,EAAA,CAAC,WAAS;IAAA,cACS,EAAA,SAAS;IAAO,cAAgB,EAAA;GAAO,CAAA,CAAA;GAC9D,OAAK,EAAA,EAAA,kBAAsB,EAAA,OAAO,SAAS,UAAM,EAAA,CAAA;MAElD,EAyCQ,SAAA,MAAA,CAxCN,EAuCK,MAAA,MAAA;GAtCO,EAAA,OAAO,kBAAA,EAAA,GAAjB,EAEK,MAAA,GAAA,CADH,EAAuE,GAAA;IAA5D,eAAa,EAAA,CAAA;IAAc,uBAAoB,EAAA,CAAA;;WAG5D,EA6BK,GAAA,MAAA,EA5BW,EAAA,QAAP,YADT,EA6BK,MAAA;IA3BF,KAAK,EAAI;IACT,OAAK,EAAA,CAAA;mBAAsD,EAAI;2BAA8C,EAAA,OAAY,QAAQ,EAAI;oBAA2C,EAAI;OAA4C,EAAI,WAAA,CAAA;IAQpO,OAAO,EAAI,OAAI,eAAkB,EAAI,MAAK,YAAa,KAAA;IACvD,UAAK,MAAE,EAAI,OAAO,EAAW,CAAG,IAAI,KAAA;
|
|
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 { 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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"}
|
|
@@ -1 +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 { 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.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":""}
|
|
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 { 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":""}
|
|
@@ -6,16 +6,16 @@ import { dataCardsSettingsDefaults as i } from "./admins-components58.js";
|
|
|
6
6
|
import { getColumnValue as a } from "./admins-components59.js";
|
|
7
7
|
import o from "./admins-components62.js";
|
|
8
8
|
import s from "./admins-components64.js";
|
|
9
|
-
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,
|
|
9
|
+
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";
|
|
10
10
|
//#region src/components/data-table/DataCards.vue?vue&type=script&setup=true&lang.ts
|
|
11
|
-
var
|
|
11
|
+
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 = {
|
|
12
12
|
key: 1,
|
|
13
13
|
class: "c-cards__loading-wrap"
|
|
14
|
-
},
|
|
14
|
+
}, L = {
|
|
15
15
|
key: 2,
|
|
16
16
|
class: "c-cards__backdrop",
|
|
17
17
|
"aria-hidden": "true"
|
|
18
|
-
},
|
|
18
|
+
}, R = /* @__PURE__ */ h({
|
|
19
19
|
__name: "DataCards",
|
|
20
20
|
props: {
|
|
21
21
|
config: {},
|
|
@@ -28,14 +28,14 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
|
|
|
28
28
|
},
|
|
29
29
|
emits: ["selection-change"],
|
|
30
30
|
setup(i, { emit: h }) {
|
|
31
|
-
let
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
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());
|
|
32
|
+
T(() => R.items, () => {
|
|
33
|
+
H.value = /* @__PURE__ */ new Set();
|
|
34
34
|
});
|
|
35
|
-
let
|
|
36
|
-
let e =
|
|
35
|
+
let U = l(() => R.config.columns.filter((e) => e.visible !== !1)), W = l(() => {
|
|
36
|
+
let e = R.settings;
|
|
37
37
|
if (e?.cardHeaderColumns) {
|
|
38
|
-
let t =
|
|
38
|
+
let t = U.value.filter((t) => e.cardHeaderColumns[t.property]);
|
|
39
39
|
if (t.length > 0) {
|
|
40
40
|
if (e.cardHeaderOrder) {
|
|
41
41
|
let n = e.cardHeaderOrder;
|
|
@@ -47,99 +47,99 @@ var E = { class: "ac-component" }, D = ["onClick", "onPointerdown"], O = ["onCli
|
|
|
47
47
|
return t;
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
|
-
let t =
|
|
51
|
-
return t.length > 0 ? t :
|
|
52
|
-
}),
|
|
53
|
-
function
|
|
54
|
-
|
|
55
|
-
|
|
50
|
+
let t = U.value.filter((e) => e.primary);
|
|
51
|
+
return t.length > 0 ? t : U.value.slice(0, 1);
|
|
52
|
+
}), G = null, K = !1;
|
|
53
|
+
function q(e, t) {
|
|
54
|
+
R.config.selectableAttr && e.button === 0 && (K = !1, G = setTimeout(() => {
|
|
55
|
+
K = !0, V(t);
|
|
56
56
|
}, 500));
|
|
57
57
|
}
|
|
58
|
-
function
|
|
59
|
-
|
|
58
|
+
function J() {
|
|
59
|
+
G &&= (clearTimeout(G), null);
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
|
|
61
|
+
function Y(e) {
|
|
62
|
+
K && e.preventDefault();
|
|
63
63
|
}
|
|
64
|
-
function
|
|
65
|
-
if (
|
|
66
|
-
|
|
64
|
+
function X(e) {
|
|
65
|
+
if (K) {
|
|
66
|
+
K = !1;
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
-
|
|
69
|
+
Z(e);
|
|
70
70
|
}
|
|
71
|
-
function
|
|
72
|
-
|
|
71
|
+
function Z(e) {
|
|
72
|
+
H.value.has(e) ? H.value.delete(e) : H.value.add(e), H.value = new Set(H.value);
|
|
73
73
|
}
|
|
74
|
-
return (r, l) => (
|
|
74
|
+
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", {
|
|
75
75
|
key: 0,
|
|
76
|
-
class:
|
|
77
|
-
}, [(
|
|
76
|
+
class: _(["c-cards", { "is-compact": i.settings.compact }])
|
|
77
|
+
}, [(v(!0), f(c, null, b(i.items, (t, r) => (v(), f("div", {
|
|
78
78
|
key: r,
|
|
79
|
-
class:
|
|
80
|
-
"is-open":
|
|
81
|
-
"is-selected": i.config.selectableAttr &&
|
|
79
|
+
class: _(["c-card", {
|
|
80
|
+
"is-open": H.value.has(r),
|
|
81
|
+
"is-selected": i.config.selectableAttr && C(B).has(t[i.config.selectableAttr])
|
|
82
82
|
}])
|
|
83
83
|
}, [p("button", {
|
|
84
84
|
type: "button",
|
|
85
85
|
class: "c-card__header",
|
|
86
|
-
onClick: (e) =>
|
|
87
|
-
onPointerdown: (e) =>
|
|
88
|
-
onPointerup: l[1] ||= (e) =>
|
|
89
|
-
onPointerleave: l[2] ||= (e) =>
|
|
90
|
-
onContextmenu:
|
|
86
|
+
onClick: (e) => X(r),
|
|
87
|
+
onPointerdown: (e) => q(e, t),
|
|
88
|
+
onPointerup: l[1] ||= (e) => J(),
|
|
89
|
+
onPointerleave: l[2] ||= (e) => J(),
|
|
90
|
+
onContextmenu: Y
|
|
91
91
|
}, [
|
|
92
|
-
i.config.selectableAttr ? (
|
|
92
|
+
i.config.selectableAttr ? (v(), f("span", {
|
|
93
93
|
key: 0,
|
|
94
94
|
class: "c-card__check-zone",
|
|
95
|
-
onClick:
|
|
95
|
+
onClick: D((e) => C(V)(t), ["stop"])
|
|
96
96
|
}, [m(e, {
|
|
97
|
-
"model-value": !!
|
|
98
|
-
"onUpdate:modelValue": (e) =>
|
|
99
|
-
onClick: l[0] ||=
|
|
100
|
-
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8,
|
|
101
|
-
p("span",
|
|
97
|
+
"model-value": !!C(B).has(t[i.config.selectableAttr]),
|
|
98
|
+
"onUpdate:modelValue": (e) => C(V)(t),
|
|
99
|
+
onClick: l[0] ||= D(() => {}, ["stop"])
|
|
100
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, A)) : d("", !0),
|
|
101
|
+
p("span", j, [(v(!0), f(c, null, b(W.value, (e, n) => (v(), f("span", {
|
|
102
102
|
key: e.property,
|
|
103
|
-
class: "c-card__heading-item"
|
|
104
|
-
}, [p("span",
|
|
105
|
-
|
|
106
|
-
innerHTML:
|
|
107
|
-
}, null,
|
|
103
|
+
class: _(["c-card__heading-item", { primary: e.primary }])
|
|
104
|
+
}, [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", {
|
|
105
|
+
key: 1,
|
|
106
|
+
innerHTML: C(a)(t, e)
|
|
107
|
+
}, null, 8, N))], 2)], 2))), 128))]),
|
|
108
108
|
l[4] ||= p("span", {
|
|
109
109
|
class: "c-card__icon",
|
|
110
110
|
"aria-hidden": "true"
|
|
111
111
|
}, [p("i", { class: "fa-solid fa-chevron-down" })], -1)
|
|
112
|
-
], 40,
|
|
112
|
+
], 40, k), E(p("div", P, [(v(!0), f(c, null, b(U.value, (e) => (v(), f("div", {
|
|
113
113
|
key: e.property,
|
|
114
114
|
class: "c-card__field"
|
|
115
115
|
}, [
|
|
116
|
-
p("span",
|
|
116
|
+
p("span", F, S(e.label), 1),
|
|
117
117
|
m(o, {
|
|
118
118
|
item: t,
|
|
119
119
|
col: e,
|
|
120
120
|
class: "c-card__field-value",
|
|
121
121
|
copy: !1
|
|
122
122
|
}, null, 8, ["item", "col"]),
|
|
123
|
-
|
|
123
|
+
C(a)(t, e) && !e.hideCopyToClipboard ? (v(), u(n, {
|
|
124
124
|
key: 0,
|
|
125
125
|
class: "c-card__field-copy click-expand",
|
|
126
|
-
value:
|
|
126
|
+
value: C(a)(t, e)
|
|
127
127
|
}, null, 8, ["value"])) : d("", !0)
|
|
128
|
-
]))), 128)), i.config.actions ? (
|
|
128
|
+
]))), 128)), i.config.actions ? (v(), f("div", {
|
|
129
129
|
key: 0,
|
|
130
130
|
class: "c-card__actions",
|
|
131
|
-
onClick: l[3] ||=
|
|
131
|
+
onClick: l[3] ||= D(() => {}, ["stop"])
|
|
132
132
|
}, [m(s, {
|
|
133
133
|
actions: i.config.actions,
|
|
134
134
|
item: t
|
|
135
|
-
}, null, 8, ["actions", "item"])])) : d("", !0)], 512), [[
|
|
135
|
+
}, null, 8, ["actions", "item"])])) : d("", !0)], 512), [[w, H.value.has(r)]])], 2))), 128))], 2)) : (v(), f("div", I, [m(t, {
|
|
136
136
|
loading: !0,
|
|
137
137
|
size: "2.5rem"
|
|
138
|
-
})])), i.loading && i.items.length > 0 ? (
|
|
138
|
+
})])), i.loading && i.items.length > 0 ? (v(), f("div", L, [m(t, {
|
|
139
139
|
loading: !0,
|
|
140
140
|
size: "2.5rem"
|
|
141
141
|
})])) : d("", !0)], 2)]));
|
|
142
142
|
}
|
|
143
143
|
});
|
|
144
144
|
//#endregion
|
|
145
|
-
export {
|
|
145
|
+
export { R as default };
|
|
@@ -1 +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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"}
|
|
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, 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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"}
|
|
@@ -1 +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
|
|
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, 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":""}
|
|
@@ -1 +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
|
|
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.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%}}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Ref } from 'vue';
|
|
2
1
|
import { DropdownOption } from '../components/DropdownSelect.vue';
|
|
3
2
|
import { PickedDate, PickedUtcRange } from './types';
|
|
4
3
|
import { ButtonType } from '../components/Button.vue';
|
|
@@ -33,30 +32,29 @@ export interface PaginatorSettings extends PageSettings {
|
|
|
33
32
|
total: number;
|
|
34
33
|
}
|
|
35
34
|
export interface DataListConfig {
|
|
36
|
-
selectableAttr?: string
|
|
35
|
+
selectableAttr?: string;
|
|
37
36
|
columns: Column[];
|
|
38
|
-
actions?: Array<Action | ActionGroup
|
|
39
|
-
actionHeader?: string
|
|
37
|
+
actions?: Array<Action | ActionGroup>;
|
|
38
|
+
actionHeader?: string;
|
|
40
39
|
}
|
|
41
40
|
export type ColumnType = 'normal' | 'uuid' | 'date' | 'datetime';
|
|
42
41
|
export interface Column {
|
|
43
|
-
visible?: boolean
|
|
44
|
-
primary?: boolean
|
|
42
|
+
visible?: boolean;
|
|
43
|
+
primary?: boolean;
|
|
45
44
|
label: string;
|
|
46
45
|
property: string;
|
|
47
|
-
sort?:
|
|
46
|
+
sort?: Sort;
|
|
48
47
|
type?: ColumnType;
|
|
49
|
-
class?: string
|
|
50
|
-
headerClass?: string
|
|
51
|
-
hideCopyToClipboard?: boolean
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
class?: string;
|
|
49
|
+
headerClass?: string;
|
|
50
|
+
hideCopyToClipboard?: boolean;
|
|
51
|
+
hideHeader?: boolean;
|
|
52
|
+
converter?: ((v: any, item: any) => any);
|
|
53
|
+
loading?: (() => boolean);
|
|
54
54
|
}
|
|
55
55
|
export type SortDirection = 'asc' | 'desc' | null;
|
|
56
56
|
export interface Sort {
|
|
57
57
|
label: string;
|
|
58
|
-
active: Ref<boolean> | undefined;
|
|
59
|
-
direction?: Ref<SortDirection> | undefined;
|
|
60
58
|
callback: (property: string, direction: SortDirection) => any;
|
|
61
59
|
}
|
|
62
60
|
export interface Action {
|
|
@@ -65,7 +63,7 @@ export interface Action {
|
|
|
65
63
|
ariaLabel?: string;
|
|
66
64
|
cardLabel?: string;
|
|
67
65
|
type?: ButtonType;
|
|
68
|
-
config?: Record<string, any
|
|
66
|
+
config?: Record<string, any>;
|
|
69
67
|
disabled?: (item: any) => boolean;
|
|
70
68
|
callback: (item: any) => any;
|
|
71
69
|
withConfirm?: boolean;
|
|
@@ -77,7 +75,7 @@ export interface ActionGroup {
|
|
|
77
75
|
label?: string;
|
|
78
76
|
ariaLabel?: string;
|
|
79
77
|
cardLabel?: string;
|
|
80
|
-
config?: Record<string, any
|
|
78
|
+
config?: Record<string, any>;
|
|
81
79
|
items: Action[];
|
|
82
80
|
disabled?: (item: any) => boolean;
|
|
83
81
|
}
|