admins-components 9.0.85 → 9.0.87
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-components103.js +123 -118
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components60.js +1 -0
- package/dist/admins-components60.js.map +1 -1
- package/dist/admins-components68.js +7 -4
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js.map +1 -1
- package/dist/admins-components71.js +5 -2
- package/dist/admins-components71.js.map +1 -1
- package/dist/admins-components73.js.map +1 -1
- package/dist/admins-components75.js +103 -77
- package/dist/admins-components75.js.map +1 -1
- package/dist/admins-components77.js.map +1 -1
- package/dist/admins-components80.js +49 -48
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components82.js.map +1 -1
- package/dist/src/components/data-table/DataCards.vue.d.ts +4 -4
- package/dist/src/components/data-table/DataList.vue.d.ts +4 -0
- package/dist/src/components/data-table/DataPaginator.vue.d.ts +3 -0
- package/dist/src/components/data-table/DataTable.vue.d.ts +4 -4
- package/dist/src/types/data-list.d.ts +2 -1
- package/dist/styles/components/data-table/data-cards.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-list-options.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-list.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-paginator.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/styles/components/data-table/data-table.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/test.html +162 -162
- package/dist/test81.html +160 -160
- package/dist/widget.css +1 -1
- package/package.json +1 -1
|
@@ -6,18 +6,18 @@ import { getDefaultPaginator as i } from "./admins-components80.js";
|
|
|
6
6
|
import a from "./admins-components82.js";
|
|
7
7
|
import { getDefaultSort as o } from "./admins-components83.js";
|
|
8
8
|
import s from "./admins-components85.js";
|
|
9
|
-
import { getDefaultFilterValues as c, getDefaultFilters as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { getDefaultSearch as
|
|
14
|
-
import
|
|
15
|
-
import { computed as
|
|
9
|
+
import { getDefaultFilterValues as c, getDefaultFilters as ee } from "./admins-components87.js";
|
|
10
|
+
import l from "./admins-components93.js";
|
|
11
|
+
import u from "./admins-components96.js";
|
|
12
|
+
import d from "./admins-components99.js";
|
|
13
|
+
import { getDefaultSearch as f } from "./admins-components100.js";
|
|
14
|
+
import te from "./admins-components102.js";
|
|
15
|
+
import { computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createSlots as v, createVNode as y, defineComponent as b, guardReactiveProps as x, mergeDefaults as S, mergeProps as C, normalizeClass as ne, normalizeProps as w, onBeforeUnmount as re, onMounted as ie, openBlock as T, ref as E, renderList as D, renderSlot as O, useSlots as k, withCtx as A } from "vue";
|
|
16
16
|
//#region src/components/data-table/DataList.vue?vue&type=script&setup=true&lang.ts
|
|
17
|
-
var
|
|
17
|
+
var j = { class: "c-data-list__toolbar" }, M = {
|
|
18
18
|
key: 2,
|
|
19
19
|
class: "flex-center gap-1 flex-center-wrap-on-mobile"
|
|
20
|
-
},
|
|
20
|
+
}, N = { class: "c-data-list__toolbar__right" }, P = {
|
|
21
21
|
layoutBreakpoint: 768,
|
|
22
22
|
orderable: !0,
|
|
23
23
|
loading: !1,
|
|
@@ -26,8 +26,8 @@ var M = { class: "c-data-list__toolbar" }, N = {
|
|
|
26
26
|
handleUrl: !1,
|
|
27
27
|
fillHeight: !1
|
|
28
28
|
};
|
|
29
|
-
function
|
|
30
|
-
let n = i(t), r = o(), a =
|
|
29
|
+
function F(e, t) {
|
|
30
|
+
let n = i(t), r = o(), a = f(), s = c(e, t, !0);
|
|
31
31
|
return {
|
|
32
32
|
...n,
|
|
33
33
|
...r,
|
|
@@ -35,9 +35,9 @@ function I(e, t) {
|
|
|
35
35
|
...s
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
|
-
var
|
|
38
|
+
var I = /*@__PURE__*/ b({
|
|
39
39
|
__name: "DataList",
|
|
40
|
-
props: /*@__PURE__*/
|
|
40
|
+
props: /*@__PURE__*/ S({
|
|
41
41
|
config: {},
|
|
42
42
|
items: {},
|
|
43
43
|
settings: {},
|
|
@@ -51,9 +51,10 @@ var L = /*@__PURE__*/ x({
|
|
|
51
51
|
useFilters: { type: Boolean },
|
|
52
52
|
searchConfig: {},
|
|
53
53
|
filterConfig: {},
|
|
54
|
-
fillHeight: { type: Boolean }
|
|
54
|
+
fillHeight: { type: Boolean },
|
|
55
|
+
defaultSort: {}
|
|
55
56
|
}, {
|
|
56
|
-
...
|
|
57
|
+
...P,
|
|
57
58
|
searchConfig: void 0,
|
|
58
59
|
filterConfig: void 0
|
|
59
60
|
}),
|
|
@@ -65,147 +66,149 @@ var L = /*@__PURE__*/ x({
|
|
|
65
66
|
"sort-change",
|
|
66
67
|
"search-change"
|
|
67
68
|
],
|
|
68
|
-
setup(i, { expose: c, emit:
|
|
69
|
-
let
|
|
70
|
-
function
|
|
71
|
-
let t =
|
|
72
|
-
return t && Object.hasOwn(t, "handleUrl") ? t.handleUrl :
|
|
69
|
+
setup(i, { expose: c, emit: f }) {
|
|
70
|
+
let b = E(null), S = k(), P = p(() => !!S.actions), F = i;
|
|
71
|
+
function I(e) {
|
|
72
|
+
let t = F[e];
|
|
73
|
+
return t && Object.hasOwn(t, "handleUrl") ? t.handleUrl : F.handleUrl;
|
|
73
74
|
}
|
|
74
|
-
let
|
|
75
|
-
...
|
|
76
|
-
handleUrl:
|
|
77
|
-
})),
|
|
78
|
-
...
|
|
79
|
-
handleUrl:
|
|
80
|
-
lazy:
|
|
81
|
-
})),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}),
|
|
86
|
-
}),
|
|
87
|
-
let
|
|
88
|
-
let e =
|
|
89
|
-
return e === "table" || e === "cards" ? e :
|
|
90
|
-
}),
|
|
91
|
-
if (!
|
|
92
|
-
let e =
|
|
75
|
+
let L = p(() => ({
|
|
76
|
+
...F.searchConfig,
|
|
77
|
+
handleUrl: I("searchConfig")
|
|
78
|
+
})), R = p(() => ({
|
|
79
|
+
...F.filterConfig,
|
|
80
|
+
handleUrl: I("filterConfig"),
|
|
81
|
+
lazy: H.value == null ? F.filterConfig?.lazy ?? !0 : !H.value.filtersEager
|
|
82
|
+
})), z = f, B = E(!1), V = E(!1), H = E(null), U = E(!1), W = E(null), G = E(!1), K = E(F.filterConfig?.items ? ee(F.filterConfig.items, F.id, !1) : {}), q = null;
|
|
83
|
+
ie(() => {
|
|
84
|
+
q = new ResizeObserver((e) => {
|
|
85
|
+
U.value = (e[0]?.contentRect.width ?? 0) < F.layoutBreakpoint;
|
|
86
|
+
}), W.value && q.observe(W.value);
|
|
87
|
+
}), re(() => q?.disconnect());
|
|
88
|
+
let ae = p(() => {
|
|
89
|
+
let e = H.value?.layout;
|
|
90
|
+
return e === "table" || e === "cards" ? e : U.value ? "cards" : "table";
|
|
91
|
+
}), J = p(() => {
|
|
92
|
+
if (!H.value) return F.config;
|
|
93
|
+
let e = H.value.columnOrder, t = F.config.columns.map((e) => ({
|
|
93
94
|
...e,
|
|
94
|
-
visible:
|
|
95
|
+
visible: H.value.columns[e.property] ?? e.visible !== !1
|
|
95
96
|
}));
|
|
96
97
|
return e?.length && t.sort((t, n) => {
|
|
97
98
|
let r = e.indexOf(t.property), i = e.indexOf(n.property);
|
|
98
99
|
return (r === -1 ? 999 : r) - (i === -1 ? 999 : i);
|
|
99
100
|
}), {
|
|
100
|
-
...
|
|
101
|
+
...F.config,
|
|
101
102
|
columns: t
|
|
102
103
|
};
|
|
103
104
|
});
|
|
104
|
-
function
|
|
105
|
-
|
|
105
|
+
function oe(e) {
|
|
106
|
+
H.value = e, z("settings-change", e);
|
|
106
107
|
}
|
|
107
108
|
c({
|
|
108
|
-
openOptions: () =>
|
|
109
|
-
closeOptions: () =>
|
|
110
|
-
openFilters: () =>
|
|
111
|
-
closeFilters: () =>
|
|
109
|
+
openOptions: () => B.value = !0,
|
|
110
|
+
closeOptions: () => B.value = !1,
|
|
111
|
+
openFilters: () => G.value = !0,
|
|
112
|
+
closeFilters: () => G.value = !1
|
|
112
113
|
});
|
|
113
|
-
async function
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
async function se(e) {
|
|
115
|
+
G.value = !0, setTimeout(() => {
|
|
116
|
+
b.value?.focusFilter(e);
|
|
116
117
|
}, 300);
|
|
117
118
|
}
|
|
118
|
-
function
|
|
119
|
-
|
|
119
|
+
function ce(e) {
|
|
120
|
+
K.value = e.values, z("filter-change", e.transformed);
|
|
120
121
|
}
|
|
121
|
-
let
|
|
122
|
-
|
|
123
|
-
},
|
|
122
|
+
let Y = p(() => Object.values(K.value).filter((e) => e != null && e !== "").length), le = p(() => !!F.pagination && (F.items.length > 0 || !F.loading)), ue = (e) => {
|
|
123
|
+
z("search-change", e);
|
|
124
|
+
}, X = p(() => F.config.columns.filter((e) => e.sort).map((e) => ({
|
|
124
125
|
value: e.property,
|
|
125
126
|
label: e.label
|
|
126
|
-
}))), Q =
|
|
127
|
-
Q.value = e,
|
|
127
|
+
}))), Z = p(() => !!F.config.selectableAttr), Q = E((F.handleUrl ? o() : null) ?? F.defaultSort ?? null), $ = (e) => {
|
|
128
|
+
Q.value = e, z("sort-change", e);
|
|
128
129
|
};
|
|
129
|
-
return (o, c) => (
|
|
130
|
+
return (o, c) => (T(), g("div", {
|
|
130
131
|
ref_key: "root",
|
|
131
|
-
ref:
|
|
132
|
-
class:
|
|
132
|
+
ref: W,
|
|
133
|
+
class: ne(["ac-component c-data-list", { "c-data-list--fill-height": i.fillHeight }])
|
|
133
134
|
}, [
|
|
134
|
-
|
|
135
|
-
i.useSearch ? (
|
|
136
|
-
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (
|
|
135
|
+
_("div", j, [
|
|
136
|
+
i.useSearch ? (T(), m(te, C({ key: 0 }, L.value, { onSearchChange: ue }), null, 16)) : h("", !0),
|
|
137
|
+
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (T(), m(e, {
|
|
137
138
|
key: 1,
|
|
138
139
|
label: "Szűrők",
|
|
139
140
|
icon: "fa-solid fa-filter",
|
|
140
|
-
onClick: c[0] ||= (e) =>
|
|
141
|
+
onClick: c[0] ||= (e) => G.value = !0,
|
|
141
142
|
style: { "flex-shrink": "0" },
|
|
142
|
-
type:
|
|
143
|
-
indicator:
|
|
144
|
-
}, null, 8, ["type", "indicator"])) :
|
|
145
|
-
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (
|
|
146
|
-
filters:
|
|
143
|
+
type: Y.value > 0 ? "primary" : "normal",
|
|
144
|
+
indicator: Y.value > 0 ? Y.value : void 0
|
|
145
|
+
}, null, 8, ["type", "indicator"])) : h("", !0),
|
|
146
|
+
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (T(), g("div", M, [y(u, {
|
|
147
|
+
filters: K.value,
|
|
147
148
|
items: i.filterConfig.items,
|
|
148
149
|
compact: "",
|
|
149
|
-
onRemove: c[1] ||= (e) =>
|
|
150
|
-
onOpenFilter:
|
|
151
|
-
}, null, 8, ["filters", "items"])])) :
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
onRemove: c[1] ||= (e) => b.value?.clearFilter(e),
|
|
151
|
+
onOpenFilter: se
|
|
152
|
+
}, null, 8, ["filters", "items"])])) : h("", !0),
|
|
153
|
+
_("div", N, [
|
|
154
|
+
X.value.length > 0 ? (T(), m(s, {
|
|
154
155
|
key: 0,
|
|
155
156
|
modelValue: Q.value,
|
|
156
157
|
"onUpdate:modelValue": c[2] ||= (e) => Q.value = e,
|
|
157
|
-
options:
|
|
158
|
+
options: X.value,
|
|
158
159
|
"handle-url": i.handleUrl,
|
|
159
160
|
onSortChange: $
|
|
160
161
|
}, null, 8, [
|
|
161
162
|
"modelValue",
|
|
162
163
|
"options",
|
|
163
164
|
"handle-url"
|
|
164
|
-
])) :
|
|
165
|
-
|
|
165
|
+
])) : h("", !0),
|
|
166
|
+
Z.value ? h("", !0) : (T(), m(e, {
|
|
167
|
+
key: 1,
|
|
166
168
|
icon: "fa-solid fa-gear",
|
|
167
169
|
class: "lh-normal settings-btn",
|
|
168
170
|
ariaLabel: "Beállítások",
|
|
169
|
-
onClick: c[3] ||= (e) =>
|
|
170
|
-
}),
|
|
171
|
-
|
|
171
|
+
onClick: c[3] ||= (e) => B.value = !0
|
|
172
|
+
})),
|
|
173
|
+
Z.value ? h("", !0) : (T(), m(e, {
|
|
174
|
+
key: 2,
|
|
172
175
|
icon: "fa-solid fa-question",
|
|
173
176
|
class: "lh-normal",
|
|
174
|
-
onClick: c[4] ||= (e) =>
|
|
177
|
+
onClick: c[4] ||= (e) => V.value = !0,
|
|
175
178
|
ariaLabel: "Súgó"
|
|
176
|
-
})
|
|
179
|
+
}))
|
|
177
180
|
])
|
|
178
181
|
]),
|
|
179
|
-
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (
|
|
182
|
+
i.useFilters && i.filterConfig?.items && i.filterConfig.items.length > 0 ? (T(), m(l, C({
|
|
180
183
|
key: 0,
|
|
181
184
|
ref_key: "dataFiltersRef",
|
|
182
|
-
ref:
|
|
183
|
-
},
|
|
185
|
+
ref: b
|
|
186
|
+
}, R.value, {
|
|
184
187
|
"storage-key": i.id,
|
|
185
|
-
open:
|
|
186
|
-
onClose: c[5] ||= (e) =>
|
|
187
|
-
onChange:
|
|
188
|
-
}), null, 16, ["storage-key", "open"])) :
|
|
189
|
-
|
|
190
|
-
open:
|
|
191
|
-
onClose: c[6] ||= (e) =>
|
|
188
|
+
open: G.value,
|
|
189
|
+
onClose: c[5] ||= (e) => G.value = !1,
|
|
190
|
+
onChange: ce
|
|
191
|
+
}), null, 16, ["storage-key", "open"])) : h("", !0),
|
|
192
|
+
y(d, {
|
|
193
|
+
open: V.value,
|
|
194
|
+
onClose: c[6] ||= (e) => V.value = !1
|
|
192
195
|
}, null, 8, ["open"]),
|
|
193
|
-
|
|
196
|
+
ae.value === "table" ? (T(), m(t, {
|
|
194
197
|
key: 1,
|
|
195
|
-
config:
|
|
198
|
+
config: J.value,
|
|
196
199
|
loading: i.loading,
|
|
197
200
|
items: i.items,
|
|
198
|
-
settings:
|
|
201
|
+
settings: H.value ?? void 0,
|
|
199
202
|
"initial-sort": Q.value,
|
|
200
|
-
onFilterChange: c[7] ||= (e) =>
|
|
201
|
-
onSelectionChange: c[8] ||= (e) =>
|
|
203
|
+
onFilterChange: c[7] ||= (e) => z("filter-change", e),
|
|
204
|
+
onSelectionChange: c[8] ||= (e) => z("selection-change", e),
|
|
202
205
|
onSortChange: $
|
|
203
|
-
},
|
|
206
|
+
}, v({ _: 2 }, [D(J.value.columns, (e) => ({
|
|
204
207
|
name: `cell:${e.property}`,
|
|
205
|
-
fn:
|
|
206
|
-
})),
|
|
208
|
+
fn: A((t) => [O(o.$slots, `cell:${e.property}`, w(x(t)))])
|
|
209
|
+
})), P.value && !Z.value ? {
|
|
207
210
|
name: "actions",
|
|
208
|
-
fn:
|
|
211
|
+
fn: A((e) => [O(o.$slots, "actions", w(x(e)))]),
|
|
209
212
|
key: "0"
|
|
210
213
|
} : void 0]), 1032, [
|
|
211
214
|
"config",
|
|
@@ -213,19 +216,19 @@ var L = /*@__PURE__*/ x({
|
|
|
213
216
|
"items",
|
|
214
217
|
"settings",
|
|
215
218
|
"initial-sort"
|
|
216
|
-
])) : (
|
|
219
|
+
])) : (T(), m(n, {
|
|
217
220
|
key: 2,
|
|
218
|
-
config:
|
|
221
|
+
config: J.value,
|
|
219
222
|
loading: i.loading,
|
|
220
223
|
items: i.items,
|
|
221
|
-
settings:
|
|
222
|
-
onSelectionChange: c[9] ||= (e) =>
|
|
223
|
-
},
|
|
224
|
+
settings: H.value ?? void 0,
|
|
225
|
+
onSelectionChange: c[9] ||= (e) => z("selection-change", e)
|
|
226
|
+
}, v({ _: 2 }, [D(J.value.columns, (e) => ({
|
|
224
227
|
name: `cell:${e.property}`,
|
|
225
|
-
fn:
|
|
226
|
-
})),
|
|
228
|
+
fn: A((t) => [O(o.$slots, `cell:${e.property}`, w(x(t)))])
|
|
229
|
+
})), P.value && !Z.value ? {
|
|
227
230
|
name: "actions",
|
|
228
|
-
fn:
|
|
231
|
+
fn: A((e) => [O(o.$slots, "actions", w(x(e)))]),
|
|
229
232
|
key: "0"
|
|
230
233
|
} : void 0]), 1032, [
|
|
231
234
|
"config",
|
|
@@ -233,25 +236,27 @@ var L = /*@__PURE__*/ x({
|
|
|
233
236
|
"items",
|
|
234
237
|
"settings"
|
|
235
238
|
])),
|
|
236
|
-
i.pagination &&
|
|
239
|
+
i.pagination && le.value ? (T(), m(a, {
|
|
237
240
|
key: 3,
|
|
238
241
|
settings: i.pagination,
|
|
239
242
|
"storage-key": i.id,
|
|
240
243
|
"handle-url": i.handleUrl,
|
|
241
|
-
"
|
|
244
|
+
"font-size": H.value?.fontSize ?? "normal",
|
|
245
|
+
"onUpdate:pagination": c[10] ||= (e) => z("pagination-change", e)
|
|
242
246
|
}, null, 8, [
|
|
243
247
|
"settings",
|
|
244
248
|
"storage-key",
|
|
245
|
-
"handle-url"
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
+
"handle-url",
|
|
250
|
+
"font-size"
|
|
251
|
+
])) : h("", !0),
|
|
252
|
+
y(r, {
|
|
253
|
+
open: B.value,
|
|
249
254
|
columns: i.config.columns,
|
|
250
255
|
settings: i.settings ?? {},
|
|
251
256
|
"storage-key": i.id,
|
|
252
257
|
orderable: i.orderable,
|
|
253
|
-
onClose: c[11] ||= (e) =>
|
|
254
|
-
onChange:
|
|
258
|
+
onClose: c[11] ||= (e) => B.value = !1,
|
|
259
|
+
onChange: oe
|
|
255
260
|
}, null, 8, [
|
|
256
261
|
"open",
|
|
257
262
|
"columns",
|
|
@@ -263,4 +268,4 @@ var L = /*@__PURE__*/ x({
|
|
|
263
268
|
}
|
|
264
269
|
});
|
|
265
270
|
//#endregion
|
|
266
|
-
export {
|
|
271
|
+
export { P as dataListDefaults, I as default, F as getDefaultFetchData };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components103.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.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 { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n props.handleUrl ? getDefaultSort() : null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components103.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.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 { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components105.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.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 { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n props.handleUrl ? getDefaultSort() : null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components105.js","names":[],"sources":["../src/components/data-table/DataList.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type { PaginatorSettings } from '@/types/data-list'\nexport type { DataSearchProps } from './DataSearch.vue'\nexport type { DataFiltersProps } from './DataFilters.vue'\n\nexport interface DataListProps {\n config: DataListConfig\n items: Record<string, unknown>[]\n settings?: Partial<DataListSettings>\n id: string\n layoutBreakpoint?: number\n orderable?: boolean\n pagination?: PaginatorSettings\n loading?: boolean\n handleUrl?: boolean\n useSearch?: boolean\n useFilters?: boolean\n searchConfig?: DataSearchProps\n filterConfig?: DataFiltersProps\n fillHeight?: boolean\n defaultSort?: { key: string; direction: 'asc' | 'desc' } | null\n}\n\nexport const dataListDefaults = {\n layoutBreakpoint: 768,\n orderable: true,\n loading: false,\n useSearch: true,\n useFilters: true,\n handleUrl: false,\n fillHeight: false,\n}\n\nexport function getDefaultFetchData(filters: FilterItem[], storageKey: string) {\n const defaultPaginator = getDefaultPaginator(storageKey)\n const defaultSort = getDefaultSort()\n const defaultSearch = getDefaultSearch()\n const defaultFilters = getDefaultFilterValues(filters, storageKey, true)\n\n return {\n ...defaultPaginator,\n ...defaultSort,\n ...defaultSearch,\n ...defaultFilters,\n }\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onBeforeUnmount, useSlots } from 'vue'\nimport DataTable from '@/components/data-table/DataTable.vue'\nimport DataCards from '@/components/data-table/DataCards.vue'\nimport DataListOptions from '@/components/data-table/DataListOptions.vue'\nimport DataPaginator, { getDefaultPaginator } from '@/components/data-table/DataPaginator.vue'\nimport Button from '@/components/Button.vue'\nimport DataSort, { getDefaultSort, type DataSortOption } from '@/components/data-table/DataSort.vue'\nimport type {\n DataListConfig,\n DataListSettings,\n PageSettings,\n PaginatorSettings,\n} from '@/types/data-list'\nimport type { FilterValue } from '@/types/data-list'\nimport DataFilters, {\n type FilterResponse,\n type DataFiltersProps,\n type FilterItem,\n} from '@/components/data-table/DataFilters.vue'\nimport FilterTags from '@/components/data-table/FilterTags.vue'\nimport DataListGuide from '@/components/data-table/DataListGuide.vue'\nimport DataSearch, { getDefaultSearch, type DataSearchProps } from './DataSearch.vue'\nimport { getDefaultFilters, getDefaultFilterValues } from '@/utils/dataFilters.ts'\n\nconst dataFiltersRef = ref<InstanceType<typeof DataFilters> | null>(null)\nconst slots = useSlots()\nconst hasActionsSlot = computed(() => !!slots.actions)\n\nconst props = withDefaults(defineProps<DataListProps>(), {\n ...dataListDefaults,\n searchConfig: undefined,\n filterConfig: undefined,\n})\n\nfunction resolvedHandleUrl(side: 'searchConfig' | 'filterConfig'): boolean | undefined {\n const sideConfig = props[side]\n if (sideConfig && Object.hasOwn(sideConfig as object, 'handleUrl')) {\n return (sideConfig as { handleUrl?: boolean }).handleUrl\n }\n return props.handleUrl\n}\n\nconst mergedSearchConfig = computed<DataSearchProps>(() => ({\n ...props.searchConfig,\n handleUrl: resolvedHandleUrl('searchConfig'),\n}))\n\nconst mergedFilterConfig = computed<DataFiltersProps>(() => ({\n ...(props.filterConfig as DataFiltersProps),\n handleUrl: resolvedHandleUrl('filterConfig'),\n lazy:\n resolvedSettings.value != null\n ? !resolvedSettings.value.filtersEager\n : (props.filterConfig?.lazy ?? true),\n}))\n\nconst emit = defineEmits<{\n 'filter-change': [filters: Record<string, FilterValue>]\n 'selection-change': [selected: unknown[]]\n 'settings-change': [settings: DataListSettings]\n 'pagination-change': [pagination: PageSettings]\n 'sort-change': [sort: { key: string; direction: 'asc' | 'desc' } | null]\n 'search-change': [filters: Record<string, string | boolean>]\n}>()\n\nconst showOptions = ref(false)\nconst showGuide = ref(false)\nconst resolvedSettings = ref<DataListSettings | null>(null)\nconst isMobile = ref(false)\nconst root = ref<HTMLElement | null>(null)\nconst showFilters = ref(false)\n\nconst activeFilters = ref<Record<string, unknown>>(\n props.filterConfig?.items ? getDefaultFilters(props.filterConfig.items, props.id, false) : {},\n)\nlet resizeObserver: ResizeObserver | null = null\n\nonMounted(() => {\n resizeObserver = new ResizeObserver((entries) => {\n isMobile.value = (entries[0]?.contentRect.width ?? 0) < props.layoutBreakpoint\n })\n if (root.value) resizeObserver.observe(root.value)\n})\n\nonBeforeUnmount(() => resizeObserver?.disconnect())\n\nconst effectiveLayout = computed<'table' | 'cards'>(() => {\n const layout = resolvedSettings.value?.layout\n if (layout === 'table' || layout === 'cards') return layout\n return isMobile.value ? 'cards' : 'table'\n})\n\nconst internalConfig = computed<DataListConfig>(() => {\n if (!resolvedSettings.value) return props.config\n const order = resolvedSettings.value.columnOrder\n const mapped = props.config.columns.map((c) => ({\n ...c,\n visible: resolvedSettings.value!.columns[c.property] ?? c.visible !== false,\n }))\n if (order?.length) {\n mapped.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 { ...props.config, columns: mapped }\n})\n\nfunction onSettingsChange(s: DataListSettings) {\n resolvedSettings.value = s\n emit('settings-change', s)\n}\n\ndefineExpose({\n openOptions: () => (showOptions.value = true),\n closeOptions: () => (showOptions.value = false),\n openFilters: () => (showFilters.value = true),\n closeFilters: () => (showFilters.value = false),\n})\n\nasync function openFilter(key: string) {\n showFilters.value = true\n setTimeout(() => {\n dataFiltersRef.value?.focusFilter(key)\n }, 300)\n}\n\nfunction onFilterChange(response: FilterResponse) {\n activeFilters.value = response.values\n emit('filter-change', response.transformed)\n}\n\nconst activeFiltersCount = computed(\n () => Object.values(activeFilters.value).filter((v) => v != null && v !== '').length,\n)\n\nconst showPaginator = computed(\n () => !!props.pagination && (props.items.length > 0 || !props.loading),\n)\n\nconst searchChange = (value: Record<string, string | boolean>) => {\n emit('search-change', value)\n}\n\nconst sortableColumns = computed<DataSortOption[]>(() =>\n props.config.columns.filter((c) => c.sort).map((c) => ({ value: c.property, label: c.label })),\n)\n\nconst isSelectable = computed<boolean>(() => !!props.config.selectableAttr)\n\nconst currentSort = ref<{ key: string; direction: 'asc' | 'desc' } | null>(\n (props.handleUrl ? getDefaultSort() : null) ?? props.defaultSort ?? null,\n)\n\nconst onSortChange = (sort: { key: string; direction: 'asc' | 'desc' } | null) => {\n currentSort.value = sort\n emit('sort-change', sort)\n}\n</script>\n\n<template>\n <div\n ref=\"root\"\n class=\"ac-component c-data-list\"\n :class=\"{ 'c-data-list--fill-height': fillHeight }\"\n >\n <div class=\"c-data-list__toolbar\">\n <DataSearch v-if=\"useSearch\" v-bind=\"mergedSearchConfig\" @search-change=\"searchChange\" />\n <Button\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n label=\"Szűrők\"\n icon=\"fa-solid fa-filter\"\n @click=\"showFilters = true\"\n style=\"flex-shrink: 0\"\n :type=\"activeFiltersCount > 0 ? 'primary' : 'normal'\"\n :indicator=\"activeFiltersCount > 0 ? activeFiltersCount : undefined\"\n />\n <div\n class=\"flex-center gap-1 flex-center-wrap-on-mobile\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n >\n <FilterTags\n :filters=\"activeFilters\"\n :items=\"filterConfig.items\"\n compact\n @remove=\"(key: string) => dataFiltersRef?.clearFilter(key)\"\n @openFilter=\"openFilter\"\n />\n </div>\n <div class=\"c-data-list__toolbar__right\">\n <DataSort\n v-if=\"sortableColumns.length > 0\"\n v-model=\"currentSort\"\n :options=\"sortableColumns\"\n :handle-url=\"handleUrl\"\n @sort-change=\"onSortChange\"\n />\n\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-gear\"\n class=\"lh-normal settings-btn\"\n ariaLabel=\"Beállítások\"\n @click=\"showOptions = true\"\n />\n <Button\n v-if=\"!isSelectable\"\n icon=\"fa-solid fa-question\"\n class=\"lh-normal\"\n @click=\"showGuide = true\"\n ariaLabel=\"Súgó\"\n />\n </div>\n </div>\n <DataFilters\n ref=\"dataFiltersRef\"\n v-if=\"useFilters && filterConfig?.items && filterConfig.items.length > 0\"\n v-bind=\"mergedFilterConfig\"\n :storage-key=\"id\"\n :open=\"showFilters\"\n @close=\"showFilters = false\"\n @change=\"onFilterChange\"\n />\n <DataListGuide :open=\"showGuide\" @close=\"showGuide = false\" />\n <DataTable\n v-if=\"effectiveLayout === 'table'\"\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n :initial-sort=\"currentSort\"\n @filter-change=\"emit('filter-change', $event)\"\n @selection-change=\"emit('selection-change', $event)\"\n @sort-change=\"onSortChange\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataTable>\n\n <DataCards\n v-else\n :config=\"internalConfig\"\n :loading=\"loading\"\n :items=\"items\"\n :settings=\"resolvedSettings ?? undefined\"\n @selection-change=\"emit('selection-change', $event)\"\n >\n <template\n v-for=\"col in internalConfig.columns\"\n :key=\"col.property\"\n #[`cell:${col.property}`]=\"slotProps\"\n >\n <slot :name=\"`cell:${col.property}`\" v-bind=\"slotProps\" />\n </template>\n <template v-if=\"hasActionsSlot && !isSelectable\" #actions=\"slotProps\">\n <slot name=\"actions\" v-bind=\"slotProps\" />\n </template>\n </DataCards>\n\n <DataPaginator\n v-if=\"pagination && showPaginator\"\n :settings=\"pagination\"\n :storage-key=\"id\"\n :handle-url=\"handleUrl\"\n :font-size=\"resolvedSettings?.fontSize ?? 'normal'\"\n @update:pagination=\"emit('pagination-change', $event)\"\n />\n\n <DataListOptions\n :open=\"showOptions\"\n :columns=\"config.columns\"\n :settings=\"settings ?? {}\"\n :storage-key=\"id\"\n :orderable=\"orderable\"\n @close=\"showOptions = false\"\n @change=\"onSettingsChange\"\n />\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components60.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 filtersEager: boolean\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 hideable?: boolean\n defaultCardHeader?: boolean\n label: string\n property: string\n sort?: Sort | boolean\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 class?: string\n config?: Record<string, any>\n disabled?: (item: any) => boolean\n hidden?: (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 class?: string\n config?: Record<string, any>\n items: Action[]\n disabled?: (item: any) => boolean\n hidden?: (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 // Default is lazy / batched: the filter sidebar only emits when the\n // user clicks \"Szűrés\". Users can opt into eager mode via the\n // \"Azonnali szűrés\" toggle in `DataListOptions`, which flips this\n // to `true` so every filter change emits immediately.\n filtersEager: false,\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"file":"admins-components60.js","names":[],"sources":["../src/types/data-list.ts"],"sourcesContent":["import type { DropdownOption } from '@/components/DropdownSelect.vue'\nimport type { ControlSize, 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 filtersEager: boolean\n fontSize: ControlSize\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 hideable?: boolean\n defaultCardHeader?: boolean\n label: string\n property: string\n sort?: Sort | boolean\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 class?: string\n config?: Record<string, any>\n disabled?: (item: any) => boolean\n hidden?: (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 class?: string\n config?: Record<string, any>\n items: Action[]\n disabled?: (item: any) => boolean\n hidden?: (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 fontSize: 'normal',\n // Default is lazy / batched: the filter sidebar only emits when the\n // user clicks \"Szűrés\". Users can opt into eager mode via the\n // \"Azonnali szűrés\" toggle in `DataListOptions`, which flips this\n // to `true` so every filter change emits immediately.\n filtersEager: false,\n}\n"],"mappings":";AA2GA,IAAa,IAA+C;CAC1D,SAAS;CACT,SAAS;AACX,GAEa,IAA+C,EAC1D,SAAS,GACX,GAEa,IAAsD;CACjE,QAAQ;CACR,SAAS;CACT,UAAU;CAKV,cAAc;AAChB"}
|
|
@@ -80,7 +80,10 @@ var T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
|
80
80
|
}), (r, s) => (_(), l("div", {
|
|
81
81
|
ref_key: "tableWrapperRef",
|
|
82
82
|
ref: B,
|
|
83
|
-
class: h(["ac-component c-table-wrapper list-table-view", {
|
|
83
|
+
class: h(["ac-component c-table-wrapper list-table-view", {
|
|
84
|
+
"is-loading": i.loading,
|
|
85
|
+
[`is-font-${i.settings.fontSize ?? "normal"}`]: !0
|
|
86
|
+
}])
|
|
84
87
|
}, [u("table", { class: h(["c-table", { "is-compact": i.settings.compact }]) }, [u("thead", null, [u("tr", null, [
|
|
85
88
|
i.config.selectableAttr ? (_(), l("th", T, [f(e, {
|
|
86
89
|
"model-value": S(H),
|
|
@@ -106,7 +109,7 @@ var T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
|
106
109
|
"is-desc": z.value?.key === e.property && z.value.direction === "desc"
|
|
107
110
|
}])
|
|
108
111
|
}, null, 2)) : c("", !0)], 10, E))), 128)),
|
|
109
|
-
i.config.actions ? (_(), l("th", D, x(i.config.actionHeader ?? ""), 1)) : c("", !0)
|
|
112
|
+
i.config.actions && !i.config.selectableAttr ? (_(), l("th", D, x(i.config.actionHeader ?? ""), 1)) : c("", !0)
|
|
110
113
|
])]), !i.loading || i.items.length > 0 ? (_(), l("tbody", O, [(_(!0), l(o, null, y(i.items, (t, u) => (_(), l("tr", {
|
|
111
114
|
key: u,
|
|
112
115
|
class: h({
|
|
@@ -140,7 +143,7 @@ var T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
|
140
143
|
"col",
|
|
141
144
|
"copy"
|
|
142
145
|
])])], 2))), 128)),
|
|
143
|
-
i.config.actions ? (_(), l("td", {
|
|
146
|
+
i.config.actions && !i.config.selectableAttr ? (_(), l("td", {
|
|
144
147
|
key: 1,
|
|
145
148
|
class: "c-actions-cell",
|
|
146
149
|
onClick: s[1] ||= w(() => {}, ["stop"])
|
|
@@ -154,7 +157,7 @@ var T = { key: 0 }, E = ["title", "onClick"], D = {
|
|
|
154
157
|
item: t
|
|
155
158
|
}, null, 8, ["actions", "item"])]))])) : c("", !0)
|
|
156
159
|
], 10, k))), 128))])) : (_(), l("tbody", M, [u("tr", N, [u("td", {
|
|
157
|
-
colspan: G.value.length + +!!i.config.selectableAttr +
|
|
160
|
+
colspan: G.value.length + +!!i.config.selectableAttr + (i.config.actions && !i.config.selectableAttr ? 1 : 0),
|
|
158
161
|
class: "c-table__loading-cell"
|
|
159
162
|
}, [u("div", F, [f(t, {
|
|
160
163
|
loading: !0,
|