@dazzadev/vuetify-datatable 1.1.0 → 1.2.0

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.
Files changed (7) hide show
  1. package/README.md +88 -0
  2. package/dist/components/DataTable.vue.d.ts +12 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/types.d.ts +23 -0
  5. package/dist/vuetify-datatable.js +639 -342
  6. package/dist/vuetify-datatable.umd.cjs +1 -1
  7. package/package.json +1 -1
package/dist/vuetify-datatable.js CHANGED
@@ -1,49 +1,49 @@
1
- import { defineComponent as G, computed as I, resolveComponent as w, openBlock as v, createBlock as y, withCtx as n, createVNode as r, createTextVNode as T, toDisplayString as P, renderSlot as b, createCommentVNode as N, inject as te, ref as M, onMounted as oe, watch as j, createElementBlock as ne, Fragment as ae, normalizeClass as le, createSlots as se, createElementVNode as ie, mergeProps as S, resolveDynamicComponent as q, renderList as de } from "vue";
2
- function ce(e) {
3
- return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
1
+ import { defineComponent as Pe, computed as c, resolveComponent as f, openBlock as m, createBlock as k, withCtx as a, createVNode as r, createTextVNode as V, toDisplayString as g, renderSlot as C, createCommentVNode as N, inject as ot, ref as v, watch as z, nextTick as lt, onMounted as nt, onBeforeUnmount as at, createElementBlock as G, normalizeStyle as st, normalizeClass as $e, withDirectives as rt, createElementVNode as P, Fragment as it, renderList as Ie, withModifiers as le, withKeys as Le, mergeProps as H, vShow as dt, createSlots as ut, resolveDynamicComponent as ye } from "vue";
2
+ function ct(o) {
3
+ return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
4
4
  }
5
- var L = { exports: {} }, R;
6
- function re() {
7
- if (R) return L.exports;
8
- R = 1;
9
- function e(h, l = 100, c = {}) {
10
- if (typeof h != "function")
11
- throw new TypeError(`Expected the first parameter to be a function, got \`${typeof h}\`.`);
12
- if (l < 0)
5
+ var ne = { exports: {} }, Me;
6
+ function vt() {
7
+ if (Me) return ne.exports;
8
+ Me = 1;
9
+ function o(_, $ = 100, I = {}) {
10
+ if (typeof _ != "function")
11
+ throw new TypeError(`Expected the first parameter to be a function, got \`${typeof _}\`.`);
12
+ if ($ < 0)
13
13
  throw new RangeError("`wait` must not be negative.");
14
- const { immediate: i } = typeof c == "boolean" ? { immediate: c } : c;
15
- let f, p, s, B, x;
16
- function C() {
17
- const d = f, D = p;
18
- return f = void 0, p = void 0, x = h.apply(d, D), x;
14
+ const { immediate: b } = typeof I == "boolean" ? { immediate: I } : I;
15
+ let d, y, i, L, h;
16
+ function M() {
17
+ const S = d, O = y;
18
+ return d = void 0, y = void 0, h = _.apply(S, O), h;
19
19
  }
20
- function k() {
21
- const d = Date.now() - B;
22
- d < l && d >= 0 ? s = setTimeout(k, l - d) : (s = void 0, i || (x = C()));
20
+ function E() {
21
+ const S = Date.now() - L;
22
+ S < $ && S >= 0 ? i = setTimeout(E, $ - S) : (i = void 0, b || (h = M()));
23
23
  }
24
- const u = function(...d) {
25
- if (f && this !== f && Object.getPrototypeOf(this) === Object.getPrototypeOf(f))
24
+ const p = function(...S) {
25
+ if (d && this !== d && Object.getPrototypeOf(this) === Object.getPrototypeOf(d))
26
26
  throw new Error("Debounced method called with different contexts of the same prototype.");
27
- f = this, p = d, B = Date.now();
28
- const D = i && !s;
29
- return s || (s = setTimeout(k, l)), D && (x = C()), x;
27
+ d = this, y = S, L = Date.now();
28
+ const O = b && !i;
29
+ return i || (i = setTimeout(E, $)), O && (h = M()), h;
30
30
  };
31
- return Object.defineProperty(u, "isPending", {
31
+ return Object.defineProperty(p, "isPending", {
32
32
  get() {
33
- return s !== void 0;
33
+ return i !== void 0;
34
34
  }
35
- }), u.clear = () => {
36
- s && (clearTimeout(s), s = void 0);
37
- }, u.flush = () => {
38
- s && u.trigger();
39
- }, u.trigger = () => {
40
- x = C(), u.clear();
41
- }, u;
35
+ }), p.clear = () => {
36
+ i && (clearTimeout(i), i = void 0);
37
+ }, p.flush = () => {
38
+ i && p.trigger();
39
+ }, p.trigger = () => {
40
+ h = M(), p.clear();
41
+ }, p;
42
42
  }
43
- return L.exports.debounce = e, L.exports = e, L.exports;
43
+ return ne.exports.debounce = o, ne.exports = o, ne.exports;
44
44
  }
45
- var ue = /* @__PURE__ */ re();
46
- const me = /* @__PURE__ */ ce(ue), fe = /* @__PURE__ */ G({
45
+ var mt = /* @__PURE__ */ vt();
46
+ const ft = /* @__PURE__ */ ct(mt), pt = /* @__PURE__ */ Pe({
47
47
  __name: "ConfirmationModal",
48
48
  props: {
49
49
  show: Boolean,
@@ -53,66 +53,66 @@ const me = /* @__PURE__ */ ce(ue), fe = /* @__PURE__ */ G({
53
53
  cancelButtonText: String
54
54
  },
55
55
  emits: ["close", "confirm"],
56
- setup(e) {
57
- const h = e, l = I({
58
- get: () => h.show,
56
+ setup(o) {
57
+ const _ = o, $ = c({
58
+ get: () => _.show,
59
59
  set: () => {
60
60
  }
61
61
  });
62
- return (c, i) => {
63
- const f = w("v-card-title"), p = w("v-card-text"), s = w("v-spacer"), B = w("v-btn"), x = w("v-card-actions"), C = w("v-card"), k = w("v-dialog");
64
- return v(), y(k, {
65
- modelValue: l.value,
66
- "onUpdate:modelValue": i[2] || (i[2] = (u) => l.value = u),
62
+ return (I, b) => {
63
+ const d = f("v-card-title"), y = f("v-card-text"), i = f("v-spacer"), L = f("v-btn"), h = f("v-card-actions"), M = f("v-card"), E = f("v-dialog");
64
+ return m(), k(E, {
65
+ modelValue: $.value,
66
+ "onUpdate:modelValue": b[2] || (b[2] = (p) => $.value = p),
67
67
  "max-width": "500px",
68
68
  persistent: "",
69
69
  "no-click-animation": ""
70
70
  }, {
71
- default: n(() => [
72
- r(C, null, {
73
- default: n(() => [
74
- r(f, { class: "text-h5 text-center py-6" }, {
75
- default: n(() => [
76
- T(P(e.title), 1)
71
+ default: a(() => [
72
+ r(M, null, {
73
+ default: a(() => [
74
+ r(d, { class: "text-h5 text-center py-6" }, {
75
+ default: a(() => [
76
+ V(g(o.title), 1)
77
77
  ]),
78
78
  _: 1
79
79
  }),
80
- e.description ? (v(), y(p, {
80
+ o.description ? (m(), k(y, {
81
81
  key: 0,
82
82
  class: "text-center px-0 py-0"
83
83
  }, {
84
- default: n(() => [
85
- T(P(e.description) + " ", 1),
86
- b(c.$slots, "description")
84
+ default: a(() => [
85
+ V(g(o.description) + " ", 1),
86
+ C(I.$slots, "description")
87
87
  ]),
88
88
  _: 3
89
89
  })) : N("", !0),
90
- r(x, null, {
91
- default: n(() => [
92
- r(s),
93
- r(B, {
90
+ r(h, null, {
91
+ default: a(() => [
92
+ r(i),
93
+ r(L, {
94
94
  color: "error",
95
95
  variant: "flat",
96
96
  dark: "",
97
- onClick: i[0] || (i[0] = (u) => c.$emit("close"))
97
+ onClick: b[0] || (b[0] = (p) => I.$emit("close"))
98
98
  }, {
99
- default: n(() => [
100
- T(P(e.cancelButtonText), 1)
99
+ default: a(() => [
100
+ V(g(o.cancelButtonText), 1)
101
101
  ]),
102
102
  _: 1
103
103
  }),
104
- r(B, {
104
+ r(L, {
105
105
  color: "success",
106
106
  variant: "flat",
107
107
  dark: "",
108
- onClick: i[1] || (i[1] = (u) => c.$emit("confirm"))
108
+ onClick: b[1] || (b[1] = (p) => I.$emit("confirm"))
109
109
  }, {
110
- default: n(() => [
111
- T(P(e.confirmButtonText), 1)
110
+ default: a(() => [
111
+ V(g(o.confirmButtonText), 1)
112
112
  ]),
113
113
  _: 1
114
114
  }),
115
- r(s)
115
+ r(i)
116
116
  ]),
117
117
  _: 1
118
118
  })
@@ -124,15 +124,19 @@ const me = /* @__PURE__ */ ce(ue), fe = /* @__PURE__ */ G({
124
124
  }, 8, ["modelValue"]);
125
125
  };
126
126
  }
127
- }), K = Symbol("DataTableConfig");
128
- function be(e) {
127
+ }), He = Symbol("DataTableConfig");
128
+ function Mt(o) {
129
129
  return {
130
- install(h) {
131
- h.provide(K, e);
130
+ install(_) {
131
+ _.provide(He, o);
132
132
  }
133
133
  };
134
134
  }
135
- const ve = /* @__PURE__ */ G({
135
+ const gt = '.vdt{position:relative;min-width:0}.vdt-toolbar{display:flex;justify-content:flex-start;padding-bottom:8px}.vdt-body{position:relative}.vdt--pinned .v-table__wrapper>table>thead>tr>th:last-child,.vdt--pinned .v-table__wrapper>table>tbody>tr.v-data-table__tr>td:last-child{position:sticky;right:0;z-index:2;background:rgb(var(--v-theme-surface))}.vdt--pinned.vdt--can-right .v-table__wrapper>table>thead>tr>th:last-child,.vdt--pinned.vdt--can-right .v-table__wrapper>table>tbody>tr.v-data-table__tr>td:last-child{box-shadow:inset 1px 0 rgba(var(--v-border-color),var(--v-border-opacity)),-8px 0 12px -6px #00000026}.vdt-fade{position:absolute;top:var(--vdt-scroll-top, 0px);height:var(--vdt-scroll-h, 100%);width:56px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:3}.vdt-fade--left{left:0;background:linear-gradient(to left,rgba(var(--v-theme-surface),0),rgb(var(--v-theme-surface)))}.vdt-fade--right{right:var(--vdt-pinned-w, 0px);background:linear-gradient(to right,rgba(var(--v-theme-surface),0),rgb(var(--v-theme-surface)))}.vdt--can-left .vdt-fade--left,.vdt--can-right .vdt-fade--right{opacity:1}.vdt-arrow{position:absolute;top:calc(var(--vdt-scroll-top, 0px) + var(--vdt-head-h, 48px) / 2 - 16px);z-index:4;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:thin solid rgba(var(--v-border-color),var(--v-border-opacity));border-radius:50%;background:rgb(var(--v-theme-surface));color:rgb(var(--v-theme-primary));box-shadow:0 4px 12px #00000026;cursor:pointer}.vdt-arrow:focus-visible{outline:2px solid rgb(var(--v-theme-primary));outline-offset:2px}.vdt-arrow--left{left:8px}.vdt-arrow--right{right:calc(var(--vdt-pinned-w, 0px) + 8px)}.vdt-hint{position:absolute;top:calc(var(--vdt-scroll-top, 0px) + var(--vdt-head-h, 48px) / 2 - 24px);right:calc(var(--vdt-pinned-w, 0px) + 8px);z-index:5;transform:translateY(-100%);padding:5px 10px;border-radius:4px;background:rgb(var(--v-theme-surface-variant));color:rgb(var(--v-theme-on-surface-variant));font-size:12px;white-space:nowrap;pointer-events:none}.vdt-hint:after{content:"";position:absolute;top:100%;right:11px;border:5px solid transparent;border-top-color:rgb(var(--v-theme-surface-variant))}.vdt-columns__actions{display:flex;justify-content:space-between;margin:4px 0}.vdt-columns__list{max-height:320px;margin:0;padding:0;overflow-y:auto;list-style:none}.vdt-columns__item{display:flex;align-items:center;gap:4px;border-radius:4px}.vdt-columns__item--over{background:rgba(var(--v-theme-primary),.08)}.vdt-columns__handle{display:flex;padding:4px;border:0;border-radius:4px;background:none;color:rgba(var(--v-theme-on-surface),var(--v-medium-emphasis-opacity));cursor:grab}.vdt-columns__handle:focus-visible{outline:2px solid rgb(var(--v-theme-primary))}', bt = { class: "vdt-toolbar" }, yt = { class: "vdt-columns__actions" }, ht = { class: "vdt-columns__list" }, xt = ["onDragstart", "onDragover", "onDrop"], wt = ["aria-label", "title", "onKeydown"], Ct = ["aria-label"], kt = ["aria-label"], Vt = {
136
+ key: 2,
137
+ class: "vdt-hint"
138
+ }, ae = "actions", St = 300, he = 2, Tt = "vuetify-datatable:columns:", Bt = "svg:M16,5V18H21V5M4,18H9V5H4M10,18H15V5H10V18Z", Dt = "svg:M9,3H11V5H9V3M13,3H15V5H13V3M9,7H11V9H9V7M13,7H15V9H13V7M9,11H11V13H9V11M13,11H15V13H13V11M9,15H11V17H9V15M13,15H15V17H13V15M9,19H11V21H9V19M13,19H15V21H13V19Z", _t = "svg:M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z", $t = "svg:M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z", It = /* @__PURE__ */ Pe({
139
+ inheritAttrs: !1,
136
140
  __name: "DataTable",
137
141
  props: {
138
142
  tableClass: {},
@@ -165,304 +169,597 @@ const ve = /* @__PURE__ */ G({
165
169
  disableDelete: {}
166
170
  },
167
171
  emits: ["onLoadData", "editItem", "deleteItem", "viewItem", "update:modelValue"],
168
- setup(e, { emit: h }) {
169
- const l = e, c = h, i = te(K, { icons: {} }), f = I(() => {
170
- var t;
171
- return l.viewIcon ?? ((t = i.icons) == null ? void 0 : t.view) ?? "mdi-eye-outline";
172
- }), p = I(() => {
173
- var t;
174
- return l.editIcon ?? ((t = i.icons) == null ? void 0 : t.edit) ?? "mdi-pencil-outline";
175
- }), s = I(() => {
176
- var t;
177
- return l.deleteIcon ?? ((t = i.icons) == null ? void 0 : t.delete) ?? "mdi-trash-can-outline";
178
- }), B = I(() => i.iconProps ?? {}), x = I(() => l.tableClass ?? i.tableClass ?? "border rounded-md");
179
- function C(t) {
180
- return typeof t != "string";
172
+ setup(o, { emit: _ }) {
173
+ function $() {
174
+ if (typeof document > "u" || document.getElementById("vuetify-datatable-styles")) return;
175
+ const e = document.createElement("style");
176
+ e.id = "vuetify-datatable-styles", e.textContent = gt, document.head.appendChild(e);
177
+ }
178
+ $();
179
+ const I = [ae, "expanded-row", "data-table-expand", "data-table-select"], b = {
180
+ columns: "Columns",
181
+ hiddenColumns: (e) => `Columns · ${e} hidden`,
182
+ searchColumns: "Search columns",
183
+ showAllColumns: "Show all",
184
+ hideAllColumns: "Hide all",
185
+ resetColumns: "Reset",
186
+ moveColumn: "Drag or use the arrow keys to reorder",
187
+ scrollHint: "Scroll to see more columns",
188
+ scrollLeft: "Previous columns",
189
+ scrollRight: "More columns"
190
+ }, d = o, y = _, i = ot(He, { icons: {} }), L = c(() => {
191
+ var e;
192
+ return d.viewIcon ?? ((e = i.icons) == null ? void 0 : e.view) ?? "mdi-eye-outline";
193
+ }), h = c(() => {
194
+ var e;
195
+ return d.editIcon ?? ((e = i.icons) == null ? void 0 : e.edit) ?? "mdi-pencil-outline";
196
+ }), M = c(() => {
197
+ var e;
198
+ return d.deleteIcon ?? ((e = i.icons) == null ? void 0 : e.delete) ?? "mdi-trash-can-outline";
199
+ }), E = c(() => i.iconProps ?? {}), p = c(() => d.tableClass ?? i.tableClass ?? "border rounded-md");
200
+ function S(e) {
201
+ return typeof e != "string";
181
202
  }
182
- const k = I({
183
- get: () => l.modelValue,
184
- set: (t) => c("update:modelValue", t)
203
+ const O = c({
204
+ get: () => d.modelValue,
205
+ set: (e) => y("update:modelValue", e)
185
206
  });
186
- function u() {
187
- c("update:modelValue", []);
207
+ function Ee() {
208
+ y("update:modelValue", []);
188
209
  }
189
- const d = M(l.itemsPerPage), D = M([]), O = M(1), A = M(null), z = M(!1), Y = I(() => {
190
- var t;
191
- return ((t = l.headers) == null ? void 0 : t.filter(
192
- (a) => a.key !== "actions" && a.key !== "expanded-row" && a.key !== "data-table-expand"
210
+ const R = v(d.itemsPerPage), Y = v([]), Z = v(1), se = v(null), W = v(!1), Oe = c(() => {
211
+ var e;
212
+ return ((e = d.headers) == null ? void 0 : e.filter(
213
+ (t) => t.key !== "actions" && t.key !== "expanded-row" && t.key !== "data-table-expand"
193
214
  )) || [];
194
215
  });
195
- oe(() => {
196
- E({
197
- page: O.value,
198
- itemsPerPage: d.value
199
- });
216
+ function T(e) {
217
+ var n;
218
+ const t = ((n = i.texts) == null ? void 0 : n[e]) ?? b[e];
219
+ return typeof t == "function" ? t() : t;
220
+ }
221
+ const re = v(!1), ie = v(""), A = v([]), x = v([]), J = v(null), X = v(null), K = c(() => d.headers.filter((e) => !I.includes(e.key) && !!e.title)), U = c(() => {
222
+ const e = new Map(K.value.map((n) => [n.key, n]));
223
+ return [...A.value.filter((n) => e.has(n)).map((n) => e.get(n)), ...K.value.filter((n) => !A.value.includes(n.key))];
224
+ }), Re = c(() => {
225
+ const e = (ie.value ?? "").trim().toLowerCase();
226
+ return e ? U.value.filter((t) => {
227
+ var n;
228
+ return (n = t.title) == null ? void 0 : n.toLowerCase().includes(e);
229
+ }) : U.value;
230
+ }), j = c(() => K.value.filter((e) => x.value.includes(e.key)).length), Ae = c(
231
+ () => U.value.map((e) => ({ key: e.key, title: e.title ?? "", visible: !x.value.includes(e.key) }))
232
+ ), xe = c(() => d.headers.some((e) => e.key === ae)), we = c(() => {
233
+ const e = new Set(K.value.map((s) => s.key)), t = [...U.value], n = d.headers.map((s) => e.has(s.key) ? t.shift() : s);
234
+ return [
235
+ ...n.filter((s) => s.key !== ae && !x.value.includes(s.key)),
236
+ ...n.filter((s) => s.key === ae)
237
+ ];
238
+ }), Ce = c(
239
+ () => {
240
+ var e;
241
+ return j.value > 0 ? (((e = i.texts) == null ? void 0 : e.hiddenColumns) ?? b.hiddenColumns)(j.value) : T("columns");
242
+ }
243
+ );
244
+ function ke(e, t) {
245
+ x.value = t ? x.value.filter((n) => n !== e) : [...x.value, e];
246
+ }
247
+ function Ve() {
248
+ x.value = j.value === 0 ? K.value.map((e) => e.key) : [];
249
+ }
250
+ function Se() {
251
+ A.value = [], x.value = [];
252
+ }
253
+ function de(e, t) {
254
+ const n = U.value.map((w) => w.key), s = n.indexOf(e), B = n.indexOf(t);
255
+ s === -1 || B === -1 || s === B || (n.splice(B, 0, ...n.splice(s, 1)), A.value = n);
256
+ }
257
+ function ue(e, t) {
258
+ const n = U.value.map((B) => B.key), s = n[n.indexOf(e) + t];
259
+ s && de(e, s);
260
+ }
261
+ function ze(e, t) {
262
+ var n;
263
+ J.value = t, (n = e.dataTransfer) == null || n.setData("text/plain", t);
264
+ }
265
+ function Ne(e) {
266
+ J.value && de(J.value, e), Te();
267
+ }
268
+ function Te() {
269
+ J.value = null, X.value = null;
270
+ }
271
+ const ce = c(() => {
272
+ var t;
273
+ const e = Tt + K.value.map((n) => n.key).sort().join(",");
274
+ return ((t = i.storageKey) == null ? void 0 : t.call(i, e)) ?? e;
200
275
  });
201
- const H = (t) => {
202
- A.value = t, z.value = !0;
203
- }, J = () => {
204
- A.value = null, z.value = !1;
205
- }, Q = (t) => {
206
- c("editItem", t);
207
- }, W = (t) => {
208
- c("viewItem", t);
209
- }, X = () => {
210
- c("deleteItem", A.value), z.value = !1;
211
- }, E = ({ page: t, itemsPerPage: a }) => {
212
- const V = D.value.map(($) => ({
213
- column: $.key,
214
- direction: $.order
276
+ z(
277
+ ce,
278
+ (e) => {
279
+ try {
280
+ const t = JSON.parse(localStorage.getItem(e) ?? "null");
281
+ A.value = Array.isArray(t == null ? void 0 : t.order) ? t.order : [], x.value = Array.isArray(t == null ? void 0 : t.hidden) ? t.hidden : [];
282
+ } catch {
283
+ A.value = [], x.value = [];
284
+ }
285
+ },
286
+ { immediate: !0 }
287
+ ), z([A, x], ([e, t]) => {
288
+ try {
289
+ e.length || t.length ? localStorage.setItem(ce.value, JSON.stringify({ order: e, hidden: t })) : localStorage.removeItem(ce.value);
290
+ } catch {
291
+ }
292
+ });
293
+ const ve = v(null), me = v(null), Q = v(!1), fe = v(!1), ee = v(!1), pe = v(!1), Be = v({});
294
+ let q = null;
295
+ const Ke = c(() => Q.value || j.value > 0 || re.value), De = c(() => ee.value && !pe.value), Ue = c(() => ({
296
+ "vdt--pinned": xe.value,
297
+ "vdt--can-left": fe.value,
298
+ "vdt--can-right": ee.value
299
+ }));
300
+ function ge() {
301
+ var e;
302
+ return ((e = me.value) == null ? void 0 : e.querySelector(".v-table__wrapper")) ?? null;
303
+ }
304
+ function te() {
305
+ const e = me.value, t = ge();
306
+ if (!e || !t) return;
307
+ const n = t.scrollWidth - t.clientWidth;
308
+ Q.value = n > he, fe.value = Q.value && t.scrollLeft > he, ee.value = Q.value && t.scrollLeft < n - he;
309
+ const s = xe.value ? t.querySelector("thead > tr > th:last-child") : null, B = t.querySelector("thead"), w = t.getBoundingClientRect();
310
+ Be.value = {
311
+ "--vdt-pinned-w": `${(s == null ? void 0 : s.offsetWidth) ?? 0}px`,
312
+ "--vdt-scroll-top": `${w.top - e.getBoundingClientRect().top}px`,
313
+ "--vdt-scroll-h": `${w.height}px`,
314
+ "--vdt-head-h": `${(B == null ? void 0 : B.offsetHeight) ?? 48}px`
315
+ };
316
+ }
317
+ function je(e) {
318
+ const t = ge();
319
+ !t || e.target !== t || (t.scrollLeft > 10 && (pe.value = !0), te());
320
+ }
321
+ function _e(e) {
322
+ var t;
323
+ e === 1 && (pe.value = !0), (t = ge()) == null || t.scrollBy({ left: e * St, behavior: "smooth" });
324
+ }
325
+ z([we, () => d.items, () => d.loading], () => lt(te)), nt(() => {
326
+ F({
327
+ page: Z.value,
328
+ itemsPerPage: R.value
329
+ }), typeof ResizeObserver < "u" && ve.value && (q = new ResizeObserver(() => requestAnimationFrame(te)), q.observe(ve.value)), te();
330
+ }), at(() => q == null ? void 0 : q.disconnect());
331
+ const qe = (e) => {
332
+ se.value = e, W.value = !0;
333
+ }, Fe = () => {
334
+ se.value = null, W.value = !1;
335
+ }, Ge = (e) => {
336
+ y("editItem", e);
337
+ }, Ye = (e) => {
338
+ y("viewItem", e);
339
+ }, Ze = () => {
340
+ y("deleteItem", se.value), W.value = !1;
341
+ }, F = ({ page: e, itemsPerPage: t }) => {
342
+ const n = Y.value.map((s) => ({
343
+ column: s.key,
344
+ direction: s.order
215
345
  }));
216
- c("onLoadData", {
217
- page: t,
218
- itemsPerPage: a,
219
- search: l.search,
220
- sortBy: V
346
+ y("onLoadData", {
347
+ page: e,
348
+ itemsPerPage: t,
349
+ search: d.search,
350
+ sortBy: n
221
351
  });
222
352
  };
223
- function Z() {
224
- E({
353
+ function We() {
354
+ F({
225
355
  page: 1,
226
- itemsPerPage: d.value
356
+ itemsPerPage: R.value
227
357
  });
228
358
  }
229
- const _ = me(Z, 400);
230
- return j(
231
- () => l.search,
232
- (t, a) => {
233
- t !== a && _();
359
+ const Je = ft(We, 400);
360
+ return z(
361
+ () => d.search,
362
+ (e, t) => {
363
+ e !== t && Je();
234
364
  }
235
- ), j(d, (t, a) => {
236
- t !== a && E({
365
+ ), z(R, (e, t) => {
366
+ e !== t && F({
237
367
  page: 1,
238
- itemsPerPage: t
368
+ itemsPerPage: e
239
369
  });
240
- }), j(D, () => {
241
- E({
370
+ }), z(Y, () => {
371
+ F({
242
372
  page: 1,
243
- itemsPerPage: d.value
373
+ itemsPerPage: R.value
244
374
  });
245
- }), j(O, (t) => {
246
- E({
247
- page: t,
248
- itemsPerPage: d.value
375
+ }), z(Z, (e) => {
376
+ F({
377
+ page: e,
378
+ itemsPerPage: R.value
249
379
  });
250
- }), (t, a) => {
251
- const V = w("v-icon"), $ = w("v-btn"), F = w("v-tooltip"), ee = w("v-data-table-server");
252
- return v(), ne(ae, null, [
253
- r(ee, {
254
- headers: e.headers,
255
- items: e.items,
256
- loading: e.loading,
257
- "items-length": e.totalItems,
258
- "items-per-page": d.value,
259
- "onUpdate:itemsPerPage": a[0] || (a[0] = (o) => d.value = o),
260
- search: e.search,
261
- "sort-by": D.value,
262
- "onUpdate:sortBy": a[1] || (a[1] = (o) => D.value = o),
263
- page: O.value,
264
- "onUpdate:page": a[2] || (a[2] = (o) => O.value = o),
265
- "item-value": e.itemValue,
266
- "show-expand": e.showExpand,
267
- "show-select": e.showSelect,
268
- "select-strategy": e.selectStrategy,
269
- modelValue: k.value,
270
- "onUpdate:modelValue": a[3] || (a[3] = (o) => k.value = o),
271
- class: le(x.value)
272
- }, se({
273
- "item.data-table-expand": n(({ internalItem: o, isExpanded: m, toggleExpand: g }) => [
274
- b(t.$slots, "item.data-table-expand", {
275
- internalItem: o,
276
- isExpanded: m,
277
- toggleExpand: g
278
- }, () => [
279
- r($, {
280
- onClick: (U) => g(o),
281
- rounded: ""
282
- }, {
283
- default: n(() => [
284
- r(V, null, {
285
- default: n(() => [
286
- T(P(m(o) ? "mdi-chevron-up" : "mdi-chevron-down"), 1)
287
- ]),
288
- _: 2
289
- }, 1024)
290
- ]),
291
- _: 2
292
- }, 1032, ["onClick"])
293
- ])
294
- ]),
295
- "expanded-row": n(({ columns: o, item: m }) => [
296
- b(t.$slots, "expanded-row", {
297
- columns: o,
298
- item: m
299
- })
300
- ]),
301
- "item.actions": n(({ item: o }) => [
302
- b(t.$slots, "before-actions", { item: o }),
303
- e.showViewButton ? (v(), y(F, {
304
- key: 0,
305
- text: e.viewButtonText
380
+ }), (e, t) => {
381
+ const n = f("v-btn"), s = f("v-text-field"), B = f("v-checkbox-btn"), w = f("v-icon"), Xe = f("v-card-text"), Qe = f("v-card"), et = f("v-menu"), oe = f("v-tooltip"), tt = f("v-data-table-server");
382
+ return m(), G("div", {
383
+ ref_key: "rootRef",
384
+ ref: ve,
385
+ class: $e(["vdt", Ue.value]),
386
+ style: st(Be.value)
387
+ }, [
388
+ rt(P("div", bt, [
389
+ C(e.$slots, "column-chooser", {
390
+ columns: Ae.value,
391
+ hiddenCount: j.value,
392
+ label: Ce.value,
393
+ setVisible: ke,
394
+ toggleAll: Ve,
395
+ reset: Se,
396
+ move: ue,
397
+ place: de
398
+ }, () => [
399
+ r(et, {
400
+ modelValue: re.value,
401
+ "onUpdate:modelValue": t[2] || (t[2] = (l) => re.value = l),
402
+ "close-on-content-click": !1,
403
+ location: "bottom start"
306
404
  }, {
307
- activator: n(({ props: m }) => {
308
- var g;
309
- return [
310
- r($, S({
311
- icon: "",
312
- flat: "",
313
- onClick: (U) => W(o)
314
- }, m, {
315
- disabled: (g = e.disableView) == null ? void 0 : g.call(e, o)
316
- }), {
317
- default: n(() => [
318
- b(t.$slots, "view-icon", {}, () => [
319
- C(f.value) ? (v(), y(q(f.value), S({
320
- key: 0,
321
- size: 20,
322
- class: "text-info"
323
- }, B.value), null, 16)) : (v(), y(V, {
324
- key: 1,
325
- size: "20",
326
- class: "text-info"
327
- }, {
328
- default: n(() => [
329
- T(P(f.value), 1)
330
- ]),
331
- _: 1
332
- }))
333
- ])
334
- ]),
335
- _: 3
336
- }, 16, ["onClick", "disabled"])
337
- ];
338
- }),
339
- _: 2
340
- }, 1032, ["text"])) : N("", !0),
341
- e.showEditButton ? (v(), y(F, {
342
- key: 1,
343
- text: e.editButtonText
344
- }, {
345
- activator: n(({ props: m }) => {
346
- var g;
347
- return [
348
- r($, S({
349
- icon: "",
350
- flat: "",
351
- onClick: (U) => Q(o)
352
- }, m, {
353
- disabled: (g = e.disableEdit) == null ? void 0 : g.call(e, o)
354
- }), {
355
- default: n(() => [
356
- b(t.$slots, "edit-icon", {}, () => [
357
- C(p.value) ? (v(), y(q(p.value), S({
358
- key: 0,
359
- size: 20,
360
- class: "text-primary"
361
- }, B.value), null, 16)) : (v(), y(V, {
362
- key: 1,
363
- size: "20",
364
- class: "text-primary"
365
- }, {
366
- default: n(() => [
367
- T(P(p.value), 1)
368
- ]),
369
- _: 1
370
- }))
371
- ])
372
- ]),
373
- _: 3
374
- }, 16, ["onClick", "disabled"])
375
- ];
376
- }),
377
- _: 2
378
- }, 1032, ["text"])) : N("", !0),
379
- e.showDeleteButton ? (v(), y(F, {
380
- key: 2,
381
- text: e.deleteButtonText
382
- }, {
383
- activator: n(({ props: m }) => {
384
- var g;
385
- return [
386
- r($, S({
387
- icon: "",
388
- flat: "",
389
- onClick: (U) => H(o)
390
- }, m, {
391
- disabled: (g = e.disableDelete) == null ? void 0 : g.call(e, o)
392
- }), {
393
- default: n(() => [
394
- b(t.$slots, "delete-icon", {}, () => [
395
- C(s.value) ? (v(), y(q(s.value), S({
396
- key: 0,
397
- size: 20,
398
- class: "text-error"
399
- }, B.value), null, 16)) : (v(), y(V, {
400
- key: 1,
401
- size: "20",
402
- class: "text-error"
403
- }, {
404
- default: n(() => [
405
- T(P(s.value), 1)
406
- ]),
407
- _: 1
408
- }))
409
- ])
410
- ]),
411
- _: 3
412
- }, 16, ["onClick", "disabled"])
413
- ];
414
- }),
415
- _: 2
416
- }, 1032, ["text"])) : N("", !0),
417
- b(t.$slots, "after-actions", { item: o })
418
- ]),
419
- tfoot: n(() => [
420
- ie("tfoot", null, [
421
- b(t.$slots, "item.tfoot")
422
- ])
423
- ]),
424
- _: 2
405
+ activator: a(({ props: l }) => [
406
+ r(n, H(l, {
407
+ class: "vdt-columns__button",
408
+ variant: "outlined",
409
+ color: "primary",
410
+ size: "small",
411
+ "prepend-icon": Bt
412
+ }), {
413
+ default: a(() => [
414
+ V(g(Ce.value), 1)
415
+ ]),
416
+ _: 1
417
+ }, 16)
418
+ ]),
419
+ default: a(() => [
420
+ r(Qe, {
421
+ class: "vdt-columns",
422
+ "min-width": "280"
423
+ }, {
424
+ default: a(() => [
425
+ r(Xe, { class: "pa-3" }, {
426
+ default: a(() => [
427
+ r(s, {
428
+ modelValue: ie.value,
429
+ "onUpdate:modelValue": t[0] || (t[0] = (l) => ie.value = l),
430
+ placeholder: T("searchColumns"),
431
+ density: "compact",
432
+ variant: "outlined",
433
+ "hide-details": "",
434
+ clearable: ""
435
+ }, null, 8, ["modelValue", "placeholder"]),
436
+ P("div", yt, [
437
+ r(n, {
438
+ variant: "text",
439
+ size: "small",
440
+ color: "primary",
441
+ onClick: Ve
442
+ }, {
443
+ default: a(() => [
444
+ V(g(j.value === 0 ? T("hideAllColumns") : T("showAllColumns")), 1)
445
+ ]),
446
+ _: 1
447
+ }),
448
+ r(n, {
449
+ variant: "text",
450
+ size: "small",
451
+ onClick: Se
452
+ }, {
453
+ default: a(() => [
454
+ V(g(T("resetColumns")), 1)
455
+ ]),
456
+ _: 1
457
+ })
458
+ ]),
459
+ P("ul", ht, [
460
+ (m(!0), G(it, null, Ie(Re.value, (l) => (m(), G("li", {
461
+ key: l.key,
462
+ class: $e(["vdt-columns__item", { "vdt-columns__item--over": X.value === l.key }]),
463
+ draggable: "true",
464
+ onDragstart: (u) => ze(u, l.key),
465
+ onDragover: le((u) => X.value = l.key, ["prevent"]),
466
+ onDragleave: t[1] || (t[1] = (u) => X.value = null),
467
+ onDrop: le((u) => Ne(l.key), ["prevent"]),
468
+ onDragend: Te
469
+ }, [
470
+ r(B, {
471
+ "model-value": !x.value.includes(l.key),
472
+ label: l.title,
473
+ density: "compact",
474
+ class: "flex-grow-1",
475
+ "onUpdate:modelValue": (u) => ke(l.key, !!u)
476
+ }, null, 8, ["model-value", "label", "onUpdate:modelValue"]),
477
+ P("button", {
478
+ type: "button",
479
+ class: "vdt-columns__handle",
480
+ "aria-label": `${T("moveColumn")}: ${l.title}`,
481
+ title: T("moveColumn"),
482
+ onKeydown: [
483
+ Le(le((u) => ue(l.key, -1), ["prevent"]), ["up"]),
484
+ Le(le((u) => ue(l.key, 1), ["prevent"]), ["down"])
485
+ ]
486
+ }, [
487
+ r(w, {
488
+ icon: Dt,
489
+ size: "18"
490
+ })
491
+ ], 40, wt)
492
+ ], 42, xt))), 128))
493
+ ])
494
+ ]),
495
+ _: 1
496
+ })
497
+ ]),
498
+ _: 1
499
+ })
500
+ ]),
501
+ _: 1
502
+ }, 8, ["modelValue"])
503
+ ])
504
+ ], 512), [
505
+ [dt, Ke.value]
506
+ ]),
507
+ P("div", {
508
+ ref_key: "bodyRef",
509
+ ref: me,
510
+ class: "vdt-body",
511
+ onScrollCapturePassive: je
425
512
  }, [
426
- e.showSelect ? {
427
- name: "top",
428
- fn: n(() => [
429
- b(t.$slots, "selection-actions", {
430
- selected: k.value,
431
- count: k.value.length,
432
- clear: u
513
+ r(tt, H(e.$attrs, {
514
+ headers: we.value,
515
+ items: o.items,
516
+ loading: o.loading,
517
+ "items-length": o.totalItems,
518
+ "items-per-page": R.value,
519
+ "onUpdate:itemsPerPage": t[3] || (t[3] = (l) => R.value = l),
520
+ search: o.search,
521
+ "sort-by": Y.value,
522
+ "onUpdate:sortBy": t[4] || (t[4] = (l) => Y.value = l),
523
+ page: Z.value,
524
+ "onUpdate:page": t[5] || (t[5] = (l) => Z.value = l),
525
+ "item-value": o.itemValue,
526
+ "show-expand": o.showExpand,
527
+ "show-select": o.showSelect,
528
+ "select-strategy": o.selectStrategy,
529
+ modelValue: O.value,
530
+ "onUpdate:modelValue": t[6] || (t[6] = (l) => O.value = l),
531
+ class: p.value
532
+ }), ut({
533
+ "item.data-table-expand": a(({ internalItem: l, isExpanded: u, toggleExpand: D }) => [
534
+ C(e.$slots, "item.data-table-expand", {
535
+ internalItem: l,
536
+ isExpanded: u,
537
+ toggleExpand: D
538
+ }, () => [
539
+ r(n, {
540
+ onClick: (be) => D(l),
541
+ rounded: ""
542
+ }, {
543
+ default: a(() => [
544
+ r(w, null, {
545
+ default: a(() => [
546
+ V(g(u(l) ? "mdi-chevron-up" : "mdi-chevron-down"), 1)
547
+ ]),
548
+ _: 2
549
+ }, 1024)
550
+ ]),
551
+ _: 2
552
+ }, 1032, ["onClick"])
553
+ ])
554
+ ]),
555
+ "expanded-row": a(({ columns: l, item: u }) => [
556
+ C(e.$slots, "expanded-row", {
557
+ columns: l,
558
+ item: u
433
559
  })
434
560
  ]),
435
- key: "0"
436
- } : void 0,
437
- de(Y.value, (o) => ({
438
- name: `item.${o.key}`,
439
- fn: n(({ item: m }) => [
440
- b(t.$slots, `item.${o.key}`, { item: m }, () => [
441
- T(P(m[o.key]), 1)
561
+ "item.actions": a(({ item: l }) => [
562
+ C(e.$slots, "before-actions", { item: l }),
563
+ o.showViewButton ? (m(), k(oe, {
564
+ key: 0,
565
+ text: o.viewButtonText
566
+ }, {
567
+ activator: a(({ props: u }) => {
568
+ var D;
569
+ return [
570
+ r(n, H({
571
+ icon: "",
572
+ flat: "",
573
+ onClick: (be) => Ye(l)
574
+ }, u, {
575
+ disabled: (D = o.disableView) == null ? void 0 : D.call(o, l)
576
+ }), {
577
+ default: a(() => [
578
+ C(e.$slots, "view-icon", {}, () => [
579
+ S(L.value) ? (m(), k(ye(L.value), H({
580
+ key: 0,
581
+ size: 20,
582
+ class: "text-info"
583
+ }, E.value), null, 16)) : (m(), k(w, {
584
+ key: 1,
585
+ size: "20",
586
+ class: "text-info"
587
+ }, {
588
+ default: a(() => [
589
+ V(g(L.value), 1)
590
+ ]),
591
+ _: 1
592
+ }))
593
+ ])
594
+ ]),
595
+ _: 3
596
+ }, 16, ["onClick", "disabled"])
597
+ ];
598
+ }),
599
+ _: 2
600
+ }, 1032, ["text"])) : N("", !0),
601
+ o.showEditButton ? (m(), k(oe, {
602
+ key: 1,
603
+ text: o.editButtonText
604
+ }, {
605
+ activator: a(({ props: u }) => {
606
+ var D;
607
+ return [
608
+ r(n, H({
609
+ icon: "",
610
+ flat: "",
611
+ onClick: (be) => Ge(l)
612
+ }, u, {
613
+ disabled: (D = o.disableEdit) == null ? void 0 : D.call(o, l)
614
+ }), {
615
+ default: a(() => [
616
+ C(e.$slots, "edit-icon", {}, () => [
617
+ S(h.value) ? (m(), k(ye(h.value), H({
618
+ key: 0,
619
+ size: 20,
620
+ class: "text-primary"
621
+ }, E.value), null, 16)) : (m(), k(w, {
622
+ key: 1,
623
+ size: "20",
624
+ class: "text-primary"
625
+ }, {
626
+ default: a(() => [
627
+ V(g(h.value), 1)
628
+ ]),
629
+ _: 1
630
+ }))
631
+ ])
632
+ ]),
633
+ _: 3
634
+ }, 16, ["onClick", "disabled"])
635
+ ];
636
+ }),
637
+ _: 2
638
+ }, 1032, ["text"])) : N("", !0),
639
+ o.showDeleteButton ? (m(), k(oe, {
640
+ key: 2,
641
+ text: o.deleteButtonText
642
+ }, {
643
+ activator: a(({ props: u }) => {
644
+ var D;
645
+ return [
646
+ r(n, H({
647
+ icon: "",
648
+ flat: "",
649
+ onClick: (be) => qe(l)
650
+ }, u, {
651
+ disabled: (D = o.disableDelete) == null ? void 0 : D.call(o, l)
652
+ }), {
653
+ default: a(() => [
654
+ C(e.$slots, "delete-icon", {}, () => [
655
+ S(M.value) ? (m(), k(ye(M.value), H({
656
+ key: 0,
657
+ size: 20,
658
+ class: "text-error"
659
+ }, E.value), null, 16)) : (m(), k(w, {
660
+ key: 1,
661
+ size: "20",
662
+ class: "text-error"
663
+ }, {
664
+ default: a(() => [
665
+ V(g(M.value), 1)
666
+ ]),
667
+ _: 1
668
+ }))
669
+ ])
670
+ ]),
671
+ _: 3
672
+ }, 16, ["onClick", "disabled"])
673
+ ];
674
+ }),
675
+ _: 2
676
+ }, 1032, ["text"])) : N("", !0),
677
+ C(e.$slots, "after-actions", { item: l })
678
+ ]),
679
+ tfoot: a(() => [
680
+ P("tfoot", null, [
681
+ C(e.$slots, "item.tfoot")
682
+ ])
683
+ ]),
684
+ _: 2
685
+ }, [
686
+ o.showSelect ? {
687
+ name: "top",
688
+ fn: a(() => [
689
+ C(e.$slots, "selection-actions", {
690
+ selected: O.value,
691
+ count: O.value.length,
692
+ clear: Ee
693
+ })
694
+ ]),
695
+ key: "0"
696
+ } : void 0,
697
+ Ie(Oe.value, (l) => ({
698
+ name: `item.${l.key}`,
699
+ fn: a(({ item: u }) => [
700
+ C(e.$slots, `item.${l.key}`, { item: u }, () => [
701
+ V(g(u[l.key]), 1)
702
+ ])
442
703
  ])
443
- ])
444
- }))
445
- ]), 1032, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "show-select", "select-strategy", "modelValue", "class"]),
446
- r(fe, {
447
- show: z.value,
448
- title: e.deleteModalTitle,
449
- description: e.deleteModalMessage,
450
- confirmButtonText: e.deleteModalConfirmButtonText,
451
- cancelButtonText: e.deleteModalCancelButtonText,
452
- onClose: J,
453
- onConfirm: X
704
+ }))
705
+ ]), 1040, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "show-select", "select-strategy", "modelValue", "class"]),
706
+ t[9] || (t[9] = P("div", { class: "vdt-fade vdt-fade--left" }, null, -1)),
707
+ t[10] || (t[10] = P("div", { class: "vdt-fade vdt-fade--right" }, null, -1)),
708
+ fe.value ? (m(), G("button", {
709
+ key: 0,
710
+ type: "button",
711
+ class: "vdt-arrow vdt-arrow--left",
712
+ "aria-label": T("scrollLeft"),
713
+ onClick: t[7] || (t[7] = (l) => _e(-1))
714
+ }, [
715
+ r(w, {
716
+ icon: _t,
717
+ size: "20"
718
+ })
719
+ ], 8, Ct)) : N("", !0),
720
+ ee.value ? (m(), k(oe, {
721
+ key: 1,
722
+ text: T("scrollRight"),
723
+ disabled: De.value,
724
+ location: "top"
725
+ }, {
726
+ activator: a(({ props: l }) => [
727
+ P("button", H(l, {
728
+ type: "button",
729
+ class: "vdt-arrow vdt-arrow--right",
730
+ "aria-label": T("scrollRight"),
731
+ onClick: t[8] || (t[8] = (u) => _e(1))
732
+ }), [
733
+ r(w, {
734
+ icon: $t,
735
+ size: "20"
736
+ })
737
+ ], 16, kt)
738
+ ]),
739
+ _: 1
740
+ }, 8, ["text", "disabled"])) : N("", !0),
741
+ De.value ? (m(), G("span", Vt, g(T("scrollHint")), 1)) : N("", !0)
742
+ ], 544),
743
+ r(pt, {
744
+ show: W.value,
745
+ title: o.deleteModalTitle,
746
+ description: o.deleteModalMessage,
747
+ confirmButtonText: o.deleteModalConfirmButtonText,
748
+ cancelButtonText: o.deleteModalCancelButtonText,
749
+ onClose: Fe,
750
+ onConfirm: Ze
454
751
  }, null, 8, ["show", "title", "description", "confirmButtonText", "cancelButtonText"])
455
- ], 64);
752
+ ], 6);
456
753
  };
457
754
  }
458
- }), ye = {
459
- install(e) {
460
- e.component("DataTable", ve);
755
+ }), Pt = {
756
+ install(o) {
757
+ o.component("DataTable", It);
461
758
  }
462
759
  };
463
760
  export {
464
- K as DATA_TABLE_CONFIG_KEY,
465
- ve as DataTable,
466
- be as createDataTableConfig,
467
- ye as default
761
+ He as DATA_TABLE_CONFIG_KEY,
762
+ It as DataTable,
763
+ Mt as createDataTableConfig,
764
+ Pt as default
468
765
  };