admins-components 9.0.23 → 9.0.25
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/README.md +15 -65
- package/dist/admins-components15.js +17 -23
- package/dist/admins-components15.js.map +1 -1
- package/dist/admins-components153.js.map +1 -1
- package/dist/admins-components157.js +3 -3
- package/dist/admins-components157.js.map +1 -1
- package/dist/admins-components158.js.map +1 -1
- package/dist/admins-components16.js.map +1 -1
- package/dist/admins-components160.js.map +1 -1
- package/dist/admins-components162.js.map +1 -1
- package/dist/admins-components163.js.map +1 -1
- package/dist/admins-components164.js.map +1 -1
- package/dist/admins-components166.js.map +1 -1
- package/dist/admins-components169.js +2 -2
- package/dist/admins-components169.js.map +1 -1
- package/dist/admins-components20.js +87 -87
- package/dist/admins-components20.js.map +1 -1
- package/dist/admins-components22.js.map +1 -1
- package/dist/admins-components69.js +1 -0
- package/dist/admins-components69.js.map +1 -1
- package/dist/admins-components71.js.map +1 -1
- package/dist/admins-components78.js +93 -89
- package/dist/admins-components78.js.map +1 -1
- package/dist/admins-components80.js.map +1 -1
- package/dist/admins-components87.js +26 -35
- package/dist/admins-components87.js.map +1 -1
- package/dist/admins-components89.js.map +1 -1
- package/dist/main.css +1 -0
- package/dist/main.css.map +1 -0
- package/dist/src/styles/components/data-table/data-paginator.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/vueformelements/ArticlePickerElement.vue_vue_type_style_index_0_scoped_43c54caa_lang.css +1 -0
- package/dist/src/vueformelements/PartnerPickerElement.vue_vue_type_style_index_0_scoped_09bea4ae_lang.css +1 -0
- package/package.json +3 -3
- package/dist/base.css +0 -1
- package/dist/base.css.map +0 -1
- package/dist/src/services/articleEditorService_short_try.d.ts +0 -43
- package/dist/src/vueformelements/ArticlePickerElement.vue_vue_type_style_index_0_scoped_035d2808_lang.css +0 -1
- package/dist/src/vueformelements/PartnerPickerElement.vue_vue_type_style_index_0_scoped_64cb4d6e_lang.css +0 -1
|
@@ -9,28 +9,28 @@ import { debounce as s } from "./admins-components76.js";
|
|
|
9
9
|
import { filterEmptyValues as c, getFilterParams as l, writeFilterParams as u } from "./admins-components77.js";
|
|
10
10
|
import { Fragment as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeProps as v, normalizeClass as y, onMounted as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, watch as E, withCtx as D } from "vue";
|
|
11
11
|
//#region src/components/data-table/DataFilters.vue?vue&type=script&setup=true&lang.ts
|
|
12
|
-
var
|
|
12
|
+
var ee = { class: "data-filters" }, te = {
|
|
13
13
|
key: 0,
|
|
14
14
|
class: "data-filters__separator"
|
|
15
|
-
},
|
|
15
|
+
}, O = ["for"], k = [
|
|
16
16
|
"placeholder",
|
|
17
17
|
"value",
|
|
18
18
|
"id",
|
|
19
19
|
"onInput"
|
|
20
|
-
],
|
|
20
|
+
], A = ["for"], j = [
|
|
21
21
|
"placeholder",
|
|
22
22
|
"value",
|
|
23
23
|
"id",
|
|
24
24
|
"onInput"
|
|
25
|
-
], N = [
|
|
25
|
+
], M = ["for"], N = [
|
|
26
26
|
"placeholder",
|
|
27
27
|
"value",
|
|
28
28
|
"id",
|
|
29
29
|
"onInput"
|
|
30
|
-
], P = { class: "data-filters__footer" },
|
|
30
|
+
], P = ["for"], F = { class: "c-label" }, I = { class: "c-label" }, L = { class: "data-filters__footer" }, R = {
|
|
31
31
|
key: 0,
|
|
32
32
|
class: "separator my-3"
|
|
33
|
-
},
|
|
33
|
+
}, z = /* @__PURE__ */ _({
|
|
34
34
|
__name: "DataFilters",
|
|
35
35
|
props: {
|
|
36
36
|
open: {
|
|
@@ -54,19 +54,19 @@ var O = { class: "data-filters" }, k = {
|
|
|
54
54
|
storageKey: {}
|
|
55
55
|
},
|
|
56
56
|
emits: ["close", "change"],
|
|
57
|
-
setup(_, { expose:
|
|
58
|
-
let
|
|
59
|
-
function
|
|
60
|
-
t ?
|
|
57
|
+
setup(_, { expose: z, emit: B }) {
|
|
58
|
+
let V = _, H = B, U = S(l(V.items) ?? {}), W = S({});
|
|
59
|
+
function G(e, t) {
|
|
60
|
+
t ? W.value[e] = t : delete W.value[e];
|
|
61
61
|
}
|
|
62
|
-
function
|
|
62
|
+
function K(e) {
|
|
63
63
|
return {
|
|
64
64
|
...e.config ?? {},
|
|
65
65
|
showTime: e.type === "datetime",
|
|
66
66
|
placeholder: e.placeholder ?? (e.type === "datetime" ? "Időpont" : "Dátum")
|
|
67
67
|
};
|
|
68
68
|
}
|
|
69
|
-
function
|
|
69
|
+
function q(e) {
|
|
70
70
|
return {
|
|
71
71
|
...e.config ?? {},
|
|
72
72
|
...e.fullWidth ? {} : { compact: !0 },
|
|
@@ -74,22 +74,22 @@ var O = { class: "data-filters" }, k = {
|
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
b(() => {
|
|
77
|
-
if (!
|
|
78
|
-
let e = l(
|
|
79
|
-
e && Object.keys(e).length > 0 && (
|
|
80
|
-
...
|
|
77
|
+
if (!V.handleUrl) return;
|
|
78
|
+
let e = l(V.items);
|
|
79
|
+
e && Object.keys(e).length > 0 && (U.value = {
|
|
80
|
+
...U.value,
|
|
81
81
|
...e
|
|
82
82
|
});
|
|
83
83
|
});
|
|
84
|
-
function
|
|
85
|
-
|
|
86
|
-
...
|
|
84
|
+
function J(e, t) {
|
|
85
|
+
U.value = {
|
|
86
|
+
...U.value,
|
|
87
87
|
[e]: t
|
|
88
|
-
},
|
|
88
|
+
}, V.lazy || (V.handleUrl && u(V.items, U.value), H("change", Y()));
|
|
89
89
|
}
|
|
90
|
-
function
|
|
91
|
-
let e =
|
|
92
|
-
let n =
|
|
90
|
+
function Y() {
|
|
91
|
+
let e = V.items.reduce((e, t) => {
|
|
92
|
+
let n = U.value[t.key];
|
|
93
93
|
return t.transformer ? {
|
|
94
94
|
...e,
|
|
95
95
|
...t.transformer(n) ?? {}
|
|
@@ -99,34 +99,34 @@ var O = { class: "data-filters" }, k = {
|
|
|
99
99
|
};
|
|
100
100
|
}, {});
|
|
101
101
|
return {
|
|
102
|
-
values: c(
|
|
102
|
+
values: c(U.value),
|
|
103
103
|
transformed: c(e)
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
|
-
let
|
|
107
|
-
|
|
106
|
+
let X = s((e, t) => {
|
|
107
|
+
J(e, t);
|
|
108
108
|
});
|
|
109
|
-
function
|
|
110
|
-
|
|
109
|
+
function Z() {
|
|
110
|
+
V.handleUrl && u(V.items, U.value), H("change", Y()), H("close");
|
|
111
111
|
}
|
|
112
|
-
function
|
|
113
|
-
|
|
112
|
+
function ne() {
|
|
113
|
+
U.value = {}, V.handleUrl && u(V.items, U.value), H("change", Y());
|
|
114
114
|
}
|
|
115
|
-
let
|
|
116
|
-
E(
|
|
117
|
-
|
|
115
|
+
let Q = S(!1);
|
|
116
|
+
E(U, (e) => {
|
|
117
|
+
Q.value = Object.values(e).some((e) => e !== null && e !== "" && e !== void 0);
|
|
118
118
|
}, {
|
|
119
119
|
deep: !0,
|
|
120
120
|
immediate: !0
|
|
121
121
|
});
|
|
122
|
-
function
|
|
123
|
-
|
|
124
|
-
...
|
|
122
|
+
function re(e) {
|
|
123
|
+
U.value = {
|
|
124
|
+
...U.value,
|
|
125
125
|
[e]: null
|
|
126
|
-
},
|
|
126
|
+
}, V.handleUrl && u(V.items, U.value), H("change", Y());
|
|
127
127
|
}
|
|
128
|
-
function
|
|
129
|
-
let t =
|
|
128
|
+
function ie(e) {
|
|
129
|
+
let t = W.value[e];
|
|
130
130
|
if (t) {
|
|
131
131
|
if (typeof t.focusAndOpen == "function") {
|
|
132
132
|
t.focusAndOpen();
|
|
@@ -136,93 +136,97 @@ var O = { class: "data-filters" }, k = {
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
function $(e) {
|
|
139
|
-
let t = { ...
|
|
140
|
-
for (let n of
|
|
141
|
-
|
|
139
|
+
let t = { ...U.value };
|
|
140
|
+
for (let n of V.items) n.type !== "separator" && n.key in e && (t[n.key] = e[n.key] ?? null);
|
|
141
|
+
U.value = t, V.handleUrl && u(V.items, U.value), H("change", Y());
|
|
142
142
|
}
|
|
143
|
-
return
|
|
144
|
-
clearFilter:
|
|
145
|
-
focusFilter:
|
|
143
|
+
return z({
|
|
144
|
+
clearFilter: re,
|
|
145
|
+
focusFilter: ie
|
|
146
146
|
}), (s, c) => (x(), f(a, {
|
|
147
147
|
open: _.open,
|
|
148
148
|
title: "Szűrők",
|
|
149
149
|
position: _.position,
|
|
150
|
-
onClose: c[0] ||= (e) =>
|
|
150
|
+
onClose: c[0] ||= (e) => H("close")
|
|
151
151
|
}, {
|
|
152
152
|
default: D(() => [
|
|
153
|
-
h("div",
|
|
153
|
+
h("div", ee, [(x(!0), m(d, null, C(_.items, (e) => (x(), m("div", {
|
|
154
154
|
key: e.key,
|
|
155
155
|
class: y(["data-filters__field", { "data-filters__field--full": e.fullWidth || e.type === "separator" }])
|
|
156
|
-
}, [e.type === "separator" ? (x(), m("hr",
|
|
156
|
+
}, [e.type === "separator" ? (x(), m("hr", te)) : e.type === "checkbox" ? (x(), f(n, v({
|
|
157
157
|
key: 1,
|
|
158
158
|
ref_for: !0,
|
|
159
|
-
ref: (t) =>
|
|
160
|
-
"model-value":
|
|
159
|
+
ref: (t) => G(e.key, t),
|
|
160
|
+
"model-value": U.value[e.key] ?? !1,
|
|
161
161
|
label: e.label ?? e.key,
|
|
162
|
-
"onUpdate:modelValue": (t) =>
|
|
162
|
+
"onUpdate:modelValue": (t) => J(e.key, t)
|
|
163
163
|
}, { ref_for: !0 }, e.config), null, 16, [
|
|
164
164
|
"model-value",
|
|
165
165
|
"label",
|
|
166
166
|
"onUpdate:modelValue"
|
|
167
|
-
])) : (x(), m(d, { key: 2 }, [h("label", {
|
|
167
|
+
])) : (x(), m(d, { key: 2 }, [e.type === "text" ? (x(), m(d, { key: 0 }, [h("label", {
|
|
168
168
|
class: "c-label",
|
|
169
169
|
for: `df-${e.key}`
|
|
170
|
-
}, w(e.label ?? e.key), 9,
|
|
170
|
+
}, w(e.label ?? e.key), 9, O), e.type === "text" ? (x(), m("input", v({
|
|
171
171
|
key: 0,
|
|
172
172
|
type: "text",
|
|
173
173
|
class: "c-input-row",
|
|
174
174
|
placeholder: e.placeholder,
|
|
175
|
-
value:
|
|
175
|
+
value: U.value[e.key] ?? "",
|
|
176
176
|
ref_for: !0,
|
|
177
|
-
ref: (t) =>
|
|
177
|
+
ref: (t) => G(e.key, t),
|
|
178
178
|
id: `df-${e.key}`,
|
|
179
|
-
onInput: (t) => T(
|
|
180
|
-
}, { ref_for: !0 }, e.config), null, 16,
|
|
181
|
-
|
|
179
|
+
onInput: (t) => T(X)(e.key, t.target.value || null)
|
|
180
|
+
}, { ref_for: !0 }, e.config), null, 16, k)) : p("", !0)], 64)) : e.type === "textarea" ? (x(), m(d, { key: 1 }, [h("label", {
|
|
181
|
+
class: "c-label",
|
|
182
|
+
for: `df-${e.key}`
|
|
183
|
+
}, w(e.label ?? e.key), 9, A), h("textarea", v({
|
|
182
184
|
class: "c-input-row data-filters__textarea",
|
|
183
185
|
placeholder: e.placeholder,
|
|
184
|
-
value:
|
|
186
|
+
value: U.value[e.key] ?? "",
|
|
185
187
|
ref_for: !0,
|
|
186
|
-
ref: (t) =>
|
|
188
|
+
ref: (t) => G(e.key, t),
|
|
187
189
|
id: `df-${e.key}`
|
|
188
|
-
}, { ref_for: !0 }, e.config, { onInput: (t) => T(
|
|
189
|
-
|
|
190
|
+
}, { ref_for: !0 }, e.config, { onInput: (t) => T(X)(e.key, t.target.value || null) }), null, 16, j)], 64)) : e.type === "number" ? (x(), m(d, { key: 2 }, [h("label", {
|
|
191
|
+
class: "c-label",
|
|
192
|
+
for: `df-${e.key}`
|
|
193
|
+
}, w(e.label ?? e.key), 9, M), h("input", v({
|
|
190
194
|
type: "number",
|
|
191
195
|
class: "c-input-row",
|
|
192
196
|
placeholder: e.placeholder,
|
|
193
|
-
value:
|
|
197
|
+
value: U.value[e.key] ?? "",
|
|
194
198
|
ref_for: !0,
|
|
195
|
-
ref: (t) =>
|
|
199
|
+
ref: (t) => G(e.key, t),
|
|
196
200
|
id: `df-${e.key}`
|
|
197
|
-
}, { ref_for: !0 }, e.config, { onInput: (t) => T(
|
|
198
|
-
|
|
201
|
+
}, { ref_for: !0 }, e.config, { onInput: (t) => T(X)(e.key, t.target.value ? Number(t.target.value) : null) }), null, 16, N)], 64)) : e.type === "date" || e.type === "datetime" ? (x(), m(d, { key: 3 }, [h("label", {
|
|
202
|
+
class: "c-label",
|
|
203
|
+
for: `df-${e.key}`
|
|
204
|
+
}, w(e.label ?? e.key), 9, P), g(t, {
|
|
199
205
|
ref_for: !0,
|
|
200
|
-
ref: (t) =>
|
|
206
|
+
ref: (t) => G(e.key, t),
|
|
201
207
|
id: `df-${e.key}`,
|
|
202
|
-
"model-value":
|
|
203
|
-
config:
|
|
204
|
-
"onUpdate:modelValue": (t) =>
|
|
208
|
+
"model-value": U.value[e.key] ?? null,
|
|
209
|
+
config: K(e),
|
|
210
|
+
"onUpdate:modelValue": (t) => J(e.key, t)
|
|
205
211
|
}, null, 8, [
|
|
206
212
|
"id",
|
|
207
213
|
"model-value",
|
|
208
214
|
"config",
|
|
209
215
|
"onUpdate:modelValue"
|
|
210
|
-
])) : e.type === "daterange" || e.type === "datetimerange" ? (x(),
|
|
211
|
-
key: 4,
|
|
216
|
+
])], 64)) : e.type === "daterange" || e.type === "datetimerange" ? (x(), m(d, { key: 4 }, [h("span", F, w(e.label ?? e.key), 1), g(r, {
|
|
212
217
|
ref_for: !0,
|
|
213
|
-
ref: (t) =>
|
|
214
|
-
"model-value":
|
|
215
|
-
config:
|
|
216
|
-
"onUpdate:modelValue": (t) =>
|
|
218
|
+
ref: (t) => G(e.key, t),
|
|
219
|
+
"model-value": U.value[e.key] ?? null,
|
|
220
|
+
config: q(e),
|
|
221
|
+
"onUpdate:modelValue": (t) => J(e.key, t)
|
|
217
222
|
}, null, 8, [
|
|
218
223
|
"model-value",
|
|
219
224
|
"config",
|
|
220
225
|
"onUpdate:modelValue"
|
|
221
|
-
])) : e.type === "dropdown" ? (x(),
|
|
222
|
-
key: 5,
|
|
226
|
+
])], 64)) : e.type === "dropdown" ? (x(), m(d, { key: 5 }, [h("span", I, w(e.label ?? e.key), 1), g(i, {
|
|
223
227
|
ref_for: !0,
|
|
224
|
-
ref: (t) =>
|
|
225
|
-
"model-value":
|
|
228
|
+
ref: (t) => G(e.key, t),
|
|
229
|
+
"model-value": U.value[e.key] ?? null,
|
|
226
230
|
options: e.options ?? [],
|
|
227
231
|
config: {
|
|
228
232
|
...e.config ?? {},
|
|
@@ -230,31 +234,31 @@ var O = { class: "data-filters" }, k = {
|
|
|
230
234
|
clearable: !0,
|
|
231
235
|
filterable: !0
|
|
232
236
|
},
|
|
233
|
-
"onUpdate:modelValue": (t) =>
|
|
237
|
+
"onUpdate:modelValue": (t) => J(e.key, t)
|
|
234
238
|
}, null, 8, [
|
|
235
239
|
"model-value",
|
|
236
240
|
"options",
|
|
237
241
|
"config",
|
|
238
242
|
"onUpdate:modelValue"
|
|
239
|
-
])) : p("", !0)], 64))], 2))), 128))]),
|
|
240
|
-
h("div",
|
|
243
|
+
])], 64)) : p("", !0)], 64))], 2))), 128))]),
|
|
244
|
+
h("div", L, [g(e, {
|
|
241
245
|
icon: "fa-solid fa-trash-can",
|
|
242
|
-
disabled: !
|
|
246
|
+
disabled: !Q.value,
|
|
243
247
|
label: "Szűrők törlése",
|
|
244
248
|
"aria-label": "Szűrők törlése",
|
|
245
249
|
size: "small",
|
|
246
|
-
onClick:
|
|
250
|
+
onClick: ne
|
|
247
251
|
}, null, 8, ["disabled"]), g(e, {
|
|
248
252
|
label: "Szűrés",
|
|
249
253
|
"aria-label": "Szűrés",
|
|
250
254
|
type: "success",
|
|
251
|
-
onClick:
|
|
255
|
+
onClick: Z
|
|
252
256
|
})]),
|
|
253
|
-
_.historyEnabled ? (x(), m("hr",
|
|
257
|
+
_.historyEnabled ? (x(), m("hr", R)) : p("", !0),
|
|
254
258
|
_.historyEnabled ? (x(), f(o, {
|
|
255
259
|
key: 1,
|
|
256
260
|
items: _.items,
|
|
257
|
-
values:
|
|
261
|
+
values: U.value,
|
|
258
262
|
"storage-key": _.storageKey,
|
|
259
263
|
onLoad: $,
|
|
260
264
|
onChange: $
|
|
@@ -269,4 +273,4 @@ var O = { class: "data-filters" }, k = {
|
|
|
269
273
|
}
|
|
270
274
|
});
|
|
271
275
|
//#endregion
|
|
272
|
-
export {
|
|
276
|
+
export { z as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components78.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport { debounce } from '@/utils/debounce'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getFilterParams, writeFilterParams } from '@/utils/dataFilters'\n\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean\n items: FilterItem[]\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n }>(),\n {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n },\n)\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getFilterParams(props.items) ?? {})\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) {\n filterRefs.value[key] = el\n } else {\n delete filterRefs.value[key]\n }\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n const fromUrl = getFilterParams(props.items)\n if (fromUrl && Object.keys(fromUrl).length > 0) {\n values.value = { ...values.value, ...fromUrl }\n }\n})\n\nfunction update(key: string, value: any) {\n values.value = { ...values.value, [key]: value }\n\n if (!props.lazy) {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n }\n}\n\nfunction buildResponseEmit() {\n const transformedValues = props.items.reduce((acc, item) => {\n const val = values.value[item.key]\n if (item.transformer) {\n return { ...acc, ...(item.transformer(val) ?? {}) }\n }\n return { ...acc, [item.key]: val }\n }, {})\n return {\n values: filterEmptyValues(values.value),\n transformed: filterEmptyValues(transformedValues),\n }\n}\n\nconst debouncedUpdate = debounce((key: string, value: any) => {\n update(key, value)\n})\n\nfunction confirm() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n emit('close')\n}\n\n/* function reset() {\n values.value = getDefaults()\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', filterEmptyValues(values.value))\n} */\n\nfunction clearAll() {\n values.value = {}\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n}\n\nconst hasActiveFilters = ref(false)\nwatch(\n values,\n (v) => {\n hasActiveFilters.value = Object.values(v).some(\n (val) => val !== null && val !== '' && val !== undefined,\n )\n },\n { deep: true, immediate: true },\n)\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\nfunction focusFilter(key: string) {\n const ref = (filterRefs.value as Record<string, any>)[key]\n if (!ref) return\n\n if (typeof ref.focusAndOpen === 'function') {\n ref.focusAndOpen()\n return\n }\n if (typeof ref.focus === 'function') {\n ref.focus()\n }\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) {\n next[item.key] = loaded[item.key] ?? null\n }\n }\n values.value = next\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\ndefineExpose({ clearFilter, focusFilter })\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item.key, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else>\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n\n <input\n v-if=\"item.type === 'text'\"\n type=\"text\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLInputElement).value || null)\"\n v-bind=\"item.config\"\n />\n\n <textarea\n v-else-if=\"item.type === 'textarea'\"\n class=\"c-input-row data-filters__textarea\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLTextAreaElement).value || null)\"\n />\n\n <input\n v-else-if=\"item.type === 'number'\"\n type=\"number\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(\n item.key,\n ($event.target as HTMLInputElement).value\n ? Number(($event.target as HTMLInputElement).value)\n : null,\n )\n \"\n />\n\n <DatePicker\n v-else-if=\"item.type === 'date' || item.type === 'datetime'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n\n <DateRangePicker\n v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n\n <DropdownSelect\n v-else-if=\"item.type === 'dropdown'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as string) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <!-- <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Alaphelyzet visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n /> -->\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <hr v-if=\"historyEnabled\" class=\"separator my-3\" />\n <FiltersHistory\n v-if=\"historyEnabled\"\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n @change=\"onHistoryLoad\"\n />\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components78.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport { debounce } from '@/utils/debounce'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getFilterParams, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean\n items: FilterItem[]\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n }>(),\n {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n },\n)\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getFilterParams(props.items) ?? {})\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) {\n filterRefs.value[key] = el\n } else {\n delete filterRefs.value[key]\n }\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n const fromUrl = getFilterParams(props.items)\n if (fromUrl && Object.keys(fromUrl).length > 0) {\n values.value = { ...values.value, ...fromUrl }\n }\n})\n\nfunction update(key: string, value: any) {\n values.value = { ...values.value, [key]: value }\n\n if (!props.lazy) {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n }\n}\n\nfunction buildResponseEmit() {\n const transformedValues = props.items.reduce((acc, item) => {\n const val = values.value[item.key]\n if (item.transformer) {\n return { ...acc, ...(item.transformer(val) ?? {}) }\n }\n return { ...acc, [item.key]: val }\n }, {})\n return {\n values: filterEmptyValues(values.value),\n transformed: filterEmptyValues(transformedValues),\n }\n}\n\nconst debouncedUpdate = debounce((key: string, value: any) => {\n update(key, value)\n})\n\nfunction confirm() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n emit('close')\n}\n\n/* function reset() {\n values.value = getDefaults()\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', filterEmptyValues(values.value))\n} */\n\nfunction clearAll() {\n values.value = {}\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n}\n\nconst hasActiveFilters = ref(false)\nwatch(\n values,\n (v) => {\n hasActiveFilters.value = Object.values(v).some(\n (val) => val !== null && val !== '' && val !== undefined,\n )\n },\n { deep: true, immediate: true },\n)\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\nfunction focusFilter(key: string) {\n const ref = (filterRefs.value as Record<string, any>)[key]\n if (!ref) return\n\n if (typeof ref.focusAndOpen === 'function') {\n ref.focusAndOpen()\n return\n }\n if (typeof ref.focus === 'function') {\n ref.focus()\n }\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) {\n next[item.key] = loaded[item.key] ?? null\n }\n }\n values.value = next\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\ndefineExpose({ clearFilter, focusFilter })\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item.key, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else>\n <template v-if=\"item.type === 'text'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <input\n v-if=\"item.type === 'text'\"\n type=\"text\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLInputElement).value || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'textarea'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <textarea\n class=\"c-input-row data-filters__textarea\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(item.key, ($event.target as HTMLTextAreaElement).value || null)\n \"\n />\n </template>\n <template v-else-if=\"item.type === 'number'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <input\n type=\"number\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(\n item.key,\n ($event.target as HTMLInputElement).value\n ? Number(($event.target as HTMLInputElement).value)\n : null,\n )\n \"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as string) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <!-- <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Alaphelyzet visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n /> -->\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <hr v-if=\"historyEnabled\" class=\"separator my-3\" />\n <FiltersHistory\n v-if=\"historyEnabled\"\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n @change=\"onHistoryLoad\"\n />\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport { debounce } from '@/utils/debounce'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getFilterParams, writeFilterParams } from '@/utils/dataFilters'\n\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean\n items: FilterItem[]\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n }>(),\n {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n },\n)\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getFilterParams(props.items) ?? {})\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) {\n filterRefs.value[key] = el\n } else {\n delete filterRefs.value[key]\n }\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n const fromUrl = getFilterParams(props.items)\n if (fromUrl && Object.keys(fromUrl).length > 0) {\n values.value = { ...values.value, ...fromUrl }\n }\n})\n\nfunction update(key: string, value: any) {\n values.value = { ...values.value, [key]: value }\n\n if (!props.lazy) {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n }\n}\n\nfunction buildResponseEmit() {\n const transformedValues = props.items.reduce((acc, item) => {\n const val = values.value[item.key]\n if (item.transformer) {\n return { ...acc, ...(item.transformer(val) ?? {}) }\n }\n return { ...acc, [item.key]: val }\n }, {})\n return {\n values: filterEmptyValues(values.value),\n transformed: filterEmptyValues(transformedValues),\n }\n}\n\nconst debouncedUpdate = debounce((key: string, value: any) => {\n update(key, value)\n})\n\nfunction confirm() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n emit('close')\n}\n\n/* function reset() {\n values.value = getDefaults()\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', filterEmptyValues(values.value))\n} */\n\nfunction clearAll() {\n values.value = {}\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n}\n\nconst hasActiveFilters = ref(false)\nwatch(\n values,\n (v) => {\n hasActiveFilters.value = Object.values(v).some(\n (val) => val !== null && val !== '' && val !== undefined,\n )\n },\n { deep: true, immediate: true },\n)\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\nfunction focusFilter(key: string) {\n const ref = (filterRefs.value as Record<string, any>)[key]\n if (!ref) return\n\n if (typeof ref.focusAndOpen === 'function') {\n ref.focusAndOpen()\n return\n }\n if (typeof ref.focus === 'function') {\n ref.focus()\n }\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) {\n next[item.key] = loaded[item.key] ?? null\n }\n }\n values.value = next\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\ndefineExpose({ clearFilter, focusFilter })\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item.key, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else>\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n\n <input\n v-if=\"item.type === 'text'\"\n type=\"text\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLInputElement).value || null)\"\n v-bind=\"item.config\"\n />\n\n <textarea\n v-else-if=\"item.type === 'textarea'\"\n class=\"c-input-row data-filters__textarea\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLTextAreaElement).value || null)\"\n />\n\n <input\n v-else-if=\"item.type === 'number'\"\n type=\"number\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(\n item.key,\n ($event.target as HTMLInputElement).value\n ? Number(($event.target as HTMLInputElement).value)\n : null,\n )\n \"\n />\n\n <DatePicker\n v-else-if=\"item.type === 'date' || item.type === 'datetime'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n\n <DateRangePicker\n v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n\n <DropdownSelect\n v-else-if=\"item.type === 'dropdown'\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as string) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <!-- <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Alaphelyzet visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n /> -->\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <hr v-if=\"historyEnabled\" class=\"separator my-3\" />\n <FiltersHistory\n v-if=\"historyEnabled\"\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n @change=\"onHistoryLoad\"\n />\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components80.js","names":[],"sources":["../src/components/data-table/DataFilters.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DropdownOption } from '@/components/DropdownSelect.vue'\n\nexport interface FilterItem {\n type: FilterItemType\n key: string\n label?: string\n placeholder?: string\n value?: any\n options?: DropdownOption[]\n fullWidth?: boolean\n config?: Record<string, any>\n displayClass?: string\n transformer?: (value: any) => Record<string, any> | null | undefined\n}\n\nexport interface FilterResponse {\n values: Record<string, any>\n transformed: Record<string, any>\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, watch, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\nimport DatePicker from '@/components/DatePicker.vue'\nimport DateRangePicker from '@/components/DateRangePicker.vue'\nimport DropdownSelect from '@/components/DropdownSelect.vue'\nimport Button from '@/components/Button.vue'\nimport Checkbox from '@/components/Checkbox.vue'\nimport FiltersHistory from '@/components/data-table/FiltersHistory.vue'\nimport { debounce } from '@/utils/debounce'\nimport type { DatePickerConfig, DateRangePickerConfig } from '@/types/datepickers'\nimport type { FilterItemType, PickedDate, PickedUtcRange } from '@/types/types'\nimport { filterEmptyValues, getFilterParams, writeFilterParams } from '@/utils/dataFilters'\n\nconst props = withDefaults(\n defineProps<{\n open?: boolean\n items: FilterItem[]\n position?: SidebarPosition\n lazy?: boolean\n handleUrl?: boolean\n historyEnabled?: boolean\n storageKey?: string\n }>(),\n {\n open: false,\n position: 'left',\n lazy: true,\n handleUrl: false,\n historyEnabled: true,\n },\n)\n\nconst emit = defineEmits<{\n close: []\n change: [response: FilterResponse]\n}>()\n\nconst values = ref<Record<string, any>>(getFilterParams(props.items) ?? {})\nconst filterRefs = ref<Record<string, any>>({})\n\nfunction setFilterRef(key: string, el: any) {\n if (el) {\n filterRefs.value[key] = el\n } else {\n delete filterRefs.value[key]\n }\n}\n\nfunction buildDatePickerConfig(item: FilterItem): DatePickerConfig {\n return {\n ...(item.config ?? {}),\n showTime: item.type === 'datetime',\n placeholder: item.placeholder ?? (item.type === 'datetime' ? 'Időpont' : 'Dátum'),\n }\n}\n\nfunction buildDateRangePickerConfig(item: FilterItem): DateRangePickerConfig {\n return {\n ...(item.config ?? {}),\n ...(!item.fullWidth ? { compact: true } : {}),\n showTime: item.type === 'datetimerange',\n }\n}\n\nonMounted(() => {\n if (!props.handleUrl) return\n const fromUrl = getFilterParams(props.items)\n if (fromUrl && Object.keys(fromUrl).length > 0) {\n values.value = { ...values.value, ...fromUrl }\n }\n})\n\nfunction update(key: string, value: any) {\n values.value = { ...values.value, [key]: value }\n\n if (!props.lazy) {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n }\n}\n\nfunction buildResponseEmit() {\n const transformedValues = props.items.reduce((acc, item) => {\n const val = values.value[item.key]\n if (item.transformer) {\n return { ...acc, ...(item.transformer(val) ?? {}) }\n }\n return { ...acc, [item.key]: val }\n }, {})\n return {\n values: filterEmptyValues(values.value),\n transformed: filterEmptyValues(transformedValues),\n }\n}\n\nconst debouncedUpdate = debounce((key: string, value: any) => {\n update(key, value)\n})\n\nfunction confirm() {\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n emit('close')\n}\n\n/* function reset() {\n values.value = getDefaults()\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', filterEmptyValues(values.value))\n} */\n\nfunction clearAll() {\n values.value = {}\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n\n emit('change', buildResponseEmit())\n}\n\nconst hasActiveFilters = ref(false)\nwatch(\n values,\n (v) => {\n hasActiveFilters.value = Object.values(v).some(\n (val) => val !== null && val !== '' && val !== undefined,\n )\n },\n { deep: true, immediate: true },\n)\n\nfunction clearFilter(key: string) {\n values.value = { ...values.value, [key]: null }\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\nfunction focusFilter(key: string) {\n const ref = (filterRefs.value as Record<string, any>)[key]\n if (!ref) return\n\n if (typeof ref.focusAndOpen === 'function') {\n ref.focusAndOpen()\n return\n }\n if (typeof ref.focus === 'function') {\n ref.focus()\n }\n}\n\nfunction onHistoryLoad(loaded: Record<string, any>) {\n const next: Record<string, any> = { ...values.value }\n for (const item of props.items) {\n if (item.type === 'separator') continue\n if (item.key in loaded) {\n next[item.key] = loaded[item.key] ?? null\n }\n }\n values.value = next\n if (props.handleUrl) writeFilterParams(props.items, values.value)\n emit('change', buildResponseEmit())\n}\n\ndefineExpose({ clearFilter, focusFilter })\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Szűrők\" :position=\"position\" @close=\"emit('close')\">\n <div class=\"data-filters\">\n <div\n v-for=\"item in items\"\n :key=\"item.key\"\n class=\"data-filters__field\"\n :class=\"{ 'data-filters__field--full': item.fullWidth || item.type === 'separator' }\"\n >\n <hr v-if=\"item.type === 'separator'\" class=\"data-filters__separator\" />\n <template v-else-if=\"item.type === 'checkbox'\">\n <Checkbox\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as boolean) ?? false\"\n :label=\"item.label ?? item.key\"\n @update:model-value=\"(val) => update(item.key, val)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else>\n <template v-if=\"item.type === 'text'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <input\n v-if=\"item.type === 'text'\"\n type=\"text\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n @input=\"debouncedUpdate(item.key, ($event.target as HTMLInputElement).value || null)\"\n v-bind=\"item.config\"\n />\n </template>\n <template v-else-if=\"item.type === 'textarea'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <textarea\n class=\"c-input-row data-filters__textarea\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(item.key, ($event.target as HTMLTextAreaElement).value || null)\n \"\n />\n </template>\n <template v-else-if=\"item.type === 'number'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <input\n type=\"number\"\n class=\"c-input-row\"\n :placeholder=\"item.placeholder\"\n :value=\"values[item.key] ?? ''\"\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n v-bind=\"item.config\"\n @input=\"\n debouncedUpdate(\n item.key,\n ($event.target as HTMLInputElement).value\n ? Number(($event.target as HTMLInputElement).value)\n : null,\n )\n \"\n />\n </template>\n <template v-else-if=\"item.type === 'date' || item.type === 'datetime'\">\n <label class=\"c-label\" :for=\"`df-${item.key}`\">{{ item.label ?? item.key }}</label>\n <DatePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :id=\"`df-${item.key}`\"\n :model-value=\"(values[item.key] as PickedDate) ?? null\"\n :config=\"buildDatePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n <template v-else-if=\"item.type === 'daterange' || item.type === 'datetimerange'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DateRangePicker\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as PickedUtcRange) ?? null\"\n :config=\"buildDateRangePickerConfig(item)\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n <template v-else-if=\"item.type === 'dropdown'\">\n <span class=\"c-label\">{{ item.label ?? item.key }}</span>\n <DropdownSelect\n :ref=\"(el: any) => setFilterRef(item.key, el)\"\n :model-value=\"(values[item.key] as string) ?? null\"\n :options=\"item.options ?? []\"\n :config=\"{\n ...(item.config ?? {}),\n placeholder: item.placeholder ?? 'Válassz...',\n clearable: true,\n filterable: true,\n }\"\n @update:model-value=\"update(item.key, $event)\"\n />\n </template>\n </template>\n </div>\n </div>\n <div class=\"data-filters__footer\">\n <!-- <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Alaphelyzet visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n /> -->\n <Button\n icon=\"fa-solid fa-trash-can\"\n :disabled=\"!hasActiveFilters\"\n label=\"Szűrők törlése\"\n aria-label=\"Szűrők törlése\"\n size=\"small\"\n @click=\"clearAll\"\n />\n <Button label=\"Szűrés\" aria-label=\"Szűrés\" type=\"success\" @click=\"confirm\" />\n </div>\n <hr v-if=\"historyEnabled\" class=\"separator my-3\" />\n <FiltersHistory\n v-if=\"historyEnabled\"\n :items=\"items\"\n :values=\"values\"\n :storage-key=\"storageKey\"\n @load=\"onHistoryLoad\"\n @change=\"onHistoryLoad\"\n />\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-filters.scss\"></style>\n"],"mappings":""}
|
|
@@ -38,27 +38,16 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
38
38
|
"sort-change"
|
|
39
39
|
],
|
|
40
40
|
setup(g, { expose: _, emit: E }) {
|
|
41
|
-
let D = x(null), O = g, k = E, A = x(!1), j = x(!1), M = x(null), N = x(!1), P = x(null), F = x(!1), I =
|
|
42
|
-
type: "checkbox",
|
|
43
|
-
key: "exactMatch",
|
|
44
|
-
label: "Pontos egyezés",
|
|
45
|
-
fullWidth: !0,
|
|
46
|
-
config: { labelAlignmentFix: !0 },
|
|
47
|
-
displayClass: "highlight-chip"
|
|
48
|
-
};
|
|
49
|
-
function R(e) {
|
|
50
|
-
return !I.value || e.some((e) => e.key === "exactMatch") ? e : [L, ...e];
|
|
51
|
-
}
|
|
52
|
-
let z = u(() => R(O.filters ?? [])), B = x(O.filters ? a(z.value) ?? {} : {}), V = null;
|
|
41
|
+
let D = x(null), O = g, k = E, A = x(!1), j = x(!1), M = x(null), N = x(!1), P = x(null), F = x(!1), I = x(O.filters ? a(O.filters) ?? {} : {}), L = null;
|
|
53
42
|
y(() => {
|
|
54
|
-
|
|
43
|
+
L = new ResizeObserver((e) => {
|
|
55
44
|
N.value = (e[0]?.contentRect.width ?? 0) < O.layoutBreakpoint;
|
|
56
|
-
}), P.value &&
|
|
57
|
-
}), v(() =>
|
|
58
|
-
let
|
|
45
|
+
}), P.value && L.observe(P.value);
|
|
46
|
+
}), v(() => L?.disconnect());
|
|
47
|
+
let R = u(() => {
|
|
59
48
|
let e = M.value?.layout;
|
|
60
49
|
return e === "table" || e === "cards" ? e : N.value ? "cards" : "table";
|
|
61
|
-
}),
|
|
50
|
+
}), z = u(() => {
|
|
62
51
|
if (!M.value) return O.config;
|
|
63
52
|
let e = M.value.columnOrder, t = O.config.columns.map((e) => ({
|
|
64
53
|
...e,
|
|
@@ -72,7 +61,7 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
72
61
|
columns: t
|
|
73
62
|
};
|
|
74
63
|
});
|
|
75
|
-
function
|
|
64
|
+
function B(e) {
|
|
76
65
|
M.value = e, k("settings-change", e);
|
|
77
66
|
}
|
|
78
67
|
_({
|
|
@@ -81,45 +70,47 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
81
70
|
openFilters: () => F.value = !0,
|
|
82
71
|
closeFilters: () => F.value = !1
|
|
83
72
|
});
|
|
84
|
-
async function
|
|
73
|
+
async function V(e) {
|
|
85
74
|
F.value = !0, setTimeout(() => {
|
|
86
75
|
D.value?.focusFilter(e);
|
|
87
76
|
}, 300);
|
|
88
77
|
}
|
|
89
|
-
function
|
|
90
|
-
|
|
78
|
+
function H(e) {
|
|
79
|
+
I.value = e.values, k("filter-change", e.transformed);
|
|
91
80
|
}
|
|
92
|
-
let
|
|
81
|
+
let U = u(() => Object.values(I.value).filter((e) => e != null && e !== "").length), W = u(() => !!O.pagination && (O.items.length > 0 || !O.loading));
|
|
93
82
|
return (a, u) => (b(), p("div", S, [m("div", {
|
|
94
83
|
ref_key: "root",
|
|
95
84
|
ref: P,
|
|
96
85
|
class: "c-data-list"
|
|
97
86
|
}, [
|
|
98
|
-
|
|
87
|
+
g.filters && g.filters.length > 0 ? (b(), p(l, { key: 0 }, [m("div", C, [h(e, {
|
|
99
88
|
label: "Szűrők megnyitása",
|
|
100
89
|
icon: "fa-solid fa-filter",
|
|
101
90
|
onClick: u[0] ||= (e) => F.value = !0,
|
|
102
91
|
style: { "flex-shrink": "0" },
|
|
103
|
-
type:
|
|
104
|
-
indicator:
|
|
92
|
+
type: U.value > 0 ? "info" : "normal",
|
|
93
|
+
indicator: U.value > 0 ? U.value : void 0
|
|
105
94
|
}, null, 8, ["type", "indicator"]), m("div", w, [h(s, {
|
|
106
|
-
filters:
|
|
107
|
-
items:
|
|
95
|
+
filters: I.value,
|
|
96
|
+
items: g.filters,
|
|
108
97
|
onRemove: u[1] ||= (e) => D.value?.clearFilter(e),
|
|
109
|
-
onOpenFilter:
|
|
98
|
+
onOpenFilter: V
|
|
110
99
|
}, null, 8, ["filters", "items"])])]), h(o, {
|
|
111
100
|
ref_key: "dataFiltersRef",
|
|
112
101
|
ref: D,
|
|
113
102
|
open: F.value,
|
|
114
|
-
items:
|
|
103
|
+
items: g.filters,
|
|
104
|
+
"history-enabled": g.historyEnabled,
|
|
115
105
|
lazy: "",
|
|
116
106
|
"handle-url": g.handleUrl,
|
|
117
107
|
"storage-key": g.id,
|
|
118
108
|
onClose: u[2] ||= (e) => F.value = !1,
|
|
119
|
-
onChange:
|
|
109
|
+
onChange: H
|
|
120
110
|
}, null, 8, [
|
|
121
111
|
"open",
|
|
122
112
|
"items",
|
|
113
|
+
"history-enabled",
|
|
123
114
|
"handle-url",
|
|
124
115
|
"storage-key"
|
|
125
116
|
])], 64)) : f("", !0),
|
|
@@ -142,9 +133,9 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
142
133
|
open: j.value,
|
|
143
134
|
onClose: u[5] ||= (e) => j.value = !1
|
|
144
135
|
}, null, 8, ["open"]),
|
|
145
|
-
|
|
136
|
+
R.value === "table" ? (b(), d(t, {
|
|
146
137
|
key: 1,
|
|
147
|
-
config:
|
|
138
|
+
config: z.value,
|
|
148
139
|
loading: g.loading,
|
|
149
140
|
items: g.items,
|
|
150
141
|
settings: M.value ?? void 0,
|
|
@@ -158,7 +149,7 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
158
149
|
"settings"
|
|
159
150
|
])) : (b(), d(n, {
|
|
160
151
|
key: 2,
|
|
161
|
-
config:
|
|
152
|
+
config: z.value,
|
|
162
153
|
loading: g.loading,
|
|
163
154
|
items: g.items,
|
|
164
155
|
settings: M.value ?? void 0,
|
|
@@ -169,7 +160,7 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
169
160
|
"items",
|
|
170
161
|
"settings"
|
|
171
162
|
])),
|
|
172
|
-
g.pagination &&
|
|
163
|
+
g.pagination && W.value ? (b(), d(i, {
|
|
173
164
|
key: 3,
|
|
174
165
|
settings: g.pagination,
|
|
175
166
|
"storage-key": g.id,
|
|
@@ -182,7 +173,7 @@ var S = { class: "ac-component" }, C = { class: "flex-center gap-2 mb-3 wrap-on-
|
|
|
182
173
|
"storage-key": g.id,
|
|
183
174
|
orderable: g.orderable,
|
|
184
175
|
onClose: u[11] ||= (e) => A.value = !1,
|
|
185
|
-
onChange:
|
|
176
|
+
onChange: B
|
|
186
177
|
}, null, 8, [
|
|
187
178
|
"open",
|
|
188
179
|
"columns",
|