@dazzadev/vuetify-datatable 1.0.5 → 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 +122 -0
  2. package/dist/components/DataTable.vue.d.ts +24 -3
  3. package/dist/index.d.ts +1 -1
  4. package/dist/types.d.ts +23 -0
  5. package/dist/vuetify-datatable.js +647 -325
  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 U, computed as $, resolveComponent as y, openBlock as g, createBlock as x, withCtx as n, createVNode as r, createTextVNode as T, toDisplayString as P, renderSlot as p, createCommentVNode as L, inject as _, ref as S, onMounted as ee, watch as z, createElementBlock as te, Fragment as oe, normalizeClass as ne, createSlots as ae, createElementVNode as le, mergeProps as M, resolveDynamicComponent as F, renderList as ie } from "vue";
2
- function se(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 j = { exports: {} }, q;
6
- function de() {
7
- if (q) return j.exports;
8
- q = 1;
9
- function e(h, l = 100, u = {}) {
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: d } = typeof u == "boolean" ? { immediate: u } : u;
15
- let m, B, a, C, w;
16
- function k() {
17
- const v = m, D = B;
18
- return m = void 0, B = void 0, w = h.apply(v, D), w;
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 f() {
21
- const v = Date.now() - C;
22
- v < l && v >= 0 ? a = setTimeout(f, l - v) : (a = void 0, d || (w = k()));
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 i = function(...v) {
25
- if (m && this !== m && Object.getPrototypeOf(this) === Object.getPrototypeOf(m))
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
- m = this, B = v, C = Date.now();
28
- const D = d && !a;
29
- return a || (a = setTimeout(f, l)), D && (w = k()), w;
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(i, "isPending", {
31
+ return Object.defineProperty(p, "isPending", {
32
32
  get() {
33
- return a !== void 0;
33
+ return i !== void 0;
34
34
  }
35
- }), i.clear = () => {
36
- a && (clearTimeout(a), a = void 0);
37
- }, i.flush = () => {
38
- a && i.trigger();
39
- }, i.trigger = () => {
40
- w = k(), i.clear();
41
- }, i;
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 j.exports.debounce = e, j.exports = e, j.exports;
43
+ return ne.exports.debounce = o, ne.exports = o, ne.exports;
44
44
  }
45
- var re = /* @__PURE__ */ de();
46
- const ce = /* @__PURE__ */ se(re), ue = /* @__PURE__ */ U({
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 ce = /* @__PURE__ */ se(re), ue = /* @__PURE__ */ U({
53
53
  cancelButtonText: String
54
54
  },
55
55
  emits: ["close", "confirm"],
56
- setup(e) {
57
- const h = e, l = $({
58
- get: () => h.show,
56
+ setup(o) {
57
+ const _ = o, $ = c({
58
+ get: () => _.show,
59
59
  set: () => {
60
60
  }
61
61
  });
62
- return (u, d) => {
63
- const m = y("v-card-title"), B = y("v-card-text"), a = y("v-spacer"), C = y("v-btn"), w = y("v-card-actions"), k = y("v-card"), f = y("v-dialog");
64
- return g(), x(f, {
65
- modelValue: l.value,
66
- "onUpdate:modelValue": d[2] || (d[2] = (i) => l.value = i),
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(k, null, {
73
- default: n(() => [
74
- r(m, { 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 ? (g(), x(B, {
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
- p(u.$slots, "description")
84
+ default: a(() => [
85
+ V(g(o.description) + " ", 1),
86
+ C(I.$slots, "description")
87
87
  ]),
88
88
  _: 3
89
- })) : L("", !0),
90
- r(w, null, {
91
- default: n(() => [
92
- r(a),
93
- r(C, {
89
+ })) : N("", !0),
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: d[0] || (d[0] = (i) => u.$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(C, {
104
+ r(L, {
105
105
  color: "success",
106
106
  variant: "flat",
107
107
  dark: "",
108
- onClick: d[1] || (d[1] = (i) => u.$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(a)
115
+ r(i)
116
116
  ]),
117
117
  _: 1
118
118
  })
@@ -124,15 +124,19 @@ const ce = /* @__PURE__ */ se(re), ue = /* @__PURE__ */ U({
124
124
  }, 8, ["modelValue"]);
125
125
  };
126
126
  }
127
- }), R = Symbol("DataTableConfig");
128
- function ve(e) {
127
+ }), He = Symbol("DataTableConfig");
128
+ function Mt(o) {
129
129
  return {
130
- install(h) {
131
- h.provide(R, e);
130
+ install(_) {
131
+ _.provide(He, o);
132
132
  }
133
133
  };
134
134
  }
135
- const me = /* @__PURE__ */ U({
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: {},
@@ -144,6 +148,9 @@ const me = /* @__PURE__ */ U({
144
148
  itemsPerPage: { default: 10 },
145
149
  search: {},
146
150
  showExpand: { type: Boolean, default: !1 },
151
+ showSelect: { type: Boolean, default: !1 },
152
+ selectStrategy: { default: "page" },
153
+ modelValue: { default: () => [] },
147
154
  showEditButton: { type: Boolean, default: !0 },
148
155
  showDeleteButton: { type: Boolean, default: !0 },
149
156
  showViewButton: { type: Boolean, default: !1 },
@@ -161,283 +168,598 @@ const me = /* @__PURE__ */ U({
161
168
  disableEdit: {},
162
169
  disableDelete: {}
163
170
  },
164
- emits: ["onLoadData", "editItem", "deleteItem", "viewItem"],
165
- setup(e, { emit: h }) {
166
- const l = e, u = h, d = _(R, { icons: {} }), m = $(() => {
167
- var t;
168
- return l.viewIcon ?? ((t = d.icons) == null ? void 0 : t.view) ?? "mdi-eye-outline";
169
- }), B = $(() => {
170
- var t;
171
- return l.editIcon ?? ((t = d.icons) == null ? void 0 : t.edit) ?? "mdi-pencil-outline";
172
- }), a = $(() => {
173
- var t;
174
- return l.deleteIcon ?? ((t = d.icons) == null ? void 0 : t.delete) ?? "mdi-trash-can-outline";
175
- }), C = $(() => d.iconProps ?? {}), w = $(() => l.tableClass ?? d.tableClass ?? "border rounded-md");
176
- function k(t) {
177
- return typeof t != "string";
171
+ emits: ["onLoadData", "editItem", "deleteItem", "viewItem", "update:modelValue"],
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);
178
177
  }
179
- const f = S(l.itemsPerPage), i = S([]), v = S(1), D = S(null), O = S(!1), G = $(() => {
180
- var t;
181
- return ((t = l.headers) == null ? void 0 : t.filter(
182
- (s) => s.key !== "actions" && s.key !== "expanded-row" && s.key !== "data-table-expand"
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";
202
+ }
203
+ const O = c({
204
+ get: () => d.modelValue,
205
+ set: (e) => y("update:modelValue", e)
206
+ });
207
+ function Ee() {
208
+ y("update:modelValue", []);
209
+ }
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"
183
214
  )) || [];
184
215
  });
185
- ee(() => {
186
- V({
187
- page: v.value,
188
- itemsPerPage: f.value
189
- });
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;
275
+ });
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
+ }
190
292
  });
191
- const K = (t) => {
192
- D.value = t, O.value = !0;
193
- }, Y = () => {
194
- D.value = null, O.value = !1;
195
- }, H = (t) => {
196
- u("editItem", t);
197
- }, J = (t) => {
198
- u("viewItem", t);
199
- }, Q = () => {
200
- u("deleteItem", D.value), O.value = !1;
201
- }, V = ({ page: t, itemsPerPage: s }) => {
202
- const E = i.value.map((I) => ({
203
- column: I.key,
204
- direction: I.order
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
205
345
  }));
206
- u("onLoadData", {
207
- page: t,
208
- itemsPerPage: s,
209
- search: l.search,
210
- sortBy: E
346
+ y("onLoadData", {
347
+ page: e,
348
+ itemsPerPage: t,
349
+ search: d.search,
350
+ sortBy: n
211
351
  });
212
352
  };
213
- function W() {
214
- V({
353
+ function We() {
354
+ F({
215
355
  page: 1,
216
- itemsPerPage: f.value
356
+ itemsPerPage: R.value
217
357
  });
218
358
  }
219
- const X = ce(W, 400);
359
+ const Je = ft(We, 400);
220
360
  return z(
221
- () => l.search,
222
- (t, s) => {
223
- t !== s && X();
361
+ () => d.search,
362
+ (e, t) => {
363
+ e !== t && Je();
224
364
  }
225
- ), z(f, (t, s) => {
226
- t !== s && V({
365
+ ), z(R, (e, t) => {
366
+ e !== t && F({
227
367
  page: 1,
228
- itemsPerPage: t
368
+ itemsPerPage: e
229
369
  });
230
- }), z(i, () => {
231
- V({
370
+ }), z(Y, () => {
371
+ F({
232
372
  page: 1,
233
- itemsPerPage: f.value
373
+ itemsPerPage: R.value
234
374
  });
235
- }), z(v, (t) => {
236
- V({
237
- page: t,
238
- itemsPerPage: f.value
375
+ }), z(Z, (e) => {
376
+ F({
377
+ page: e,
378
+ itemsPerPage: R.value
239
379
  });
240
- }), (t, s) => {
241
- const E = y("v-icon"), I = y("v-btn"), N = y("v-tooltip"), Z = y("v-data-table-server");
242
- return g(), te(oe, null, [
243
- r(Z, {
244
- headers: e.headers,
245
- items: e.items,
246
- loading: e.loading,
247
- "items-length": e.totalItems,
248
- "items-per-page": f.value,
249
- "onUpdate:itemsPerPage": s[0] || (s[0] = (o) => f.value = o),
250
- search: e.search,
251
- "sort-by": i.value,
252
- "onUpdate:sortBy": s[1] || (s[1] = (o) => i.value = o),
253
- page: v.value,
254
- "onUpdate:page": s[2] || (s[2] = (o) => v.value = o),
255
- "item-value": e.itemValue,
256
- "show-expand": e.showExpand,
257
- class: ne(w.value)
258
- }, ae({
259
- "item.data-table-expand": n(({ internalItem: o, isExpanded: c, toggleExpand: b }) => [
260
- p(t.$slots, "item.data-table-expand", {
261
- internalItem: o,
262
- isExpanded: c,
263
- toggleExpand: b
264
- }, () => [
265
- r(I, {
266
- onClick: (A) => b(o),
267
- rounded: ""
268
- }, {
269
- default: n(() => [
270
- r(E, null, {
271
- default: n(() => [
272
- T(P(c(o) ? "mdi-chevron-up" : "mdi-chevron-down"), 1)
273
- ]),
274
- _: 2
275
- }, 1024)
276
- ]),
277
- _: 2
278
- }, 1032, ["onClick"])
279
- ])
280
- ]),
281
- "expanded-row": n(({ columns: o, item: c }) => [
282
- p(t.$slots, "expanded-row", {
283
- columns: o,
284
- item: c
285
- })
286
- ]),
287
- "item.actions": n(({ item: o }) => [
288
- p(t.$slots, "before-actions", { item: o }),
289
- e.showViewButton ? (g(), x(N, {
290
- key: 0,
291
- text: e.viewButtonText
292
- }, {
293
- activator: n(({ props: c }) => {
294
- var b;
295
- return [
296
- r(I, M({
297
- icon: "",
298
- flat: "",
299
- onClick: (A) => J(o)
300
- }, c, {
301
- disabled: (b = e.disableView) == null ? void 0 : b.call(e, o)
302
- }), {
303
- default: n(() => [
304
- p(t.$slots, "view-icon", {}, () => [
305
- k(m.value) ? (g(), x(F(m.value), M({
306
- key: 0,
307
- size: 20,
308
- class: "text-info"
309
- }, C.value), null, 16)) : (g(), x(E, {
310
- key: 1,
311
- size: "20",
312
- class: "text-info"
313
- }, {
314
- default: n(() => [
315
- T(P(m.value), 1)
316
- ]),
317
- _: 1
318
- }))
319
- ])
320
- ]),
321
- _: 3
322
- }, 16, ["onClick", "disabled"])
323
- ];
324
- }),
325
- _: 2
326
- }, 1032, ["text"])) : L("", !0),
327
- e.showEditButton ? (g(), x(N, {
328
- key: 1,
329
- text: e.editButtonText
330
- }, {
331
- activator: n(({ props: c }) => {
332
- var b;
333
- return [
334
- r(I, M({
335
- icon: "",
336
- flat: "",
337
- onClick: (A) => H(o)
338
- }, c, {
339
- disabled: (b = e.disableEdit) == null ? void 0 : b.call(e, o)
340
- }), {
341
- default: n(() => [
342
- p(t.$slots, "edit-icon", {}, () => [
343
- k(B.value) ? (g(), x(F(B.value), M({
344
- key: 0,
345
- size: 20,
346
- class: "text-primary"
347
- }, C.value), null, 16)) : (g(), x(E, {
348
- key: 1,
349
- size: "20",
350
- class: "text-primary"
351
- }, {
352
- default: n(() => [
353
- T(P(B.value), 1)
354
- ]),
355
- _: 1
356
- }))
357
- ])
358
- ]),
359
- _: 3
360
- }, 16, ["onClick", "disabled"])
361
- ];
362
- }),
363
- _: 2
364
- }, 1032, ["text"])) : L("", !0),
365
- e.showDeleteButton ? (g(), x(N, {
366
- key: 2,
367
- text: e.deleteButtonText
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"
368
404
  }, {
369
- activator: n(({ props: c }) => {
370
- var b;
371
- return [
372
- r(I, M({
373
- icon: "",
374
- flat: "",
375
- onClick: (A) => K(o)
376
- }, c, {
377
- disabled: (b = e.disableDelete) == null ? void 0 : b.call(e, o)
378
- }), {
379
- default: n(() => [
380
- p(t.$slots, "delete-icon", {}, () => [
381
- k(a.value) ? (g(), x(F(a.value), M({
382
- key: 0,
383
- size: 20,
384
- class: "text-error"
385
- }, C.value), null, 16)) : (g(), x(E, {
386
- key: 1,
387
- size: "20",
388
- class: "text-error"
389
- }, {
390
- default: n(() => [
391
- T(P(a.value), 1)
392
- ]),
393
- _: 1
394
- }))
395
- ])
396
- ]),
397
- _: 3
398
- }, 16, ["onClick", "disabled"])
399
- ];
400
- }),
401
- _: 2
402
- }, 1032, ["text"])) : L("", !0),
403
- p(t.$slots, "after-actions", { item: o })
404
- ]),
405
- tfoot: n(() => [
406
- le("tfoot", null, [
407
- p(t.$slots, "item.tfoot")
408
- ])
409
- ]),
410
- _: 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
411
512
  }, [
412
- ie(G.value, (o) => ({
413
- name: `item.${o.key}`,
414
- fn: n(({ item: c }) => [
415
- p(t.$slots, `item.${o.key}`, { item: c }, () => [
416
- T(P(c[o.key]), 1)
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
559
+ })
560
+ ]),
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")
417
682
  ])
418
- ])
419
- }))
420
- ]), 1032, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "class"]),
421
- r(ue, {
422
- show: O.value,
423
- title: e.deleteModalTitle,
424
- description: e.deleteModalMessage,
425
- confirmButtonText: e.deleteModalConfirmButtonText,
426
- cancelButtonText: e.deleteModalCancelButtonText,
427
- onClose: Y,
428
- onConfirm: Q
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
+ ])
703
+ ])
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
429
751
  }, null, 8, ["show", "title", "description", "confirmButtonText", "cancelButtonText"])
430
- ], 64);
752
+ ], 6);
431
753
  };
432
754
  }
433
- }), ge = {
434
- install(e) {
435
- e.component("DataTable", me);
755
+ }), Pt = {
756
+ install(o) {
757
+ o.component("DataTable", It);
436
758
  }
437
759
  };
438
760
  export {
439
- R as DATA_TABLE_CONFIG_KEY,
440
- me as DataTable,
441
- ve as createDataTableConfig,
442
- ge as default
761
+ He as DATA_TABLE_CONFIG_KEY,
762
+ It as DataTable,
763
+ Mt as createDataTableConfig,
764
+ Pt as default
443
765
  };