datatables.net-vue3 3.0.1 → 3.0.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),h=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let m;const D={name:"Datatables.netVue",inheritAttrs:!1,use(u){m=u}},g=n.defineComponent({...D,props:{ajax:null,columns:null,data:null,options:null},emits:h,setup(u,{expose:f}){const i=u,v=n.ref(null),c={},s=n.ref(),w=n.ref([]);n.watch(()=>i.data,t=>{let e=s.value;e&&(p(e),e.clear(),e.rows.add(t).draw(!1))},{deep:!0}),n.onMounted(()=>{var a;const t=n.getCurrentInstance();let e=Object.assign({},i.options)||{};if(i.data&&(e.data=i.data,k(e.data)),i.columns&&(e.columns=i.columns),e.columns&&b(e.columns,t),i.ajax&&(e.ajax=i.ajax),e.columnDefs||(e.columnDefs=[]),t){let l=Object.keys(t.slots);for(let r=0;r<l.length;r++){let o=l[r];if(o.match(/^column\-/)){let d=o.replace("column-","");e.columnDefs.push({target:d.match(/^\d+$/)?parseInt(d):d+":name",render:"#"+o})}}b(e.columnDefs,t)}if(!m)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");s.value=new m(n.unref(v),e),(a=s.value)==null||a.on("preXhr",function(){p(s.value)});for(let l of h)s.value&&t&&s.value.on(l,function(){var r=Array.from(arguments),o=r.shift();r.unshift({event:o,dt:s}),r.unshift(l),t.emit.apply(t,r)})}),n.onBeforeUnmount(()=>{var t;p(s.value),(t=s.value)==null||t.destroy(!0)});function k(t){w.value=t.value?t.value.slice():t.slice()}function y(t){return function(e,a,l,r){let o=r.row+","+r.col;if(!c[o]){let d=n.h("div",t({cellData:e,colIndex:r.col,rowData:l,rowIndex:r.row,type:a}));c[o]=document.createElement("div"),n.render(d,c[o])}return c[o]}}function b(t,e){if(e)for(let l=0;l<t.length;l++){let r=t[l];if(typeof r.render=="string"&&r.render.charAt(0)==="#"){var a=r.render.replace("#","");e.slots[a]&&(r.render=y(e.slots[a]))}else if(typeof r.render=="object"&&typeof r.render.display=="string"&&r.render.display.charAt(0)==="#"){var a=r.render.display.replace("#","");e.slots[a]&&(r.render.display=y(e.slots[a]))}}}function p(t){let e=Object.keys(c),a=t.table().node().id;for(var l=0;l<e.length;l++)e[l].indexOf(a+",")===0&&delete c[e[l]]}return f({dt:s}),(t,e)=>e[0]||(n.setBlockTracking(-1),e[0]=n.createElementVNode("div",{class:"datatable"},[n.createElementVNode("table",n.mergeProps({ref_key:"table",ref:v},t.$attrs,{style:{width:"100%"}}),[n.renderSlot(t.$slots,"default")],16)]),n.setBlockTracking(1),e[0])}}),j=(()=>{const u=g;return u.install=f=>{f.component("Datatables.netVue",u)},u})();exports.DataTable=g;exports.default=j;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as x, ref as p, watch as j, onMounted as I, getCurrentInstance as A, unref as E, onBeforeUnmount as O, setBlockTracking as h, createElementVNode as g, mergeProps as R, renderSlot as S, h as T, render as _ } from "vue";
|
|
2
2
|
const w = [
|
|
3
3
|
"childRow",
|
|
4
4
|
"column-sizing",
|
|
@@ -49,10 +49,10 @@ let m;
|
|
|
49
49
|
const C = {
|
|
50
50
|
name: "Datatables.netVue",
|
|
51
51
|
inheritAttrs: !1,
|
|
52
|
-
use(
|
|
53
|
-
m =
|
|
52
|
+
use(i) {
|
|
53
|
+
m = i;
|
|
54
54
|
}
|
|
55
|
-
}, L = /* @__PURE__ */
|
|
55
|
+
}, L = /* @__PURE__ */ x({
|
|
56
56
|
...C,
|
|
57
57
|
props: {
|
|
58
58
|
ajax: null,
|
|
@@ -61,34 +61,30 @@ const C = {
|
|
|
61
61
|
options: null
|
|
62
62
|
},
|
|
63
63
|
emits: w,
|
|
64
|
-
setup(
|
|
65
|
-
const o =
|
|
66
|
-
|
|
64
|
+
setup(i, { expose: d }) {
|
|
65
|
+
const o = i, y = p(null), u = {}, l = p(), D = p([]);
|
|
66
|
+
j(
|
|
67
67
|
() => o.data,
|
|
68
68
|
(t) => {
|
|
69
|
-
let e =
|
|
70
|
-
|
|
71
|
-
for (var n = Object.keys(i), l = 0; l < n.length; l++)
|
|
72
|
-
delete i[n[l]];
|
|
73
|
-
e.clear(), e.rows.add(t).draw(!1);
|
|
74
|
-
}
|
|
69
|
+
let e = l.value;
|
|
70
|
+
e && (f(e), e.clear(), e.rows.add(t).draw(!1));
|
|
75
71
|
},
|
|
76
72
|
{
|
|
77
73
|
deep: !0
|
|
78
74
|
}
|
|
79
75
|
), I(() => {
|
|
80
|
-
var
|
|
76
|
+
var a;
|
|
81
77
|
const t = A();
|
|
82
|
-
let e = o.options || {};
|
|
83
|
-
if (o.data && (e.data = o.data,
|
|
84
|
-
let
|
|
85
|
-
for (let
|
|
86
|
-
let
|
|
87
|
-
if (
|
|
88
|
-
let
|
|
78
|
+
let e = Object.assign({}, o.options) || {};
|
|
79
|
+
if (o.data && (e.data = o.data, k(e.data)), o.columns && (e.columns = o.columns), e.columns && b(e.columns, t), o.ajax && (e.ajax = o.ajax), e.columnDefs || (e.columnDefs = []), t) {
|
|
80
|
+
let n = Object.keys(t.slots);
|
|
81
|
+
for (let r = 0; r < n.length; r++) {
|
|
82
|
+
let s = n[r];
|
|
83
|
+
if (s.match(/^column\-/)) {
|
|
84
|
+
let c = s.replace("column-", "");
|
|
89
85
|
e.columnDefs.push({
|
|
90
|
-
target:
|
|
91
|
-
render: "#" +
|
|
86
|
+
target: c.match(/^\d+$/) ? parseInt(c) : c + ":name",
|
|
87
|
+
render: "#" + s
|
|
92
88
|
});
|
|
93
89
|
}
|
|
94
90
|
}
|
|
@@ -98,68 +94,71 @@ const C = {
|
|
|
98
94
|
throw new Error(
|
|
99
95
|
"DataTables library not set. See https://datatables.net/tn/19 for details."
|
|
100
96
|
);
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
var a = Array.from(arguments), c = a.shift();
|
|
109
|
-
a.unshift({ event: c, dt: s }), a.unshift(r), t.emit.apply(t, a);
|
|
97
|
+
l.value = new m(E(y), e), (a = l.value) == null || a.on("preXhr", function() {
|
|
98
|
+
f(l.value);
|
|
99
|
+
});
|
|
100
|
+
for (let n of w)
|
|
101
|
+
l.value && t && l.value.on(n, function() {
|
|
102
|
+
var r = Array.from(arguments), s = r.shift();
|
|
103
|
+
r.unshift({ event: s, dt: l }), r.unshift(n), t.emit.apply(t, r);
|
|
110
104
|
});
|
|
111
|
-
}),
|
|
105
|
+
}), O(() => {
|
|
112
106
|
var t;
|
|
113
|
-
(t =
|
|
107
|
+
f(l.value), (t = l.value) == null || t.destroy(!0);
|
|
114
108
|
});
|
|
115
|
-
function
|
|
116
|
-
|
|
109
|
+
function k(t) {
|
|
110
|
+
D.value = t.value ? t.value.slice() : t.slice();
|
|
117
111
|
}
|
|
118
112
|
function v(t) {
|
|
119
|
-
return function(e,
|
|
120
|
-
let
|
|
121
|
-
if (!
|
|
113
|
+
return function(e, a, n, r) {
|
|
114
|
+
let s = r.row + "," + r.col;
|
|
115
|
+
if (!u[s]) {
|
|
122
116
|
let c = T("div", t({
|
|
123
117
|
cellData: e,
|
|
124
118
|
colIndex: r.col,
|
|
125
|
-
rowData:
|
|
119
|
+
rowData: n,
|
|
126
120
|
rowIndex: r.row,
|
|
127
|
-
type:
|
|
121
|
+
type: a
|
|
128
122
|
}));
|
|
129
|
-
|
|
123
|
+
u[s] = document.createElement("div"), _(c, u[s]);
|
|
130
124
|
}
|
|
131
|
-
return
|
|
125
|
+
return u[s];
|
|
132
126
|
};
|
|
133
127
|
}
|
|
134
128
|
function b(t, e) {
|
|
135
129
|
if (e)
|
|
136
|
-
for (let
|
|
137
|
-
let r = t[
|
|
130
|
+
for (let n = 0; n < t.length; n++) {
|
|
131
|
+
let r = t[n];
|
|
138
132
|
if (typeof r.render == "string" && r.render.charAt(0) === "#") {
|
|
139
|
-
var
|
|
140
|
-
e.slots[
|
|
133
|
+
var a = r.render.replace("#", "");
|
|
134
|
+
e.slots[a] && (r.render = v(e.slots[a]));
|
|
141
135
|
} else if (typeof r.render == "object" && typeof r.render.display == "string" && r.render.display.charAt(0) === "#") {
|
|
142
|
-
var
|
|
143
|
-
e.slots[
|
|
136
|
+
var a = r.render.display.replace("#", "");
|
|
137
|
+
e.slots[a] && (r.render.display = v(e.slots[a]));
|
|
144
138
|
}
|
|
145
139
|
}
|
|
146
140
|
}
|
|
141
|
+
function f(t) {
|
|
142
|
+
let e = Object.keys(u), a = t.table().node().id;
|
|
143
|
+
for (var n = 0; n < e.length; n++)
|
|
144
|
+
e[n].indexOf(a + ",") === 0 && delete u[e[n]];
|
|
145
|
+
}
|
|
147
146
|
return d({
|
|
148
|
-
dt:
|
|
147
|
+
dt: l
|
|
149
148
|
}), (t, e) => e[0] || (h(-1), e[0] = g("div", { class: "datatable" }, [
|
|
150
|
-
g("table",
|
|
149
|
+
g("table", R({
|
|
151
150
|
ref_key: "table",
|
|
152
151
|
ref: y
|
|
153
152
|
}, t.$attrs, { style: { width: "100%" } }), [
|
|
154
|
-
|
|
153
|
+
S(t.$slots, "default")
|
|
155
154
|
], 16)
|
|
156
155
|
]), h(1), e[0]);
|
|
157
156
|
}
|
|
158
157
|
}), V = /* @__PURE__ */ (() => {
|
|
159
|
-
const
|
|
160
|
-
return
|
|
161
|
-
d.component("Datatables.netVue",
|
|
162
|
-
},
|
|
158
|
+
const i = L;
|
|
159
|
+
return i.install = (d) => {
|
|
160
|
+
d.component("Datatables.netVue", i);
|
|
161
|
+
}, i;
|
|
163
162
|
})();
|
|
164
163
|
export {
|
|
165
164
|
L as DataTable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis<"u"?globalThis:l||self,n((l.datatables=l.datatables||{},l.datatables["net-vue3"]={}),l.Vue))})(this,function(l,n){"use strict";const b=["childRow","column-sizing","column-visibility","destroy","draw","error","init","length","order","page","preDraw","preInit","preXhr","processing","requestChild","search","stateLoadParams","stateLoaded","stateSaveParams","xhr","autoFill","preAutoFill","buttons-action","buttons-processing","column-reorder","key","key-blur","key-focus","key-refocus","key-return-submit","responsive-display","responsive-resize","rowgroup-datasrc","pre-row-reorder","row-reorder","row-reordered","dtsb-inserted","deselect","select","select-blur","selectItems","selectStyle","user-select","stateRestore-change"];let p;const k={name:"Datatables.netVue",inheritAttrs:!1,use(c){p=c}},h=n.defineComponent({...k,props:{ajax:null,columns:null,data:null,options:null},emits:b,setup(c,{expose:m}){const d=c,g=n.ref(null),u={},o=n.ref(),j=n.ref([]);n.watch(()=>d.data,t=>{let e=o.value;e&&(y(e),e.clear(),e.rows.add(t).draw(!1))},{deep:!0}),n.onMounted(()=>{var s;const t=n.getCurrentInstance();let e=Object.assign({},d.options)||{};if(d.data&&(e.data=d.data,x(e.data)),d.columns&&(e.columns=d.columns),e.columns&&v(e.columns,t),d.ajax&&(e.ajax=d.ajax),e.columnDefs||(e.columnDefs=[]),t){let a=Object.keys(t.slots);for(let r=0;r<a.length;r++){let i=a[r];if(i.match(/^column\-/)){let f=i.replace("column-","");e.columnDefs.push({target:f.match(/^\d+$/)?parseInt(f):f+":name",render:"#"+i})}}v(e.columnDefs,t)}if(!p)throw new Error("DataTables library not set. See https://datatables.net/tn/19 for details.");o.value=new p(n.unref(g),e),(s=o.value)==null||s.on("preXhr",function(){y(o.value)});for(let a of b)o.value&&t&&o.value.on(a,function(){var r=Array.from(arguments),i=r.shift();r.unshift({event:i,dt:o}),r.unshift(a),t.emit.apply(t,r)})}),n.onBeforeUnmount(()=>{var t;y(o.value),(t=o.value)==null||t.destroy(!0)});function x(t){j.value=t.value?t.value.slice():t.slice()}function w(t){return function(e,s,a,r){let i=r.row+","+r.col;if(!u[i]){let f=n.h("div",t({cellData:e,colIndex:r.col,rowData:a,rowIndex:r.row,type:s}));u[i]=document.createElement("div"),n.render(f,u[i])}return u[i]}}function v(t,e){if(e)for(let a=0;a<t.length;a++){let r=t[a];if(typeof r.render=="string"&&r.render.charAt(0)==="#"){var s=r.render.replace("#","");e.slots[s]&&(r.render=w(e.slots[s]))}else if(typeof r.render=="object"&&typeof r.render.display=="string"&&r.render.display.charAt(0)==="#"){var s=r.render.display.replace("#","");e.slots[s]&&(r.render.display=w(e.slots[s]))}}}function y(t){let e=Object.keys(u),s=t.table().node().id;for(var a=0;a<e.length;a++)e[a].indexOf(s+",")===0&&delete u[e[a]]}return m({dt:o}),(t,e)=>e[0]||(n.setBlockTracking(-1),e[0]=n.createElementVNode("div",{class:"datatable"},[n.createElementVNode("table",n.mergeProps({ref_key:"table",ref:g},t.$attrs,{style:{width:"100%"}}),[n.renderSlot(t.$slots,"default")],16)]),n.setBlockTracking(1),e[0])}}),D=(()=>{const c=h;return c.install=m=>{m.component("Datatables.netVue",c)},c})();l.DataTable=h,l.default=D,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
package/src/DataTable.vue
CHANGED
|
@@ -68,11 +68,7 @@ watch(
|
|
|
68
68
|
return;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
for (var i = 0; i < keys.length; i++) {
|
|
74
|
-
delete elements[keys[i]];
|
|
75
|
-
}
|
|
71
|
+
deleteElements(api);
|
|
76
72
|
|
|
77
73
|
api.clear();
|
|
78
74
|
api.rows.add(newVal).draw(false);
|
|
@@ -85,7 +81,7 @@ watch(
|
|
|
85
81
|
// lifecycle
|
|
86
82
|
onMounted(() => {
|
|
87
83
|
const inst = getCurrentInstance();
|
|
88
|
-
let options: any = props.options || {};
|
|
84
|
+
let options: any = Object.assign({}, props.options) || {};
|
|
89
85
|
|
|
90
86
|
if (props.data) {
|
|
91
87
|
options.data = props.data;
|
|
@@ -94,6 +90,9 @@ onMounted(() => {
|
|
|
94
90
|
|
|
95
91
|
if (props.columns) {
|
|
96
92
|
options.columns = props.columns;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
if (options.columns) {
|
|
97
96
|
applyRenderers(options.columns, inst);
|
|
98
97
|
}
|
|
99
98
|
|
|
@@ -137,17 +136,11 @@ onMounted(() => {
|
|
|
137
136
|
// Create the DataTable!
|
|
138
137
|
dt.value = new DataTablesLib(unref(table), options);
|
|
139
138
|
|
|
140
|
-
// When server-side processing
|
|
141
|
-
// are reused, so we need to clear out any rendered elements for slots.
|
|
142
|
-
|
|
143
|
-
dt.value
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
for (var i=0 ; i<keys.length ; i++) {
|
|
147
|
-
delete elements[keys[i]];
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
}
|
|
139
|
+
// When server-side processing or Ajax loading data, the data indexes for
|
|
140
|
+
// rows are reused, so we need to clear out any rendered elements for slots.
|
|
141
|
+
dt.value?.on('preXhr', function () {
|
|
142
|
+
deleteElements(dt.value!);
|
|
143
|
+
});
|
|
151
144
|
|
|
152
145
|
// Re-export all DataTables events by listening for them using DataTable's
|
|
153
146
|
// `on` method and then emit them to our Vue component
|
|
@@ -167,6 +160,7 @@ onMounted(() => {
|
|
|
167
160
|
});
|
|
168
161
|
|
|
169
162
|
onBeforeUnmount(() => {
|
|
163
|
+
deleteElements(dt.value!);
|
|
170
164
|
dt.value?.destroy(true);
|
|
171
165
|
});
|
|
172
166
|
|
|
@@ -229,7 +223,7 @@ function applyRenderers(columns: any[], inst: any) {
|
|
|
229
223
|
}
|
|
230
224
|
}
|
|
231
225
|
else if (
|
|
232
|
-
// Display
|
|
226
|
+
// Display orthogonal data point given as a slot name
|
|
233
227
|
typeof col.render === 'object' &&
|
|
234
228
|
typeof col.render.display === 'string' &&
|
|
235
229
|
col.render.display.charAt(0) === '#'
|
|
@@ -243,6 +237,17 @@ function applyRenderers(columns: any[], inst: any) {
|
|
|
243
237
|
}
|
|
244
238
|
}
|
|
245
239
|
|
|
240
|
+
function deleteElements(dt: Api) {
|
|
241
|
+
let keys = Object.keys(elements);
|
|
242
|
+
let id = (dt.table().node() as any).id;
|
|
243
|
+
|
|
244
|
+
for (var i = 0; i < keys.length; i++) {
|
|
245
|
+
if (keys[i].indexOf(id + ',') === 0) {
|
|
246
|
+
delete elements[keys[i]];
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
|
|
246
251
|
// expose
|
|
247
252
|
defineExpose({
|
|
248
253
|
/**
|