intable 0.0.11 → 0.0.13
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/components/Menu.js +6 -6
- package/dist/index.js +172 -170
- package/dist/plugins/DiffPlugin.js +1 -1
- package/dist/plugins/MenuPlugin.js +21 -21
- package/dist/plugins/ResizePlugin.js +17 -17
- package/dist/utils.js +3 -3
- package/package.json +1 -1
package/dist/components/Menu.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { unFn } from "../utils.js";
|
|
2
1
|
import { useSignle2 } from "../hooks/index.js";
|
|
2
|
+
import { unFn } from "../utils.js";
|
|
3
3
|
import { createRender } from "./Render.js";
|
|
4
4
|
import { VDir } from "../hooks/useDir.js";
|
|
5
5
|
import { Popover } from "./Popover.js";
|
|
@@ -64,13 +64,13 @@ function Menu(k) {
|
|
|
64
64
|
return [offset({ mainAxis: 4 })];
|
|
65
65
|
} }));
|
|
66
66
|
}), children(() => A.children), (() => {
|
|
67
|
-
var
|
|
68
|
-
use(pointerHover,
|
|
67
|
+
var i = _tmpl$(), D = i.firstChild;
|
|
68
|
+
use(pointerHover, i, () => z);
|
|
69
69
|
var O = N;
|
|
70
|
-
return typeof O == "function" ? use(O,
|
|
70
|
+
return typeof O == "function" ? use(O, i) : N = i, spread(i, mergeProps(() => combineProps({ class: `li flex aic rd-2 ${M() ? "my-1 p-1" : "mx-1 pl-1 pr-4 py-1"} ${unFn(A.isActive) && "active"}` }, j), { "on:click": H }), !1, !0), insert(D, (() => {
|
|
71
71
|
var i = memo(() => !!V.loading);
|
|
72
72
|
return () => i() ? createComponent(loading_default, {}) : A.icon;
|
|
73
|
-
})()), insert(
|
|
73
|
+
})()), insert(i, () => A.label, null), insert(i, (() => {
|
|
74
74
|
var i = memo(() => !!(R() && A.children));
|
|
75
75
|
return () => i() && createComponent(I, {
|
|
76
76
|
ref: L,
|
|
@@ -79,7 +79,7 @@ function Menu(k) {
|
|
|
79
79
|
return A.children;
|
|
80
80
|
}
|
|
81
81
|
});
|
|
82
|
-
})(), null), effect(() => className(D, `flex aic ${M() ? "" : k.density == "comfortable" ? "ml-1 mr-2.5" : "ml-.5 mr-1"} `)),
|
|
82
|
+
})(), null), effect(() => className(D, `flex aic ${M() ? "" : k.density == "comfortable" ? "ml-1 mr-2.5" : "ml-.5 mr-1"} `)), i;
|
|
83
83
|
})();
|
|
84
84
|
},
|
|
85
85
|
processProps: (i) => {
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { unFn } from "./utils.js";
|
|
2
|
-
import { toReactive, useMemo, useMemoState } from "./hooks/index.js";
|
|
3
2
|
import './style.css';;/* empty css */
|
|
4
3
|
/* empty css */
|
|
5
4
|
import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
|
|
@@ -18,13 +17,13 @@ import { CellMergePlugin } from "./plugins/CellMergePlugin.js";
|
|
|
18
17
|
import { TreePlugin } from "./plugins/TreePlugin.js";
|
|
19
18
|
import { HeaderGroupPlugin } from "./plugins/HeaderGroup.js";
|
|
20
19
|
import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
|
|
21
|
-
import { For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
|
|
20
|
+
import { $PROXY, For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
|
|
22
21
|
import { createMutable, reconcile } from "solid-js/store";
|
|
23
22
|
import { combineProps } from "@solid-primitives/props";
|
|
24
23
|
import { createLazyMemo } from "@solid-primitives/memo";
|
|
25
24
|
import { createElementSize, createResizeObserver, makeResizeObserver } from "@solid-primitives/resize-observer";
|
|
26
25
|
import { createScrollPosition } from "@solid-primitives/scroll";
|
|
27
|
-
import { difference,
|
|
26
|
+
import { difference, isEqual, memoize, sumBy } from "es-toolkit";
|
|
28
27
|
var _tmpl$ = /* @__PURE__ */ template("<table>"), _tmpl$2 = /* @__PURE__ */ template("<thead>"), _tmpl$3 = /* @__PURE__ */ template("<tbody>"), _tmpl$4 = /* @__PURE__ */ template("<tr>"), _tmpl$5 = /* @__PURE__ */ template("<th>"), _tmpl$6 = /* @__PURE__ */ template("<td>"), _tmpl$7 = /* @__PURE__ */ template("<div tabindex=-1><div class=data-table__layers></div><table class=data-table--table>");
|
|
29
28
|
const Ctx = createContext({
|
|
30
29
|
props: {},
|
|
@@ -36,25 +35,28 @@ const Ctx = createContext({
|
|
|
36
35
|
return q;
|
|
37
36
|
},
|
|
38
37
|
get plugins() {
|
|
39
|
-
return
|
|
38
|
+
return Q();
|
|
40
39
|
}
|
|
41
|
-
}), X = memoize((
|
|
40
|
+
}), X = memoize((q) => runWithOwner(J, () => unFn(q, Y))), Q = createMemo(() => [
|
|
42
41
|
...defaultsPlugins,
|
|
43
42
|
...q.plugins || [],
|
|
44
43
|
RenderPlugin
|
|
45
|
-
].map(X).sort((
|
|
46
|
-
createComputed((
|
|
47
|
-
let
|
|
44
|
+
].map(X).sort((v, q) => (q.priority || 0) - (v.priority || 0)));
|
|
45
|
+
createComputed((v) => {
|
|
46
|
+
let q = difference(Q(), v);
|
|
48
47
|
return runWithOwner(J, () => {
|
|
49
|
-
|
|
50
|
-
}),
|
|
51
|
-
}, [])
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
48
|
+
q.forEach((v) => Object.assign(Y, v.store?.(Y)));
|
|
49
|
+
}), Q();
|
|
50
|
+
}, []), Y.props = (() => {
|
|
51
|
+
let v = getOwner(), J = {}, X = (q) => J[q] ??= runWithOwner(v, () => createMemo(() => Z(q)));
|
|
52
|
+
function Z(v) {
|
|
53
|
+
return createMemo(() => Q().map((q) => q.rewriteProps?.[v]).filter((v) => v), void 0, { equals: isEqual })().reduce((q, J) => J({ [v]: q }, { store: Y }), q[v]);
|
|
54
|
+
}
|
|
55
|
+
return new Proxy({}, { get(v, q, J) {
|
|
56
|
+
return q == $PROXY ? J : X(q)();
|
|
57
|
+
} });
|
|
58
|
+
})(), onMount(() => {
|
|
59
|
+
createEffect(mapArray(Q, (v) => v.onMount?.(Y)));
|
|
58
60
|
});
|
|
59
61
|
let $ = createMutable({
|
|
60
62
|
props: Y.props,
|
|
@@ -70,61 +72,61 @@ const Ctx = createContext({
|
|
|
70
72
|
});
|
|
71
73
|
};
|
|
72
74
|
var THead = () => {
|
|
73
|
-
let { props:
|
|
74
|
-
return createComponent(
|
|
75
|
-
return createComponent(
|
|
76
|
-
return createComponent(
|
|
75
|
+
let { props: v } = useContext(Ctx);
|
|
76
|
+
return createComponent(v.Thead, { get children() {
|
|
77
|
+
return createComponent(v.Tr, { get children() {
|
|
78
|
+
return createComponent(v.EachCells, {
|
|
77
79
|
get each() {
|
|
78
|
-
return
|
|
80
|
+
return v.columns || [];
|
|
79
81
|
},
|
|
80
|
-
children: (
|
|
82
|
+
children: (q, J) => createComponent(v.Th, {
|
|
81
83
|
get col() {
|
|
82
|
-
return
|
|
84
|
+
return q();
|
|
83
85
|
},
|
|
84
86
|
get x() {
|
|
85
|
-
return
|
|
87
|
+
return J();
|
|
86
88
|
},
|
|
87
89
|
get children() {
|
|
88
|
-
return
|
|
90
|
+
return q().name;
|
|
89
91
|
}
|
|
90
92
|
})
|
|
91
93
|
});
|
|
92
94
|
} });
|
|
93
95
|
} });
|
|
94
96
|
}, TBody = () => {
|
|
95
|
-
let { props:
|
|
96
|
-
return createComponent(
|
|
97
|
-
return createComponent(
|
|
97
|
+
let { props: v } = useContext(Ctx);
|
|
98
|
+
return createComponent(v.Tbody, { get children() {
|
|
99
|
+
return createComponent(v.EachRows, {
|
|
98
100
|
get each() {
|
|
99
|
-
return
|
|
101
|
+
return v.data;
|
|
100
102
|
},
|
|
101
|
-
children: (
|
|
103
|
+
children: (q, J) => createComponent(v.Tr, {
|
|
102
104
|
get y() {
|
|
103
|
-
return
|
|
105
|
+
return J();
|
|
104
106
|
},
|
|
105
107
|
get data() {
|
|
106
|
-
return
|
|
108
|
+
return q();
|
|
107
109
|
},
|
|
108
110
|
get children() {
|
|
109
|
-
return createComponent(
|
|
111
|
+
return createComponent(v.EachCells, {
|
|
110
112
|
get each() {
|
|
111
|
-
return
|
|
113
|
+
return v.columns;
|
|
112
114
|
},
|
|
113
|
-
children: (
|
|
115
|
+
children: (Y, X) => createComponent(v.Td, {
|
|
114
116
|
get col() {
|
|
115
|
-
return
|
|
117
|
+
return Y();
|
|
116
118
|
},
|
|
117
119
|
get x() {
|
|
118
|
-
return
|
|
120
|
+
return X();
|
|
119
121
|
},
|
|
120
122
|
get y() {
|
|
121
|
-
return
|
|
123
|
+
return J();
|
|
122
124
|
},
|
|
123
125
|
get data() {
|
|
124
|
-
return
|
|
126
|
+
return q();
|
|
125
127
|
},
|
|
126
128
|
get children() {
|
|
127
|
-
return
|
|
129
|
+
return q()[Y().id];
|
|
128
130
|
}
|
|
129
131
|
})
|
|
130
132
|
});
|
|
@@ -134,52 +136,52 @@ var THead = () => {
|
|
|
134
136
|
} });
|
|
135
137
|
}, src_default = Intable;
|
|
136
138
|
function BasePlugin() {
|
|
137
|
-
let
|
|
139
|
+
let q = {
|
|
138
140
|
col: null,
|
|
139
141
|
data: null
|
|
140
|
-
},
|
|
141
|
-
var
|
|
142
|
-
return spread(
|
|
143
|
-
})(),
|
|
144
|
-
var
|
|
145
|
-
return spread(
|
|
146
|
-
})(),
|
|
147
|
-
var
|
|
148
|
-
return spread(
|
|
149
|
-
})(),
|
|
150
|
-
var
|
|
151
|
-
return spread(
|
|
152
|
-
})(),
|
|
153
|
-
var
|
|
154
|
-
return spread(
|
|
155
|
-
})(),
|
|
156
|
-
var
|
|
157
|
-
return spread(
|
|
142
|
+
}, J = (v) => (() => {
|
|
143
|
+
var q = _tmpl$();
|
|
144
|
+
return spread(q, v, !1, !1), q;
|
|
145
|
+
})(), Y = (v) => (() => {
|
|
146
|
+
var q = _tmpl$2();
|
|
147
|
+
return spread(q, v, !1, !1), q;
|
|
148
|
+
})(), X = (v) => (() => {
|
|
149
|
+
var q = _tmpl$3();
|
|
150
|
+
return spread(q, v, !1, !1), q;
|
|
151
|
+
})(), Z = (v) => (() => {
|
|
152
|
+
var J = _tmpl$4();
|
|
153
|
+
return spread(J, mergeProps(v, q), !1, !1), J;
|
|
154
|
+
})(), Q = (v) => (() => {
|
|
155
|
+
var J = _tmpl$5();
|
|
156
|
+
return spread(J, mergeProps(v, q), !1, !1), J;
|
|
157
|
+
})(), $ = (v) => (() => {
|
|
158
|
+
var J = _tmpl$6();
|
|
159
|
+
return spread(J, mergeProps(v, q), !1, !1), J;
|
|
158
160
|
})();
|
|
159
161
|
return {
|
|
160
162
|
name: "base",
|
|
161
163
|
priority: Infinity,
|
|
162
|
-
store: (
|
|
163
|
-
let
|
|
164
|
-
for (let
|
|
165
|
-
let
|
|
166
|
-
|
|
167
|
-
width:
|
|
168
|
-
height:
|
|
164
|
+
store: (v) => {
|
|
165
|
+
let q = makeResizeObserver((q) => {
|
|
166
|
+
for (let J of q) {
|
|
167
|
+
let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = v.ths.indexOf(q);
|
|
168
|
+
Z >= 0 && q.parentElement && (v.thSizes[Z] = {
|
|
169
|
+
width: Y,
|
|
170
|
+
height: X
|
|
169
171
|
});
|
|
170
172
|
}
|
|
171
|
-
}),
|
|
172
|
-
for (let
|
|
173
|
-
let
|
|
174
|
-
|
|
175
|
-
width:
|
|
176
|
-
height:
|
|
173
|
+
}), J = makeResizeObserver((q) => {
|
|
174
|
+
for (let J of q) {
|
|
175
|
+
let q = J.target, { inlineSize: Y, blockSize: X } = J.borderBoxSize[0], Z = v.trs.indexOf(q);
|
|
176
|
+
Z >= 0 && q.parentElement && (v.trSizes[Z] = {
|
|
177
|
+
width: Y,
|
|
178
|
+
height: X
|
|
177
179
|
});
|
|
178
180
|
}
|
|
179
181
|
});
|
|
180
182
|
return {
|
|
181
|
-
thObs:
|
|
182
|
-
trObs:
|
|
183
|
+
thObs: q,
|
|
184
|
+
trObs: J,
|
|
183
185
|
ths: [],
|
|
184
186
|
thSizes: [],
|
|
185
187
|
trs: [],
|
|
@@ -190,177 +192,177 @@ function BasePlugin() {
|
|
|
190
192
|
};
|
|
191
193
|
},
|
|
192
194
|
rewriteProps: {
|
|
193
|
-
data: ({ data:
|
|
194
|
-
columns: ({ columns:
|
|
195
|
-
newRow: ({ newRow:
|
|
196
|
-
Table: ({ Table:
|
|
197
|
-
let [
|
|
198
|
-
return
|
|
199
|
-
ref:
|
|
195
|
+
data: ({ data: v = [] }) => v,
|
|
196
|
+
columns: ({ columns: v = [] }) => v,
|
|
197
|
+
newRow: ({ newRow: v = () => ({}) }) => v,
|
|
198
|
+
Table: ({ Table: v = J }, { store: q }) => (q) => {
|
|
199
|
+
let [J, Y] = createSignal(), { props: X } = useContext(Ctx);
|
|
200
|
+
return q = combineProps({
|
|
201
|
+
ref: Y,
|
|
200
202
|
get class() {
|
|
201
|
-
return `data-table ${
|
|
203
|
+
return `data-table ${X.class} ${X.border && "data-table--border"} data-table--${X.size}`;
|
|
202
204
|
},
|
|
203
205
|
get style() {
|
|
204
|
-
return
|
|
206
|
+
return X.style;
|
|
205
207
|
}
|
|
206
|
-
},
|
|
208
|
+
}, q), createComponent(v, q);
|
|
207
209
|
},
|
|
208
|
-
Thead: ({ Thead:
|
|
209
|
-
Tbody: ({ Tbody:
|
|
210
|
-
Tr: ({ Tr:
|
|
211
|
-
let [
|
|
212
|
-
return
|
|
213
|
-
let { y:
|
|
214
|
-
|
|
215
|
-
|
|
210
|
+
Thead: ({ Thead: v = Y }, { store: q }) => (J) => (J = combineProps({ ref: (v) => q.thead = v }, J), createComponent(v, J)),
|
|
211
|
+
Tbody: ({ Tbody: v = X }, { store: q }) => (J) => (J = combineProps({ ref: (v) => q.tbody = v }, J), createComponent(v, J)),
|
|
212
|
+
Tr: ({ Tr: v = Z }, { store: q }) => (J) => {
|
|
213
|
+
let [Y, X] = createSignal();
|
|
214
|
+
return J = combineProps({ ref: X }, J), createEffect(() => {
|
|
215
|
+
let { y: v } = J;
|
|
216
|
+
v != null && (q.trs[v] = Y(), q.trObs.observe(Y()), onCleanup(() => {
|
|
217
|
+
q.trSizes[v] = q.trs[v] = void 0, q.trObs.unobserve(Y());
|
|
216
218
|
}));
|
|
217
|
-
}), createComponent(
|
|
219
|
+
}), createComponent(v, J);
|
|
218
220
|
},
|
|
219
|
-
Th: ({ Th:
|
|
220
|
-
let [
|
|
221
|
+
Th: ({ Th: q = Q }, { store: J }) => (Y) => {
|
|
222
|
+
let [X, Z] = createSignal(), { props: Q } = useContext(Ctx), $ = combineProps(Y, { ref: Z }, {
|
|
221
223
|
get class() {
|
|
222
|
-
return unFn(
|
|
224
|
+
return unFn(Q.cellClass, Y);
|
|
223
225
|
},
|
|
224
226
|
get style() {
|
|
225
|
-
return unFn(
|
|
227
|
+
return unFn(Q.cellStyle, Y);
|
|
226
228
|
}
|
|
227
229
|
}, {
|
|
228
230
|
get class() {
|
|
229
|
-
return
|
|
231
|
+
return Y.col.class;
|
|
230
232
|
},
|
|
231
233
|
get style() {
|
|
232
|
-
return
|
|
234
|
+
return Y.col.style;
|
|
233
235
|
}
|
|
234
236
|
}, { get style() {
|
|
235
|
-
return
|
|
237
|
+
return Y.col.width ? `width: ${Y.col.width}px` : "";
|
|
236
238
|
} });
|
|
237
239
|
return createEffect(() => {
|
|
238
|
-
if (
|
|
239
|
-
let { x:
|
|
240
|
-
|
|
241
|
-
|
|
240
|
+
if (Y.covered || (Y.colspan ?? 1) != 1) return;
|
|
241
|
+
let { x: v } = Y;
|
|
242
|
+
J.ths[v] = X(), J.thObs.observe(X()), onCleanup(() => {
|
|
243
|
+
J.thSizes[v] = J.ths[v] = void 0, J.thObs.unobserve(X());
|
|
242
244
|
});
|
|
243
|
-
}), createComponent(
|
|
244
|
-
return
|
|
245
|
+
}), createComponent(q, mergeProps($, { get children() {
|
|
246
|
+
return Y.children;
|
|
245
247
|
} }));
|
|
246
248
|
},
|
|
247
|
-
Td: ({ Td:
|
|
248
|
-
let { props:
|
|
249
|
+
Td: ({ Td: q = $ }, { store: J }) => (J) => {
|
|
250
|
+
let { props: Y } = useContext(Ctx), X = combineProps(J, {
|
|
249
251
|
get class() {
|
|
250
|
-
return unFn(
|
|
252
|
+
return unFn(Y.cellClass, J);
|
|
251
253
|
},
|
|
252
254
|
get style() {
|
|
253
|
-
return unFn(
|
|
255
|
+
return unFn(Y.cellStyle, J);
|
|
254
256
|
}
|
|
255
257
|
}, {
|
|
256
258
|
get class() {
|
|
257
|
-
return
|
|
259
|
+
return J.col.class;
|
|
258
260
|
},
|
|
259
261
|
get style() {
|
|
260
|
-
return
|
|
262
|
+
return J.col.style;
|
|
261
263
|
}
|
|
262
264
|
}, { get style() {
|
|
263
|
-
return
|
|
265
|
+
return J.col.width ? `width: ${J.col.width}px` : "";
|
|
264
266
|
} });
|
|
265
|
-
return createComponent(
|
|
266
|
-
return
|
|
267
|
+
return createComponent(q, mergeProps(X, { get children() {
|
|
268
|
+
return J.children;
|
|
267
269
|
} }));
|
|
268
270
|
},
|
|
269
|
-
EachRows: ({ EachRows:
|
|
271
|
+
EachRows: ({ EachRows: v }) => v || ((v) => createComponent(For, {
|
|
270
272
|
get each() {
|
|
271
|
-
return
|
|
273
|
+
return v.each;
|
|
272
274
|
},
|
|
273
|
-
children: (
|
|
275
|
+
children: (q, J) => v.children(() => q, J)
|
|
274
276
|
})),
|
|
275
|
-
EachCells: ({ EachCells:
|
|
277
|
+
EachCells: ({ EachCells: v }) => v || ((v) => createComponent(For, {
|
|
276
278
|
get each() {
|
|
277
|
-
return
|
|
279
|
+
return v.each;
|
|
278
280
|
},
|
|
279
|
-
children: (
|
|
281
|
+
children: (q, J) => v.children(() => q, J)
|
|
280
282
|
})),
|
|
281
|
-
renderer: ({ renderer:
|
|
283
|
+
renderer: ({ renderer: v = (v) => v }) => v
|
|
282
284
|
}
|
|
283
285
|
};
|
|
284
286
|
}
|
|
285
287
|
var IndexPlugin = {
|
|
286
288
|
name: "index",
|
|
287
289
|
priority: -Infinity,
|
|
288
|
-
store: (
|
|
290
|
+
store: (v) => ({ $index: {
|
|
289
291
|
name: "",
|
|
290
292
|
id: Symbol("index"),
|
|
291
293
|
fixed: "left",
|
|
292
|
-
[
|
|
294
|
+
[v.internal]: 1,
|
|
293
295
|
width: 40,
|
|
294
296
|
style: "text-align: center",
|
|
295
297
|
class: "index",
|
|
296
|
-
render: solidComponent((
|
|
298
|
+
render: solidComponent((v) => memo(() => v.y + 1))
|
|
297
299
|
} }),
|
|
298
|
-
rewriteProps: { columns: ({ columns:
|
|
300
|
+
rewriteProps: { columns: ({ columns: v }, { store: q }) => q.props?.index ? [q.$index, ...v || []] : v }
|
|
299
301
|
}, StickyHeaderPlugin = {
|
|
300
302
|
name: "sticky-header",
|
|
301
|
-
rewriteProps: { Thead: ({ Thead:
|
|
302
|
-
let { props:
|
|
303
|
-
return
|
|
304
|
-
return
|
|
305
|
-
} },
|
|
303
|
+
rewriteProps: { Thead: ({ Thead: v }) => (q) => {
|
|
304
|
+
let { props: J } = useContext(Ctx);
|
|
305
|
+
return q = combineProps({ get class() {
|
|
306
|
+
return J.stickyHeader ? "sticky-header" : "";
|
|
307
|
+
} }, q), createComponent(v, q);
|
|
306
308
|
} }
|
|
307
|
-
}, FixedColumnPlugin = (
|
|
308
|
-
let
|
|
309
|
-
let
|
|
310
|
-
for (let [
|
|
311
|
-
return
|
|
312
|
-
}),
|
|
309
|
+
}, FixedColumnPlugin = (q) => {
|
|
310
|
+
let J = createLazyMemo(() => {
|
|
311
|
+
let v = {};
|
|
312
|
+
for (let [J, Y] of q.props.columns.entries()) Y.fixed === "left" && (v[J] = sumBy(q.thSizes.slice(0, J), (v) => v?.width || 0)), Y.fixed === "right" && (v[J] = sumBy(q.thSizes.slice(J + 1), (v) => v?.width || 0));
|
|
313
|
+
return v;
|
|
314
|
+
}), Y = createLazyMemo(() => q.props.columns.filter((v) => v.fixed == "left").length - 1), X = createLazyMemo(() => q.props.columns.length - q.props.columns.filter((v) => v.fixed == "right").length);
|
|
313
315
|
return {
|
|
314
316
|
name: "fixed-column",
|
|
315
317
|
rewriteProps: {
|
|
316
|
-
columns: ({ columns:
|
|
317
|
-
...
|
|
318
|
-
...
|
|
319
|
-
...
|
|
318
|
+
columns: ({ columns: v }) => [
|
|
319
|
+
...v?.filter((v) => v.fixed == "left") || [],
|
|
320
|
+
...v?.filter((v) => !v.fixed) || [],
|
|
321
|
+
...v?.filter((v) => v.fixed == "right") || []
|
|
320
322
|
],
|
|
321
|
-
cellClass: ({ cellClass:
|
|
322
|
-
cellStyle: ({ cellStyle:
|
|
323
|
+
cellClass: ({ cellClass: q }) => (J) => (unFn(q, J) || "") + (J.col.fixed ? ` fixed-${J.col.fixed} ${J.x == Y() ? "is-last" : ""} ${J.x == X() ? "is-first" : ""}` : ""),
|
|
324
|
+
cellStyle: ({ cellStyle: q }) => (Y) => (unFn(q, Y) || "") + (Y.col.fixed ? `; ${Y.col.fixed}: ${J()[Y.x]}px` : "")
|
|
323
325
|
}
|
|
324
326
|
};
|
|
325
|
-
}, FitColWidthPlugin = (
|
|
326
|
-
let
|
|
327
|
-
createResizeObserver(() =>
|
|
328
|
-
let
|
|
329
|
-
return createEffect(on(() => [
|
|
330
|
-
if (!
|
|
331
|
-
|
|
332
|
-
let
|
|
333
|
-
|
|
327
|
+
}, FitColWidthPlugin = (v) => {
|
|
328
|
+
let q = createMutable({ width: 0 });
|
|
329
|
+
createResizeObserver(() => v.scroll_el, (v, J, Y) => q.width = Y.contentBoxSize[0].inlineSize);
|
|
330
|
+
let J = createMutable([]), Y = !1;
|
|
331
|
+
return createEffect(on(() => [q.width, v.props.columns.map((v) => v.width)], async () => {
|
|
332
|
+
if (!q.width || Y) return;
|
|
333
|
+
J.length = 0, Y = !0, await Promise.resolve();
|
|
334
|
+
let X = (q.width - v.table.getBoundingClientRect().width) / v.props.columns.filter((v) => !v.width).length, Z = v.props.columns.map((q, J) => q.width ? null : { width: Math.max((v.ths[J]?.getBoundingClientRect().width || 0) + X, 80) });
|
|
335
|
+
J.push(...Z), Y = !1;
|
|
334
336
|
})), {
|
|
335
337
|
name: "fit-col-width",
|
|
336
338
|
priority: -Infinity,
|
|
337
|
-
rewriteProps: { columns: ({ columns:
|
|
338
|
-
...
|
|
339
|
-
...
|
|
340
|
-
[
|
|
341
|
-
})), untrack(() => batch(() => reconcile(
|
|
339
|
+
rewriteProps: { columns: ({ columns: v }, { store: q }) => (v = v.map((v, Y) => ({
|
|
340
|
+
...v,
|
|
341
|
+
...J?.[Y],
|
|
342
|
+
[q.ID]: v[q.ID] ??= Symbol()
|
|
343
|
+
})), untrack(() => batch(() => reconcile(v, { key: q.ID })(q.__fit_col_width__cols ??= [])))) }
|
|
342
344
|
};
|
|
343
345
|
};
|
|
344
346
|
const ScrollPlugin = {
|
|
345
347
|
name: "scroll",
|
|
346
348
|
priority: Infinity,
|
|
347
|
-
rewriteProps: { Table: (
|
|
348
|
-
let
|
|
349
|
-
let
|
|
350
|
-
if (!
|
|
351
|
-
let
|
|
352
|
-
return
|
|
349
|
+
rewriteProps: { Table: (v, { store: q }) => (v) => {
|
|
350
|
+
let J = createScrollPosition(() => q.scroll_el), Y = createElementSize(() => q.scroll_el), X = createMemo(() => {
|
|
351
|
+
let v = q.scroll_el;
|
|
352
|
+
if (!v) return;
|
|
353
|
+
let X = J.x == 0, Z = J.x >= v.scrollWidth - (Y.width || 0);
|
|
354
|
+
return X && Z ? "" : !X && !Z ? "is-scroll-mid" : X ? "is-scroll-left" : Z ? "is-scroll-right" : "";
|
|
353
355
|
});
|
|
354
|
-
|
|
355
|
-
ref: (
|
|
356
|
+
v = combineProps(v, {
|
|
357
|
+
ref: (v) => q.scroll_el = v,
|
|
356
358
|
class: "data-table--scroll-view"
|
|
357
359
|
}, { get class() {
|
|
358
|
-
return
|
|
360
|
+
return X();
|
|
359
361
|
} });
|
|
360
|
-
let
|
|
362
|
+
let Z = mapArray(() => q.plugins.flatMap((v) => v.layers ?? []), (v) => createComponent(v, q));
|
|
361
363
|
return (() => {
|
|
362
|
-
var
|
|
363
|
-
return spread(
|
|
364
|
+
var J = _tmpl$7(), Y = J.firstChild, X = Y.nextSibling;
|
|
365
|
+
return spread(J, v, !1, !0), insert(Y, Z), use((v) => q.table = v, X), insert(X, () => v.children), J;
|
|
364
366
|
})();
|
|
365
367
|
} }
|
|
366
368
|
}, defaultsPlugins = [
|
|
@@ -51,7 +51,7 @@ const DiffPlugin = {
|
|
|
51
51
|
}
|
|
52
52
|
if (i) return e;
|
|
53
53
|
}
|
|
54
|
-
return diffArrays(s, e, { comparator: (e, i) => e[a] == i[a] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? o.removed ? e.value.map((e) => ({
|
|
54
|
+
return diffArrays(s, e, { comparator: (e, i) => e == i || e[a] == i[a] }).flatMap((e) => e.added ? e.value.map((e) => (e[NEW] = 1, e)) : e.removed ? o.removed ? e.value.map((e) => ({
|
|
55
55
|
...e,
|
|
56
56
|
[DEL]: 1,
|
|
57
57
|
[i.internal]: 1
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { useMemoAsync } from "../hooks/index.js";
|
|
1
2
|
import { findParent } from "../tree.js";
|
|
2
3
|
import "../utils.js";
|
|
3
|
-
import { useMemoAsync } from "../hooks/index.js";
|
|
4
4
|
import { Menu } from "../components/Menu.js";
|
|
5
5
|
import { createComponent, memo, mergeProps } from "solid-js/web";
|
|
6
6
|
import { batch, createMemo, createSignal, mapArray } from "solid-js";
|
|
@@ -12,7 +12,7 @@ const MenuPlugin = {
|
|
|
12
12
|
name: "menu",
|
|
13
13
|
priority: Infinity,
|
|
14
14
|
store: (e) => ({}),
|
|
15
|
-
rewriteProps: { Table: ({ Table:
|
|
15
|
+
rewriteProps: { Table: ({ Table: n }, { store: s }) => (f) => {
|
|
16
16
|
let [p, g] = createSignal(), _ = mapArray(() => s.plugins || [], (e) => createMemo(() => e.menus?.(s))), v = createMemo(() => _().flatMap((e) => e() || [])), [y, b] = createSignal();
|
|
17
17
|
function x(e) {
|
|
18
18
|
e.preventDefault(), b({
|
|
@@ -43,7 +43,7 @@ const MenuPlugin = {
|
|
|
43
43
|
return f = combineProps({
|
|
44
44
|
tabindex: -1,
|
|
45
45
|
onContextMenu: x
|
|
46
|
-
}, f), createComponent(
|
|
46
|
+
}, f), createComponent(n, mergeProps(f, { get children() {
|
|
47
47
|
return [memo(() => memo(() => !!y())() && createComponent(Menu, {
|
|
48
48
|
ref: g,
|
|
49
49
|
get style() {
|
|
@@ -70,28 +70,28 @@ const MenuPlugin = {
|
|
|
70
70
|
cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, n) => e - n))))
|
|
71
71
|
}
|
|
72
72
|
],
|
|
73
|
-
commands: (
|
|
73
|
+
commands: (e) => ({
|
|
74
74
|
rowEquals(e, n) {
|
|
75
75
|
return e == n;
|
|
76
76
|
},
|
|
77
|
-
rowIndexOf(
|
|
78
|
-
return
|
|
77
|
+
rowIndexOf(n, r) {
|
|
78
|
+
return n.findIndex((n) => e.commands.rowEquals(n, r));
|
|
79
79
|
},
|
|
80
|
-
rowChange(
|
|
81
|
-
let i = [...
|
|
82
|
-
r = r == null ?
|
|
80
|
+
rowChange(n, r) {
|
|
81
|
+
let i = [...e.rawProps.data || []];
|
|
82
|
+
r = r == null ? e.commands.rowIndexOf(i, n) : i.findIndex((n) => n == e.props.data[r]), r > -1 && (i[r] = n, e.props.onDataChange?.(i));
|
|
83
83
|
},
|
|
84
|
-
addRows(
|
|
85
|
-
addRows(
|
|
84
|
+
addRows(n, r, i = !0) {
|
|
85
|
+
addRows(e, n, r, i);
|
|
86
86
|
},
|
|
87
|
-
deleteRows(
|
|
88
|
-
let { rowKey: r, data: i } =
|
|
89
|
-
remove(a, (e) => o.has(e)),
|
|
87
|
+
deleteRows(n) {
|
|
88
|
+
let { rowKey: r, data: i } = e.props, a = [...e.rawProps.data || []], o = new Set(n.map((e) => i[e]));
|
|
89
|
+
remove(a, (e) => o.has(e)), e.props?.onDataChange?.(a);
|
|
90
90
|
},
|
|
91
91
|
moveRows(r, i) {
|
|
92
|
-
let { data: a } =
|
|
92
|
+
let { data: a } = e.props, o = r.map((e) => a[e]).filter((n) => n && !n?.[e.internal]);
|
|
93
93
|
if (!o.length) return;
|
|
94
|
-
let s = i >= 0 && i < a.length ? a[i] : null, { rowKey: c } =
|
|
94
|
+
let s = i >= 0 && i < a.length ? a[i] : null, { rowKey: c } = e.props, l = e.props.tree?.children || Symbol(), u = new Set(o.map((e) => e[c])), d = [];
|
|
95
95
|
function f(e) {
|
|
96
96
|
return e.reduce((e, n) => {
|
|
97
97
|
if (u.has(n[c])) return d.push(n), e;
|
|
@@ -105,12 +105,12 @@ const MenuPlugin = {
|
|
|
105
105
|
return e.push(n), e;
|
|
106
106
|
}, []);
|
|
107
107
|
}
|
|
108
|
-
let p = f([...
|
|
109
|
-
if (h > -1 ? m.splice(h, 0, d) : m.push(...d),
|
|
110
|
-
let
|
|
111
|
-
|
|
108
|
+
let p = f([...e.rawProps.data || []]), m = findParent(p, (e) => e[c] === s?.[c])?.children ?? p, h = s ? m.findIndex((e) => e[c] === s[c]) : -1;
|
|
109
|
+
if (h > -1 ? m.splice(h, 0, d) : m.push(...d), e.selected) {
|
|
110
|
+
let n = Math.max(0, i - o.length);
|
|
111
|
+
e.selected.start = [0, n], e.selected.end = [Infinity, n + d.length - 1];
|
|
112
112
|
}
|
|
113
|
-
|
|
113
|
+
e.props?.onDataChange?.(p);
|
|
114
114
|
}
|
|
115
115
|
})
|
|
116
116
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { unFn } from "../utils.js";
|
|
2
1
|
import { usePointerDrag } from "../hooks/index.js";
|
|
2
|
+
import { unFn } from "../utils.js";
|
|
3
3
|
import { Ctx } from "../index.js";
|
|
4
4
|
import { className, createComponent, effect, memo, mergeProps, template, use } from "solid-js/web";
|
|
5
5
|
import { batch, untrack, useContext } from "solid-js";
|
|
@@ -8,12 +8,12 @@ import { combineProps } from "@solid-primitives/props";
|
|
|
8
8
|
import { clamp } from "es-toolkit";
|
|
9
9
|
import { createEventListener } from "@solid-primitives/event-listener";
|
|
10
10
|
import { defaultsDeep } from "es-toolkit/compat";
|
|
11
|
-
var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (
|
|
11
|
+
var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (p) => {
|
|
12
12
|
let { props: g, store: v } = useContext(Ctx), y;
|
|
13
|
-
return usePointerDrag(() => y, { start(
|
|
14
|
-
|
|
15
|
-
let _ =
|
|
16
|
-
m((
|
|
13
|
+
return usePointerDrag(() => y, { start(e, m, h) {
|
|
14
|
+
e.stopPropagation();
|
|
15
|
+
let _ = p.x, { min: b, max: x } = g.resizable.col, S = y.parentElement, C = S.offsetWidth;
|
|
16
|
+
m((e, { ox: m }) => v[COL][p.x] = clamp(C + m, b, x)), h(() => {
|
|
17
17
|
let e = g.columns[_], p = [...v.rawProps.columns || []], m = p.findIndex((p) => p[v.ID] === e[v.ID]);
|
|
18
18
|
m > -1 && (p[m] = {
|
|
19
19
|
...p[m],
|
|
@@ -21,21 +21,21 @@ var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW =
|
|
|
21
21
|
}, g.onColumnsChange?.(p)), e.onWidthChange?.(S.offsetWidth);
|
|
22
22
|
});
|
|
23
23
|
} }), (() => {
|
|
24
|
-
var
|
|
25
|
-
return typeof m == "function" ? use(m,
|
|
24
|
+
var e = _tmpl$(), m = y;
|
|
25
|
+
return typeof m == "function" ? use(m, e) : y = e, effect(() => className(e, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${p.x == g.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), e;
|
|
26
26
|
})();
|
|
27
|
-
}, RowHandle = (
|
|
27
|
+
}, RowHandle = (p) => {
|
|
28
28
|
let { props: g, store: v } = useContext(Ctx), y;
|
|
29
|
-
return usePointerDrag(() => y, { start(
|
|
30
|
-
|
|
31
|
-
let _ =
|
|
32
|
-
m((
|
|
29
|
+
return usePointerDrag(() => y, { start(e, m, h) {
|
|
30
|
+
e.stopPropagation();
|
|
31
|
+
let _ = p.y, { min: b, max: x } = g.resizable.row, S = y.parentElement.offsetHeight;
|
|
32
|
+
m((e, { oy: m }) => v[ROW][p.y] = clamp(S + m, b, x)), h(() => {
|
|
33
33
|
let e = g.data[_];
|
|
34
34
|
[...v.rawProps.data || []].findIndex((p) => p[v.ID] === e[v.ID]);
|
|
35
35
|
});
|
|
36
|
-
} }), createEventListener(() => y, "dblclick", () =>
|
|
37
|
-
var
|
|
38
|
-
return typeof m == "function" ? use(m,
|
|
36
|
+
} }), createEventListener(() => y, "dblclick", () => p.data[COL] = void 0), (() => {
|
|
37
|
+
var e = _tmpl$(), m = y;
|
|
38
|
+
return typeof m == "function" ? use(m, e) : y = e, effect(() => className(e, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${p.y == g.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-1`)), e;
|
|
39
39
|
})();
|
|
40
40
|
};
|
|
41
41
|
const ResizePlugin = {
|
|
@@ -74,7 +74,7 @@ const ResizePlugin = {
|
|
|
74
74
|
Td: ({ Td: e }, { store: p }) => p.props?.resizable?.row.enable ? (m) => (m = combineProps({ class: "relative" }, m), createComponent(e, mergeProps(m, { get children() {
|
|
75
75
|
return [memo(() => m.children), memo(() => memo(() => !!(m.x == 0 && p.props?.resizable?.row.enable))() && createComponent(RowHandle, m))];
|
|
76
76
|
} }))) : e,
|
|
77
|
-
cellStyle: ({ cellStyle:
|
|
77
|
+
cellStyle: ({ cellStyle: e }, { store: m }) => (h) => `${unFn(e, h)};` + (m[ROW][h.y] ? `height: ${m[ROW][h.y]}px` : "")
|
|
78
78
|
}
|
|
79
79
|
};
|
|
80
80
|
export { ResizePlugin };
|
package/dist/utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { tree_exports } from "./tree.js";
|
|
2
1
|
import { useMemoAsync } from "./hooks/index.js";
|
|
2
|
+
import { tree_exports } from "./tree.js";
|
|
3
3
|
import { delay, isFunction, isPlainObject, isPromise } from "es-toolkit";
|
|
4
4
|
function file2base64(e) {
|
|
5
5
|
return new Promise((y, b) => {
|
|
@@ -51,8 +51,8 @@ async function findAsync(e, y) {
|
|
|
51
51
|
for (let b = 0; b < e.length; b++) if (await y(e[b], b)) return e[b];
|
|
52
52
|
}
|
|
53
53
|
var cache = /* @__PURE__ */ new WeakMap();
|
|
54
|
-
function resolveOptions(
|
|
55
|
-
let b =
|
|
54
|
+
function resolveOptions(y) {
|
|
55
|
+
let b = y;
|
|
56
56
|
return isFunction(b) && (b = b()), isPromise(b) ? (cache.has(b) || cache.set(b, useMemoAsync(() => b.then((e) => e.map((e) => resolveOptions(e))))), cache.get(b)()) : (isPlainObject(b) && (b = Object.entries(b).map(([e, y]) => ({
|
|
57
57
|
value: e,
|
|
58
58
|
label: y,
|