@revolist/vue3-datagrid 4.29.0 → 4.29.1
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 +6 -0
- package/component-templates.md +22 -0
- package/dist/index.d.ts +12 -1
- package/dist/vue3-datagrid.js +90 -84
- package/dist/vue3-datagrid.umd.cjs +1 -1
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -558,3 +558,9 @@ MIT
|
|
|
558
558
|
|
|
559
559
|
---
|
|
560
560
|
|
|
561
|
+
|
|
562
|
+
### Component templates across products
|
|
563
|
+
|
|
564
|
+
See [component templates](./component-templates.md) for `useTemplates`,
|
|
565
|
+
typed content integration with cells, master details,
|
|
566
|
+
Kanban cards, and Gantt bars. Existing `VGridVueTemplate` remains supported.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# Framework content templates
|
|
2
|
+
|
|
3
|
+
`useTemplates()` is a thin wrapper around the existing framework `Template` factory. It returns ordinary template callbacks for cells, master rows, Kanban cards, and Gantt labels. There is no outlet or separate mounting protocol.
|
|
4
|
+
|
|
5
|
+
```ts
|
|
6
|
+
import { useTemplates } from '@revolist/vue3-datagrid';
|
|
7
|
+
import type { CellTemplateProp } from '@revolist/revogrid';
|
|
8
|
+
|
|
9
|
+
const templates = useTemplates();
|
|
10
|
+
const content = templates.template<CellTemplateProp>(MyCell, {
|
|
11
|
+
props: context => ({ item: context.model }),
|
|
12
|
+
key: context => context.model.id,
|
|
13
|
+
});
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Without `props`, the component receives a `context` prop/input. The optional `key` selects record identity when hosts are reused. Supply a stable key for cells whose records may reorder. Mapped props are recomputed when the product invokes the callback. To clear a prop, explicitly pass `undefined`; Vue retains the legacy renderer’s behavior for omitted keys.
|
|
17
|
+
|
|
18
|
+
Use the returned callback directly as `column.cellTemplate`, `masterRow.template`, `customization.cardContent`, or `gantt.visuals.taskBarContent`. Product progress, resize, dependency, selection and drag controls remain outside the custom content. The legacy Gantt content hook takes precedence. Exports retain the default product representation.
|
|
19
|
+
|
|
20
|
+
Vue templates retain the existing renderer’s app-level provide/inject behavior. Nearby component providers do not automatically cross the separate render root.
|
|
21
|
+
|
|
22
|
+
Normal ref teardown releases components when hosts leave the viewport or the grid is removed. Existing `Template` and editor signatures remain available; their default cell prop shape is unchanged.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ColumnDataSchemaModel } from '@revolist/revogrid';
|
|
2
2
|
import { ColumnTemplateProp } from '@revolist/revogrid';
|
|
3
|
+
import { Component } from 'vue';
|
|
3
4
|
import { ComponentInternalInstance } from 'vue';
|
|
4
5
|
import { ComponentPublicInstance } from 'vue';
|
|
5
6
|
import { createVNode } from 'vue';
|
|
@@ -26,6 +27,11 @@ declare interface InputProps<T> {
|
|
|
26
27
|
modelValue?: T;
|
|
27
28
|
}
|
|
28
29
|
|
|
30
|
+
/** Bind the existing template factory for use on any content surface. */
|
|
31
|
+
export declare function useTemplates(): {
|
|
32
|
+
template<C>(component: Component, options?: Parameters<typeof VGridVueTemplate<C>>[2]): (h: HyperFunc<VNode>, p: C, addition?: any) => VNode;
|
|
33
|
+
};
|
|
34
|
+
|
|
29
35
|
declare const VGrid: DefineSetupFnComponent<JSX.RevoGrid & InputProps<string | number | boolean>, {}, {}, JSX.RevoGrid & InputProps<string | number | boolean> & {}, PublicProps>;
|
|
30
36
|
export { VGrid }
|
|
31
37
|
export default VGrid;
|
|
@@ -40,7 +46,10 @@ export declare const VGridVueEditor: (vueConstructor: any) => EditorCtr;
|
|
|
40
46
|
/**
|
|
41
47
|
* Render Vue component in Grid column template.
|
|
42
48
|
*/
|
|
43
|
-
export declare const VGridVueTemplate: (vueConstructor: CreateVNodeParameters, customProps?: any
|
|
49
|
+
export declare const VGridVueTemplate: <C = ColumnDataSchemaModel | ColumnTemplateProp>(vueConstructor: CreateVNodeParameters, customProps?: any, options?: {
|
|
50
|
+
props?: (context: C) => Record<string, any>;
|
|
51
|
+
key?: (context: C) => string | number;
|
|
52
|
+
}, current?: ComponentInternalInstance) => (h: HyperFunc<VNode>, p: C, addition?: any) => VNode;
|
|
44
53
|
|
|
45
54
|
/**
|
|
46
55
|
* Convert Vue component to VNode and render it into HTMLElement.
|
|
@@ -64,6 +73,8 @@ declare interface VueElement extends Element {
|
|
|
64
73
|
_vnode?: ComponentPublicInstance<any>;
|
|
65
74
|
}
|
|
66
75
|
|
|
76
|
+
export declare type VueTemplateOwner = ReturnType<typeof useTemplates>;
|
|
77
|
+
|
|
67
78
|
|
|
68
79
|
export * from "@revolist/revogrid";
|
|
69
80
|
export * from "@revolist/revogrid/loader";
|
package/dist/vue3-datagrid.js
CHANGED
|
@@ -1,54 +1,54 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { defineCustomElements as
|
|
1
|
+
import { defineComponent as I, ref as _, getCurrentInstance as p, inject as O, h as z, createVNode as S, render as R, defineAsyncComponent as D } from "vue";
|
|
2
|
+
import { defineCustomElements as L } from "@revolist/revogrid/loader";
|
|
3
3
|
export * from "@revolist/revogrid/loader";
|
|
4
4
|
export * from "@revolist/revogrid";
|
|
5
|
-
const
|
|
6
|
-
(
|
|
7
|
-
),
|
|
8
|
-
const
|
|
9
|
-
o
|
|
10
|
-
const
|
|
11
|
-
const { routerLink: h } =
|
|
12
|
-
if (h !==
|
|
13
|
-
if (
|
|
5
|
+
const g = "routerLink", w = "navManager", M = "router", G = "aria", m = /* @__PURE__ */ Symbol(), V = { default: m }, k = (t) => t?.split(" ") || [], N = (t, r, n = []) => [...Array.from(t.value?.classList || []), ...n].filter(
|
|
6
|
+
(o, a, e) => !r.has(o) && e.indexOf(o) === a
|
|
7
|
+
), U = (t, r, n = [], o, a) => {
|
|
8
|
+
const e = I((s, { attrs: c, slots: u, emit: v }) => {
|
|
9
|
+
s[o];
|
|
10
|
+
const y = _(), C = new Set(k(c.class)), b = p()?.appContext?.provides[w] ? O(w) : void 0, A = (d) => {
|
|
11
|
+
const { routerLink: h } = s;
|
|
12
|
+
if (h !== m)
|
|
13
|
+
if (b !== void 0) {
|
|
14
14
|
d.preventDefault();
|
|
15
15
|
let l = { event: d };
|
|
16
|
-
for (const
|
|
17
|
-
const
|
|
18
|
-
|
|
16
|
+
for (const f in s) {
|
|
17
|
+
const i = s[f];
|
|
18
|
+
s.hasOwnProperty(f) && f.startsWith(M) && i !== m && (l[f] = i);
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
b.navigate(l);
|
|
21
21
|
} else
|
|
22
22
|
console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.");
|
|
23
23
|
};
|
|
24
24
|
return () => {
|
|
25
|
-
o
|
|
26
|
-
|
|
25
|
+
s[o], k(c.class).forEach((i) => {
|
|
26
|
+
C.add(i);
|
|
27
27
|
});
|
|
28
|
-
const d =
|
|
29
|
-
d !== void 0 && d(
|
|
28
|
+
const d = s.onClick, h = (i) => {
|
|
29
|
+
d !== void 0 && d(i), i.defaultPrevented || A(i);
|
|
30
30
|
};
|
|
31
31
|
let l = {
|
|
32
|
-
ref:
|
|
33
|
-
class:
|
|
32
|
+
ref: y,
|
|
33
|
+
class: N(y, C),
|
|
34
34
|
onClick: h
|
|
35
35
|
};
|
|
36
|
-
for (const
|
|
37
|
-
const
|
|
38
|
-
(
|
|
36
|
+
for (const i in s) {
|
|
37
|
+
const E = s[i];
|
|
38
|
+
(s.hasOwnProperty(i) && E !== m || i.startsWith(G)) && (l[i] = E);
|
|
39
39
|
}
|
|
40
|
-
return
|
|
40
|
+
return s[g] !== m && (l = {
|
|
41
41
|
...l,
|
|
42
|
-
href:
|
|
43
|
-
}),
|
|
42
|
+
href: s[g]
|
|
43
|
+
}), z(t, l, u.default && u.default());
|
|
44
44
|
};
|
|
45
45
|
});
|
|
46
|
-
return typeof
|
|
47
|
-
[
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
})),
|
|
51
|
-
},
|
|
46
|
+
return typeof e != "function" && (e.name = t, e.props = {
|
|
47
|
+
[g]: V
|
|
48
|
+
}, n.forEach((s) => {
|
|
49
|
+
e.props[s] = V;
|
|
50
|
+
})), e;
|
|
51
|
+
}, F = /* @__PURE__ */ U("revo-grid", void 0, [
|
|
52
52
|
"rowHeaders",
|
|
53
53
|
"frameSize",
|
|
54
54
|
"rowSize",
|
|
@@ -135,37 +135,33 @@ const p = "routerLink", R = "navManager", L = "router", M = "aria", f = /* @__PU
|
|
|
135
135
|
"afterthemechanged",
|
|
136
136
|
"created"
|
|
137
137
|
]);
|
|
138
|
-
function
|
|
139
|
-
|
|
138
|
+
function P(t, r) {
|
|
139
|
+
r?.appContext && (t.appContext = r.appContext);
|
|
140
140
|
}
|
|
141
|
-
const
|
|
142
|
-
if (!
|
|
143
|
-
return
|
|
144
|
-
let
|
|
145
|
-
if (
|
|
146
|
-
|
|
147
|
-
for (const c in
|
|
148
|
-
|
|
141
|
+
const x = (t, r, n, o, a = null) => {
|
|
142
|
+
if (!r)
|
|
143
|
+
return a?.destroy?.(), { vueInstance: null, destroy: () => null, el: null };
|
|
144
|
+
let e = r._vnode;
|
|
145
|
+
if (e) {
|
|
146
|
+
P(e, o);
|
|
147
|
+
for (const c in n)
|
|
148
|
+
e.component.props[c] = n[c];
|
|
149
149
|
} else
|
|
150
|
-
|
|
151
|
-
return { vueInstance:
|
|
152
|
-
},
|
|
153
|
-
const
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
c = T(e, m, o, s, c);
|
|
162
|
-
}
|
|
163
|
-
});
|
|
164
|
-
};
|
|
150
|
+
e = S(t, n), P(e, o), R(e, r);
|
|
151
|
+
return { vueInstance: e, destroy: () => R(null, r), el: r };
|
|
152
|
+
}, X = (t, r, n, o = p()) => (a, e, s) => {
|
|
153
|
+
const c = n?.props ? n.props(e) : { ...r, ...e, addition: s };
|
|
154
|
+
let u = null;
|
|
155
|
+
return a("span", {
|
|
156
|
+
key: n?.key?.(e) ?? `${e.prop}-${e.rowIndex || 0}`,
|
|
157
|
+
ref: (v) => {
|
|
158
|
+
u = x(t, v, c, o, u);
|
|
159
|
+
}
|
|
160
|
+
});
|
|
165
161
|
};
|
|
166
|
-
class
|
|
167
|
-
constructor(
|
|
168
|
-
this.VueEditorConstructor =
|
|
162
|
+
class $ {
|
|
163
|
+
constructor(r, n, o, a, e) {
|
|
164
|
+
this.VueEditorConstructor = r, this.column = n, this.save = o, this.close = a, this.vInstance = e, this.element = null;
|
|
169
165
|
}
|
|
170
166
|
// optional, called after editor rendered
|
|
171
167
|
componentDidRender() {
|
|
@@ -174,46 +170,56 @@ class F {
|
|
|
174
170
|
disconnectedCallback() {
|
|
175
171
|
this.vueEl?.destroy(), this.vueEl = void 0;
|
|
176
172
|
}
|
|
177
|
-
render(
|
|
178
|
-
return
|
|
173
|
+
render(r) {
|
|
174
|
+
return r("span", {
|
|
179
175
|
key: `${this.column.prop}-${this.editCell?.rowIndex || 0}`,
|
|
180
|
-
ref: (
|
|
181
|
-
const
|
|
176
|
+
ref: (n) => {
|
|
177
|
+
const o = {
|
|
182
178
|
...this.editCell,
|
|
183
179
|
column: this.column,
|
|
184
180
|
save: this.save,
|
|
185
181
|
close: this.close
|
|
186
182
|
};
|
|
187
|
-
this.vueEl =
|
|
183
|
+
this.vueEl = x(
|
|
188
184
|
this.VueEditorConstructor,
|
|
189
|
-
|
|
190
|
-
|
|
185
|
+
n,
|
|
186
|
+
o,
|
|
191
187
|
this.vInstance
|
|
192
188
|
);
|
|
193
189
|
}
|
|
194
190
|
});
|
|
195
191
|
}
|
|
196
192
|
}
|
|
197
|
-
const j = (
|
|
198
|
-
const
|
|
199
|
-
return function(
|
|
200
|
-
return new
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
193
|
+
const j = (t) => {
|
|
194
|
+
const r = p();
|
|
195
|
+
return function(n, o, a) {
|
|
196
|
+
return new $(
|
|
197
|
+
t,
|
|
198
|
+
n,
|
|
199
|
+
o,
|
|
200
|
+
a,
|
|
201
|
+
r
|
|
206
202
|
);
|
|
207
203
|
};
|
|
208
204
|
};
|
|
209
|
-
function
|
|
210
|
-
|
|
205
|
+
function q() {
|
|
206
|
+
const t = p();
|
|
207
|
+
return {
|
|
208
|
+
template(r, n) {
|
|
209
|
+
const o = { ...n, props: n?.props ?? ((a) => ({ context: a })) };
|
|
210
|
+
return X(r, void 0, o, t);
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
function W(t) {
|
|
215
|
+
return !!t && (typeof t == "object" || typeof t == "function") && typeof t.then == "function";
|
|
211
216
|
}
|
|
212
|
-
const
|
|
217
|
+
const T = L?.(), J = D(async () => (W(T) && await T, F));
|
|
213
218
|
export {
|
|
214
|
-
|
|
219
|
+
J as VGrid,
|
|
215
220
|
j as VGridVueEditor,
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
221
|
+
X as VGridVueTemplate,
|
|
222
|
+
x as VGridVueTemplateConstructor,
|
|
223
|
+
J as default,
|
|
224
|
+
q as useTemplates
|
|
219
225
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,
|
|
1
|
+
(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue"),require("@revolist/revogrid/loader"),require("@revolist/revogrid")):typeof define=="function"&&define.amd?define(["exports","vue","@revolist/revogrid/loader","@revolist/revogrid"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.Vue3Datagrid={},o.Vue,o.RevogridLoader,o.Revogrid))})(this,(function(o,a,g,C){"use strict";const y="routerLink",E="navManager",z="router",D="aria",f=Symbol(),R={default:f},w=e=>e?.split(" ")||[],M=(e,r,n=[])=>[...Array.from(e.value?.classList||[]),...n].filter((i,d,t)=>!r.has(i)&&t.indexOf(i)===d),j=((e,r,n=[],i,d)=>{const t=a.defineComponent((s,{attrs:l,slots:p,emit:I})=>{s[i];const k=a.ref(),A=new Set(w(l.class)),_=a.getCurrentInstance()?.appContext?.provides[E]?a.inject(E):void 0,F=m=>{const{routerLink:v}=s;if(v!==f)if(_!==void 0){m.preventDefault();let u={event:m};for(const h in s){const c=s[h];s.hasOwnProperty(h)&&h.startsWith(z)&&c!==f&&(u[h]=c)}_.navigate(u)}else console.warn("Tried to navigate, but no router was found. Make sure you have mounted Vue Router.")};return()=>{s[i],w(l.class).forEach(c=>{A.add(c)});const m=s.onClick,v=c=>{m!==void 0&&m(c),c.defaultPrevented||F(c)};let u={ref:k,class:M(k,A),onClick:v};for(const c in s){const S=s[c];(s.hasOwnProperty(c)&&S!==f||c.startsWith(D))&&(u[c]=S)}return s[y]!==f&&(u={...u,href:s[y]}),a.h(e,u,p.default&&p.default())}});return typeof t!="function"&&(t.name=e,t.props={[y]:R},n.forEach(s=>{t.props[s]=R})),t})("revo-grid",void 0,["rowHeaders","frameSize","rowSize","colSize","range","readonly","resize","resizeRow","noHorizontalScrollTransfer","canFocus","useClipboard","columns","source","pinnedTopSource","pinnedBottomSource","rowDefinitions","editors","applyOnClose","plugins","columnTypes","theme","themeDefinitions","rowClass","autoSizeColumn","filter","sorting","focusTemplate","canMoveColumns","trimmedRows","exporting","grouping","stretch","additionalData","disableVirtualX","virtualX","disableVirtualY","hideAttribution","jobsBeforeRender","registerVNode","accessible","rtl","canDrag","contentsizechanged","beforeedit","beforerangeedit","afteredit","beforeautofill","beforerange","afterfocus","roworderchanged","beforesorting","beforesourcesortingapply","beforesortingapply","aftersortingapply","rowdragstart","headerclick","beforecellfocus","beforefocuslost","beforesourceset","beforeanysource","aftersourceset","afteranysource","beforecolumnsgather","beforecolumnsset","beforecolumnapplied","aftercolumnsset","beforefilterapply","beforefiltertrimmed","afterfilterapply","beforetrimmed","aftertrimmed","viewportscroll","beforeexport","beforeeditstart","aftercolumnresize","beforerowdefinition","filterconfigchanged","sortingconfigchanged","rowheaderschanged","beforegridrender","aftergridrender","aftergridinit","additionaldatachanged","afterthemechanged","created"]);function P(e,r){r?.appContext&&(e.appContext=r.appContext)}const b=(e,r,n,i,d=null)=>{if(!r)return d?.destroy?.(),{vueInstance:null,destroy:()=>null,el:null};let t=r._vnode;if(t){P(t,i);for(const l in n)t.component.props[l]=n[l]}else t=a.createVNode(e,n),P(t,i),a.render(t,r);return{vueInstance:t,destroy:()=>a.render(null,r),el:r}},V=(e,r,n,i=a.getCurrentInstance())=>(d,t,s)=>{const l=n?.props?n.props(t):{...r,...t,addition:s};let p=null;return d("span",{key:n?.key?.(t)??`${t.prop}-${t.rowIndex||0}`,ref:I=>{p=b(e,I,l,i,p)}})};class L{constructor(r,n,i,d,t){this.VueEditorConstructor=r,this.column=n,this.save=i,this.close=d,this.vInstance=t,this.element=null}componentDidRender(){}disconnectedCallback(){this.vueEl?.destroy(),this.vueEl=void 0}render(r){return r("span",{key:`${this.column.prop}-${this.editCell?.rowIndex||0}`,ref:n=>{const i={...this.editCell,column:this.column,save:this.save,close:this.close};this.vueEl=b(this.VueEditorConstructor,n,i,this.vInstance)}})}}const G=e=>{const r=a.getCurrentInstance();return function(n,i,d){return new L(e,n,i,d,r)}};function N(){const e=a.getCurrentInstance();return{template(r,n){const i={...n,props:n?.props??(d=>({context:d}))};return V(r,void 0,i,e)}}}function U(e){return!!e&&(typeof e=="object"||typeof e=="function")&&typeof e.then=="function"}const T=g.defineCustomElements?.(),O=a.defineAsyncComponent(async()=>(U(T)&&await T,j));o.VGrid=O,o.VGridVueEditor=G,o.VGridVueTemplate=V,o.VGridVueTemplateConstructor=b,o.default=O,o.useTemplates=N,Object.keys(g).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(o,e)&&Object.defineProperty(o,e,{enumerable:!0,get:()=>g[e]})}),Object.keys(C).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(o,e)&&Object.defineProperty(o,e,{enumerable:!0,get:()=>C[e]})}),Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@revolist/vue3-datagrid",
|
|
3
|
-
"version": "4.29.
|
|
3
|
+
"version": "4.29.1",
|
|
4
4
|
"description": "Vue 3 DataGrid Spreadsheet component with native Vue 3 cell render support",
|
|
5
5
|
"main": "./dist/vue3-datagrid.umd.cjs",
|
|
6
6
|
"module": "./dist/vue3-datagrid.js",
|
|
@@ -14,13 +14,15 @@
|
|
|
14
14
|
},
|
|
15
15
|
"type": "module",
|
|
16
16
|
"files": [
|
|
17
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"component-templates.md"
|
|
18
19
|
],
|
|
19
20
|
"scripts": {
|
|
20
21
|
"dev": "vite",
|
|
21
22
|
"build": "vue-tsc && vite build",
|
|
22
23
|
"preview": "vite preview",
|
|
23
|
-
"release": "npm run build && npm publish --public --tag pre-release"
|
|
24
|
+
"release": "npm run build && npm publish --public --tag pre-release",
|
|
25
|
+
"test": "vitest run"
|
|
24
26
|
},
|
|
25
27
|
"keywords": [
|
|
26
28
|
"revo-grid",
|
|
@@ -65,14 +67,16 @@
|
|
|
65
67
|
"homepage": "https://github.com/revolist/revogrid#readme",
|
|
66
68
|
"license": "MIT",
|
|
67
69
|
"dependencies": {
|
|
68
|
-
"@revolist/revogrid": "4.29.
|
|
70
|
+
"@revolist/revogrid": "4.29.1"
|
|
69
71
|
},
|
|
70
72
|
"devDependencies": {
|
|
71
73
|
"@stencil/core": "^4.43.2",
|
|
72
74
|
"@vitejs/plugin-vue": "^6.0.4",
|
|
75
|
+
"happy-dom": "^20.14.6",
|
|
73
76
|
"typescript": "^5.2.2",
|
|
74
77
|
"vite": "^7.3.1",
|
|
75
78
|
"vite-plugin-dts": "^4.5.4",
|
|
79
|
+
"vitest": "^5.0.5",
|
|
76
80
|
"vue": "^3.4.29",
|
|
77
81
|
"vue-tsc": "^2.0.14"
|
|
78
82
|
},
|