admins-components 9.0.60 → 9.0.62
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-components100.js +109 -103
- package/dist/admins-components100.js.map +1 -1
- package/dist/admins-components102.js.map +1 -1
- package/dist/admins-components61.js +26 -22
- package/dist/admins-components61.js.map +1 -1
- package/dist/admins-components62.js.map +1 -1
- package/dist/admins-components65.js +63 -60
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js.map +1 -1
- package/dist/admins-components68.js +35 -32
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/src/components/data-table/DataCards.vue.d.ts +12 -2
- package/dist/src/components/data-table/DataCell.vue.d.ts +15 -1
- package/dist/src/components/data-table/DataList.vue.d.ts +11 -2
- package/dist/src/components/data-table/DataTable.vue.d.ts +12 -2
- package/dist/src/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/package.json +1 -1
|
@@ -4,19 +4,19 @@ import { useSelection as n } from "./admins-components57.js";
|
|
|
4
4
|
import { dataTableSettingsDefaults as r } from "./admins-components58.js";
|
|
5
5
|
import i from "./admins-components62.js";
|
|
6
6
|
import a from "./admins-components64.js";
|
|
7
|
-
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, nextTick as m, normalizeClass as h, onMounted as g, openBlock as _, ref as v, renderList as y,
|
|
7
|
+
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, nextTick as m, normalizeClass as h, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, watch as C, withModifiers as w } from "vue";
|
|
8
8
|
//#region src/components/data-table/DataTable.vue?vue&type=script&setup=true&lang.ts
|
|
9
|
-
var
|
|
9
|
+
var T = { class: "ac-component" }, E = { key: 0 }, D = ["title", "onClick"], O = {
|
|
10
10
|
key: 1,
|
|
11
11
|
class: "c-actions-header"
|
|
12
|
-
},
|
|
12
|
+
}, k = { key: 0 }, A = ["onClick"], j = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "c-actions-cell"
|
|
15
|
-
},
|
|
15
|
+
}, M = { class: "c-actions-wrap" }, N = { key: 1 }, P = { class: "c-table__loading-row" }, F = ["colspan"], I = { class: "c-table__loading-wrap" }, L = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "c-table__backdrop",
|
|
18
18
|
"aria-hidden": "true"
|
|
19
|
-
},
|
|
19
|
+
}, R = /* @__PURE__ */ p({
|
|
20
20
|
__name: "DataTable",
|
|
21
21
|
props: {
|
|
22
22
|
config: {},
|
|
@@ -30,103 +30,106 @@ var w = { class: "ac-component" }, T = { key: 0 }, E = ["title", "onClick"], D =
|
|
|
30
30
|
},
|
|
31
31
|
emits: ["selection-change", "sort-change"],
|
|
32
32
|
setup(r, { emit: p }) {
|
|
33
|
-
let
|
|
34
|
-
|
|
35
|
-
e && (await m(),
|
|
33
|
+
let R = r, z = p, B = v(null), V = v(null);
|
|
34
|
+
C(() => R.loading, async (e) => {
|
|
35
|
+
e && (await m(), V.value?.scrollTo({
|
|
36
36
|
top: 0,
|
|
37
37
|
behavior: "smooth"
|
|
38
38
|
}));
|
|
39
39
|
});
|
|
40
|
-
let { selectedKeys:
|
|
41
|
-
function
|
|
40
|
+
let { selectedKeys: H, allSelected: U, toggle: W, toggleAll: G } = n(() => R.items, () => R.config.selectableAttr, (e) => z("selection-change", e)), K = s(() => R.config.columns.filter((e) => e.visible !== !1));
|
|
41
|
+
function q(e) {
|
|
42
42
|
return e.sort ? typeof e.sort == "boolean" ? null : e.sort : null;
|
|
43
43
|
}
|
|
44
|
-
function
|
|
44
|
+
function J(e) {
|
|
45
45
|
return !!e.sort;
|
|
46
46
|
}
|
|
47
|
-
function
|
|
48
|
-
let t = e.property, n =
|
|
49
|
-
|
|
47
|
+
function Y(e) {
|
|
48
|
+
let t = e.property, n = B.value?.key === t && B.value.direction === "asc" ? "desc" : "asc";
|
|
49
|
+
B.value = {
|
|
50
50
|
key: t,
|
|
51
51
|
direction: n
|
|
52
|
-
},
|
|
52
|
+
}, q(e)?.callback?.(t, n), z("sort-change", {
|
|
53
53
|
key: t,
|
|
54
54
|
direction: n
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function X(e) {
|
|
58
58
|
if (!e) {
|
|
59
|
-
|
|
59
|
+
B.value !== null && (B.value = null);
|
|
60
60
|
return;
|
|
61
61
|
}
|
|
62
|
-
let t =
|
|
63
|
-
t && (
|
|
62
|
+
let t = R.config.columns.find((t) => t.property === e.key);
|
|
63
|
+
t && (B.value?.key === e.key && B.value.direction === e.direction || (B.value = {
|
|
64
64
|
key: e.key,
|
|
65
65
|
direction: e.direction
|
|
66
|
-
},
|
|
66
|
+
}, q(t)?.callback?.(e.key, e.direction), z("sort-change", {
|
|
67
67
|
key: e.key,
|
|
68
68
|
direction: e.direction
|
|
69
69
|
})));
|
|
70
70
|
}
|
|
71
|
-
return g(() =>
|
|
71
|
+
return g(() => X(R.initialSort)), C(() => R.initialSort, (e) => {
|
|
72
72
|
if (!e) {
|
|
73
|
-
|
|
73
|
+
B.value !== null && (B.value = null);
|
|
74
74
|
return;
|
|
75
75
|
}
|
|
76
|
-
|
|
76
|
+
R.config.columns.find((t) => t.property === e.key) && (B.value?.key === e.key && B.value.direction === e.direction || (B.value = {
|
|
77
77
|
key: e.key,
|
|
78
78
|
direction: e.direction
|
|
79
79
|
}));
|
|
80
|
-
}), (n, s) => (_(), l("div",
|
|
80
|
+
}), (n, s) => (_(), l("div", T, [u("div", {
|
|
81
81
|
ref_key: "tableWrapperRef",
|
|
82
|
-
ref:
|
|
82
|
+
ref: V,
|
|
83
83
|
class: h(["c-table-wrapper list-table-view", { "is-loading": r.loading }])
|
|
84
84
|
}, [u("table", { class: h(["c-table", { "is-compact": r.settings.compact }]) }, [u("thead", null, [u("tr", null, [
|
|
85
|
-
r.config.selectableAttr ? (_(), l("th",
|
|
86
|
-
"model-value":
|
|
87
|
-
"onUpdate:modelValue":
|
|
85
|
+
r.config.selectableAttr ? (_(), l("th", E, [f(e, {
|
|
86
|
+
"model-value": S(U),
|
|
87
|
+
"onUpdate:modelValue": S(G)
|
|
88
88
|
}, null, 8, ["model-value", "onUpdate:modelValue"])])) : c("", !0),
|
|
89
|
-
(_(!0), l(o, null, y(
|
|
89
|
+
(_(!0), l(o, null, y(K.value, (e) => (_(), l("th", {
|
|
90
90
|
key: e.property,
|
|
91
91
|
class: h([{
|
|
92
|
-
"c-sortable":
|
|
93
|
-
"c-sortable--sorted":
|
|
92
|
+
"c-sortable": J(e),
|
|
93
|
+
"c-sortable--sorted": B.value?.key === e.property,
|
|
94
94
|
"primary-col": e.primary
|
|
95
95
|
}, e.headerClass]),
|
|
96
|
-
title:
|
|
97
|
-
onClick: (t) =>
|
|
98
|
-
}, [d(
|
|
96
|
+
title: J(e) ? `Sorrendezés ${e.label} alapján` : void 0,
|
|
97
|
+
onClick: (t) => J(e) ? Y(e) : void 0
|
|
98
|
+
}, [d(x(e.hideHeader ? "" : e.label) + " ", 1), J(e) ? (_(), l("span", {
|
|
99
99
|
key: 0,
|
|
100
100
|
class: h(["c-sort-icon fa-solid", {
|
|
101
|
-
"fa-sort":
|
|
102
|
-
"fa-sort-down":
|
|
103
|
-
"fa-sort-up":
|
|
104
|
-
"c-sort-icon--active":
|
|
105
|
-
"is-asc":
|
|
106
|
-
"is-desc":
|
|
101
|
+
"fa-sort": B.value?.key !== e.property,
|
|
102
|
+
"fa-sort-down": B.value?.key === e.property && B.value.direction === "desc",
|
|
103
|
+
"fa-sort-up": B.value?.key === e.property && B.value.direction === "asc",
|
|
104
|
+
"c-sort-icon--active": B.value?.key === e.property,
|
|
105
|
+
"is-asc": B.value?.key === e.property && B.value.direction === "asc",
|
|
106
|
+
"is-desc": B.value?.key === e.property && B.value.direction === "desc"
|
|
107
107
|
}])
|
|
108
|
-
}, null, 2)) : c("", !0)], 10,
|
|
109
|
-
r.config.actions ? (_(), l("th",
|
|
110
|
-
])]), !r.loading || r.items.length > 0 ? (_(), l("tbody",
|
|
111
|
-
key:
|
|
108
|
+
}, null, 2)) : c("", !0)], 10, D))), 128)),
|
|
109
|
+
r.config.actions ? (_(), l("th", O, x(r.config.actionHeader ?? ""), 1)) : c("", !0)
|
|
110
|
+
])]), !r.loading || r.items.length > 0 ? (_(), l("tbody", k, [(_(!0), l(o, null, y(r.items, (t, d) => (_(), l("tr", {
|
|
111
|
+
key: d,
|
|
112
112
|
class: h({
|
|
113
|
-
"is-selected": r.config.selectableAttr &&
|
|
114
|
-
"is-striped": r.settings.striped &&
|
|
113
|
+
"is-selected": r.config.selectableAttr && S(H).has(t[r.config.selectableAttr]),
|
|
114
|
+
"is-striped": r.settings.striped && d % 2 == 1
|
|
115
115
|
})
|
|
116
116
|
}, [
|
|
117
117
|
r.config.selectableAttr ? (_(), l("td", {
|
|
118
118
|
key: 0,
|
|
119
119
|
class: "pointer",
|
|
120
|
-
onClick:
|
|
120
|
+
onClick: w((e) => S(W)(t), ["stop"])
|
|
121
121
|
}, [f(e, {
|
|
122
|
-
"model-value": !!
|
|
123
|
-
"onUpdate:modelValue": (e) =>
|
|
124
|
-
onClick: s[0] ||=
|
|
125
|
-
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8,
|
|
126
|
-
(_(!0), l(o, null, y(
|
|
122
|
+
"model-value": !!S(H).has(t[r.config.selectableAttr]),
|
|
123
|
+
"onUpdate:modelValue": (e) => S(W)(t),
|
|
124
|
+
onClick: s[0] ||= w(() => {}, ["stop"])
|
|
125
|
+
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, A)) : c("", !0),
|
|
126
|
+
(_(!0), l(o, null, y(K.value, (e) => (_(), l("td", {
|
|
127
127
|
key: e.property,
|
|
128
128
|
class: h(["c-table__cell", [e.class, { "primary-col": e.primary }]])
|
|
129
|
-
}, [
|
|
129
|
+
}, [b(n.$slots, `cell:${e.property}`, {
|
|
130
|
+
item: t,
|
|
131
|
+
col: e
|
|
132
|
+
}, () => [f(i, {
|
|
130
133
|
item: t,
|
|
131
134
|
col: e,
|
|
132
135
|
copy: !e.hideCopyToClipboard
|
|
@@ -134,22 +137,22 @@ var w = { class: "ac-component" }, T = { key: 0 }, E = ["title", "onClick"], D =
|
|
|
134
137
|
"item",
|
|
135
138
|
"col",
|
|
136
139
|
"copy"
|
|
137
|
-
])], 2))), 128)),
|
|
138
|
-
r.config.actions ? (_(), l("td",
|
|
140
|
+
])])], 2))), 128)),
|
|
141
|
+
r.config.actions ? (_(), l("td", j, [u("div", M, [f(a, {
|
|
139
142
|
actions: r.config.actions,
|
|
140
143
|
item: t
|
|
141
144
|
}, null, 8, ["actions", "item"])])])) : c("", !0)
|
|
142
|
-
], 2))), 128))])) : (_(), l("tbody",
|
|
143
|
-
colspan:
|
|
145
|
+
], 2))), 128))])) : (_(), l("tbody", N, [u("tr", P, [u("td", {
|
|
146
|
+
colspan: K.value.length + +!!r.config.selectableAttr + +!!r.config.actions,
|
|
144
147
|
class: "c-table__loading-cell"
|
|
145
|
-
}, [u("div",
|
|
148
|
+
}, [u("div", I, [f(t, {
|
|
146
149
|
loading: !0,
|
|
147
150
|
size: "2.5rem"
|
|
148
|
-
})])], 8,
|
|
151
|
+
})])], 8, F)])]))], 2), r.loading && r.items.length > 0 ? (_(), l("div", L, [f(t, {
|
|
149
152
|
loading: !0,
|
|
150
153
|
size: "2.5rem"
|
|
151
154
|
})])) : c("", !0)], 2)]));
|
|
152
155
|
}
|
|
153
156
|
});
|
|
154
157
|
//#endregion
|
|
155
|
-
export {
|
|
158
|
+
export { R as default };
|
|
@@ -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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } 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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\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 getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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
|
+
{"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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } 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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\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 getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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 <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </slot>\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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } 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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\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 getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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, onMounted, watch, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataTableSettingsDefaults } from '@/types/data-list'\nimport type { Column, DataListConfig, DataTableSettings, Sort } 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 initialSort?: { key: string; direction: SortDirection } | null\n }>(),\n {\n settings: () => ({ ...dataTableSettingsDefaults }),\n loading: false,\n initialSort: null,\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 tableWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n tableWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\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 getSortConfig(col: Column): Sort | null {\n if (!col.sort) return null\n return typeof col.sort === 'boolean' ? null : col.sort\n}\n\nfunction isSortable(col: Column): boolean {\n return !!col.sort\n}\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 getSortConfig(col)?.callback?.(key, direction)\n\n emit('sort-change', { key, direction })\n}\n\nfunction applyInitialSort(sort: { key: string; direction: SortDirection } | null | undefined) {\n if (!sort) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === sort.key)\n if (!col) return\n if (activeSort.value?.key === sort.key && activeSort.value.direction === sort.direction) return\n activeSort.value = { key: sort.key, direction: sort.direction }\n getSortConfig(col)?.callback?.(sort.key, sort.direction)\n emit('sort-change', { key: sort.key, direction: sort.direction })\n}\n\nonMounted(() => applyInitialSort(props.initialSort))\nwatch(\n () => props.initialSort,\n (s) => {\n // When initialSort changes, sync the visual indicator only.\n // Don't re-emit sort-change — that would cause an infinite loop with\n // parents that re-assign the prop from the emitted value.\n if (!s) {\n if (activeSort.value !== null) activeSort.value = null\n return\n }\n const col = props.config.columns.find((c) => c.property === s.key)\n if (!col) return\n if (activeSort.value?.key === s.key && activeSort.value.direction === s.direction) return\n activeSort.value = { key: s.key, direction: s.direction }\n },\n)\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"tableWrapperRef\"\n class=\"c-table-wrapper list-table-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <!-- :style=\"{ '--action-count': config.actions?.length ?? 0 }\" -->\n <table class=\"c-table\" :class=\"{ 'is-compact': settings.compact }\">\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': isSortable(col),\n 'c-sortable--sorted': activeSort?.key === col.property,\n 'primary-col': col.primary,\n },\n col.headerClass,\n ]\"\n :title=\"isSortable(col) ? `Sorrendezés ${col.label} alapján` : undefined\"\n @click=\"isSortable(col) ? handleSort(col) : undefined\"\n >\n {{ !col.hideHeader ? col.label : '' }}\n\n <span\n v-if=\"isSortable(col)\"\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 <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" :copy=\"!col.hideCopyToClipboard\" />\n </slot>\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":""}
|
|
@@ -7,9 +7,9 @@ import { getColumnValue as a } from "./admins-components59.js";
|
|
|
7
7
|
import { shortUuid as o } from "./admins-components60.js";
|
|
8
8
|
import s from "./admins-components62.js";
|
|
9
9
|
import c from "./admins-components64.js";
|
|
10
|
-
import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, isVNode as _, nextTick as v, normalizeClass as y, openBlock as b, ref as x, renderList as S,
|
|
10
|
+
import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as h, defineComponent as g, isVNode as _, nextTick as v, normalizeClass as y, openBlock as b, ref as x, renderList as S, renderSlot as C, resolveDirective as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, vShow as O, watch as k, withDirectives as A, withModifiers as j } from "vue";
|
|
11
11
|
//#region src/components/data-table/DataCards.vue?vue&type=script&setup=true&lang.ts
|
|
12
|
-
var
|
|
12
|
+
var M = { class: "ac-component" }, ee = ["onClick", "onPointerdown"], N = ["onClick"], P = { class: "c-card__heading" }, F = { class: "c-card__label" }, I = ["innerHTML"], L = ["innerHTML"], R = { class: "c-card__body" }, z = { class: "c-card__field-label" }, B = {
|
|
13
13
|
key: 1,
|
|
14
14
|
class: "c-cards__loading-wrap"
|
|
15
15
|
}, V = {
|
|
@@ -30,12 +30,12 @@ var j = { class: "ac-component" }, M = ["onClick", "onPointerdown"], N = ["onCli
|
|
|
30
30
|
emits: ["selection-change"],
|
|
31
31
|
setup(i, { emit: g }) {
|
|
32
32
|
let H = i, U = g, { selectedKeys: W, toggle: G } = r(() => H.items, () => H.config.selectableAttr, (e) => U("selection-change", e)), K = x(/* @__PURE__ */ new Set()), q = x(null);
|
|
33
|
-
|
|
33
|
+
k(() => H.loading, async (e) => {
|
|
34
34
|
e && (await v(), q.value?.scrollTo({
|
|
35
35
|
top: 0,
|
|
36
36
|
behavior: "smooth"
|
|
37
37
|
}));
|
|
38
|
-
}),
|
|
38
|
+
}), k(() => H.items, () => {
|
|
39
39
|
K.value = /* @__PURE__ */ new Set();
|
|
40
40
|
});
|
|
41
41
|
let J = u(() => H.config.columns.filter((e) => e.visible !== !1)), Y = u(() => {
|
|
@@ -64,90 +64,93 @@ var j = { class: "ac-component" }, M = ["onClick", "onPointerdown"], N = ["onCli
|
|
|
64
64
|
function $() {
|
|
65
65
|
X &&= (clearTimeout(X), null);
|
|
66
66
|
}
|
|
67
|
-
function
|
|
67
|
+
function te(e) {
|
|
68
68
|
Z && e.preventDefault();
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function ne(e) {
|
|
71
71
|
if (Z) {
|
|
72
72
|
Z = !1;
|
|
73
73
|
return;
|
|
74
74
|
}
|
|
75
|
-
|
|
75
|
+
re(e);
|
|
76
76
|
}
|
|
77
|
-
function
|
|
77
|
+
function re(e) {
|
|
78
78
|
K.value.has(e) ? K.value.delete(e) : K.value.add(e), K.value = new Set(K.value);
|
|
79
79
|
}
|
|
80
80
|
return (r, u) => {
|
|
81
|
-
let g =
|
|
82
|
-
return b(), p("div",
|
|
81
|
+
let g = w("tooltip");
|
|
82
|
+
return b(), p("div", M, [m("div", {
|
|
83
83
|
ref_key: "cardsWrapperRef",
|
|
84
84
|
ref: q,
|
|
85
85
|
class: y(["c-cards-wrapper list-card-view", { "is-loading": i.loading }])
|
|
86
86
|
}, [!i.loading || i.items.length > 0 ? (b(), p("div", {
|
|
87
87
|
key: 0,
|
|
88
88
|
class: y(["c-cards", { "is-compact": i.settings.compact }])
|
|
89
|
-
}, [(b(!0), p(l, null, S(i.items, (t,
|
|
90
|
-
key:
|
|
89
|
+
}, [(b(!0), p(l, null, S(i.items, (t, v) => (b(), p("div", {
|
|
90
|
+
key: v,
|
|
91
91
|
class: y(["c-card", {
|
|
92
|
-
"is-open": K.value.has(
|
|
93
|
-
"is-selected": i.config.selectableAttr &&
|
|
92
|
+
"is-open": K.value.has(v),
|
|
93
|
+
"is-selected": i.config.selectableAttr && D(W).has(t[i.config.selectableAttr])
|
|
94
94
|
}])
|
|
95
95
|
}, [m("button", {
|
|
96
96
|
type: "button",
|
|
97
97
|
class: "c-card__header",
|
|
98
|
-
onClick: (e) =>
|
|
98
|
+
onClick: (e) => ne(v),
|
|
99
99
|
onPointerdown: (e) => Q(e, t),
|
|
100
100
|
onPointerup: u[1] ||= (e) => $(),
|
|
101
101
|
onPointerleave: u[2] ||= (e) => $(),
|
|
102
|
-
onContextmenu:
|
|
102
|
+
onContextmenu: te
|
|
103
103
|
}, [
|
|
104
104
|
i.config.selectableAttr ? (b(), p("span", {
|
|
105
105
|
key: 0,
|
|
106
106
|
class: "c-card__check-zone",
|
|
107
|
-
onClick:
|
|
107
|
+
onClick: j((e) => D(G)(t), ["stop"])
|
|
108
108
|
}, [h(e, {
|
|
109
|
-
"model-value": !!
|
|
110
|
-
"onUpdate:modelValue": (e) =>
|
|
111
|
-
onClick: u[0] ||=
|
|
109
|
+
"model-value": !!D(W).has(t[i.config.selectableAttr]),
|
|
110
|
+
"onUpdate:modelValue": (e) => D(G)(t),
|
|
111
|
+
onClick: u[0] ||= j(() => {}, ["stop"])
|
|
112
112
|
}, null, 8, ["model-value", "onUpdate:modelValue"])], 8, N)) : f("", !0),
|
|
113
113
|
m("span", P, [(b(!0), p(l, null, S(Y.value, (e, n) => (b(), p("span", {
|
|
114
114
|
key: e.property,
|
|
115
115
|
class: y(["c-card__heading-item", [{ primary: e.primary }, e.headerClass]])
|
|
116
|
-
}, [m("span", F,
|
|
116
|
+
}, [m("span", F, E(e.hideHeader ? "" : e.label), 1), m("span", { class: y(["c-card__title", { "c-truncate": i.settings.compact && n === 0 }]) }, [_(D(a)(t, e)) ? (b(), d(T(D(a)(t, e)), { key: 0 })) : e.type === "uuid" ? A((b(), p("span", {
|
|
117
117
|
key: 1,
|
|
118
|
-
innerHTML:
|
|
119
|
-
}, null, 8, I)), [[g,
|
|
118
|
+
innerHTML: D(o)()(D(a)(t, e))
|
|
119
|
+
}, null, 8, I)), [[g, D(a)(t, e)]]) : (b(), p("span", {
|
|
120
120
|
key: 2,
|
|
121
|
-
innerHTML:
|
|
121
|
+
innerHTML: D(a)(t, e)
|
|
122
122
|
}, null, 8, L))], 2)], 2))), 128))]),
|
|
123
123
|
u[4] ||= m("span", {
|
|
124
124
|
class: "c-card__icon",
|
|
125
125
|
"aria-hidden": "true"
|
|
126
126
|
}, [m("i", { class: "fa-solid fa-chevron-down" })], -1)
|
|
127
|
-
], 40,
|
|
127
|
+
], 40, ee), A(m("div", R, [(b(!0), p(l, null, S(J.value, (e) => (b(), p("div", {
|
|
128
128
|
key: e.property,
|
|
129
129
|
class: "c-card__field"
|
|
130
130
|
}, [
|
|
131
|
-
m("span", z,
|
|
132
|
-
|
|
131
|
+
m("span", z, E(e.label), 1),
|
|
132
|
+
C(r.$slots, `cell:${e.property}`, {
|
|
133
|
+
item: t,
|
|
134
|
+
col: e
|
|
135
|
+
}, () => [h(s, {
|
|
133
136
|
item: t,
|
|
134
137
|
col: e,
|
|
135
138
|
class: "c-card__field-value",
|
|
136
139
|
copy: !1
|
|
137
|
-
}, null, 8, ["item", "col"]),
|
|
138
|
-
|
|
140
|
+
}, null, 8, ["item", "col"])]),
|
|
141
|
+
D(a)(t, e) && !e.hideCopyToClipboard ? (b(), d(n, {
|
|
139
142
|
key: 0,
|
|
140
143
|
class: "c-card__field-copy click-expand",
|
|
141
|
-
value:
|
|
144
|
+
value: D(a)(t, e)
|
|
142
145
|
}, null, 8, ["value"])) : f("", !0)
|
|
143
146
|
]))), 128)), i.config.actions ? (b(), p("div", {
|
|
144
147
|
key: 0,
|
|
145
148
|
class: "c-card__actions",
|
|
146
|
-
onClick: u[3] ||=
|
|
149
|
+
onClick: u[3] ||= j(() => {}, ["stop"])
|
|
147
150
|
}, [h(c, {
|
|
148
151
|
actions: i.config.actions,
|
|
149
152
|
item: t
|
|
150
|
-
}, null, 8, ["actions", "item"])])) : f("", !0)], 512), [[
|
|
153
|
+
}, null, 8, ["actions", "item"])])) : f("", !0)], 512), [[O, K.value.has(v)]])], 2))), 128))], 2)) : (b(), p("div", B, [h(t, {
|
|
151
154
|
loading: !0,
|
|
152
155
|
size: "2.5rem"
|
|
153
156
|
})])), i.loading && i.items.length > 0 ? (b(), p("div", V, [h(t, {
|
|
@@ -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, isVNode, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataCardsSettings | DataListSettings\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as string[]\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n return isVNode(value)\n} */\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"cardsWrapperRef\"\n class=\"c-cards-wrapper list-card-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <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, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataCardsSettings | DataListSettings\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as string[]\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n return isVNode(value)\n} */\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"cardsWrapperRef\"\n class=\"c-cards-wrapper list-card-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n </slot>\n\n <CopyToClipboard\n v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\n class=\"c-card__field-copy click-expand\"\n :value=\"getColumnValue(item, col)\"\n />\n </div>\n\n <div v-if=\"config.actions\" class=\"c-card__actions\" @click.stop>\n <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, isVNode, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataCardsSettings | DataListSettings\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as string[]\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n return isVNode(value)\n} */\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"cardsWrapperRef\"\n class=\"c-cards-wrapper list-card-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <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
|
+
{"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, nextTick } from 'vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport CopyToClipboard from '@/components/CopyToClipboard.vue'\nimport Loader from '@/components/Loader.vue'\nimport { useSelection } from '@/composables/useSelection'\nimport { dataCardsSettingsDefaults } from '@/types/data-list'\nimport { getColumnValue } from '@/utils/dataList'\nimport { shortUuid } from '@/utils/dataListConverters'\n\nconst props = withDefaults(\n defineProps<{\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: DataCardsSettings | DataListSettings\n loading?: boolean\n }>(),\n {\n settings: () => ({ ...dataCardsSettingsDefaults }),\n loading: false,\n },\n)\n\nconst emit = defineEmits<{\n 'selection-change': [selected: unknown[]]\n}>()\n\nconst { selectedKeys, toggle: toggleRow } = useSelection(\n () => props.items,\n () => props.config.selectableAttr,\n (s) => emit('selection-change', s),\n)\n\nconst openRowIndexes = ref<Set<number>>(new Set())\n\nconst cardsWrapperRef = ref<HTMLElement | null>(null)\n\nwatch(\n () => props.loading,\n async (isLoading) => {\n if (isLoading) {\n await nextTick()\n cardsWrapperRef.value?.scrollTo({ top: 0, behavior: 'smooth' })\n }\n },\n)\n\nwatch(\n () => props.items,\n () => {\n openRowIndexes.value = new Set()\n },\n)\n\nconst visibleColumns = computed(() => props.config.columns.filter((c) => c.visible !== false))\n\nconst cardHeaderColumns = computed(() => {\n const s = props.settings as any\n if (s?.cardHeaderColumns) {\n const cols = visibleColumns.value.filter((c) => s.cardHeaderColumns[c.property])\n if (cols.length > 0) {\n if (s.cardHeaderOrder) {\n const order = s.cardHeaderOrder as string[]\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n }\n return cols\n }\n }\n const primary = visibleColumns.value.filter((c) => c.primary)\n if (primary.length > 0) return primary\n\n return visibleColumns.value.slice(0, 1)\n})\n\nlet longPressTimer: ReturnType<typeof setTimeout> | null = null\nlet longPressTriggered = false\n\nfunction onPointerDown(e: PointerEvent, item: Record<string, unknown>) {\n if (!props.config.selectableAttr) return\n if (e.button !== 0) return\n longPressTriggered = false\n longPressTimer = setTimeout(() => {\n longPressTriggered = true\n toggleRow(item)\n }, 500)\n}\n\nfunction onPointerUp() {\n if (longPressTimer) {\n clearTimeout(longPressTimer)\n longPressTimer = null\n }\n}\n\nfunction onContextMenu(e: MouseEvent) {\n if (longPressTriggered) {\n e.preventDefault()\n }\n}\n\nfunction onHeaderClick(index: number) {\n if (longPressTriggered) {\n longPressTriggered = false\n return\n }\n toggleAccordion(index)\n}\n\nfunction toggleAccordion(index: number) {\n if (openRowIndexes.value.has(index)) {\n openRowIndexes.value.delete(index)\n } else {\n openRowIndexes.value.add(index)\n }\n openRowIndexes.value = new Set(openRowIndexes.value)\n}\n\n/* function isCardHeaderVNode(value: unknown): boolean {\n return isVNode(value)\n} */\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div\n ref=\"cardsWrapperRef\"\n class=\"c-cards-wrapper list-card-view\"\n :class=\"{ 'is-loading': loading }\"\n >\n <div\n v-if=\"!loading || items.length > 0\"\n class=\"c-cards\"\n :class=\"{ 'is-compact': settings.compact }\"\n >\n <div\n v-for=\"(item, index) in items\"\n :key=\"index\"\n class=\"c-card\"\n :class=\"{\n 'is-open': openRowIndexes.has(index),\n 'is-selected': config.selectableAttr && selectedKeys.has(item[config.selectableAttr]),\n }\"\n >\n <button\n type=\"button\"\n class=\"c-card__header\"\n @click=\"onHeaderClick(index)\"\n @pointerdown=\"onPointerDown($event, item)\"\n @pointerup=\"onPointerUp()\"\n @pointerleave=\"onPointerUp()\"\n @contextmenu=\"onContextMenu\"\n >\n <span\n v-if=\"config.selectableAttr\"\n class=\"c-card__check-zone\"\n @click.stop=\"toggleRow(item)\"\n >\n <Checkbox\n :model-value=\"!!selectedKeys.has(item[config.selectableAttr])\"\n @update:model-value=\"toggleRow(item)\"\n @click.stop\n />\n </span>\n <span class=\"c-card__heading\">\n <span\n v-for=\"(col, i) in cardHeaderColumns\"\n :key=\"col.property\"\n class=\"c-card__heading-item\"\n :class=\"[{ primary: col.primary }, col.headerClass]\"\n >\n <span class=\"c-card__label\">{{ !col.hideHeader ? col.label : '' }}</span>\n <span class=\"c-card__title\" :class=\"{ 'c-truncate': settings.compact && i === 0 }\">\n <component\n v-if=\"isVNode(getColumnValue(item, col))\"\n :is=\"getColumnValue(item, col)\"\n />\n <span\n v-else-if=\"col.type === 'uuid'\"\n v-tooltip=\"getColumnValue(item, col)\"\n v-html=\"shortUuid()(getColumnValue(item, col) as string)\"\n ></span>\n <span v-else v-html=\"getColumnValue(item, col)\"></span>\n </span>\n </span>\n </span>\n <span class=\"c-card__icon\" aria-hidden=\"true\"\n ><i class=\"fa-solid fa-chevron-down\"></i\n ></span>\n </button>\n\n <div v-show=\"openRowIndexes.has(index)\" class=\"c-card__body\">\n <div v-for=\"col in visibleColumns\" :key=\"col.property\" class=\"c-card__field\">\n <span class=\"c-card__field-label\">{{ col.label }}</span>\n <slot :name=\"`cell:${col.property}`\" :item=\"item\" :col=\"col\">\n <DataCell :item=\"item\" :col=\"col\" class=\"c-card__field-value\" :copy=\"false\" />\n </slot>\n\n <CopyToClipboard\n v-if=\"getColumnValue(item, col) && !col.hideCopyToClipboard\"\n class=\"c-card__field-copy click-expand\"\n :value=\"getColumnValue(item, col)\"\n />\n </div>\n\n <div v-if=\"config.actions\" class=\"c-card__actions\" @click.stop>\n <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":""}
|
|
@@ -2,7 +2,7 @@ import { DataListConfig, DataCardsSettings, DataListSettings } from '../../types
|
|
|
2
2
|
export { dataCardsSettingsDefaults } from '../../types/data-list';
|
|
3
3
|
declare const _default: typeof __VLS_export;
|
|
4
4
|
export default _default;
|
|
5
|
-
declare const __VLS_export: import('vue').DefineComponent<{
|
|
5
|
+
declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
|
|
6
6
|
config: DataListConfig;
|
|
7
7
|
items: Record<string, unknown>[];
|
|
8
8
|
settings?: DataCardsSettings | DataListSettings;
|
|
@@ -19,4 +19,14 @@ declare const __VLS_export: import('vue').DefineComponent<{
|
|
|
19
19
|
}>, {
|
|
20
20
|
loading: boolean;
|
|
21
21
|
settings: DataCardsSettings | DataListSettings;
|
|
22
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any
|
|
22
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
|
|
23
|
+
[x: string]: ((props: {
|
|
24
|
+
item: any;
|
|
25
|
+
col: any;
|
|
26
|
+
}) => any) | undefined;
|
|
27
|
+
}>;
|
|
28
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
29
|
+
new (): {
|
|
30
|
+
$slots: S;
|
|
31
|
+
};
|
|
32
|
+
};
|