@dazzadev/vuetify-datatable 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -2
- package/dist/vuetify-datatable.js +66 -69
- package/dist/vuetify-datatable.umd.cjs +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @dazzadev/vuetify-datatable
|
|
2
2
|
|
|
3
|
-
Reusable server-side DataTable component for Vuetify 3. Includes action buttons (view, edit, delete), configurable icons, and a built-in delete confirmation dialog.
|
|
3
|
+
Reusable server-side DataTable component for Vuetify 3 and 4. Includes action buttons (view, edit, delete), configurable icons, and a built-in delete confirmation dialog.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -159,7 +159,10 @@ If no configuration is provided, the component uses Material Design Icons (inclu
|
|
|
159
159
|
## Peer Dependencies
|
|
160
160
|
|
|
161
161
|
- `vue` >= 3.3
|
|
162
|
-
- `vuetify`
|
|
162
|
+
- `vuetify` 3.x or 4.x
|
|
163
|
+
|
|
164
|
+
The component only uses the `v-data-table-server` API that is common to both major
|
|
165
|
+
versions, so a single build works with either.
|
|
163
166
|
|
|
164
167
|
## License
|
|
165
168
|
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
function
|
|
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
3
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
4
4
|
}
|
|
5
|
-
var j = { exports: {} },
|
|
6
|
-
function
|
|
7
|
-
if (
|
|
8
|
-
|
|
9
|
-
function e(
|
|
10
|
-
if (typeof
|
|
11
|
-
throw new TypeError(`Expected the first parameter to be a function, got \`${typeof
|
|
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
12
|
if (l < 0)
|
|
13
13
|
throw new RangeError("`wait` must not be negative.");
|
|
14
14
|
const { immediate: d } = typeof u == "boolean" ? { immediate: u } : u;
|
|
15
15
|
let m, B, a, C, w;
|
|
16
16
|
function k() {
|
|
17
17
|
const v = m, D = B;
|
|
18
|
-
return m = void 0, B = void 0, w =
|
|
18
|
+
return m = void 0, B = void 0, w = h.apply(v, D), w;
|
|
19
19
|
}
|
|
20
20
|
function f() {
|
|
21
21
|
const v = Date.now() - C;
|
|
@@ -42,8 +42,8 @@ function re() {
|
|
|
42
42
|
}
|
|
43
43
|
return j.exports.debounce = e, j.exports = e, j.exports;
|
|
44
44
|
}
|
|
45
|
-
var
|
|
46
|
-
const
|
|
45
|
+
var re = /* @__PURE__ */ de();
|
|
46
|
+
const ce = /* @__PURE__ */ se(re), ue = /* @__PURE__ */ U({
|
|
47
47
|
__name: "ConfirmationModal",
|
|
48
48
|
props: {
|
|
49
49
|
show: Boolean,
|
|
@@ -54,8 +54,8 @@ const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
|
|
|
54
54
|
},
|
|
55
55
|
emits: ["close", "confirm"],
|
|
56
56
|
setup(e) {
|
|
57
|
-
const
|
|
58
|
-
get: () =>
|
|
57
|
+
const h = e, l = $({
|
|
58
|
+
get: () => h.show,
|
|
59
59
|
set: () => {
|
|
60
60
|
}
|
|
61
61
|
});
|
|
@@ -83,7 +83,7 @@ const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
|
|
|
83
83
|
}, {
|
|
84
84
|
default: n(() => [
|
|
85
85
|
T(P(e.description) + " ", 1),
|
|
86
|
-
|
|
86
|
+
p(u.$slots, "description")
|
|
87
87
|
]),
|
|
88
88
|
_: 3
|
|
89
89
|
})) : L("", !0),
|
|
@@ -124,15 +124,15 @@ const ue = /* @__PURE__ */ de(ce), me = /* @__PURE__ */ R({
|
|
|
124
124
|
}, 8, ["modelValue"]);
|
|
125
125
|
};
|
|
126
126
|
}
|
|
127
|
-
}),
|
|
128
|
-
function
|
|
127
|
+
}), R = Symbol("DataTableConfig");
|
|
128
|
+
function ve(e) {
|
|
129
129
|
return {
|
|
130
|
-
install(
|
|
131
|
-
|
|
130
|
+
install(h) {
|
|
131
|
+
h.provide(R, e);
|
|
132
132
|
}
|
|
133
133
|
};
|
|
134
134
|
}
|
|
135
|
-
const
|
|
135
|
+
const me = /* @__PURE__ */ U({
|
|
136
136
|
__name: "DataTable",
|
|
137
137
|
props: {
|
|
138
138
|
tableClass: {},
|
|
@@ -162,8 +162,8 @@ const fe = /* @__PURE__ */ R({
|
|
|
162
162
|
disableDelete: {}
|
|
163
163
|
},
|
|
164
164
|
emits: ["onLoadData", "editItem", "deleteItem", "viewItem"],
|
|
165
|
-
setup(e, { emit:
|
|
166
|
-
const l = e, u =
|
|
165
|
+
setup(e, { emit: h }) {
|
|
166
|
+
const l = e, u = h, d = _(R, { icons: {} }), m = $(() => {
|
|
167
167
|
var t;
|
|
168
168
|
return l.viewIcon ?? ((t = d.icons) == null ? void 0 : t.view) ?? "mdi-eye-outline";
|
|
169
169
|
}), B = $(() => {
|
|
@@ -176,29 +176,29 @@ const fe = /* @__PURE__ */ R({
|
|
|
176
176
|
function k(t) {
|
|
177
177
|
return typeof t != "string";
|
|
178
178
|
}
|
|
179
|
-
const f =
|
|
179
|
+
const f = S(l.itemsPerPage), i = S([]), v = S(1), D = S(null), O = S(!1), G = $(() => {
|
|
180
180
|
var t;
|
|
181
181
|
return ((t = l.headers) == null ? void 0 : t.filter(
|
|
182
182
|
(s) => s.key !== "actions" && s.key !== "expanded-row" && s.key !== "data-table-expand"
|
|
183
183
|
)) || [];
|
|
184
184
|
});
|
|
185
|
-
|
|
186
|
-
|
|
185
|
+
ee(() => {
|
|
186
|
+
V({
|
|
187
187
|
page: v.value,
|
|
188
188
|
itemsPerPage: f.value
|
|
189
189
|
});
|
|
190
190
|
});
|
|
191
|
-
const
|
|
191
|
+
const K = (t) => {
|
|
192
192
|
D.value = t, O.value = !0;
|
|
193
|
-
},
|
|
193
|
+
}, Y = () => {
|
|
194
194
|
D.value = null, O.value = !1;
|
|
195
|
-
},
|
|
195
|
+
}, H = (t) => {
|
|
196
196
|
u("editItem", t);
|
|
197
|
-
},
|
|
197
|
+
}, J = (t) => {
|
|
198
198
|
u("viewItem", t);
|
|
199
|
-
},
|
|
199
|
+
}, Q = () => {
|
|
200
200
|
u("deleteItem", D.value), O.value = !1;
|
|
201
|
-
},
|
|
201
|
+
}, V = ({ page: t, itemsPerPage: s }) => {
|
|
202
202
|
const E = i.value.map((I) => ({
|
|
203
203
|
column: I.key,
|
|
204
204
|
direction: I.order
|
|
@@ -210,39 +210,37 @@ const fe = /* @__PURE__ */ R({
|
|
|
210
210
|
sortBy: E
|
|
211
211
|
});
|
|
212
212
|
};
|
|
213
|
-
function
|
|
214
|
-
|
|
213
|
+
function W() {
|
|
214
|
+
V({
|
|
215
215
|
page: 1,
|
|
216
216
|
itemsPerPage: f.value
|
|
217
217
|
});
|
|
218
218
|
}
|
|
219
|
-
const
|
|
220
|
-
q();
|
|
221
|
-
};
|
|
219
|
+
const X = ce(W, 400);
|
|
222
220
|
return z(
|
|
223
221
|
() => l.search,
|
|
224
222
|
(t, s) => {
|
|
225
|
-
t !== s &&
|
|
223
|
+
t !== s && X();
|
|
226
224
|
}
|
|
227
225
|
), z(f, (t, s) => {
|
|
228
|
-
t !== s &&
|
|
226
|
+
t !== s && V({
|
|
229
227
|
page: 1,
|
|
230
228
|
itemsPerPage: t
|
|
231
229
|
});
|
|
232
230
|
}), z(i, () => {
|
|
233
|
-
|
|
231
|
+
V({
|
|
234
232
|
page: 1,
|
|
235
233
|
itemsPerPage: f.value
|
|
236
234
|
});
|
|
237
235
|
}), z(v, (t) => {
|
|
238
|
-
|
|
236
|
+
V({
|
|
239
237
|
page: t,
|
|
240
238
|
itemsPerPage: f.value
|
|
241
239
|
});
|
|
242
240
|
}), (t, s) => {
|
|
243
|
-
const E = y("v-icon"), I = y("v-btn"), N = y("v-tooltip"),
|
|
244
|
-
return g(), oe
|
|
245
|
-
r(
|
|
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, {
|
|
246
244
|
headers: e.headers,
|
|
247
245
|
items: e.items,
|
|
248
246
|
loading: e.loading,
|
|
@@ -250,17 +248,16 @@ const fe = /* @__PURE__ */ R({
|
|
|
250
248
|
"items-per-page": f.value,
|
|
251
249
|
"onUpdate:itemsPerPage": s[0] || (s[0] = (o) => f.value = o),
|
|
252
250
|
search: e.search,
|
|
253
|
-
onSearch: Z,
|
|
254
251
|
"sort-by": i.value,
|
|
255
252
|
"onUpdate:sortBy": s[1] || (s[1] = (o) => i.value = o),
|
|
256
253
|
page: v.value,
|
|
257
254
|
"onUpdate:page": s[2] || (s[2] = (o) => v.value = o),
|
|
258
255
|
"item-value": e.itemValue,
|
|
259
256
|
"show-expand": e.showExpand,
|
|
260
|
-
class:
|
|
261
|
-
},
|
|
257
|
+
class: ne(w.value)
|
|
258
|
+
}, ae({
|
|
262
259
|
"item.data-table-expand": n(({ internalItem: o, isExpanded: c, toggleExpand: b }) => [
|
|
263
|
-
|
|
260
|
+
p(t.$slots, "item.data-table-expand", {
|
|
264
261
|
internalItem: o,
|
|
265
262
|
isExpanded: c,
|
|
266
263
|
toggleExpand: b
|
|
@@ -282,13 +279,13 @@ const fe = /* @__PURE__ */ R({
|
|
|
282
279
|
])
|
|
283
280
|
]),
|
|
284
281
|
"expanded-row": n(({ columns: o, item: c }) => [
|
|
285
|
-
|
|
282
|
+
p(t.$slots, "expanded-row", {
|
|
286
283
|
columns: o,
|
|
287
284
|
item: c
|
|
288
285
|
})
|
|
289
286
|
]),
|
|
290
287
|
"item.actions": n(({ item: o }) => [
|
|
291
|
-
|
|
288
|
+
p(t.$slots, "before-actions", { item: o }),
|
|
292
289
|
e.showViewButton ? (g(), x(N, {
|
|
293
290
|
key: 0,
|
|
294
291
|
text: e.viewButtonText
|
|
@@ -299,12 +296,12 @@ const fe = /* @__PURE__ */ R({
|
|
|
299
296
|
r(I, M({
|
|
300
297
|
icon: "",
|
|
301
298
|
flat: "",
|
|
302
|
-
onClick: (A) =>
|
|
299
|
+
onClick: (A) => J(o)
|
|
303
300
|
}, c, {
|
|
304
301
|
disabled: (b = e.disableView) == null ? void 0 : b.call(e, o)
|
|
305
302
|
}), {
|
|
306
303
|
default: n(() => [
|
|
307
|
-
|
|
304
|
+
p(t.$slots, "view-icon", {}, () => [
|
|
308
305
|
k(m.value) ? (g(), x(F(m.value), M({
|
|
309
306
|
key: 0,
|
|
310
307
|
size: 20,
|
|
@@ -337,12 +334,12 @@ const fe = /* @__PURE__ */ R({
|
|
|
337
334
|
r(I, M({
|
|
338
335
|
icon: "",
|
|
339
336
|
flat: "",
|
|
340
|
-
onClick: (A) =>
|
|
337
|
+
onClick: (A) => H(o)
|
|
341
338
|
}, c, {
|
|
342
339
|
disabled: (b = e.disableEdit) == null ? void 0 : b.call(e, o)
|
|
343
340
|
}), {
|
|
344
341
|
default: n(() => [
|
|
345
|
-
|
|
342
|
+
p(t.$slots, "edit-icon", {}, () => [
|
|
346
343
|
k(B.value) ? (g(), x(F(B.value), M({
|
|
347
344
|
key: 0,
|
|
348
345
|
size: 20,
|
|
@@ -375,12 +372,12 @@ const fe = /* @__PURE__ */ R({
|
|
|
375
372
|
r(I, M({
|
|
376
373
|
icon: "",
|
|
377
374
|
flat: "",
|
|
378
|
-
onClick: (A) =>
|
|
375
|
+
onClick: (A) => K(o)
|
|
379
376
|
}, c, {
|
|
380
377
|
disabled: (b = e.disableDelete) == null ? void 0 : b.call(e, o)
|
|
381
378
|
}), {
|
|
382
379
|
default: n(() => [
|
|
383
|
-
|
|
380
|
+
p(t.$slots, "delete-icon", {}, () => [
|
|
384
381
|
k(a.value) ? (g(), x(F(a.value), M({
|
|
385
382
|
key: 0,
|
|
386
383
|
size: 20,
|
|
@@ -403,44 +400,44 @@ const fe = /* @__PURE__ */ R({
|
|
|
403
400
|
}),
|
|
404
401
|
_: 2
|
|
405
402
|
}, 1032, ["text"])) : L("", !0),
|
|
406
|
-
|
|
403
|
+
p(t.$slots, "after-actions", { item: o })
|
|
407
404
|
]),
|
|
408
405
|
tfoot: n(() => [
|
|
409
|
-
|
|
410
|
-
|
|
406
|
+
le("tfoot", null, [
|
|
407
|
+
p(t.$slots, "item.tfoot")
|
|
411
408
|
])
|
|
412
409
|
]),
|
|
413
410
|
_: 2
|
|
414
411
|
}, [
|
|
415
|
-
|
|
412
|
+
ie(G.value, (o) => ({
|
|
416
413
|
name: `item.${o.key}`,
|
|
417
414
|
fn: n(({ item: c }) => [
|
|
418
|
-
|
|
415
|
+
p(t.$slots, `item.${o.key}`, { item: c }, () => [
|
|
419
416
|
T(P(c[o.key]), 1)
|
|
420
417
|
])
|
|
421
418
|
])
|
|
422
419
|
}))
|
|
423
420
|
]), 1032, ["headers", "items", "loading", "items-length", "items-per-page", "search", "sort-by", "page", "item-value", "show-expand", "class"]),
|
|
424
|
-
r(
|
|
421
|
+
r(ue, {
|
|
425
422
|
show: O.value,
|
|
426
423
|
title: e.deleteModalTitle,
|
|
427
424
|
description: e.deleteModalMessage,
|
|
428
425
|
confirmButtonText: e.deleteModalConfirmButtonText,
|
|
429
426
|
cancelButtonText: e.deleteModalCancelButtonText,
|
|
430
|
-
onClose:
|
|
431
|
-
onConfirm:
|
|
427
|
+
onClose: Y,
|
|
428
|
+
onConfirm: Q
|
|
432
429
|
}, null, 8, ["show", "title", "description", "confirmButtonText", "cancelButtonText"])
|
|
433
430
|
], 64);
|
|
434
431
|
};
|
|
435
432
|
}
|
|
436
|
-
}),
|
|
433
|
+
}), ge = {
|
|
437
434
|
install(e) {
|
|
438
|
-
e.component("DataTable",
|
|
435
|
+
e.component("DataTable", me);
|
|
439
436
|
}
|
|
440
437
|
};
|
|
441
438
|
export {
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
439
|
+
R as DATA_TABLE_CONFIG_KEY,
|
|
440
|
+
me as DataTable,
|
|
441
|
+
ve as createDataTableConfig,
|
|
442
|
+
ge as default
|
|
446
443
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.VuetifyDatatable={},C.Vue))})(this,(function(C,e){"use strict";function
|
|
1
|
+
(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.VuetifyDatatable={},C.Vue))})(this,(function(C,e){"use strict";function E(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var D={exports:{}},I;function M(){if(I)return D.exports;I=1;function t(w,l=100,s={}){if(typeof w!="function")throw new TypeError(`Expected the first parameter to be a function, got \`${typeof w}\`.`);if(l<0)throw new RangeError("`wait` must not be negative.");const{immediate:c}=typeof s=="boolean"?{immediate:s}:s;let m,h,a,u,g;function y(){const p=m,B=h;return m=void 0,h=void 0,g=w.apply(p,B),g}function f(){const p=Date.now()-u;p<l&&p>=0?a=setTimeout(f,l-p):(a=void 0,c||(g=y()))}const i=function(...p){if(m&&this!==m&&Object.getPrototypeOf(this)===Object.getPrototypeOf(m))throw new Error("Debounced method called with different contexts of the same prototype.");m=this,h=p,u=Date.now();const B=c&&!a;return a||(a=setTimeout(f,l)),B&&(g=y()),g};return Object.defineProperty(i,"isPending",{get(){return a!==void 0}}),i.clear=()=>{a&&(clearTimeout(a),a=void 0)},i.flush=()=>{a&&i.trigger()},i.trigger=()=>{g=y(),i.clear()},i}return D.exports.debounce=t,D.exports=t,D.exports}var O=M();const j=E(O),A=e.defineComponent({__name:"ConfirmationModal",props:{show:Boolean,title:String,description:String,confirmButtonText:String,cancelButtonText:String},emits:["close","confirm"],setup(t){const w=t,l=e.computed({get:()=>w.show,set:()=>{}});return(s,c)=>{const m=e.resolveComponent("v-card-title"),h=e.resolveComponent("v-card-text"),a=e.resolveComponent("v-spacer"),u=e.resolveComponent("v-btn"),g=e.resolveComponent("v-card-actions"),y=e.resolveComponent("v-card"),f=e.resolveComponent("v-dialog");return e.openBlock(),e.createBlock(f,{modelValue:l.value,"onUpdate:modelValue":c[2]||(c[2]=i=>l.value=i),"max-width":"500px",persistent:"","no-click-animation":""},{default:e.withCtx(()=>[e.createVNode(y,null,{default:e.withCtx(()=>[e.createVNode(m,{class:"text-h5 text-center py-6"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.title),1)]),_:1}),t.description?(e.openBlock(),e.createBlock(h,{key:0,class:"text-center px-0 py-0"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.description)+" ",1),e.renderSlot(s.$slots,"description")]),_:3})):e.createCommentVNode("",!0),e.createVNode(g,null,{default:e.withCtx(()=>[e.createVNode(a),e.createVNode(u,{color:"error",variant:"flat",dark:"",onClick:c[0]||(c[0]=i=>s.$emit("close"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.cancelButtonText),1)]),_:1}),e.createVNode(u,{color:"success",variant:"flat",dark:"",onClick:c[1]||(c[1]=i=>s.$emit("confirm"))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.confirmButtonText),1)]),_:1}),e.createVNode(a)]),_:1})]),_:3})]),_:3},8,["modelValue"])}}}),P=Symbol("DataTableConfig");function z(t){return{install(w){w.provide(P,t)}}}const $=e.defineComponent({__name:"DataTable",props:{tableClass:{},headers:{default:()=>[]},items:{default:()=>[]},loading:{type:Boolean,default:!1},itemValue:{default:"id"},totalItems:{default:0},itemsPerPage:{default:10},search:{},showExpand:{type:Boolean,default:!1},showEditButton:{type:Boolean,default:!0},showDeleteButton:{type:Boolean,default:!0},showViewButton:{type:Boolean,default:!1},viewButtonText:{},deleteButtonText:{},deleteModalTitle:{},deleteModalMessage:{},deleteModalConfirmButtonText:{},deleteModalCancelButtonText:{},editButtonText:{},viewIcon:{},editIcon:{},deleteIcon:{},disableView:{},disableEdit:{},disableDelete:{}},emits:["onLoadData","editItem","deleteItem","viewItem"],setup(t,{emit:w}){const l=t,s=w,c=e.inject(P,{icons:{}}),m=e.computed(()=>{var o;return l.viewIcon??((o=c.icons)==null?void 0:o.view)??"mdi-eye-outline"}),h=e.computed(()=>{var o;return l.editIcon??((o=c.icons)==null?void 0:o.edit)??"mdi-pencil-outline"}),a=e.computed(()=>{var o;return l.deleteIcon??((o=c.icons)==null?void 0:o.delete)??"mdi-trash-can-outline"}),u=e.computed(()=>c.iconProps??{}),g=e.computed(()=>l.tableClass??c.tableClass??"border rounded-md");function y(o){return typeof o!="string"}const f=e.ref(l.itemsPerPage),i=e.ref([]),p=e.ref(1),B=e.ref(null),V=e.ref(!1),F=e.computed(()=>{var o;return((o=l.headers)==null?void 0:o.filter(r=>r.key!=="actions"&&r.key!=="expanded-row"&&r.key!=="data-table-expand"))||[]});e.onMounted(()=>{T({page:p.value,itemsPerPage:f.value})});const q=o=>{B.value=o,V.value=!0},U=()=>{B.value=null,V.value=!1},R=o=>{s("editItem",o)},G=o=>{s("viewItem",o)},K=()=>{s("deleteItem",B.value),V.value=!1},T=({page:o,itemsPerPage:r})=>{const k=i.value.map(b=>({column:b.key,direction:b.order}));s("onLoadData",{page:o,itemsPerPage:r,search:l.search,sortBy:k})};function Y(){T({page:1,itemsPerPage:f.value})}const H=j(Y,400);return e.watch(()=>l.search,(o,r)=>{o!==r&&H()}),e.watch(f,(o,r)=>{o!==r&&T({page:1,itemsPerPage:o})}),e.watch(i,()=>{T({page:1,itemsPerPage:f.value})}),e.watch(p,o=>{T({page:o,itemsPerPage:f.value})}),(o,r)=>{const k=e.resolveComponent("v-icon"),b=e.resolveComponent("v-btn"),N=e.resolveComponent("v-tooltip"),J=e.resolveComponent("v-data-table-server");return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createVNode(J,{headers:t.headers,items:t.items,loading:t.loading,"items-length":t.totalItems,"items-per-page":f.value,"onUpdate:itemsPerPage":r[0]||(r[0]=n=>f.value=n),search:t.search,"sort-by":i.value,"onUpdate:sortBy":r[1]||(r[1]=n=>i.value=n),page:p.value,"onUpdate:page":r[2]||(r[2]=n=>p.value=n),"item-value":t.itemValue,"show-expand":t.showExpand,class:e.normalizeClass(g.value)},e.createSlots({"item.data-table-expand":e.withCtx(({internalItem:n,isExpanded:d,toggleExpand:x})=>[e.renderSlot(o.$slots,"item.data-table-expand",{internalItem:n,isExpanded:d,toggleExpand:x},()=>[e.createVNode(b,{onClick:S=>x(n),rounded:""},{default:e.withCtx(()=>[e.createVNode(k,null,{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d(n)?"mdi-chevron-up":"mdi-chevron-down"),1)]),_:2},1024)]),_:2},1032,["onClick"])])]),"expanded-row":e.withCtx(({columns:n,item:d})=>[e.renderSlot(o.$slots,"expanded-row",{columns:n,item:d})]),"item.actions":e.withCtx(({item:n})=>[e.renderSlot(o.$slots,"before-actions",{item:n}),t.showViewButton?(e.openBlock(),e.createBlock(N,{key:0,text:t.viewButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:S=>G(n)},d,{disabled:(x=t.disableView)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"view-icon",{},()=>[y(m.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value),e.mergeProps({key:0,size:20,class:"text-info"},u.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-info"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showEditButton?(e.openBlock(),e.createBlock(N,{key:1,text:t.editButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:S=>R(n)},d,{disabled:(x=t.disableEdit)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"edit-icon",{},()=>[y(h.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(h.value),e.mergeProps({key:0,size:20,class:"text-primary"},u.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(h.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),t.showDeleteButton?(e.openBlock(),e.createBlock(N,{key:2,text:t.deleteButtonText},{activator:e.withCtx(({props:d})=>{var x;return[e.createVNode(b,e.mergeProps({icon:"",flat:"",onClick:S=>q(n)},d,{disabled:(x=t.disableDelete)==null?void 0:x.call(t,n)}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"delete-icon",{},()=>[y(a.value)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.value),e.mergeProps({key:0,size:20,class:"text-error"},u.value),null,16)):(e.openBlock(),e.createBlock(k,{key:1,size:"20",class:"text-error"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value),1)]),_:1}))])]),_:3},16,["onClick","disabled"])]}),_:2},1032,["text"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"after-actions",{item:n})]),tfoot:e.withCtx(()=>[e.createElementVNode("tfoot",null,[e.renderSlot(o.$slots,"item.tfoot")])]),_:2},[e.renderList(F.value,n=>({name:`item.${n.key}`,fn:e.withCtx(({item:d})=>[e.renderSlot(o.$slots,`item.${n.key}`,{item:d},()=>[e.createTextVNode(e.toDisplayString(d[n.key]),1)])])}))]),1032,["headers","items","loading","items-length","items-per-page","search","sort-by","page","item-value","show-expand","class"]),e.createVNode(A,{show:V.value,title:t.deleteModalTitle,description:t.deleteModalMessage,confirmButtonText:t.deleteModalConfirmButtonText,cancelButtonText:t.deleteModalCancelButtonText,onClose:U,onConfirm:K},null,8,["show","title","description","confirmButtonText","cancelButtonText"])],64)}}}),L={install(t){t.component("DataTable",$)}};C.DATA_TABLE_CONFIG_KEY=P,C.DataTable=$,C.createDataTableConfig=z,C.default=L,Object.defineProperties(C,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dazzadev/vuetify-datatable",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Reusable server-side DataTable component for Vuetify 3",
|
|
3
|
+
"version": "1.0.5",
|
|
4
|
+
"description": "Reusable server-side DataTable component for Vuetify 3 and 4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/vuetify-datatable.umd.cjs",
|
|
7
7
|
"module": "./dist/vuetify-datatable.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"vue": "^3.3.0",
|
|
25
|
-
"vuetify": "^3.0.0"
|
|
25
|
+
"vuetify": "^3.0.0 || ^4.0.0"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"debounce": "^2.0.0"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"vite-plugin-dts": "^4.0.0",
|
|
36
36
|
"vue": "^3.5.0",
|
|
37
37
|
"vue-tsc": "^2.0.0",
|
|
38
|
-
"vuetify": "^
|
|
38
|
+
"vuetify": "^4.0.0"
|
|
39
39
|
},
|
|
40
40
|
"license": "MIT"
|
|
41
41
|
}
|