admins-components 9.0.39 → 9.0.41
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-components.js +38 -38
- package/dist/admins-components100.js +3 -52
- package/dist/admins-components100.js.map +1 -1
- package/dist/admins-components101.js +3 -82
- package/dist/admins-components101.js.map +1 -1
- package/dist/admins-components102.js +49 -110
- package/dist/admins-components102.js.map +1 -1
- package/dist/admins-components103.js +80 -45
- package/dist/admins-components103.js.map +1 -1
- package/dist/admins-components104.js +108 -101
- package/dist/admins-components104.js.map +1 -1
- package/dist/admins-components105.js +41 -14
- package/dist/admins-components105.js.map +1 -1
- package/dist/admins-components106.js +105 -6
- package/dist/admins-components106.js.map +1 -1
- package/dist/admins-components107.js +16 -248
- package/dist/admins-components107.js.map +1 -1
- package/dist/admins-components108.js +7 -27
- package/dist/admins-components108.js.map +1 -1
- package/dist/admins-components109.js +247 -23
- package/dist/admins-components109.js.map +1 -1
- package/dist/admins-components110.js +26 -171
- package/dist/admins-components110.js.map +1 -1
- package/dist/admins-components111.js +25 -65
- package/dist/admins-components111.js.map +1 -1
- package/dist/admins-components112.js +163 -58
- package/dist/admins-components112.js.map +1 -1
- package/dist/admins-components113.js +65 -27
- package/dist/admins-components113.js.map +1 -1
- package/dist/admins-components114.js +63 -12
- package/dist/admins-components114.js.map +1 -1
- package/dist/admins-components115.js +29 -26
- package/dist/admins-components115.js.map +1 -1
- package/dist/admins-components116.js +16 -9
- package/dist/admins-components116.js.map +1 -1
- package/dist/admins-components117.js +26 -3
- package/dist/admins-components117.js.map +1 -1
- package/dist/admins-components118.js +8 -2
- package/dist/admins-components118.js.map +1 -1
- package/dist/admins-components119.js +4 -3
- package/dist/admins-components119.js.map +1 -1
- package/dist/admins-components120.js +3 -21
- package/dist/admins-components120.js.map +1 -1
- package/dist/admins-components121.js +3 -14
- package/dist/admins-components121.js.map +1 -1
- package/dist/admins-components122.js +20 -7
- package/dist/admins-components122.js.map +1 -1
- package/dist/admins-components123.js +14 -13
- package/dist/admins-components123.js.map +1 -1
- package/dist/admins-components124.js +8 -26
- package/dist/admins-components124.js.map +1 -1
- package/dist/admins-components125.js +12 -82
- package/dist/admins-components125.js.map +1 -1
- package/dist/admins-components126.js +24 -9
- package/dist/admins-components126.js.map +1 -1
- package/dist/admins-components127.js +82 -4
- package/dist/admins-components127.js.map +1 -1
- package/dist/admins-components128.js +11 -8
- package/dist/admins-components128.js.map +1 -1
- package/dist/admins-components129.js +4 -6
- package/dist/admins-components129.js.map +1 -1
- package/dist/admins-components130.js +8 -6
- package/dist/admins-components130.js.map +1 -1
- package/dist/admins-components131.js +6 -14
- package/dist/admins-components131.js.map +1 -1
- package/dist/admins-components132.js +4 -11
- package/dist/admins-components132.js.map +1 -1
- package/dist/admins-components133.js +15 -30
- package/dist/admins-components133.js.map +1 -1
- package/dist/admins-components134.js +13 -4
- package/dist/admins-components134.js.map +1 -1
- package/dist/admins-components135.js +30 -29
- package/dist/admins-components135.js.map +1 -1
- package/dist/admins-components136.js +4 -5
- package/dist/admins-components136.js.map +1 -1
- package/dist/admins-components137.js +29 -5
- package/dist/admins-components137.js.map +1 -1
- package/dist/admins-components138.js +4 -7
- package/dist/admins-components138.js.map +1 -1
- package/dist/admins-components139.js +4 -73
- package/dist/admins-components139.js.map +1 -1
- package/dist/admins-components140.js +7 -28
- package/dist/admins-components140.js.map +1 -1
- package/dist/admins-components141.js +73 -58
- package/dist/admins-components141.js.map +1 -1
- package/dist/admins-components142.js +29 -24
- package/dist/admins-components142.js.map +1 -1
- package/dist/admins-components143.js +56 -47
- package/dist/admins-components143.js.map +1 -1
- package/dist/admins-components144.js +23 -30
- package/dist/admins-components144.js.map +1 -1
- package/dist/admins-components145.js +50 -3
- package/dist/admins-components145.js.map +1 -1
- package/dist/admins-components146.js +29 -177
- package/dist/admins-components146.js.map +1 -1
- package/dist/admins-components147.js +3 -46
- package/dist/admins-components147.js.map +1 -1
- package/dist/admins-components148.js +177 -35
- package/dist/admins-components148.js.map +1 -1
- package/dist/admins-components149.js +41 -41
- package/dist/admins-components149.js.map +1 -1
- package/dist/admins-components150.js +32 -136
- package/dist/admins-components150.js.map +1 -1
- package/dist/admins-components151.js +42 -54
- package/dist/admins-components151.js.map +1 -1
- package/dist/admins-components152.js +140 -6
- package/dist/admins-components152.js.map +1 -1
- package/dist/admins-components153.js +57 -5
- package/dist/admins-components153.js.map +1 -1
- package/dist/admins-components154.js +6 -75
- package/dist/admins-components154.js.map +1 -1
- package/dist/admins-components155.js +5 -28
- package/dist/admins-components155.js.map +1 -1
- package/dist/admins-components156.js +74 -1929
- package/dist/admins-components156.js.map +1 -1
- package/dist/admins-components157.js +29 -24811
- package/dist/admins-components157.js.map +1 -1
- package/dist/admins-components158.js +1930 -8
- package/dist/admins-components158.js.map +1 -1
- package/dist/admins-components159.js +24809 -5
- package/dist/admins-components159.js.map +1 -0
- package/dist/admins-components160.js +8 -141
- package/dist/admins-components160.js.map +1 -1
- package/dist/admins-components161.js +7 -9
- package/dist/admins-components162.js +141 -8
- package/dist/admins-components162.js.map +1 -1
- package/dist/admins-components163.js +10 -0
- package/dist/{admins-components161.js.map → admins-components163.js.map} +1 -1
- package/dist/admins-components164.js +8 -167
- package/dist/admins-components164.js.map +1 -1
- package/dist/admins-components166.js +167 -8
- package/dist/admins-components166.js.map +1 -1
- package/dist/admins-components167.js +39 -38
- package/dist/admins-components167.js.map +1 -1
- package/dist/admins-components168.js +9 -6
- package/dist/admins-components168.js.map +1 -1
- package/dist/admins-components169.js +42 -72
- package/dist/admins-components169.js.map +1 -1
- package/dist/admins-components170.js +6 -58
- package/dist/admins-components170.js.map +1 -1
- package/dist/admins-components171.js +72 -51
- package/dist/admins-components171.js.map +1 -1
- package/dist/admins-components172.js +57 -8
- package/dist/admins-components172.js.map +1 -1
- package/dist/admins-components173.js +40 -33
- package/dist/admins-components173.js.map +1 -1
- package/dist/admins-components174.js +3 -3
- package/dist/admins-components174.js.map +1 -1
- package/dist/admins-components175.js +53 -0
- package/dist/admins-components175.js.map +1 -0
- package/dist/admins-components176.js +8 -57
- package/dist/admins-components176.js.map +1 -1
- package/dist/admins-components178.js +59 -0
- package/dist/admins-components178.js.map +1 -0
- package/dist/admins-components38.js +2 -2
- package/dist/admins-components38.js.map +1 -1
- package/dist/admins-components39.js.map +1 -1
- package/dist/admins-components58.js.map +1 -1
- package/dist/admins-components59.js +1 -13
- package/dist/admins-components59.js.map +1 -1
- package/dist/admins-components61.js +22 -22
- package/dist/admins-components61.js.map +1 -1
- package/dist/admins-components62.js.map +1 -1
- package/dist/admins-components63.js +69 -133
- package/dist/admins-components63.js.map +1 -1
- package/dist/admins-components64.js +5 -0
- package/dist/admins-components64.js.map +1 -0
- package/dist/admins-components65.js +118 -7
- package/dist/admins-components65.js.map +1 -1
- package/dist/admins-components67.js +8 -0
- package/dist/admins-components67.js.map +1 -0
- package/dist/admins-components68.js +144 -7
- package/dist/admins-components68.js.map +1 -1
- package/dist/admins-components70.js +7 -279
- package/dist/admins-components70.js.map +1 -1
- package/dist/{admins-components69.js.map → admins-components71.js.map} +1 -1
- package/dist/admins-components72.js +279 -6
- package/dist/admins-components72.js.map +1 -1
- package/dist/admins-components74.js +6 -126
- package/dist/admins-components74.js.map +1 -1
- package/dist/{admins-components73.js.map → admins-components75.js.map} +1 -1
- package/dist/admins-components76.js +126 -6
- package/dist/admins-components76.js.map +1 -1
- package/dist/admins-components78.js +6 -69
- package/dist/admins-components78.js.map +1 -1
- package/dist/admins-components79.js +55 -234
- package/dist/admins-components79.js.map +1 -1
- package/dist/admins-components80.js +70 -0
- package/dist/admins-components80.js.map +1 -0
- package/dist/admins-components81.js +238 -6
- package/dist/admins-components81.js.map +1 -1
- package/dist/admins-components83.js +7 -0
- package/dist/admins-components83.js.map +1 -0
- package/dist/admins-components84.js +229 -6
- package/dist/admins-components84.js.map +1 -1
- package/dist/admins-components86.js +7 -0
- package/dist/{admins-components82.js.map → admins-components86.js.map} +1 -1
- package/dist/admins-components87.js +37 -6
- package/dist/admins-components87.js.map +1 -1
- package/dist/admins-components89.js +7 -0
- package/dist/{admins-components85.js.map → admins-components89.js.map} +1 -1
- package/dist/admins-components90.js +199 -6
- package/dist/admins-components90.js.map +1 -1
- package/dist/admins-components92.js +6 -75
- package/dist/admins-components92.js.map +1 -1
- package/dist/{admins-components91.js.map → admins-components93.js.map} +1 -1
- package/dist/admins-components94.js +75 -6
- package/dist/admins-components94.js.map +1 -1
- package/dist/admins-components96.js +7 -0
- package/dist/admins-components96.js.map +1 -0
- package/dist/admins-components97.js +204 -6
- package/dist/admins-components97.js.map +1 -1
- package/dist/admins-components99.js +6 -3
- package/dist/admins-components99.js.map +1 -1
- package/dist/src/components/ConfirmModal.vue.d.ts +1 -1
- package/dist/src/components/data-table/DataListActions.vue.d.ts +8 -0
- package/dist/src/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css +1 -1
- package/dist/src/types/data-list.d.ts +5 -1
- package/package.json +1 -1
- package/dist/admins-components165.js +0 -52
- package/dist/admins-components165.js.map +0 -1
- package/dist/admins-components66.js +0 -171
- package/dist/admins-components66.js.map +0 -1
- package/dist/admins-components77.js +0 -60
- package/dist/admins-components77.js.map +0 -1
- package/dist/admins-components82.js +0 -230
- package/dist/admins-components85.js +0 -38
- package/dist/admins-components88.js +0 -200
- package/dist/admins-components88.js.map +0 -1
- package/dist/admins-components95.js +0 -205
- package/dist/admins-components95.js.map +0 -1
- package/dist/admins-components98.js +0 -4
- package/dist/admins-components98.js.map +0 -1
- /package/dist/{admins-components69.js → admins-components71.js} +0 -0
- /package/dist/{admins-components73.js → admins-components75.js} +0 -0
- /package/dist/{admins-components91.js → admins-components93.js} +0 -0
|
@@ -1,7 +1,280 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import e from "./admins-components6.js";
|
|
2
|
+
import t from "./admins-components31.js";
|
|
3
|
+
import { dataCardsSettingsDefaults as n, dataListSettingsDefaults as r, dataTableSettingsDefaults as i } from "./admins-components58.js";
|
|
4
|
+
import { deepMerge as ee } from "./admins-components71.js";
|
|
5
|
+
import { Fragment as a, computed as o, createBlock as te, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, onMounted as ne, openBlock as m, ref as h, renderList as g, resolveDirective as re, toDisplayString as _, withCtx as ie, withDirectives as v, withModifiers as y } from "vue";
|
|
6
|
+
//#region src/components/data-table/DataListOptions.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
+
var ae = { class: "table-options" }, b = { class: "table-options__col" }, oe = { class: "table-options__title" }, se = { class: "table-options__title-value" }, ce = { class: "layout-switch" }, le = { class: "table-options__col" }, x = { class: "table-options__title" }, S = { class: "table-options__list" }, C = { class: "table-options__col" }, ue = { class: "table-options__title" }, de = { class: "table-options__list" }, fe = [
|
|
8
|
+
"draggable",
|
|
9
|
+
"onDragstart",
|
|
10
|
+
"onDragover",
|
|
11
|
+
"onClick"
|
|
12
|
+
], pe = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "fa-solid fa-grip-vertical table-options__drag-handle"
|
|
15
|
+
}, me = ["onClick"], he = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "table-options__move-actions"
|
|
18
|
+
}, ge = ["disabled"], w = ["disabled"], T = { class: "table-options__col" }, E = { class: "table-options__title flex-center gap-1" }, D = { class: "table-options__list" }, O = [
|
|
19
|
+
"draggable",
|
|
20
|
+
"onDragstart",
|
|
21
|
+
"onDragover",
|
|
22
|
+
"onClick"
|
|
23
|
+
], k = {
|
|
24
|
+
key: 0,
|
|
25
|
+
class: "fa-solid fa-grip-vertical table-options__drag-handle"
|
|
26
|
+
}, A = ["onClick"], j = {
|
|
27
|
+
key: 0,
|
|
28
|
+
class: "table-options__move-actions"
|
|
29
|
+
}, M = ["disabled"], N = ["disabled"], P = { class: "table-options__footer" }, F = /* @__PURE__ */ f({
|
|
30
|
+
__name: "DataListOptions",
|
|
31
|
+
props: {
|
|
32
|
+
open: { type: Boolean },
|
|
33
|
+
columns: {},
|
|
34
|
+
settings: {},
|
|
35
|
+
position: {},
|
|
36
|
+
storageKey: {},
|
|
37
|
+
orderable: {
|
|
38
|
+
type: Boolean,
|
|
39
|
+
default: !1
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
emits: ["close", "change"],
|
|
43
|
+
setup(f, { emit: F }) {
|
|
44
|
+
let I = f, L = F, R = h(B()), z = o(() => `data-list-${I.storageKey}`), _e = o(() => JSON.stringify(R.value) !== JSON.stringify(B()));
|
|
45
|
+
function B() {
|
|
46
|
+
return {
|
|
47
|
+
...n,
|
|
48
|
+
...i,
|
|
49
|
+
...r,
|
|
50
|
+
...I.settings,
|
|
51
|
+
columns: Object.fromEntries(I.columns.map((e) => [e.property, I.settings.columns?.[e.property] ?? e.visible !== !1])),
|
|
52
|
+
cardHeaderColumns: Object.fromEntries(I.columns.map((e) => [e.property, I.settings.cardHeaderColumns?.[e.property] ?? e.primary === !0])),
|
|
53
|
+
columnOrder: I.settings.columnOrder ?? I.columns.map((e) => e.property),
|
|
54
|
+
cardHeaderOrder: I.settings.cardHeaderOrder ?? I.columns.map((e) => e.property)
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
function ve() {
|
|
58
|
+
try {
|
|
59
|
+
let e = localStorage.getItem(z.value), t = B();
|
|
60
|
+
if (e) {
|
|
61
|
+
let n = JSON.parse(e);
|
|
62
|
+
R.value = n.settings ? ye(ee(t, n.settings), I.columns) : t;
|
|
63
|
+
} else R.value = t;
|
|
64
|
+
} catch {
|
|
65
|
+
R.value = B();
|
|
66
|
+
}
|
|
67
|
+
L("change", R.value);
|
|
68
|
+
}
|
|
69
|
+
function ye(e, t) {
|
|
70
|
+
let n = t.map((e) => e.property), r = (e) => {
|
|
71
|
+
let t = new Set(n), r = (e ?? []).filter((e) => t.has(e)), i = n.filter((e) => !r.includes(e));
|
|
72
|
+
return [...r, ...i];
|
|
73
|
+
};
|
|
74
|
+
return {
|
|
75
|
+
...e,
|
|
76
|
+
columnOrder: r(e.columnOrder),
|
|
77
|
+
cardHeaderOrder: r(e.cardHeaderOrder)
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
function be() {
|
|
81
|
+
try {
|
|
82
|
+
let e = z.value, t = localStorage.getItem(e), n = t ? JSON.parse(t) : {};
|
|
83
|
+
n.settings = R.value, localStorage.setItem(e, JSON.stringify(n));
|
|
84
|
+
} catch {}
|
|
85
|
+
L("change", R.value);
|
|
86
|
+
}
|
|
87
|
+
function V(e, t) {
|
|
88
|
+
R.value = {
|
|
89
|
+
...R.value,
|
|
90
|
+
[e]: t
|
|
91
|
+
}, be();
|
|
92
|
+
}
|
|
93
|
+
function H(e) {
|
|
94
|
+
V("columns", {
|
|
95
|
+
...R.value.columns,
|
|
96
|
+
[e]: !R.value.columns[e]
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
function U(e) {
|
|
100
|
+
V("cardHeaderColumns", {
|
|
101
|
+
...R.value.cardHeaderColumns,
|
|
102
|
+
[e]: !R.value.cardHeaderColumns[e]
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
function W(e) {
|
|
106
|
+
V(e, !R.value[e]);
|
|
107
|
+
}
|
|
108
|
+
function G(e, t) {
|
|
109
|
+
return [...e].sort((e, n) => {
|
|
110
|
+
let r = t.indexOf(e.property), i = t.indexOf(n.property);
|
|
111
|
+
return (r === -1 ? 999 : r) - (i === -1 ? 999 : i);
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
let K = o(() => G(I.columns, R.value.columnOrder)), q = o(() => G(I.columns, R.value.cardHeaderOrder)), J = h(null), Y = h(null), X = h(null), Z = h(null);
|
|
115
|
+
function xe(e) {
|
|
116
|
+
J.value = e;
|
|
117
|
+
}
|
|
118
|
+
function Se(e, t) {
|
|
119
|
+
if (e.preventDefault(), J.value === null || J.value === t) return;
|
|
120
|
+
let n = [...R.value.columnOrder], r = n.splice(J.value, 1)[0];
|
|
121
|
+
r && (n.splice(t, 0, r), J.value = t, V("columnOrder", n));
|
|
122
|
+
}
|
|
123
|
+
function Ce() {
|
|
124
|
+
J.value = null;
|
|
125
|
+
}
|
|
126
|
+
function we(e) {
|
|
127
|
+
Y.value = Y.value === e ? null : e;
|
|
128
|
+
}
|
|
129
|
+
function Q(e) {
|
|
130
|
+
if (Y.value === null) return;
|
|
131
|
+
let t = Y.value + e;
|
|
132
|
+
if (t < 0 || t >= R.value.columnOrder.length) return;
|
|
133
|
+
let n = [...R.value.columnOrder], r = n[Y.value];
|
|
134
|
+
n[Y.value] = n[t], n[t] = r, V("columnOrder", n), Y.value = t;
|
|
135
|
+
}
|
|
136
|
+
function Te(e) {
|
|
137
|
+
X.value = e;
|
|
138
|
+
}
|
|
139
|
+
function Ee(e, t) {
|
|
140
|
+
if (e.preventDefault(), X.value === null || X.value === t) return;
|
|
141
|
+
let n = [...R.value.cardHeaderOrder], r = n.splice(X.value, 1)[0];
|
|
142
|
+
r && (n.splice(t, 0, r), X.value = t, V("cardHeaderOrder", n));
|
|
143
|
+
}
|
|
144
|
+
function De() {
|
|
145
|
+
X.value = null;
|
|
146
|
+
}
|
|
147
|
+
function Oe(e) {
|
|
148
|
+
Z.value = Z.value === e ? null : e;
|
|
149
|
+
}
|
|
150
|
+
function $(e) {
|
|
151
|
+
if (Z.value === null) return;
|
|
152
|
+
let t = Z.value + e;
|
|
153
|
+
if (t < 0 || t >= R.value.cardHeaderOrder.length) return;
|
|
154
|
+
let n = [...R.value.cardHeaderOrder], r = n[Z.value];
|
|
155
|
+
n[Z.value] = n[t], n[t] = r, V("cardHeaderOrder", n), Z.value = t;
|
|
156
|
+
}
|
|
157
|
+
function ke() {
|
|
158
|
+
localStorage.removeItem(z.value), R.value = B(), L("change", R.value);
|
|
159
|
+
}
|
|
160
|
+
return ne(ve), (n, r) => {
|
|
161
|
+
let i = re("tooltip");
|
|
162
|
+
return m(), te(t, {
|
|
163
|
+
open: f.open,
|
|
164
|
+
title: "Lista beállítások",
|
|
165
|
+
position: I.position,
|
|
166
|
+
onClose: r[16] ||= (e) => L("close")
|
|
167
|
+
}, {
|
|
168
|
+
default: ie(() => [l("div", ae, [
|
|
169
|
+
l("div", b, [l("h4", oe, [r[17] ||= u(" Elrendezés ", -1), l("span", se, "— " + _(R.value.layout === "screen" ? "Auto" : R.value.layout === "table" ? "Táblázat" : "Kártyák"), 1)]), l("div", ce, [
|
|
170
|
+
l("button", {
|
|
171
|
+
class: p(["layout-switch__btn", { "layout-switch__btn--active": R.value.layout === "screen" }]),
|
|
172
|
+
title: "Kijelző méretéhez igazodó elrendezés",
|
|
173
|
+
onClick: r[0] ||= (e) => V("layout", "screen")
|
|
174
|
+
}, [...r[18] ||= [l("i", { class: "fa-solid fa-display" }, null, -1)]], 2),
|
|
175
|
+
l("button", {
|
|
176
|
+
class: p(["layout-switch__btn", { "layout-switch__btn--active": R.value.layout === "table" }]),
|
|
177
|
+
title: "Táblázat nézet",
|
|
178
|
+
onClick: r[1] ||= (e) => V("layout", "table")
|
|
179
|
+
}, [...r[19] ||= [l("i", { class: "fa-solid fa-table-list" }, null, -1)]], 2),
|
|
180
|
+
l("button", {
|
|
181
|
+
class: p(["layout-switch__btn", { "layout-switch__btn--active": R.value.layout === "cards" }]),
|
|
182
|
+
title: "Kártya nézet",
|
|
183
|
+
onClick: r[2] ||= (e) => V("layout", "cards")
|
|
184
|
+
}, [...r[20] ||= [l("i", { class: "fa-solid fa-list" }, null, -1)]], 2)
|
|
185
|
+
])]),
|
|
186
|
+
l("div", le, [v((m(), c("h4", x, [...r[21] ||= [u(" Megjelenés ", -1), l("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[
|
|
187
|
+
i,
|
|
188
|
+
"<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb ",
|
|
189
|
+
void 0,
|
|
190
|
+
{ html: !0 }
|
|
191
|
+
]]), l("ul", S, [l("li", {
|
|
192
|
+
class: "table-options__item",
|
|
193
|
+
onClick: r[4] ||= (e) => W("compact"),
|
|
194
|
+
title: "A sorok közötti térköz csökkentése"
|
|
195
|
+
}, [l("span", {
|
|
196
|
+
class: p(["c-checkbox", { "c-checkbox--checked": R.value.compact }]),
|
|
197
|
+
onClick: r[3] ||= y((e) => W("compact"), ["stop"])
|
|
198
|
+
}, null, 2), r[22] ||= l("span", null, "Kompakt", -1)]), l("li", {
|
|
199
|
+
class: "table-options__item",
|
|
200
|
+
onClick: r[6] ||= (e) => W("striped"),
|
|
201
|
+
title: "A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)"
|
|
202
|
+
}, [l("span", {
|
|
203
|
+
class: p(["c-checkbox", { "c-checkbox--checked": R.value.striped }]),
|
|
204
|
+
onClick: r[5] ||= y((e) => W("striped"), ["stop"])
|
|
205
|
+
}, null, 2), r[23] ||= l("span", null, "Sávos (striped)", -1)])])]),
|
|
206
|
+
l("div", C, [
|
|
207
|
+
v((m(), c("h4", ue, [...r[24] ||= [u(" Táblázat oszlopok ", -1), l("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[i, "Táblázat nézetben megjelenő oszlopok"]]),
|
|
208
|
+
l("ul", de, [(m(!0), c(a, null, g(K.value, (e, t) => (m(), c("li", {
|
|
209
|
+
key: e.property,
|
|
210
|
+
class: p(["table-options__item", {
|
|
211
|
+
"table-options__item--disabled": e.primary,
|
|
212
|
+
"table-options__item--selected": f.orderable && Y.value === t,
|
|
213
|
+
"table-options__item--dragging": f.orderable && J.value === t
|
|
214
|
+
}]),
|
|
215
|
+
draggable: f.orderable,
|
|
216
|
+
onDragstart: y((e) => f.orderable && xe(t), ["stop"]),
|
|
217
|
+
onDragover: y((e) => f.orderable && Se(e, t), ["prevent"]),
|
|
218
|
+
onDrop: r[7] ||= y(() => {}, ["prevent"]),
|
|
219
|
+
onDragend: r[8] ||= (e) => f.orderable && Ce(),
|
|
220
|
+
onClick: y((n) => f.orderable ? we(t) : !e.primary && H(e.property), ["prevent"])
|
|
221
|
+
}, [f.orderable ? (m(), c("i", pe)) : s("", !0), l("span", {
|
|
222
|
+
class: "table-options__toggle",
|
|
223
|
+
onClick: y((t) => !e.primary && H(e.property), ["stop"])
|
|
224
|
+
}, [l("span", { class: p(["c-checkbox", { "c-checkbox--checked": R.value.columns[e.property] }]) }, null, 2), l("span", null, _(e.label), 1)], 8, me)], 42, fe))), 128))]),
|
|
225
|
+
f.orderable && Y.value !== null ? (m(), c("div", he, [l("button", {
|
|
226
|
+
class: "table-options__move-btn",
|
|
227
|
+
disabled: Y.value === 0,
|
|
228
|
+
onClick: r[9] ||= (e) => Q(-1)
|
|
229
|
+
}, [...r[25] ||= [l("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, ge), l("button", {
|
|
230
|
+
class: "table-options__move-btn",
|
|
231
|
+
disabled: Y.value === K.value.length - 1,
|
|
232
|
+
onClick: r[10] ||= (e) => Q(1)
|
|
233
|
+
}, [...r[26] ||= [l("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, w)])) : s("", !0)
|
|
234
|
+
]),
|
|
235
|
+
l("div", T, [
|
|
236
|
+
v((m(), c("h4", E, [...r[27] ||= [u(" Kártya fejléc ", -1), l("i", { class: "fa-regular fa-question-circle" }, null, -1)]])), [[i, "Kártya nézetben, a sorok fejlécén megjelenő oszlopok"]]),
|
|
237
|
+
l("ul", D, [(m(!0), c(a, null, g(q.value, (e, t) => (m(), c("li", {
|
|
238
|
+
key: "ch-" + e.property,
|
|
239
|
+
class: p(["table-options__item", {
|
|
240
|
+
"table-options__item--disabled": e.primary,
|
|
241
|
+
"table-options__item--selected": f.orderable && Z.value === t,
|
|
242
|
+
"table-options__item--dragging": f.orderable && X.value === t
|
|
243
|
+
}]),
|
|
244
|
+
draggable: f.orderable,
|
|
245
|
+
onDragstart: y((e) => f.orderable && Te(t), ["stop"]),
|
|
246
|
+
onDragover: y((e) => f.orderable && Ee(e, t), ["prevent"]),
|
|
247
|
+
onDrop: r[11] ||= y(() => {}, ["prevent"]),
|
|
248
|
+
onDragend: r[12] ||= (e) => f.orderable && De(),
|
|
249
|
+
onClick: y((n) => f.orderable ? Oe(t) : !e.primary && U(e.property), ["prevent"])
|
|
250
|
+
}, [f.orderable ? (m(), c("i", k)) : s("", !0), l("span", {
|
|
251
|
+
class: "table-options__toggle",
|
|
252
|
+
onClick: y((t) => !e.primary && U(e.property), ["stop"])
|
|
253
|
+
}, [l("span", { class: p(["c-checkbox", { "c-checkbox--checked": R.value.cardHeaderColumns[e.property] }]) }, null, 2), l("span", null, _(e.label), 1)], 8, A)], 42, O))), 128))]),
|
|
254
|
+
f.orderable && Z.value !== null ? (m(), c("div", j, [l("button", {
|
|
255
|
+
class: "table-options__move-btn",
|
|
256
|
+
disabled: Z.value === 0,
|
|
257
|
+
onClick: r[13] ||= (e) => $(-1)
|
|
258
|
+
}, [...r[28] ||= [l("i", { class: "fa-solid fa-arrow-up" }, null, -1)]], 8, M), l("button", {
|
|
259
|
+
class: "table-options__move-btn",
|
|
260
|
+
disabled: Z.value === q.value.length - 1,
|
|
261
|
+
onClick: r[14] ||= (e) => $(1)
|
|
262
|
+
}, [...r[29] ||= [l("i", { class: "fa-solid fa-arrow-down" }, null, -1)]], 8, N)])) : s("", !0)
|
|
263
|
+
])
|
|
264
|
+
]), l("div", P, [d(e, {
|
|
265
|
+
icon: "fa-solid fa-triangle-exclamation",
|
|
266
|
+
disabled: !_e.value,
|
|
267
|
+
label: "Alapértelmezés visszaállítása",
|
|
268
|
+
size: "small",
|
|
269
|
+
onClick: ke
|
|
270
|
+
}, null, 8, ["disabled"]), d(e, {
|
|
271
|
+
label: "OK",
|
|
272
|
+
onClick: r[15] ||= (e) => L("close")
|
|
273
|
+
})])]),
|
|
274
|
+
_: 1
|
|
275
|
+
}, 8, ["open", "position"]);
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
});
|
|
6
279
|
//#endregion
|
|
7
|
-
export {
|
|
280
|
+
export { F as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components72.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ?? c.primary === true,\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const props = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const known = new Set(props)\n const filtered = (order ?? []).filter((p) => known.has(p))\n const missing = props.filter((p) => !filtered.includes(p))\n return [...filtered, ...missing]\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch {\n /* ignore */\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n}\n\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n class=\"table-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"table-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable ? selectForReorder(index) : !col.primary && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"table-options__move-actions\">\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !col.primary && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"table-options__move-actions\"\n >\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-options__footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"admins-components72.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ?? c.primary === true,\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const props = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const known = new Set(props)\n const filtered = (order ?? []).filter((p) => known.has(p))\n const missing = props.filter((p) => !filtered.includes(p))\n return [...filtered, ...missing]\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch {\n /* ignore */\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n}\n\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n class=\"table-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"table-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable ? selectForReorder(index) : !col.primary && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"table-options__move-actions\">\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !col.primary && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"table-options__move-actions\"\n >\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-options__footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":"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"}
|
|
@@ -1,127 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
//#region src/components/data-table/
|
|
5
|
-
var
|
|
6
|
-
class: "c-paginator__nav",
|
|
7
|
-
"aria-label": "Pagination"
|
|
8
|
-
}, y = {
|
|
9
|
-
key: 0,
|
|
10
|
-
class: "c-paginator__ellipsis"
|
|
11
|
-
}, b = ["onClick"], x = { class: "c-paginator__size" }, S = ["value"], C = ["value"], w = [
|
|
12
|
-
10,
|
|
13
|
-
25,
|
|
14
|
-
50,
|
|
15
|
-
100
|
|
16
|
-
], T = 100;
|
|
17
|
-
function E(e) {
|
|
18
|
-
try {
|
|
19
|
-
let n = t("pagination", e), r = localStorage.getItem(n);
|
|
20
|
-
if (r) {
|
|
21
|
-
let e = Number(r);
|
|
22
|
-
if (e > 0) return e;
|
|
23
|
-
}
|
|
24
|
-
} catch {
|
|
25
|
-
console.warn("Failed to read page size from localStorage");
|
|
26
|
-
}
|
|
27
|
-
return T;
|
|
28
|
-
}
|
|
29
|
-
function D(e) {
|
|
30
|
-
return {
|
|
31
|
-
total: 0,
|
|
32
|
-
page: 1,
|
|
33
|
-
pageSize: E(e)
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
var O = /* @__PURE__ */ s({
|
|
37
|
-
__name: "DataPaginator",
|
|
38
|
-
props: {
|
|
39
|
-
settings: {},
|
|
40
|
-
storageKey: {}
|
|
41
|
-
},
|
|
42
|
-
emits: ["update:pagination"],
|
|
43
|
-
setup(s, { emit: T }) {
|
|
44
|
-
let E = s, D = T;
|
|
45
|
-
function O(e) {
|
|
46
|
-
try {
|
|
47
|
-
let n = t("pagination", E.storageKey);
|
|
48
|
-
localStorage.setItem(n, String(e));
|
|
49
|
-
} catch {
|
|
50
|
-
console.warn("Failed to save page size to localStorage");
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
let k = r(() => Math.max(1, Math.ceil(E.settings.total / E.settings.pageSize))), A = r(() => E.settings.total === 0 ? 0 : (E.settings.page - 1) * E.settings.pageSize + 1), j = r(() => Math.min(E.settings.page * E.settings.pageSize, E.settings.total)), M = r(() => {
|
|
54
|
-
let e = k.value, t = E.settings.page;
|
|
55
|
-
if (e <= N) {
|
|
56
|
-
let t = [];
|
|
57
|
-
for (let n = 1; n <= e; n++) t.push(n);
|
|
58
|
-
return t;
|
|
59
|
-
}
|
|
60
|
-
let n = N - 2, r = t - 1, i = t + 1;
|
|
61
|
-
for (r < 2 && (i = Math.min(e - 1, i + (2 - r)), r = 2), i > e - 1 && (r = Math.max(2, r - (i - (e - 1))), i = e - 1); i - r + 1 < n;) {
|
|
62
|
-
let t = r > 2, a = i < e - 1;
|
|
63
|
-
if (!t && !a) break;
|
|
64
|
-
let o = r - 2, s = e - 1 - i, c = +((t ? r - 1 : 0) > 2) + +(i < e - 1), l = +(r > 2) + +((a ? i + 1 : 0) < e - 1), u = i - r + 2, d = !1;
|
|
65
|
-
if (t && (o >= s || !a) && u + c <= n ? (r--, d = !0) : a && u + l <= n && (i++, d = !0), !d) break;
|
|
66
|
-
}
|
|
67
|
-
let a = r > 2, o = i < e - 1, s = [];
|
|
68
|
-
s.push(1), a && s.push("...");
|
|
69
|
-
for (let e = r; e <= i; e++) s.push(e);
|
|
70
|
-
return o && s.push("..."), s.push(e), s;
|
|
71
|
-
}), N = 7;
|
|
72
|
-
function P(e) {
|
|
73
|
-
let t = E.settings.page, n = k.value, r = e === 1 || e === n, i = e === t;
|
|
74
|
-
return t > 3 && t < n - 2 && !r && !i;
|
|
75
|
-
}
|
|
76
|
-
function F(e) {
|
|
77
|
-
e < 1 || e > k.value || e === E.settings.page || D("update:pagination", {
|
|
78
|
-
page: e,
|
|
79
|
-
pageSize: E.settings.pageSize
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
function I(e) {
|
|
83
|
-
let t = Number(e.target.value);
|
|
84
|
-
O(t), D("update:pagination", {
|
|
85
|
-
page: 1,
|
|
86
|
-
pageSize: t
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
return (t, r) => (l(), i("div", f, [a("div", p, [a("div", m, [
|
|
90
|
-
a("div", h, [a("span", g, d(A.value) + "–" + d(j.value), 1), a("span", _, " / " + d(s.settings.total), 1)]),
|
|
91
|
-
a("nav", v, [
|
|
92
|
-
o(e, {
|
|
93
|
-
icon: "fa-solid fa-chevron-left",
|
|
94
|
-
rel: "prev",
|
|
95
|
-
disabled: s.settings.page <= 1,
|
|
96
|
-
callback: () => F(s.settings.page - 1)
|
|
97
|
-
}, null, 8, ["disabled", "callback"]),
|
|
98
|
-
(l(!0), i(n, null, u(M.value, (e, t) => (l(), i(n, { key: t }, [e === "..." ? (l(), i("span", y, "…")) : (l(), i("button", {
|
|
99
|
-
key: 1,
|
|
100
|
-
type: "button",
|
|
101
|
-
class: c(["c-paginator__page", {
|
|
102
|
-
"is-active": e === s.settings.page,
|
|
103
|
-
"is-hidden-sm": P(e)
|
|
104
|
-
}]),
|
|
105
|
-
onClick: (t) => F(e)
|
|
106
|
-
}, d(e), 11, b))], 64))), 128)),
|
|
107
|
-
o(e, {
|
|
108
|
-
icon: "fa-solid fa-chevron-right",
|
|
109
|
-
rel: "next",
|
|
110
|
-
disabled: s.settings.page >= k.value,
|
|
111
|
-
callback: () => F(s.settings.page + 1)
|
|
112
|
-
}, null, 8, ["disabled", "callback"])
|
|
113
|
-
]),
|
|
114
|
-
a("div", x, [a("select", {
|
|
115
|
-
class: "c-paginator__select",
|
|
116
|
-
id: "page-size-select",
|
|
117
|
-
value: s.settings.pageSize,
|
|
118
|
-
onChange: I
|
|
119
|
-
}, [(l(), i(n, null, u(w, (e) => a("option", {
|
|
120
|
-
key: e,
|
|
121
|
-
value: e
|
|
122
|
-
}, d(e) + " elem / oldal", 9, C)), 64))], 40, S)])
|
|
123
|
-
])])]));
|
|
124
|
-
}
|
|
125
|
-
});
|
|
1
|
+
import './src/styles/components/data-table/data-list-options.scss_vue_type_style_index_0_src_true_lang.css';
|
|
2
|
+
import e from "./admins-components72.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
//#region src/components/data-table/DataListOptions.vue
|
|
5
|
+
var t = e;
|
|
126
6
|
//#endregion
|
|
127
|
-
export {
|
|
7
|
+
export { t as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-components74.js","names":[],"sources":["../src/components/data-table/DataPaginator.vue"],"sourcesContent":["<script lang=\"ts\">\nconst SIZE_OPTIONS = [10, 25, 50, 100]\nconst DEFAULT_PAGE_SIZE = 100\n\nexport function getPageSize(storageKey: string): number {\n try {\n const fullStorageKey = getFullStorageKey('pagination', storageKey)\n const raw = localStorage.getItem(fullStorageKey)\n if (raw) {\n const size = Number(raw)\n if (size > 0) return size\n }\n } catch {\n console.warn('Failed to read page size from localStorage')\n }\n return DEFAULT_PAGE_SIZE\n}\n\nexport function getDefaultPaginator(storageKey: string) {\n return {\n total: 0,\n page: 1,\n pageSize: getPageSize(storageKey),\n } as PaginatorSettings\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\nimport type { PaginatorSettings, PageSettings } from '@/types/data-list'\nimport { getFullStorageKey } from '@/utils/storageKey'\n\nconst props = defineProps<{ settings: PaginatorSettings; storageKey: string }>()\n\nconst emit = defineEmits<{\n 'update:pagination': [pagination: PageSettings]\n}>()\n\nfunction savePageSize(size: number) {\n try {\n const fullStorageKey = getFullStorageKey('pagination', props.storageKey)\n localStorage.setItem(fullStorageKey, String(size))\n } catch {\n console.warn('Failed to save page size to localStorage')\n }\n}\n\nconst totalPages = computed(() =>\n Math.max(1, Math.ceil(props.settings.total / props.settings.pageSize)),\n)\n\nconst rangeStart = computed(() =>\n props.settings.total === 0 ? 0 : (props.settings.page - 1) * props.settings.pageSize + 1,\n)\nconst rangeEnd = computed(() =>\n Math.min(props.settings.page * props.settings.pageSize, props.settings.total),\n)\n\nconst visiblePages = computed<(number | '...')[]>(() => {\n const total = totalPages.value\n const current = props.settings.page\n\n if (total <= SLOT_COUNT) {\n const pages: number[] = []\n for (let i = 1; i <= total; i++) pages.push(i)\n return pages\n }\n\n const inner = SLOT_COUNT - 2\n let winStart = current - 1\n let winEnd = current + 1\n if (winStart < 2) {\n winEnd = Math.min(total - 1, winEnd + (2 - winStart))\n winStart = 2\n }\n if (winEnd > total - 1) {\n winStart = Math.max(2, winStart - (winEnd - (total - 1)))\n winEnd = total - 1\n }\n\n while (winEnd - winStart + 1 < inner) {\n const canExtendLeft = winStart > 2\n const canExtendRight = winEnd < total - 1\n if (!canExtendLeft && !canExtendRight) break\n\n const roomLeft = winStart - 2\n const roomRight = total - 1 - winEnd\n\n const ellipsisIfExtendLeft =\n ((canExtendLeft ? winStart - 1 : 0) > 2 ? 1 : 0) + (winEnd < total - 1 ? 1 : 0)\n const ellipsisIfExtendRight =\n (winStart > 2 ? 1 : 0) + ((canExtendRight ? winEnd + 1 : 0) < total - 1 ? 1 : 0)\n\n const newSize = winEnd - winStart + 2\n\n let extended = false\n if (\n canExtendLeft &&\n (roomLeft >= roomRight || !canExtendRight) &&\n newSize + ellipsisIfExtendLeft <= inner\n ) {\n winStart--\n extended = true\n } else if (canExtendRight && newSize + ellipsisIfExtendRight <= inner) {\n winEnd++\n extended = true\n }\n if (!extended) break\n }\n const showLeftEllipsis = winStart > 2\n const showRightEllipsis = winEnd < total - 1\n\n const pages: (number | '...')[] = []\n pages.push(1)\n if (showLeftEllipsis) pages.push('...')\n for (let p = winStart; p <= winEnd; p++) pages.push(p)\n if (showRightEllipsis) pages.push('...')\n pages.push(total)\n\n return pages\n})\n\nconst SLOT_COUNT = 7\n\nfunction shouldHideOnSmall(page: number) {\n const current = props.settings.page\n const total = totalPages.value\n\n const isEdge = page === 1 || page === total\n const isCurrent = page === current\n\n const isMiddleRange = current > 3 && current < total - 2\n\n return isMiddleRange && !isEdge && !isCurrent\n}\n\nfunction goToPage(page: number) {\n if (page < 1 || page > totalPages.value || page === props.settings.page) return\n emit('update:pagination', { page, pageSize: props.settings.pageSize })\n}\n\nfunction changePageSize(event: Event) {\n const size = Number((event.target as HTMLSelectElement).value)\n savePageSize(size)\n emit('update:pagination', { page: 1, pageSize: size })\n}\n</script>\n\n<template>\n <div class=\"ac-component\">\n <div class=\"c-paginator-wrapper\">\n <div class=\"c-paginator\">\n <div class=\"c-paginator__info\">\n <span class=\"c-paginator__range\">{{ rangeStart }}–{{ rangeEnd }}</span>\n <span class=\"c-paginator__total\"> / {{ settings.total }}</span>\n </div>\n\n <nav class=\"c-paginator__nav\" aria-label=\"Pagination\">\n <Button\n icon=\"fa-solid fa-chevron-left\"\n rel=\"prev\"\n :disabled=\"settings.page <= 1\"\n :callback=\"() => goToPage(settings.page - 1)\"\n />\n\n <template v-for=\"(p, i) in visiblePages\" :key=\"i\">\n <span v-if=\"p === '...'\" class=\"c-paginator__ellipsis\">…</span>\n <button\n v-else\n type=\"button\"\n class=\"c-paginator__page\"\n :class=\"{\n 'is-active': p === settings.page,\n 'is-hidden-sm': shouldHideOnSmall(p),\n }\"\n @click=\"goToPage(p)\"\n >\n {{ p }}\n </button>\n </template>\n\n <Button\n icon=\"fa-solid fa-chevron-right\"\n rel=\"next\"\n :disabled=\"settings.page >= totalPages\"\n :callback=\"() => goToPage(settings.page + 1)\"\n />\n </nav>\n\n <div class=\"c-paginator__size\">\n <select\n class=\"c-paginator__select\"\n id=\"page-size-select\"\n :value=\"settings.pageSize\"\n @change=\"changePageSize\"\n >\n <option v-for=\"s in SIZE_OPTIONS\" :key=\"s\" :value=\"s\">{{ s }} elem / oldal</option>\n </select>\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-paginator.scss\"></style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"admins-components74.js","names":[],"sources":["../src/components/data-table/DataListOptions.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Column, DataListSettings } from '@/types/data-list'\nimport {\n dataTableSettingsDefaults,\n dataCardsSettingsDefaults,\n dataListSettingsDefaults,\n} from '@/types/data-list'\nimport { deepMerge } from '@/utils/objects'\nimport Button from '@/components/Button.vue'\n\nexport interface DataListOptionsProps {\n open?: boolean\n columns: Column[]\n settings: Partial<DataListSettings>\n position?: SidebarPosition\n storageKey: string\n orderable?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, computed, onMounted } from 'vue'\nimport Sidebar, { type SidebarPosition } from '@/components/Sidebar.vue'\n\nconst props = withDefaults(defineProps<DataListOptionsProps>(), {\n orderable: false,\n})\n\nconst emit = defineEmits<{\n close: []\n change: [settings: DataListSettings]\n}>()\n\nconst local = ref<DataListSettings>(getDefaults())\n\nconst storageKey = computed(() => `data-list-${props.storageKey}`)\n\nconst hasCustomSettings = computed(\n () => JSON.stringify(local.value) !== JSON.stringify(getDefaults()),\n)\n\nfunction getDefaults(): DataListSettings {\n return {\n ...dataCardsSettingsDefaults,\n ...dataTableSettingsDefaults,\n ...dataListSettingsDefaults,\n ...props.settings,\n columns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.columns?.[c.property] ?? c.visible !== false,\n ]),\n ),\n cardHeaderColumns: Object.fromEntries(\n props.columns.map((c) => [\n c.property,\n props.settings.cardHeaderColumns?.[c.property] ?? c.primary === true,\n ]),\n ),\n columnOrder: props.settings.columnOrder ?? props.columns.map((c) => c.property),\n cardHeaderOrder: props.settings.cardHeaderOrder ?? props.columns.map((c) => c.property),\n } as DataListSettings\n}\n\nfunction load() {\n try {\n const raw = localStorage.getItem(storageKey.value)\n const defaults = getDefaults()\n if (raw) {\n const data = JSON.parse(raw)\n local.value = data.settings\n ? reconcileOrders(deepMerge(defaults, data.settings) as DataListSettings, props.columns)\n : defaults\n } else {\n local.value = defaults\n }\n } catch {\n local.value = getDefaults()\n }\n emit('change', local.value)\n}\n\nfunction reconcileOrders(settings: DataListSettings, columns: Column[]): DataListSettings {\n const props = columns.map((c) => c.property)\n const reconcile = (order: string[] | undefined): string[] => {\n const known = new Set(props)\n const filtered = (order ?? []).filter((p) => known.has(p))\n const missing = props.filter((p) => !filtered.includes(p))\n return [...filtered, ...missing]\n }\n return {\n ...settings,\n columnOrder: reconcile(settings.columnOrder),\n cardHeaderOrder: reconcile(settings.cardHeaderOrder),\n }\n}\n\nfunction save() {\n try {\n const key = storageKey.value\n const raw = localStorage.getItem(key)\n const data = raw ? JSON.parse(raw) : {}\n data.settings = local.value\n localStorage.setItem(key, JSON.stringify(data))\n } catch {\n /* ignore */\n }\n emit('change', local.value)\n}\n\nfunction update<K extends keyof DataListSettings>(key: K, value: DataListSettings[K]) {\n local.value = { ...local.value, [key]: value }\n save()\n}\n\nfunction toggleColumn(property: string) {\n update('columns', { ...local.value.columns, [property]: !local.value.columns[property] })\n}\n\nfunction toggleCardHeaderColumn(property: string) {\n update('cardHeaderColumns', {\n ...local.value.cardHeaderColumns,\n [property]: !local.value.cardHeaderColumns[property],\n })\n}\n\nfunction toggle(key: 'striped' | 'compact') {\n update(key, !local.value[key])\n}\n\nfunction sortByOrder(cols: Column[], order: string[]) {\n return [...cols].sort((a, b) => {\n const ai = order.indexOf(a.property)\n const bi = order.indexOf(b.property)\n return (ai === -1 ? 999 : ai) - (bi === -1 ? 999 : bi)\n })\n}\n\nconst orderedColumns = computed(() => sortByOrder(props.columns, local.value.columnOrder))\n\nconst orderedCardHeaderColumns = computed(() =>\n sortByOrder(props.columns, local.value.cardHeaderOrder),\n)\n\nconst dragIndex = ref<number | null>(null)\nconst selectedReorderIndex = ref<number | null>(null)\n\nconst cardHeaderDragIndex = ref<number | null>(null)\nconst selectedCardHeaderIndex = ref<number | null>(null)\n\nfunction onDragStart(index: number) {\n dragIndex.value = index\n}\n\nfunction onDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (dragIndex.value === null || dragIndex.value === index) return\n const order = [...local.value.columnOrder]\n const moved = order.splice(dragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n dragIndex.value = index\n update('columnOrder', order)\n}\n\nfunction onDragEnd() {\n dragIndex.value = null\n}\n\nfunction selectForReorder(index: number) {\n selectedReorderIndex.value = selectedReorderIndex.value === index ? null : index\n}\n\nfunction moveSelected(direction: -1 | 1) {\n if (selectedReorderIndex.value === null) return\n const target = selectedReorderIndex.value + direction\n if (target < 0 || target >= local.value.columnOrder.length) return\n const order = [...local.value.columnOrder]\n const tmp = order[selectedReorderIndex.value]!\n order[selectedReorderIndex.value] = order[target]!\n order[target] = tmp\n update('columnOrder', order)\n selectedReorderIndex.value = target\n}\n\nfunction onCardHeaderDragStart(index: number) {\n cardHeaderDragIndex.value = index\n}\n\nfunction onCardHeaderDragOver(e: DragEvent, index: number) {\n e.preventDefault()\n if (cardHeaderDragIndex.value === null || cardHeaderDragIndex.value === index) return\n const order = [...local.value.cardHeaderOrder]\n const moved = order.splice(cardHeaderDragIndex.value, 1)[0]\n if (!moved) return\n order.splice(index, 0, moved)\n cardHeaderDragIndex.value = index\n update('cardHeaderOrder', order)\n}\n\nfunction onCardHeaderDragEnd() {\n cardHeaderDragIndex.value = null\n}\n\nfunction selectCardHeader(index: number) {\n selectedCardHeaderIndex.value = selectedCardHeaderIndex.value === index ? null : index\n}\n\nfunction moveCardHeader(direction: -1 | 1) {\n if (selectedCardHeaderIndex.value === null) return\n const target = selectedCardHeaderIndex.value + direction\n if (target < 0 || target >= local.value.cardHeaderOrder.length) return\n const order = [...local.value.cardHeaderOrder]\n const tmp = order[selectedCardHeaderIndex.value]!\n order[selectedCardHeaderIndex.value] = order[target]!\n order[target] = tmp\n update('cardHeaderOrder', order)\n selectedCardHeaderIndex.value = target\n}\n\nfunction reset() {\n localStorage.removeItem(storageKey.value)\n local.value = getDefaults()\n emit('change', local.value)\n}\n\nonMounted(load)\n</script>\n\n<template>\n <Sidebar :open=\"open\" title=\"Lista beállítások\" :position=\"props.position\" @close=\"emit('close')\">\n <div class=\"table-options\">\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\">\n Elrendezés\n <span class=\"table-options__title-value\"\n >—\n {{\n local.layout === 'screen' ? 'Auto' : local.layout === 'table' ? 'Táblázat' : 'Kártyák'\n }}</span\n >\n </h4>\n <div class=\"layout-switch\">\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'screen' }\"\n title=\"Kijelző méretéhez igazodó elrendezés\"\n @click=\"update('layout', 'screen')\"\n >\n <i class=\"fa-solid fa-display\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'table' }\"\n title=\"Táblázat nézet\"\n @click=\"update('layout', 'table')\"\n >\n <i class=\"fa-solid fa-table-list\"></i>\n </button>\n <button\n class=\"layout-switch__btn\"\n :class=\"{ 'layout-switch__btn--active': local.layout === 'cards' }\"\n title=\"Kártya nézet\"\n @click=\"update('layout', 'cards')\"\n >\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title\"\n v-tooltip.html=\"\n '<b>Kompakt</b>: A sorok közötti térköz csökkentése<br><br><b>Sávos</b> (csak táblázat nézetben): A páros sorok háttere kicsit sötétebb '\"\n >\n Megjelenés <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n class=\"table-options__item\"\n @click=\"toggle('compact')\"\n title=\"A sorok közötti térköz csökkentése\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.compact }\"\n @click.stop=\"toggle('compact')\"\n ></span>\n <span>Kompakt</span>\n </li>\n <li\n class=\"table-options__item\"\n @click=\"toggle('striped')\"\n title=\"A páros sorok háttere kicsit sötétebb (csak táblázat nézetben)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.striped }\"\n @click.stop=\"toggle('striped')\"\n ></span>\n <span>Sávos (striped)</span>\n </li>\n </ul>\n </div>\n <div class=\"table-options__col\">\n <h4 class=\"table-options__title\" v-tooltip=\"'Táblázat nézetben megjelenő oszlopok'\">\n Táblázat oszlopok <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedColumns\"\n :key=\"col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedReorderIndex === index,\n 'table-options__item--dragging': orderable && dragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onDragStart(index)\"\n @dragover.prevent=\"orderable && onDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onDragEnd()\"\n @click.prevent=\"\n orderable ? selectForReorder(index) : !col.primary && toggleColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.columns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div v-if=\"orderable && selectedReorderIndex !== null\" class=\"table-options__move-actions\">\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === 0\"\n @click=\"moveSelected(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedReorderIndex === orderedColumns.length - 1\"\n @click=\"moveSelected(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n <div class=\"table-options__col\">\n <h4\n class=\"table-options__title flex-center gap-1\"\n v-tooltip=\"'Kártya nézetben, a sorok fejlécén megjelenő oszlopok'\"\n >\n Kártya fejléc <i class=\"fa-regular fa-question-circle\"></i>\n </h4>\n <ul class=\"table-options__list\">\n <li\n v-for=\"(col, index) in orderedCardHeaderColumns\"\n :key=\"'ch-' + col.property\"\n class=\"table-options__item\"\n :class=\"{\n 'table-options__item--disabled': col.primary,\n 'table-options__item--selected': orderable && selectedCardHeaderIndex === index,\n 'table-options__item--dragging': orderable && cardHeaderDragIndex === index,\n }\"\n :draggable=\"orderable\"\n @dragstart.stop=\"orderable && onCardHeaderDragStart(index)\"\n @dragover.prevent=\"orderable && onCardHeaderDragOver($event, index)\"\n @drop.prevent\n @dragend=\"orderable && onCardHeaderDragEnd()\"\n @click.prevent=\"\n orderable\n ? selectCardHeader(index)\n : !col.primary && toggleCardHeaderColumn(col.property)\n \"\n >\n <i v-if=\"orderable\" class=\"fa-solid fa-grip-vertical table-options__drag-handle\"></i>\n <span\n class=\"table-options__toggle\"\n @click.stop=\"!col.primary && toggleCardHeaderColumn(col.property)\"\n >\n <span\n class=\"c-checkbox\"\n :class=\"{ 'c-checkbox--checked': local.cardHeaderColumns[col.property] }\"\n ></span>\n <span>{{ col.label }}</span>\n </span>\n </li>\n </ul>\n <div\n v-if=\"orderable && selectedCardHeaderIndex !== null\"\n class=\"table-options__move-actions\"\n >\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === 0\"\n @click=\"moveCardHeader(-1)\"\n >\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"table-options__move-btn\"\n :disabled=\"selectedCardHeaderIndex === orderedCardHeaderColumns.length - 1\"\n @click=\"moveCardHeader(1)\"\n >\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"table-options__footer\">\n <Button\n icon=\"fa-solid fa-triangle-exclamation\"\n :disabled=\"!hasCustomSettings\"\n label=\"Alapértelmezés visszaállítása\"\n size=\"small\"\n @click=\"reset\"\n />\n <Button label=\"OK\" @click=\"emit('close')\" />\n </div>\n </Sidebar>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/data-table/data-list-options.scss\"></style>\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"admins-
|
|
1
|
+
{"version":3,"file":"admins-components75.js","names":[],"sources":["../src/utils/storageKey.ts"],"sourcesContent":["export const FILTERS_STORAGE_KEY_PREFIX = 'data-filters-'\nexport const PAGINATION_STORAGE_KEY_PREFIX = 'pageSize-'\n\nexport type Storable = 'filters' | 'pagination'\n\nexport function getFullStorageKey(type: Storable, storageKey = ''): string {\n switch (type) {\n case 'filters':\n return FILTERS_STORAGE_KEY_PREFIX + storageKey\n case 'pagination':\n return PAGINATION_STORAGE_KEY_PREFIX + storageKey\n }\n}\n"],"mappings":";AAAA,IAAa,IAA6B,iBAC7B,IAAgC;AAI7C,SAAgB,EAAkB,GAAgB,IAAa,IAAY;CACzE,QAAQ,GAAR;EACE,KAAK,WACH,OAAO,IAA6B;EACtC,KAAK,cACH,OAAO,IAAgC;CAC3C;AACF"}
|