@tanstack/vue-table 9.0.0-alpha.33 → 9.0.0-alpha.35
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/dist/merge-proxy.cjs +11 -4
- package/dist/merge-proxy.cjs.map +1 -1
- package/dist/merge-proxy.js +11 -4
- package/dist/merge-proxy.js.map +1 -1
- package/dist/static-functions.cjs +9 -0
- package/dist/static-functions.d.cts +1 -0
- package/dist/static-functions.d.ts +1 -0
- package/dist/static-functions.js +3 -0
- package/dist/useTable.cjs +29 -11
- package/dist/useTable.cjs.map +1 -1
- package/dist/useTable.d.cts +22 -20
- package/dist/useTable.d.ts +22 -20
- package/dist/useTable.js +31 -13
- package/dist/useTable.js.map +1 -1
- package/package.json +6 -2
- package/src/merge-proxy.ts +22 -5
- package/src/static-functions.ts +1 -0
- package/src/useTable.ts +129 -55
package/dist/merge-proxy.cjs
CHANGED
|
@@ -4,9 +4,11 @@ function trueFn() {
|
|
|
4
4
|
return true;
|
|
5
5
|
}
|
|
6
6
|
const $PROXY = Symbol("merge-proxy");
|
|
7
|
+
const $SOURCES = Symbol("merge-proxy-sources");
|
|
7
8
|
const propTraps = {
|
|
8
9
|
get(_, property, receiver) {
|
|
9
10
|
if (property === $PROXY) return receiver;
|
|
11
|
+
if (property === $SOURCES) return _.sources;
|
|
10
12
|
return _.get(property);
|
|
11
13
|
},
|
|
12
14
|
has(_, property) {
|
|
@@ -33,20 +35,25 @@ function resolveSource(s) {
|
|
|
33
35
|
return "value" in s ? s.value : s;
|
|
34
36
|
}
|
|
35
37
|
function mergeProxy(...sources) {
|
|
38
|
+
const flattenedSources = sources.flatMap((source) => {
|
|
39
|
+
if (typeof source === "object" && source !== null && $SOURCES in source && Array.isArray(source[$SOURCES])) return source[$SOURCES];
|
|
40
|
+
return [source];
|
|
41
|
+
});
|
|
36
42
|
return new Proxy({
|
|
43
|
+
sources: flattenedSources,
|
|
37
44
|
get(property) {
|
|
38
|
-
for (let i =
|
|
39
|
-
const v = resolveSource(
|
|
45
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) {
|
|
46
|
+
const v = resolveSource(flattenedSources[i])[property];
|
|
40
47
|
if (v !== void 0) return v;
|
|
41
48
|
}
|
|
42
49
|
},
|
|
43
50
|
has(property) {
|
|
44
|
-
for (let i =
|
|
51
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) if (property in resolveSource(flattenedSources[i])) return true;
|
|
45
52
|
return false;
|
|
46
53
|
},
|
|
47
54
|
keys() {
|
|
48
55
|
const keys = [];
|
|
49
|
-
for (const source of
|
|
56
|
+
for (const source of flattenedSources) keys.push(...Object.keys(resolveSource(source)));
|
|
50
57
|
return [...Array.from(new Set(keys))];
|
|
51
58
|
}
|
|
52
59
|
}, propTraps);
|
package/dist/merge-proxy.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-proxy.cjs","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n return new Proxy(\n {\n get(property: string | number | symbol) {\n for (let i =
|
|
1
|
+
{"version":3,"file":"merge-proxy.cjs","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";;AAAA,SAAS,SAAS;AAChB,QAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,SAAU,QAAO,EAAE;AACpC,SAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;AACf,SAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;AACpC,SAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;AACJ,WAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;AACT,SAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;AAC7B,QAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;AACxD,MACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,CAE/B,QAAO,OAAO;AAGhB,SAAO,CAAC,OAAO;GACf;AAEF,QAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;AAC7C,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,IAChD,KAAI,YAAY,cAAc,iBAAiB,GAAG,CAAE,QAAO;AAE7D,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,iBACnB,MAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;AAClD,UAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
|
package/dist/merge-proxy.js
CHANGED
|
@@ -3,9 +3,11 @@ function trueFn() {
|
|
|
3
3
|
return true;
|
|
4
4
|
}
|
|
5
5
|
const $PROXY = Symbol("merge-proxy");
|
|
6
|
+
const $SOURCES = Symbol("merge-proxy-sources");
|
|
6
7
|
const propTraps = {
|
|
7
8
|
get(_, property, receiver) {
|
|
8
9
|
if (property === $PROXY) return receiver;
|
|
10
|
+
if (property === $SOURCES) return _.sources;
|
|
9
11
|
return _.get(property);
|
|
10
12
|
},
|
|
11
13
|
has(_, property) {
|
|
@@ -32,20 +34,25 @@ function resolveSource(s) {
|
|
|
32
34
|
return "value" in s ? s.value : s;
|
|
33
35
|
}
|
|
34
36
|
function mergeProxy(...sources) {
|
|
37
|
+
const flattenedSources = sources.flatMap((source) => {
|
|
38
|
+
if (typeof source === "object" && source !== null && $SOURCES in source && Array.isArray(source[$SOURCES])) return source[$SOURCES];
|
|
39
|
+
return [source];
|
|
40
|
+
});
|
|
35
41
|
return new Proxy({
|
|
42
|
+
sources: flattenedSources,
|
|
36
43
|
get(property) {
|
|
37
|
-
for (let i =
|
|
38
|
-
const v = resolveSource(
|
|
44
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) {
|
|
45
|
+
const v = resolveSource(flattenedSources[i])[property];
|
|
39
46
|
if (v !== void 0) return v;
|
|
40
47
|
}
|
|
41
48
|
},
|
|
42
49
|
has(property) {
|
|
43
|
-
for (let i =
|
|
50
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) if (property in resolveSource(flattenedSources[i])) return true;
|
|
44
51
|
return false;
|
|
45
52
|
},
|
|
46
53
|
keys() {
|
|
47
54
|
const keys = [];
|
|
48
|
-
for (const source of
|
|
55
|
+
for (const source of flattenedSources) keys.push(...Object.keys(resolveSource(source)));
|
|
49
56
|
return [...Array.from(new Set(keys))];
|
|
50
57
|
}
|
|
51
58
|
}, propTraps);
|
package/dist/merge-proxy.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"merge-proxy.js","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n return new Proxy(\n {\n get(property: string | number | symbol) {\n for (let i =
|
|
1
|
+
{"version":3,"file":"merge-proxy.js","names":[],"sources":["../src/merge-proxy.ts"],"sourcesContent":["function trueFn() {\n return true\n}\n\nconst $PROXY = Symbol('merge-proxy')\nconst $SOURCES = Symbol('merge-proxy-sources')\n\n// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118\nconst propTraps: ProxyHandler<{\n get: (k: string | number | symbol) => any\n has: (k: string | number | symbol) => boolean\n keys: () => Array<string>\n sources: Array<any>\n}> = {\n get(_, property, receiver) {\n if (property === $PROXY) return receiver\n if (property === $SOURCES) return _.sources\n return _.get(property)\n },\n has(_, property) {\n return _.has(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n getOwnPropertyDescriptor(_, property) {\n return {\n configurable: true,\n enumerable: true,\n get() {\n return _.get(property)\n },\n set: trueFn,\n deleteProperty: trueFn,\n }\n },\n ownKeys(_) {\n return _.keys()\n },\n}\n\ntype UnboxLazy<T> = T extends () => infer U ? U : T\ntype BoxedTupleTypes<T extends Array<any>> = {\n [P in keyof T]: [UnboxLazy<T[P]>]\n}[Exclude<keyof T, keyof Array<any>>]\ntype UnionToIntersection<T> = (T extends any ? (k: T) => void : never) extends (\n k: infer I,\n) => void\n ? I\n : never\ntype UnboxIntersection<T> = T extends { 0: infer U } ? U : never\ntype MergeProxy<T extends Array<any>> = UnboxIntersection<\n UnionToIntersection<BoxedTupleTypes<T>>\n>\n\nfunction resolveSource(s: any) {\n return 'value' in s ? s.value : s\n}\n\nexport function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>\nexport function mergeProxy(...sources: any): any {\n const flattenedSources = sources.flatMap((source: any) => {\n if (\n typeof source === 'object' &&\n source !== null &&\n $SOURCES in source &&\n Array.isArray(source[$SOURCES])\n ) {\n return source[$SOURCES]\n }\n\n return [source]\n })\n\n return new Proxy(\n {\n sources: flattenedSources,\n get(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n const v = resolveSource(flattenedSources[i])[property]\n if (v !== undefined) return v\n }\n },\n has(property: string | number | symbol) {\n for (let i = flattenedSources.length - 1; i >= 0; i--) {\n if (property in resolveSource(flattenedSources[i])) return true\n }\n return false\n },\n keys() {\n const keys = []\n for (const source of flattenedSources)\n keys.push(...Object.keys(resolveSource(source)))\n return [...Array.from(new Set(keys))]\n },\n },\n propTraps,\n )\n}\n"],"mappings":";AAAA,SAAS,SAAS;AAChB,QAAO;;AAGT,MAAM,SAAS,OAAO,cAAc;AACpC,MAAM,WAAW,OAAO,sBAAsB;AAG9C,MAAM,YAKD;CACH,IAAI,GAAG,UAAU,UAAU;AACzB,MAAI,aAAa,OAAQ,QAAO;AAChC,MAAI,aAAa,SAAU,QAAO,EAAE;AACpC,SAAO,EAAE,IAAI,SAAS;;CAExB,IAAI,GAAG,UAAU;AACf,SAAO,EAAE,IAAI,SAAS;;CAExB,KAAK;CACL,gBAAgB;CAChB,yBAAyB,GAAG,UAAU;AACpC,SAAO;GACL,cAAc;GACd,YAAY;GACZ,MAAM;AACJ,WAAO,EAAE,IAAI,SAAS;;GAExB,KAAK;GACL,gBAAgB;GACjB;;CAEH,QAAQ,GAAG;AACT,SAAO,EAAE,MAAM;;CAElB;AAgBD,SAAS,cAAc,GAAQ;AAC7B,QAAO,WAAW,IAAI,EAAE,QAAQ;;AAIlC,SAAgB,WAAW,GAAG,SAAmB;CAC/C,MAAM,mBAAmB,QAAQ,SAAS,WAAgB;AACxD,MACE,OAAO,WAAW,YAClB,WAAW,QACX,YAAY,UACZ,MAAM,QAAQ,OAAO,UAAU,CAE/B,QAAO,OAAO;AAGhB,SAAO,CAAC,OAAO;GACf;AAEF,QAAO,IAAI,MACT;EACE,SAAS;EACT,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,KAAK;IACrD,MAAM,IAAI,cAAc,iBAAiB,GAAG,CAAC;AAC7C,QAAI,MAAM,OAAW,QAAO;;;EAGhC,IAAI,UAAoC;AACtC,QAAK,IAAI,IAAI,iBAAiB,SAAS,GAAG,KAAK,GAAG,IAChD,KAAI,YAAY,cAAc,iBAAiB,GAAG,CAAE,QAAO;AAE7D,UAAO;;EAET,OAAO;GACL,MAAM,OAAO,EAAE;AACf,QAAK,MAAM,UAAU,iBACnB,MAAK,KAAK,GAAG,OAAO,KAAK,cAAc,OAAO,CAAC,CAAC;AAClD,UAAO,CAAC,GAAG,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC;;EAExC,EACD,UACD"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
var _tanstack_table_core_static_functions = require("@tanstack/table-core/static-functions");
|
|
4
|
+
Object.keys(_tanstack_table_core_static_functions).forEach(function (k) {
|
|
5
|
+
if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function () { return _tanstack_table_core_static_functions[k]; }
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@tanstack/table-core/static-functions";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "@tanstack/table-core/static-functions";
|
package/dist/useTable.cjs
CHANGED
|
@@ -4,16 +4,23 @@ let _tanstack_table_core = require("@tanstack/table-core");
|
|
|
4
4
|
let _tanstack_vue_store = require("@tanstack/vue-store");
|
|
5
5
|
|
|
6
6
|
//#region src/useTable.ts
|
|
7
|
-
function
|
|
8
|
-
|
|
7
|
+
function getOptionsWithReactiveValues(options) {
|
|
8
|
+
const resolvedOptions = {};
|
|
9
|
+
for (const key of Object.keys(options)) resolvedOptions[key] = (0, vue.unref)(options[key]);
|
|
10
|
+
return require_merge_proxy.mergeProxy(options, resolvedOptions);
|
|
11
|
+
}
|
|
12
|
+
function getReactiveOptionDeps(options) {
|
|
13
|
+
return Object.keys(options).map((key) => (0, vue.unref)(options[key]));
|
|
9
14
|
}
|
|
10
15
|
function useTable(tableOptions, selector = () => ({})) {
|
|
11
16
|
const notifier = (0, vue.ref)(0);
|
|
17
|
+
const syncTableOptions = (table, options) => {
|
|
18
|
+
table.setOptions(() => getOptionsWithReactiveValues(options));
|
|
19
|
+
};
|
|
12
20
|
const vueReactivityFeature = (0, _tanstack_table_core.constructReactivityFeature)({
|
|
13
21
|
stateNotifier: () => notifier.value,
|
|
14
22
|
optionsNotifier: () => notifier.value
|
|
15
23
|
});
|
|
16
|
-
const IS_REACTIVE = (0, vue.isRef)(tableOptions.data);
|
|
17
24
|
const mergedOptions = {
|
|
18
25
|
...tableOptions,
|
|
19
26
|
_features: {
|
|
@@ -21,7 +28,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
21
28
|
vueReactivityFeature
|
|
22
29
|
}
|
|
23
30
|
};
|
|
24
|
-
const table = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(
|
|
31
|
+
const table = (0, _tanstack_table_core.constructTable)(require_merge_proxy.mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
25
32
|
return require_merge_proxy.mergeProxy(defaultOptions, newOptions);
|
|
26
33
|
} }));
|
|
27
34
|
const allState = (0, _tanstack_vue_store.useSelector)(table.store, (state) => state);
|
|
@@ -31,16 +38,27 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
31
38
|
allOptions.value;
|
|
32
39
|
notifier.value++;
|
|
33
40
|
});
|
|
34
|
-
(0, vue.watch)(() =>
|
|
35
|
-
table
|
|
36
|
-
|
|
37
|
-
|
|
41
|
+
(0, vue.watch)(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
42
|
+
syncTableOptions(table, mergedOptions);
|
|
43
|
+
}, { immediate: true });
|
|
44
|
+
(0, vue.watch)(() => {
|
|
45
|
+
const controlledState = (0, vue.unref)(tableOptions.state);
|
|
46
|
+
const controlledAtoms = (0, vue.unref)(tableOptions.atoms);
|
|
47
|
+
if (!controlledState) return [];
|
|
48
|
+
const controlledValues = [];
|
|
49
|
+
for (const key of Object.keys(table.initialState)) {
|
|
50
|
+
if (!(key in controlledState) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
|
|
51
|
+
controlledValues.push(controlledState[key]);
|
|
52
|
+
}
|
|
53
|
+
return controlledValues;
|
|
54
|
+
}, (controlledValues) => {
|
|
55
|
+
if (controlledValues.length > 0) syncTableOptions(table, mergedOptions);
|
|
38
56
|
}, { immediate: true });
|
|
39
|
-
table.Subscribe =
|
|
40
|
-
const selected = (0, _tanstack_vue_store.useSelector)(table.store, props.selector);
|
|
57
|
+
table.Subscribe = ((props) => {
|
|
58
|
+
const selected = (0, _tanstack_vue_store.useSelector)(props.source !== void 0 ? props.source : table.store, props.source !== void 0 ? props.selector ?? ((x) => x) : props.selector, { compare: _tanstack_vue_store.shallow });
|
|
41
59
|
if (typeof props.children === "function") return props.children(selected.value);
|
|
42
60
|
return props.children;
|
|
43
|
-
};
|
|
61
|
+
});
|
|
44
62
|
const stateStore = (0, _tanstack_vue_store.useSelector)(table.store, selector);
|
|
45
63
|
return {
|
|
46
64
|
...table,
|
package/dist/useTable.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.cjs","names":["mergeProxy"],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n constructReactivityFeature,\n constructTable,\n} from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> =
|
|
1
|
+
{"version":3,"file":"useTable.cjs","names":["mergeProxy","shallow"],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n constructReactivityFeature,\n constructTable,\n} from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport type { Atom, ReadonlyAtom } from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const notifier = ref<number>(0)\n\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const vueReactivityFeature = constructReactivityFeature({\n stateNotifier: () => notifier.value,\n optionsNotifier: () => notifier.value,\n })\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n ...tableOptions._features,\n vueReactivityFeature,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n const allState = useSelector(table.store, (state) => state)\n const allOptions = useSelector(table.optionsStore, (state) => state)\n\n watchEffect(() => {\n allState.value\n allOptions.value\n notifier.value++\n })\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(\n table,\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n )\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(\n table,\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n )\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: Atom<unknown> | ReadonlyAtom<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source !== undefined ? props.source : table.store\n const selectFn =\n props.source !== undefined\n ? (props.selector ?? ((x: unknown) => x))\n : props.selector\n const selected = useSelector(source as never, selectFn as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n } as VueTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;AA2BA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,sBACd,QAAQ,KACT;AAGH,QAAOA,+BAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,uBACzB,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,wBAAuB,EAAE;CAE/B,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,4EAAkD;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAiBD,MAAM,iDAfkBA,+BACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAOA,+BAAW,gBAAgB,WAAW;IAEhD,CACF,CAE4C;CAM7C,MAAM,gDAAuB,MAAM,QAAQ,UAAU,MAAM;CAC3D,MAAM,kDAAyB,MAAM,eAAe,UAAU,MAAM;AAEpE,4BAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,sBAEI,sBACE,cACD,QACG;AACJ,mBACE,OACA,cACD;IAEH,EAAE,WAAW,MAAM,CACpB;AAED,sBACQ;EACJ,MAAM,iCAAwB,aAAa,MAAM;EAGjD,MAAM,iCAAwB,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBACE,OACA,cACD;IAGL,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,gDALS,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAASC,6BACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,kDAAyB,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
|
package/dist/useTable.d.cts
CHANGED
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
import { MaybeRef, VNode } from "vue";
|
|
2
2
|
import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
|
|
3
|
+
import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
|
|
3
4
|
|
|
4
5
|
//#region src/useTable.d.ts
|
|
5
|
-
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> =
|
|
6
|
-
data: MaybeRef<ReadonlyArray<TData>>;
|
|
7
|
-
};
|
|
6
|
+
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
|
|
8
7
|
type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
|
|
9
8
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
|
|
16
|
-
* {(state) => (
|
|
17
|
-
* <tr>
|
|
18
|
-
* // render the row
|
|
19
|
-
* </tr>
|
|
20
|
-
* )}
|
|
21
|
-
* </table.Subscribe>
|
|
9
|
+
* Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
|
|
10
|
+
* `selector` for the whole value (identity), or pass `selector` to project. Split
|
|
11
|
+
* overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
|
|
22
12
|
*/
|
|
23
|
-
Subscribe:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
13
|
+
Subscribe: {
|
|
14
|
+
<TSourceValue>(props: {
|
|
15
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
|
|
16
|
+
selector?: undefined;
|
|
17
|
+
children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
18
|
+
}): VNode | Array<VNode>;
|
|
19
|
+
<TSourceValue, TSubSelected>(props: {
|
|
20
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
|
|
21
|
+
selector: (state: TSourceValue) => TSubSelected;
|
|
22
|
+
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
23
|
+
}): VNode | Array<VNode>;
|
|
24
|
+
<TSubSelected>(props: {
|
|
25
|
+
selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
|
|
26
|
+
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
27
|
+
}): VNode | Array<VNode>;
|
|
28
|
+
};
|
|
27
29
|
/**
|
|
28
30
|
* The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
|
|
29
31
|
*
|
|
@@ -34,7 +36,7 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
34
36
|
*/
|
|
35
37
|
readonly state: Readonly<TSelected>;
|
|
36
38
|
};
|
|
37
|
-
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
39
|
+
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
38
40
|
//#endregion
|
|
39
41
|
export { TableOptionsWithReactiveData, VueTable, useTable };
|
|
40
42
|
//# sourceMappingURL=useTable.d.cts.map
|
package/dist/useTable.d.ts
CHANGED
|
@@ -1,29 +1,31 @@
|
|
|
1
1
|
import { MaybeRef, VNode } from "vue";
|
|
2
2
|
import { NoInfer, RowData, Table, TableFeatures, TableOptions, TableState } from "@tanstack/table-core";
|
|
3
|
+
import { Atom, ReadonlyAtom } from "@tanstack/vue-store";
|
|
3
4
|
|
|
4
5
|
//#region src/useTable.d.ts
|
|
5
|
-
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> =
|
|
6
|
-
data: MaybeRef<ReadonlyArray<TData>>;
|
|
7
|
-
};
|
|
6
|
+
type TableOptionsWithReactiveData<TFeatures extends TableFeatures, TData extends RowData> = { [K in keyof TableOptions<TFeatures, TData>]: K extends 'data' ? MaybeRef<ReadonlyArray<TData>> : MaybeRef<TableOptions<TFeatures, TData>[K]> };
|
|
8
7
|
type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}> = Table<TFeatures, TData> & {
|
|
9
8
|
/**
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
|
|
16
|
-
* {(state) => (
|
|
17
|
-
* <tr>
|
|
18
|
-
* // render the row
|
|
19
|
-
* </tr>
|
|
20
|
-
* )}
|
|
21
|
-
* </table.Subscribe>
|
|
9
|
+
* Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
|
|
10
|
+
* `selector` for the whole value (identity), or pass `selector` to project. Split
|
|
11
|
+
* overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
|
|
22
12
|
*/
|
|
23
|
-
Subscribe:
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
13
|
+
Subscribe: {
|
|
14
|
+
<TSourceValue>(props: {
|
|
15
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
|
|
16
|
+
selector?: undefined;
|
|
17
|
+
children: ((state: Readonly<TSourceValue>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
18
|
+
}): VNode | Array<VNode>;
|
|
19
|
+
<TSourceValue, TSubSelected>(props: {
|
|
20
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>;
|
|
21
|
+
selector: (state: TSourceValue) => TSubSelected;
|
|
22
|
+
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
23
|
+
}): VNode | Array<VNode>;
|
|
24
|
+
<TSubSelected>(props: {
|
|
25
|
+
selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected;
|
|
26
|
+
children: ((state: Readonly<TSubSelected>) => VNode | Array<VNode>) | VNode | Array<VNode>;
|
|
27
|
+
}): VNode | Array<VNode>;
|
|
28
|
+
};
|
|
27
29
|
/**
|
|
28
30
|
* The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
|
|
29
31
|
*
|
|
@@ -34,7 +36,7 @@ type VueTable<TFeatures extends TableFeatures, TData extends RowData, TSelected
|
|
|
34
36
|
*/
|
|
35
37
|
readonly state: Readonly<TSelected>;
|
|
36
38
|
};
|
|
37
|
-
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
39
|
+
declare function useTable<TFeatures extends TableFeatures, TData extends RowData, TSelected = {}>(tableOptions: TableOptions<TFeatures, TData> | TableOptionsWithReactiveData<TFeatures, TData>, selector?: (state: TableState<TFeatures>) => TSelected): VueTable<TFeatures, TData, TSelected>;
|
|
38
40
|
//#endregion
|
|
39
41
|
export { TableOptionsWithReactiveData, VueTable, useTable };
|
|
40
42
|
//# sourceMappingURL=useTable.d.ts.map
|
package/dist/useTable.js
CHANGED
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
import { mergeProxy } from "./merge-proxy.js";
|
|
2
|
-
import {
|
|
2
|
+
import { ref, unref, watch, watchEffect } from "vue";
|
|
3
3
|
import { constructReactivityFeature, constructTable } from "@tanstack/table-core";
|
|
4
|
-
import { useSelector } from "@tanstack/vue-store";
|
|
4
|
+
import { shallow, useSelector } from "@tanstack/vue-store";
|
|
5
5
|
|
|
6
6
|
//#region src/useTable.ts
|
|
7
|
-
function
|
|
8
|
-
|
|
7
|
+
function getOptionsWithReactiveValues(options) {
|
|
8
|
+
const resolvedOptions = {};
|
|
9
|
+
for (const key of Object.keys(options)) resolvedOptions[key] = unref(options[key]);
|
|
10
|
+
return mergeProxy(options, resolvedOptions);
|
|
11
|
+
}
|
|
12
|
+
function getReactiveOptionDeps(options) {
|
|
13
|
+
return Object.keys(options).map((key) => unref(options[key]));
|
|
9
14
|
}
|
|
10
15
|
function useTable(tableOptions, selector = () => ({})) {
|
|
11
16
|
const notifier = ref(0);
|
|
17
|
+
const syncTableOptions = (table, options) => {
|
|
18
|
+
table.setOptions(() => getOptionsWithReactiveValues(options));
|
|
19
|
+
};
|
|
12
20
|
const vueReactivityFeature = constructReactivityFeature({
|
|
13
21
|
stateNotifier: () => notifier.value,
|
|
14
22
|
optionsNotifier: () => notifier.value
|
|
15
23
|
});
|
|
16
|
-
const IS_REACTIVE = isRef(tableOptions.data);
|
|
17
24
|
const mergedOptions = {
|
|
18
25
|
...tableOptions,
|
|
19
26
|
_features: {
|
|
@@ -21,7 +28,7 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
21
28
|
vueReactivityFeature
|
|
22
29
|
}
|
|
23
30
|
};
|
|
24
|
-
const table = constructTable(mergeProxy(
|
|
31
|
+
const table = constructTable(mergeProxy(getOptionsWithReactiveValues(mergedOptions), { mergeOptions: (defaultOptions, newOptions) => {
|
|
25
32
|
return mergeProxy(defaultOptions, newOptions);
|
|
26
33
|
} }));
|
|
27
34
|
const allState = useSelector(table.store, (state) => state);
|
|
@@ -31,16 +38,27 @@ function useTable(tableOptions, selector = () => ({})) {
|
|
|
31
38
|
allOptions.value;
|
|
32
39
|
notifier.value++;
|
|
33
40
|
});
|
|
34
|
-
watch(() =>
|
|
35
|
-
table
|
|
36
|
-
|
|
37
|
-
|
|
41
|
+
watch(() => getReactiveOptionDeps(mergedOptions), () => {
|
|
42
|
+
syncTableOptions(table, mergedOptions);
|
|
43
|
+
}, { immediate: true });
|
|
44
|
+
watch(() => {
|
|
45
|
+
const controlledState = unref(tableOptions.state);
|
|
46
|
+
const controlledAtoms = unref(tableOptions.atoms);
|
|
47
|
+
if (!controlledState) return [];
|
|
48
|
+
const controlledValues = [];
|
|
49
|
+
for (const key of Object.keys(table.initialState)) {
|
|
50
|
+
if (!(key in controlledState) || (controlledAtoms === null || controlledAtoms === void 0 ? void 0 : controlledAtoms[key]) !== void 0) continue;
|
|
51
|
+
controlledValues.push(controlledState[key]);
|
|
52
|
+
}
|
|
53
|
+
return controlledValues;
|
|
54
|
+
}, (controlledValues) => {
|
|
55
|
+
if (controlledValues.length > 0) syncTableOptions(table, mergedOptions);
|
|
38
56
|
}, { immediate: true });
|
|
39
|
-
table.Subscribe =
|
|
40
|
-
const selected = useSelector(table.store, props.selector);
|
|
57
|
+
table.Subscribe = ((props) => {
|
|
58
|
+
const selected = useSelector(props.source !== void 0 ? props.source : table.store, props.source !== void 0 ? props.selector ?? ((x) => x) : props.selector, { compare: shallow });
|
|
41
59
|
if (typeof props.children === "function") return props.children(selected.value);
|
|
42
60
|
return props.children;
|
|
43
|
-
};
|
|
61
|
+
});
|
|
44
62
|
const stateStore = useSelector(table.store, selector);
|
|
45
63
|
return {
|
|
46
64
|
...table,
|
package/dist/useTable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n constructReactivityFeature,\n constructTable,\n} from '@tanstack/table-core'\nimport { useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> =
|
|
1
|
+
{"version":3,"file":"useTable.js","names":[],"sources":["../src/useTable.ts"],"sourcesContent":["import { isRef, ref, unref, watch, watchEffect } from 'vue'\nimport {\n constructReactivityFeature,\n constructTable,\n} from '@tanstack/table-core'\nimport { shallow, useSelector } from '@tanstack/vue-store'\nimport { mergeProxy } from './merge-proxy'\nimport type { Atom, ReadonlyAtom } from '@tanstack/vue-store'\nimport type {\n NoInfer,\n RowData,\n Table,\n TableFeatures,\n TableOptions,\n TableState,\n} from '@tanstack/table-core'\nimport type { MaybeRef, VNode } from 'vue'\n\nexport type TableOptionsWithReactiveData<\n TFeatures extends TableFeatures,\n TData extends RowData,\n> = {\n [K in keyof TableOptions<TFeatures, TData>]: K extends 'data'\n ? MaybeRef<ReadonlyArray<TData>>\n : MaybeRef<TableOptions<TFeatures, TData>[K]>\n}\n\nfunction getOptionsWithReactiveValues<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n const resolvedOptions: Record<string, unknown> = {}\n\n for (const key of Object.keys(options)) {\n resolvedOptions[key] = unref(\n options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],\n )\n }\n\n return mergeProxy(options, resolvedOptions)\n}\n\nfunction getReactiveOptionDeps<\n TFeatures extends TableFeatures,\n TData extends RowData,\n>(options: TableOptionsWithReactiveData<TFeatures, TData>) {\n return Object.keys(options).map((key) =>\n unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),\n )\n}\n\nexport type VueTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n> = Table<TFeatures, TData> & {\n /**\n * Store mode: `selector` required. Source mode: pass `source` (atom or store); omit\n * `selector` for the whole value (identity), or pass `selector` to project. Split\n * overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).\n */\n Subscribe: {\n <TSourceValue>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector?: undefined\n children:\n | ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSourceValue, TSubSelected>(props: {\n source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>\n selector: (state: TSourceValue) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n <TSubSelected>(props: {\n selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected\n children:\n | ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }): VNode | Array<VNode>\n }\n /**\n * The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.\n *\n * @example\n * const table = useTable(options, (state) => ({ globalFilter: state.globalFilter })) // only globalFilter is part of the selected state\n *\n * console.log(table.state.globalFilter)\n */\n readonly state: Readonly<TSelected>\n}\n\nexport function useTable<\n TFeatures extends TableFeatures,\n TData extends RowData,\n TSelected = {},\n>(\n tableOptions:\n | TableOptions<TFeatures, TData>\n | TableOptionsWithReactiveData<TFeatures, TData>,\n selector: (state: TableState<TFeatures>) => TSelected = () =>\n ({}) as TSelected,\n): VueTable<TFeatures, TData, TSelected> {\n const notifier = ref<number>(0)\n\n const syncTableOptions = (\n table: Table<TFeatures, TData>,\n options: TableOptionsWithReactiveData<TFeatures, TData>,\n ) => {\n table.setOptions(\n () =>\n getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,\n )\n }\n\n const vueReactivityFeature = constructReactivityFeature({\n stateNotifier: () => notifier.value,\n optionsNotifier: () => notifier.value,\n })\n\n const mergedOptions = {\n ...tableOptions,\n _features: {\n ...tableOptions._features,\n vueReactivityFeature,\n },\n }\n\n const resolvedOptions = mergeProxy(\n getOptionsWithReactiveValues(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n {\n // Remove state and onStateChange - store handles it internally\n mergeOptions: (\n defaultOptions: TableOptions<TFeatures, TData>,\n newOptions: Partial<TableOptions<TFeatures, TData>>,\n ) => {\n return mergeProxy(defaultOptions, newOptions)\n },\n },\n ) as TableOptions<TFeatures, TData>\n\n const table = constructTable(resolvedOptions) as VueTable<\n TFeatures,\n TData,\n TSelected\n >\n\n const allState = useSelector(table.store, (state) => state)\n const allOptions = useSelector(table.optionsStore, (state) => state)\n\n watchEffect(() => {\n allState.value\n allOptions.value\n notifier.value++\n })\n\n watch(\n () =>\n getReactiveOptionDeps(\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n ),\n () => {\n syncTableOptions(\n table,\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n )\n },\n { immediate: true },\n )\n\n watch(\n () => {\n const controlledState = unref(tableOptions.state) as\n | Record<string, unknown>\n | undefined\n const controlledAtoms = unref(tableOptions.atoms) as\n | Record<string, unknown>\n | undefined\n\n if (!controlledState) {\n return []\n }\n\n const controlledValues: Array<unknown> = []\n\n for (const key of Object.keys(table.initialState)) {\n if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {\n continue\n }\n\n // Reading only controlled state slices here lets Vue subscribe to\n // getters/computed values that are passed through `options.state`.\n controlledValues.push(controlledState[key])\n }\n\n return controlledValues\n },\n (controlledValues) => {\n if (controlledValues.length > 0) {\n syncTableOptions(\n table,\n mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,\n )\n }\n },\n { immediate: true },\n )\n\n table.Subscribe = ((props: {\n source?: Atom<unknown> | ReadonlyAtom<unknown>\n selector?: ((state: unknown) => unknown) | undefined\n children:\n | ((state: Readonly<unknown>) => VNode | Array<VNode>)\n | VNode\n | Array<VNode>\n }) => {\n const source = props.source !== undefined ? props.source : table.store\n const selectFn =\n props.source !== undefined\n ? (props.selector ?? ((x: unknown) => x))\n : props.selector\n const selected = useSelector(source as never, selectFn as never, {\n compare: shallow,\n })\n if (typeof props.children === 'function') {\n return props.children(selected.value as Readonly<unknown>)\n }\n return props.children\n }) as VueTable<TFeatures, TData, TSelected>['Subscribe']\n\n const stateStore = useSelector(table.store, selector)\n\n return {\n ...table,\n get state() {\n return stateStore.value\n },\n } as VueTable<TFeatures, TData, TSelected>\n}\n"],"mappings":";;;;;;AA2BA,SAAS,6BAGP,SAAyD;CACzD,MAAM,kBAA2C,EAAE;AAEnD,MAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,CACpC,iBAAgB,OAAO,MACrB,QAAQ,KACT;AAGH,QAAO,WAAW,SAAS,gBAAgB;;AAG7C,SAAS,sBAGP,SAAyD;AACzD,QAAO,OAAO,KAAK,QAAQ,CAAC,KAAK,QAC/B,MAAM,QAAQ,KAA6D,CAC5E;;AAiDH,SAAgB,SAKd,cAGA,kBACG,EAAE,GACkC;CACvC,MAAM,WAAW,IAAY,EAAE;CAE/B,MAAM,oBACJ,OACA,YACG;AACH,QAAM,iBAEF,6BAA6B,QAAQ,CACxC;;CAGH,MAAM,uBAAuB,2BAA2B;EACtD,qBAAqB,SAAS;EAC9B,uBAAuB,SAAS;EACjC,CAAC;CAEF,MAAM,gBAAgB;EACpB,GAAG;EACH,WAAW;GACT,GAAG,aAAa;GAChB;GACD;EACF;CAiBD,MAAM,QAAQ,eAfU,WACtB,6BACE,cACD,EACD,EAEE,eACE,gBACA,eACG;AACH,SAAO,WAAW,gBAAgB,WAAW;IAEhD,CACF,CAE4C;CAM7C,MAAM,WAAW,YAAY,MAAM,QAAQ,UAAU,MAAM;CAC3D,MAAM,aAAa,YAAY,MAAM,eAAe,UAAU,MAAM;AAEpE,mBAAkB;AAChB,WAAS;AACT,aAAW;AACX,WAAS;GACT;AAEF,aAEI,sBACE,cACD,QACG;AACJ,mBACE,OACA,cACD;IAEH,EAAE,WAAW,MAAM,CACpB;AAED,aACQ;EACJ,MAAM,kBAAkB,MAAM,aAAa,MAAM;EAGjD,MAAM,kBAAkB,MAAM,aAAa,MAAM;AAIjD,MAAI,CAAC,gBACH,QAAO,EAAE;EAGX,MAAM,mBAAmC,EAAE;AAE3C,OAAK,MAAM,OAAO,OAAO,KAAK,MAAM,aAAa,EAAE;AACjD,OAAI,EAAE,OAAO,uFAAoB,gBAAkB,UAAS,OAC1D;AAKF,oBAAiB,KAAK,gBAAgB,KAAK;;AAG7C,SAAO;KAER,qBAAqB;AACpB,MAAI,iBAAiB,SAAS,EAC5B,kBACE,OACA,cACD;IAGL,EAAE,WAAW,MAAM,CACpB;AAED,OAAM,cAAc,UAOd;EAMJ,MAAM,WAAW,YALF,MAAM,WAAW,SAAY,MAAM,SAAS,MAAM,OAE/D,MAAM,WAAW,SACZ,MAAM,cAAc,MAAe,KACpC,MAAM,UACqD,EAC/D,SAAS,SACV,CAAC;AACF,MAAI,OAAO,MAAM,aAAa,WAC5B,QAAO,MAAM,SAAS,SAAS,MAA2B;AAE5D,SAAO,MAAM;;CAGf,MAAM,aAAa,YAAY,MAAM,OAAO,SAAS;AAErD,QAAO;EACL,GAAG;EACH,IAAI,QAAQ;AACV,UAAO,WAAW;;EAErB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/vue-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.35",
|
|
4
4
|
"description": "Headless UI for building powerful tables & datagrids for Vue.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
"import": "./dist/index.js",
|
|
30
30
|
"require": "./dist/index.cjs"
|
|
31
31
|
},
|
|
32
|
+
"./static-functions": {
|
|
33
|
+
"import": "./dist/static-functions.js",
|
|
34
|
+
"require": "./dist/static-functions.cjs"
|
|
35
|
+
},
|
|
32
36
|
"./package.json": "./package.json"
|
|
33
37
|
},
|
|
34
38
|
"sideEffects": false,
|
|
@@ -41,7 +45,7 @@
|
|
|
41
45
|
],
|
|
42
46
|
"dependencies": {
|
|
43
47
|
"@tanstack/vue-store": "^0.11.0",
|
|
44
|
-
"@tanstack/table-core": "9.0.0-alpha.
|
|
48
|
+
"@tanstack/table-core": "9.0.0-alpha.34"
|
|
45
49
|
},
|
|
46
50
|
"devDependencies": {
|
|
47
51
|
"@vitejs/plugin-vue": "^6.0.6",
|
package/src/merge-proxy.ts
CHANGED
|
@@ -3,15 +3,18 @@ function trueFn() {
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
const $PROXY = Symbol('merge-proxy')
|
|
6
|
+
const $SOURCES = Symbol('merge-proxy-sources')
|
|
6
7
|
|
|
7
8
|
// https://github.com/solidjs/solid/blob/c20ca4fd8c36bc0522fedb2c7f38a110b7ee2663/packages/solid/src/render/component.ts#L51-L118
|
|
8
9
|
const propTraps: ProxyHandler<{
|
|
9
10
|
get: (k: string | number | symbol) => any
|
|
10
11
|
has: (k: string | number | symbol) => boolean
|
|
11
12
|
keys: () => Array<string>
|
|
13
|
+
sources: Array<any>
|
|
12
14
|
}> = {
|
|
13
15
|
get(_, property, receiver) {
|
|
14
16
|
if (property === $PROXY) return receiver
|
|
17
|
+
if (property === $SOURCES) return _.sources
|
|
15
18
|
return _.get(property)
|
|
16
19
|
},
|
|
17
20
|
has(_, property) {
|
|
@@ -55,23 +58,37 @@ function resolveSource(s: any) {
|
|
|
55
58
|
|
|
56
59
|
export function mergeProxy<T extends Array<any>>(...sources: T): MergeProxy<T>
|
|
57
60
|
export function mergeProxy(...sources: any): any {
|
|
61
|
+
const flattenedSources = sources.flatMap((source: any) => {
|
|
62
|
+
if (
|
|
63
|
+
typeof source === 'object' &&
|
|
64
|
+
source !== null &&
|
|
65
|
+
$SOURCES in source &&
|
|
66
|
+
Array.isArray(source[$SOURCES])
|
|
67
|
+
) {
|
|
68
|
+
return source[$SOURCES]
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return [source]
|
|
72
|
+
})
|
|
73
|
+
|
|
58
74
|
return new Proxy(
|
|
59
75
|
{
|
|
76
|
+
sources: flattenedSources,
|
|
60
77
|
get(property: string | number | symbol) {
|
|
61
|
-
for (let i =
|
|
62
|
-
const v = resolveSource(
|
|
78
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) {
|
|
79
|
+
const v = resolveSource(flattenedSources[i])[property]
|
|
63
80
|
if (v !== undefined) return v
|
|
64
81
|
}
|
|
65
82
|
},
|
|
66
83
|
has(property: string | number | symbol) {
|
|
67
|
-
for (let i =
|
|
68
|
-
if (property in resolveSource(
|
|
84
|
+
for (let i = flattenedSources.length - 1; i >= 0; i--) {
|
|
85
|
+
if (property in resolveSource(flattenedSources[i])) return true
|
|
69
86
|
}
|
|
70
87
|
return false
|
|
71
88
|
},
|
|
72
89
|
keys() {
|
|
73
90
|
const keys = []
|
|
74
|
-
for (const source of
|
|
91
|
+
for (const source of flattenedSources)
|
|
75
92
|
keys.push(...Object.keys(resolveSource(source)))
|
|
76
93
|
return [...Array.from(new Set(keys))]
|
|
77
94
|
},
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '@tanstack/table-core/static-functions'
|
package/src/useTable.ts
CHANGED
|
@@ -3,8 +3,9 @@ import {
|
|
|
3
3
|
constructReactivityFeature,
|
|
4
4
|
constructTable,
|
|
5
5
|
} from '@tanstack/table-core'
|
|
6
|
-
import { useSelector } from '@tanstack/vue-store'
|
|
6
|
+
import { shallow, useSelector } from '@tanstack/vue-store'
|
|
7
7
|
import { mergeProxy } from './merge-proxy'
|
|
8
|
+
import type { Atom, ReadonlyAtom } from '@tanstack/vue-store'
|
|
8
9
|
import type {
|
|
9
10
|
NoInfer,
|
|
10
11
|
RowData,
|
|
@@ -18,17 +19,34 @@ import type { MaybeRef, VNode } from 'vue'
|
|
|
18
19
|
export type TableOptionsWithReactiveData<
|
|
19
20
|
TFeatures extends TableFeatures,
|
|
20
21
|
TData extends RowData,
|
|
21
|
-
> =
|
|
22
|
-
|
|
22
|
+
> = {
|
|
23
|
+
[K in keyof TableOptions<TFeatures, TData>]: K extends 'data'
|
|
24
|
+
? MaybeRef<ReadonlyArray<TData>>
|
|
25
|
+
: MaybeRef<TableOptions<TFeatures, TData>[K]>
|
|
23
26
|
}
|
|
24
27
|
|
|
25
|
-
function
|
|
28
|
+
function getOptionsWithReactiveValues<
|
|
26
29
|
TFeatures extends TableFeatures,
|
|
27
30
|
TData extends RowData,
|
|
28
31
|
>(options: TableOptionsWithReactiveData<TFeatures, TData>) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
+
const resolvedOptions: Record<string, unknown> = {}
|
|
33
|
+
|
|
34
|
+
for (const key of Object.keys(options)) {
|
|
35
|
+
resolvedOptions[key] = unref(
|
|
36
|
+
options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>],
|
|
37
|
+
)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return mergeProxy(options, resolvedOptions)
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
function getReactiveOptionDeps<
|
|
44
|
+
TFeatures extends TableFeatures,
|
|
45
|
+
TData extends RowData,
|
|
46
|
+
>(options: TableOptionsWithReactiveData<TFeatures, TData>) {
|
|
47
|
+
return Object.keys(options).map((key) =>
|
|
48
|
+
unref(options[key as keyof TableOptionsWithReactiveData<TFeatures, TData>]),
|
|
49
|
+
)
|
|
32
50
|
}
|
|
33
51
|
|
|
34
52
|
export type VueTable<
|
|
@@ -37,26 +55,35 @@ export type VueTable<
|
|
|
37
55
|
TSelected = {},
|
|
38
56
|
> = Table<TFeatures, TData> & {
|
|
39
57
|
/**
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
* @example
|
|
45
|
-
* <table.Subscribe selector={(state) => ({ rowSelection: state.rowSelection })}>
|
|
46
|
-
* {(state) => (
|
|
47
|
-
* <tr>
|
|
48
|
-
* // render the row
|
|
49
|
-
* </tr>
|
|
50
|
-
* )}
|
|
51
|
-
* </table.Subscribe>
|
|
58
|
+
* Store mode: `selector` required. Source mode: pass `source` (atom or store); omit
|
|
59
|
+
* `selector` for the whole value (identity), or pass `selector` to project. Split
|
|
60
|
+
* overloads so source-only infers `TSourceValue` for `children` (see React `Subscribe`).
|
|
52
61
|
*/
|
|
53
|
-
Subscribe:
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
62
|
+
Subscribe: {
|
|
63
|
+
<TSourceValue>(props: {
|
|
64
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
|
|
65
|
+
selector?: undefined
|
|
66
|
+
children:
|
|
67
|
+
| ((state: Readonly<TSourceValue>) => VNode | Array<VNode>)
|
|
68
|
+
| VNode
|
|
69
|
+
| Array<VNode>
|
|
70
|
+
}): VNode | Array<VNode>
|
|
71
|
+
<TSourceValue, TSubSelected>(props: {
|
|
72
|
+
source: Atom<TSourceValue> | ReadonlyAtom<TSourceValue>
|
|
73
|
+
selector: (state: TSourceValue) => TSubSelected
|
|
74
|
+
children:
|
|
75
|
+
| ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
|
|
76
|
+
| VNode
|
|
77
|
+
| Array<VNode>
|
|
78
|
+
}): VNode | Array<VNode>
|
|
79
|
+
<TSubSelected>(props: {
|
|
80
|
+
selector: (state: NoInfer<TableState<TFeatures>>) => TSubSelected
|
|
81
|
+
children:
|
|
82
|
+
| ((state: Readonly<TSubSelected>) => VNode | Array<VNode>)
|
|
83
|
+
| VNode
|
|
84
|
+
| Array<VNode>
|
|
85
|
+
}): VNode | Array<VNode>
|
|
86
|
+
}
|
|
60
87
|
/**
|
|
61
88
|
* The selected state of the table. This state may not match the structure of `table.store.state` because it is selected by the `selector` function that you pass as the 2nd argument to `useTable`.
|
|
62
89
|
*
|
|
@@ -73,19 +100,29 @@ export function useTable<
|
|
|
73
100
|
TData extends RowData,
|
|
74
101
|
TSelected = {},
|
|
75
102
|
>(
|
|
76
|
-
tableOptions:
|
|
103
|
+
tableOptions:
|
|
104
|
+
| TableOptions<TFeatures, TData>
|
|
105
|
+
| TableOptionsWithReactiveData<TFeatures, TData>,
|
|
77
106
|
selector: (state: TableState<TFeatures>) => TSelected = () =>
|
|
78
107
|
({}) as TSelected,
|
|
79
108
|
): VueTable<TFeatures, TData, TSelected> {
|
|
80
109
|
const notifier = ref<number>(0)
|
|
81
110
|
|
|
111
|
+
const syncTableOptions = (
|
|
112
|
+
table: Table<TFeatures, TData>,
|
|
113
|
+
options: TableOptionsWithReactiveData<TFeatures, TData>,
|
|
114
|
+
) => {
|
|
115
|
+
table.setOptions(
|
|
116
|
+
() =>
|
|
117
|
+
getOptionsWithReactiveValues(options) as TableOptions<TFeatures, TData>,
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
|
|
82
121
|
const vueReactivityFeature = constructReactivityFeature({
|
|
83
122
|
stateNotifier: () => notifier.value,
|
|
84
123
|
optionsNotifier: () => notifier.value,
|
|
85
124
|
})
|
|
86
125
|
|
|
87
|
-
const IS_REACTIVE = isRef(tableOptions.data)
|
|
88
|
-
|
|
89
126
|
const mergedOptions = {
|
|
90
127
|
...tableOptions,
|
|
91
128
|
_features: {
|
|
@@ -95,11 +132,9 @@ export function useTable<
|
|
|
95
132
|
}
|
|
96
133
|
|
|
97
134
|
const resolvedOptions = mergeProxy(
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
)
|
|
102
|
-
: mergedOptions,
|
|
135
|
+
getOptionsWithReactiveValues(
|
|
136
|
+
mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
|
|
137
|
+
),
|
|
103
138
|
{
|
|
104
139
|
// Remove state and onStateChange - store handles it internally
|
|
105
140
|
mergeOptions: (
|
|
@@ -128,38 +163,77 @@ export function useTable<
|
|
|
128
163
|
|
|
129
164
|
watch(
|
|
130
165
|
() =>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
] as const,
|
|
166
|
+
getReactiveOptionDeps(
|
|
167
|
+
mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
|
|
168
|
+
),
|
|
135
169
|
() => {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
? getOptionsWithReactiveData(
|
|
141
|
-
tableOptions as TableOptions<TFeatures, TData>,
|
|
142
|
-
)
|
|
143
|
-
: tableOptions,
|
|
144
|
-
) as TableOptions<TFeatures, TData>
|
|
145
|
-
})
|
|
170
|
+
syncTableOptions(
|
|
171
|
+
table,
|
|
172
|
+
mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
|
|
173
|
+
)
|
|
146
174
|
},
|
|
147
175
|
{ immediate: true },
|
|
148
176
|
)
|
|
149
177
|
|
|
150
|
-
|
|
151
|
-
|
|
178
|
+
watch(
|
|
179
|
+
() => {
|
|
180
|
+
const controlledState = unref(tableOptions.state) as
|
|
181
|
+
| Record<string, unknown>
|
|
182
|
+
| undefined
|
|
183
|
+
const controlledAtoms = unref(tableOptions.atoms) as
|
|
184
|
+
| Record<string, unknown>
|
|
185
|
+
| undefined
|
|
186
|
+
|
|
187
|
+
if (!controlledState) {
|
|
188
|
+
return []
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
const controlledValues: Array<unknown> = []
|
|
192
|
+
|
|
193
|
+
for (const key of Object.keys(table.initialState)) {
|
|
194
|
+
if (!(key in controlledState) || controlledAtoms?.[key] !== undefined) {
|
|
195
|
+
continue
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
// Reading only controlled state slices here lets Vue subscribe to
|
|
199
|
+
// getters/computed values that are passed through `options.state`.
|
|
200
|
+
controlledValues.push(controlledState[key])
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
return controlledValues
|
|
204
|
+
},
|
|
205
|
+
(controlledValues) => {
|
|
206
|
+
if (controlledValues.length > 0) {
|
|
207
|
+
syncTableOptions(
|
|
208
|
+
table,
|
|
209
|
+
mergedOptions as TableOptionsWithReactiveData<TFeatures, TData>,
|
|
210
|
+
)
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
{ immediate: true },
|
|
214
|
+
)
|
|
215
|
+
|
|
216
|
+
table.Subscribe = ((props: {
|
|
217
|
+
source?: Atom<unknown> | ReadonlyAtom<unknown>
|
|
218
|
+
selector?: ((state: unknown) => unknown) | undefined
|
|
152
219
|
children:
|
|
153
|
-
| ((state: Readonly<
|
|
220
|
+
| ((state: Readonly<unknown>) => VNode | Array<VNode>)
|
|
154
221
|
| VNode
|
|
155
222
|
| Array<VNode>
|
|
156
|
-
})
|
|
157
|
-
const
|
|
223
|
+
}) => {
|
|
224
|
+
const source = props.source !== undefined ? props.source : table.store
|
|
225
|
+
const selectFn =
|
|
226
|
+
props.source !== undefined
|
|
227
|
+
? (props.selector ?? ((x: unknown) => x))
|
|
228
|
+
: props.selector
|
|
229
|
+
const selected = useSelector(source as never, selectFn as never, {
|
|
230
|
+
compare: shallow,
|
|
231
|
+
})
|
|
158
232
|
if (typeof props.children === 'function') {
|
|
159
|
-
return props.children(selected.value)
|
|
233
|
+
return props.children(selected.value as Readonly<unknown>)
|
|
160
234
|
}
|
|
161
235
|
return props.children
|
|
162
|
-
}
|
|
236
|
+
}) as VueTable<TFeatures, TData, TSelected>['Subscribe']
|
|
163
237
|
|
|
164
238
|
const stateStore = useSelector(table.store, selector)
|
|
165
239
|
|