intable 0.0.2 → 0.0.4
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/LICENSE +21 -0
- package/README.md +2 -1
- package/dist/__uno.css +1 -1
- package/dist/chevron-right.js +3 -5
- package/dist/components/Columns.js +50 -84
- package/dist/components/DocTree.js +21 -29
- package/dist/components/Menu.js +81 -105
- package/dist/components/Popover.js +23 -31
- package/dist/components/Render.js +10 -11
- package/dist/components/Split.js +34 -46
- package/dist/components/Tree.js +38 -57
- package/dist/components/utils.js +4 -6
- package/dist/hooks/index.d.ts +3 -2
- package/dist/hooks/index.js +93 -128
- package/dist/hooks/useDir.js +22 -39
- package/dist/hooks/useSort.d.ts +18 -0
- package/dist/hooks/useSort.js +83 -0
- package/dist/hooks/useVirtualizer.js +43 -68
- package/dist/index.d.ts +8 -2
- package/dist/index.js +175 -213
- package/dist/loading.js +3 -5
- package/dist/plugins/CellMergePlugin.d.ts +12 -0
- package/dist/plugins/CellMergePlugin.js +2 -0
- package/dist/plugins/CellSelectionPlugin.js +89 -125
- package/dist/plugins/CommandPlugin.js +3 -6
- package/dist/plugins/CopyPastePlugin.js +24 -37
- package/dist/plugins/DiffPlugin.js +33 -45
- package/dist/plugins/DragPlugin.d.ts +14 -0
- package/dist/plugins/DragPlugin.js +47 -0
- package/dist/plugins/EditablePlugin.js +88 -139
- package/dist/plugins/ExpandPlugin.js +26 -30
- package/dist/plugins/HistoryPlugin.js +16 -21
- package/dist/plugins/MenuPlugin.js +51 -76
- package/dist/plugins/RenderPlugin/components.js +45 -63
- package/dist/plugins/RenderPlugin/index.js +29 -42
- package/dist/plugins/ResizePlugin.d.ts +2 -2
- package/dist/plugins/ResizePlugin.js +71 -94
- package/dist/plugins/RowGroupPlugin.js +57 -73
- package/dist/plugins/RowSelectionPlugin.js +31 -42
- package/dist/plugins/VirtualScrollPlugin.js +54 -79
- package/dist/plus.js +3 -5
- package/dist/style.css +2 -184
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +46 -64
- package/dist/wc.js +11 -11
- package/dist/x.js +3 -5
- package/package.json +3 -2
- package/dist/plugins/DragColumnPlugin.d.ts +0 -2
- package/dist/plugins/DragColumnPlugin.js +0 -4
|
@@ -7,171 +7,120 @@ import { createMutable } from "solid-js/store";
|
|
|
7
7
|
import { combineProps } from "@solid-primitives/props";
|
|
8
8
|
import { delay } from "es-toolkit";
|
|
9
9
|
import { createAsyncMemo } from "@solid-primitives/memo";
|
|
10
|
-
var _tmpl$ = /* @__PURE__ */ template(
|
|
10
|
+
var _tmpl$ = /* @__PURE__ */ template("<input style=position:absolute;margin-top:1em;width:0;height:0;pointer-events:none;opacity:0>"), _tmpl$2 = /* @__PURE__ */ template("<div class=in-cell-edit-wrapper>"), _tmpl$3 = /* @__PURE__ */ template("<input>"), _tmpl$4 = /* @__PURE__ */ template("<select>"), _tmpl$5 = /* @__PURE__ */ template("<option>"), _tmpl$6 = /* @__PURE__ */ template("<label class=\"h-full flex items-center\">");
|
|
11
11
|
const EditablePlugin = {
|
|
12
12
|
store: () => ({ editors: { ...editors } }),
|
|
13
|
-
rewriteProps: { Td: ({ Td }, { store }) => (
|
|
14
|
-
let
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
cancel: () => (canceled = true, setEditing(false))
|
|
33
|
-
};
|
|
34
|
-
const ret = editor(opt);
|
|
35
|
-
onCleanup(() => {
|
|
36
|
-
if (!canceled && ret.getValue() !== o.data[o.col.id]) {
|
|
37
|
-
const arr = [...props.data];
|
|
38
|
-
arr[o.y] = {
|
|
39
|
-
...arr[o.y],
|
|
40
|
-
[o.col.id]: ret.getValue()
|
|
41
|
-
};
|
|
42
|
-
props.onDataChange?.(arr);
|
|
13
|
+
rewriteProps: { Td: ({ Td: i }, { store: O }) => (k) => {
|
|
14
|
+
let A, { props: N } = useContext(Ctx), P = createMemo(() => !!k.col.editable && !k.data[O.internal] && !k.col[O.internal]), [I, L] = createSignal(!1), H = "", U = createMemo(() => (([i, O]) => k.x == i && k.y == O)(O.selected.start || [])), W = createMemo(() => U() && P() && !I()), G = createAsyncMemo(async () => {
|
|
15
|
+
if (I()) {
|
|
16
|
+
let i = !1, A = ((i) => typeof i == "string" ? O.editors[i] : i)(k.col.editor || "text"), j = {
|
|
17
|
+
props: k.col.editorProps,
|
|
18
|
+
col: k.col,
|
|
19
|
+
eventKey: H,
|
|
20
|
+
data: k.data,
|
|
21
|
+
value: k.data[k.col.id],
|
|
22
|
+
ok: () => L(!1),
|
|
23
|
+
cancel: () => (i = !0, L(!1))
|
|
24
|
+
}, M = A(j);
|
|
25
|
+
return onCleanup(() => {
|
|
26
|
+
if (!i && M.getValue() !== k.data[k.col.id]) {
|
|
27
|
+
let i = [...N.data];
|
|
28
|
+
i[k.y] = {
|
|
29
|
+
...i[k.y],
|
|
30
|
+
[k.col.id]: M.getValue()
|
|
31
|
+
}, N.onDataChange?.(i);
|
|
43
32
|
}
|
|
44
|
-
|
|
45
|
-
});
|
|
46
|
-
return [opt, ret];
|
|
33
|
+
M.destroy();
|
|
34
|
+
}), [j, M];
|
|
47
35
|
}
|
|
48
36
|
});
|
|
49
37
|
createEffect(() => {
|
|
50
|
-
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
createEffect(on(sss, () => setEditing(false), { defer: true }));
|
|
38
|
+
G()?.[1]?.focus?.();
|
|
39
|
+
}), createEffect(() => {
|
|
40
|
+
if (I()) {
|
|
41
|
+
let i = createMemo(() => JSON.stringify(O.selected));
|
|
42
|
+
createEffect(on(i, () => L(!1), { defer: !0 }));
|
|
56
43
|
}
|
|
57
44
|
});
|
|
58
|
-
let
|
|
59
|
-
const size = createMutable({
|
|
45
|
+
let K, q = createMutable({
|
|
60
46
|
w: 0,
|
|
61
47
|
h: 0
|
|
62
48
|
});
|
|
63
|
-
createComputed(() =>
|
|
64
|
-
|
|
65
|
-
ref: (v) => el = v,
|
|
49
|
+
return createComputed(() => I() && (q.w = A.getBoundingClientRect().width, q.h = A.getBoundingClientRect().height)), k = combineProps(k, {
|
|
50
|
+
ref: (i) => A = i,
|
|
66
51
|
get class() {
|
|
67
|
-
return
|
|
52
|
+
return I() ? "is-editing" : "";
|
|
68
53
|
},
|
|
69
54
|
get style() {
|
|
70
|
-
return
|
|
55
|
+
return I() ? `width: ${q.w}px; height: ${q.h}px; padding: 0; ` : "";
|
|
71
56
|
},
|
|
72
|
-
onClick: () =>
|
|
73
|
-
onDblClick: () =>
|
|
74
|
-
onKeyDown: (
|
|
75
|
-
})
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
delay(0).then(() => e.focus({ preventScroll: true }));
|
|
92
|
-
}, _el$);
|
|
93
|
-
return _el$;
|
|
94
|
-
})()), memo(() => memo(() => !!editorState()?.[1]?.el)() ? (() => {
|
|
95
|
-
var _el$2 = _tmpl$2();
|
|
96
|
-
insert(_el$2, () => editorState()?.[1]?.el);
|
|
97
|
-
return _el$2;
|
|
98
|
-
})() : o.children)];
|
|
57
|
+
onClick: () => K?.focus?.(),
|
|
58
|
+
onDblClick: () => L(P()),
|
|
59
|
+
onKeyDown: (i) => i.key == "Escape" && G()?.[0].cancel()
|
|
60
|
+
}), createComponent(i, mergeProps(k, { get children() {
|
|
61
|
+
return [memo(() => memo(() => !!W())() && (() => {
|
|
62
|
+
var i = _tmpl$();
|
|
63
|
+
return i.addEventListener("compositionend", () => {
|
|
64
|
+
L(!0);
|
|
65
|
+
}), i.$$input = (i) => {
|
|
66
|
+
H = i.target.value, L(!i.isComposing);
|
|
67
|
+
}, i.$$keydown = (i) => {
|
|
68
|
+
i.key == " " && i.preventDefault();
|
|
69
|
+
}, use((i) => {
|
|
70
|
+
K = i, delay(0).then(() => i.focus({ preventScroll: !0 }));
|
|
71
|
+
}, i), i;
|
|
72
|
+
})()), memo(() => memo(() => !!G()?.[1]?.el)() ? (() => {
|
|
73
|
+
var i = _tmpl$2();
|
|
74
|
+
return insert(i, () => G()?.[1]?.el), i;
|
|
75
|
+
})() : k.children)];
|
|
99
76
|
} }));
|
|
100
77
|
} }
|
|
101
78
|
};
|
|
102
|
-
var createEditor = (
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
"class": "relative block px-2 size-full z-9 box-border resize-none outline-0",
|
|
79
|
+
var createEditor = (i, k, A) => ({ eventKey: j, value: N, col: P, ok: F, cancel: I, props: L }) => createRoot((R) => {
|
|
80
|
+
let [z, B] = createSignal(j || N), V;
|
|
81
|
+
return createComponent(i, mergeProps({
|
|
82
|
+
ref: (i) => V = i,
|
|
83
|
+
class: "relative block px-2 size-full z-9 box-border resize-none outline-0",
|
|
108
84
|
get value() {
|
|
109
|
-
return
|
|
85
|
+
return z();
|
|
110
86
|
},
|
|
111
|
-
onInput: (
|
|
112
|
-
onChange: (
|
|
113
|
-
"on:pointerdown": (
|
|
114
|
-
"on:keydown": (
|
|
115
|
-
|
|
116
|
-
e.key == "Enter" && ok();
|
|
117
|
-
e.key == "Escape" && cancel();
|
|
87
|
+
onInput: (i) => B(i instanceof Event ? i.target.value : i),
|
|
88
|
+
onChange: (i) => (B(i instanceof Event ? i.target.value : i), A && F()),
|
|
89
|
+
"on:pointerdown": (i) => i.stopPropagation(),
|
|
90
|
+
"on:keydown": (i) => {
|
|
91
|
+
i.stopPropagation(), i.key == "Enter" && F(), i.key == "Escape" && I();
|
|
118
92
|
},
|
|
119
93
|
get options() {
|
|
120
|
-
return memo(() => !!
|
|
94
|
+
return memo(() => !!P.enum)() ? resolveOptions(P.enum ?? []) : void 0;
|
|
121
95
|
}
|
|
122
|
-
},
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
destroy
|
|
96
|
+
}, k, L)), {
|
|
97
|
+
el: V,
|
|
98
|
+
getValue: z,
|
|
99
|
+
focus: () => V.focus(),
|
|
100
|
+
destroy: R
|
|
128
101
|
};
|
|
129
|
-
})
|
|
130
|
-
var
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
var
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
var
|
|
146
|
-
|
|
147
|
-
insert(_el$4, () => o.options?.map((e) => (() => {
|
|
148
|
-
var _el$5 = _tmpl$5();
|
|
149
|
-
insert(_el$5, () => e.label);
|
|
150
|
-
effect(() => _el$5.value = e.value);
|
|
151
|
-
return _el$5;
|
|
152
|
-
})()));
|
|
153
|
-
return _el$4;
|
|
154
|
-
})(), {}, true);
|
|
155
|
-
var file = createEditor((o) => {
|
|
156
|
-
const onAdd = () => chooseFile({ multiple: true }).then((files) => o.onChange([...o.value || [], ...files.map((e) => ({
|
|
157
|
-
name: e.name,
|
|
158
|
-
size: e.size
|
|
159
|
-
}))]));
|
|
160
|
-
return createComponent(Files, mergeProps(o, {
|
|
161
|
-
"class": "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
|
|
162
|
-
onAdd
|
|
163
|
-
}));
|
|
164
|
-
});
|
|
165
|
-
var checkbox = createEditor((o) => (() => {
|
|
166
|
-
var _el$6 = _tmpl$6();
|
|
167
|
-
var _ref$ = o.ref;
|
|
168
|
-
typeof _ref$ === "function" ? use(_ref$, _el$6) : o.ref = _el$6;
|
|
169
|
-
insert(_el$6, createComponent(Checkbox, mergeProps(o, {
|
|
102
|
+
}), Input = (i) => (() => {
|
|
103
|
+
var O = _tmpl$3();
|
|
104
|
+
return spread(O, i, !1, !1), O;
|
|
105
|
+
})(), text = createEditor(Input), number = createEditor(Input, { type: "number" }), range$1 = createEditor(Input, { type: "range" }), color = createEditor(Input, { type: "color" }), tel = createEditor(Input, { type: "tel" }), password = createEditor(Input, { type: "password" }), date = createEditor(Input, { type: "date" }, !0), time = createEditor(Input, { type: "time" }, !0), datetime = createEditor(Input, { type: "datetime-local" }, !0), select = createEditor((i) => (() => {
|
|
106
|
+
var O = _tmpl$4();
|
|
107
|
+
return spread(O, i, !1, !0), insert(O, () => i.options?.map((i) => (() => {
|
|
108
|
+
var O = _tmpl$5();
|
|
109
|
+
return insert(O, () => i.label), effect(() => O.value = i.value), O;
|
|
110
|
+
})())), O;
|
|
111
|
+
})(), {}, !0), file = createEditor((O) => createComponent(Files, mergeProps(O, {
|
|
112
|
+
class: "relative z-9 outline-2 outline-blue min-h-a! h-a! p-1 bg-#fff",
|
|
113
|
+
onAdd: () => chooseFile({ multiple: !0 }).then((i) => O.onChange([...O.value || [], ...i.map((i) => ({
|
|
114
|
+
name: i.name,
|
|
115
|
+
size: i.size
|
|
116
|
+
}))]))
|
|
117
|
+
}))), checkbox = createEditor((i) => (() => {
|
|
118
|
+
var O = _tmpl$6(), A = i.ref;
|
|
119
|
+
return typeof A == "function" ? use(A, O) : i.ref = O, insert(O, createComponent(Checkbox, mergeProps(i, {
|
|
170
120
|
ref: () => {},
|
|
171
121
|
onInput: () => {},
|
|
172
|
-
|
|
173
|
-
})));
|
|
174
|
-
return _el$6;
|
|
122
|
+
class: "mx-3!"
|
|
123
|
+
}))), O;
|
|
175
124
|
})());
|
|
176
125
|
const editors = {
|
|
177
126
|
text,
|
|
@@ -5,52 +5,48 @@ import { createComponent, effect, insert, memo, mergeProps, setAttribute, templa
|
|
|
5
5
|
import { createMemo, useContext } from "solid-js";
|
|
6
6
|
import { unwrap } from "solid-js/store";
|
|
7
7
|
import { remove } from "es-toolkit";
|
|
8
|
-
var _tmpl$ = /* @__PURE__ */ template(
|
|
8
|
+
var _tmpl$ = /* @__PURE__ */ template("<td style=width:100%>"), _tmpl$2 = /* @__PURE__ */ template("<div style=display:flex;align-items:center;width:100%;height:100%;opacity:.4>");
|
|
9
9
|
const ExpandPlugin = {
|
|
10
|
-
store: (
|
|
10
|
+
store: (e) => ({
|
|
11
11
|
expands: [],
|
|
12
12
|
expandCol: {
|
|
13
13
|
id: Symbol("expand"),
|
|
14
14
|
fixed: "left",
|
|
15
15
|
width: 45,
|
|
16
|
-
render: solidComponent((
|
|
17
|
-
store,
|
|
16
|
+
render: solidComponent((h) => createComponent(ArrowCell, {
|
|
17
|
+
store: e,
|
|
18
18
|
get data() {
|
|
19
|
-
return
|
|
19
|
+
return h.data;
|
|
20
20
|
}
|
|
21
21
|
})),
|
|
22
|
-
props: (
|
|
23
|
-
[
|
|
22
|
+
props: (h) => ({ onClick: () => e.toggleExpand(h.data) }),
|
|
23
|
+
[e.internal]: 1
|
|
24
24
|
},
|
|
25
|
-
isExpand: (
|
|
26
|
-
toggleExpand: (
|
|
25
|
+
isExpand: (h) => !!e.expands.find((e) => unwrap(e) == unwrap(h)),
|
|
26
|
+
toggleExpand: (h) => e.isExpand(h) ? remove(e.expands, (e) => unwrap(e) == unwrap(h)) : e.expands.push(unwrap(h))
|
|
27
27
|
}),
|
|
28
28
|
rewriteProps: {
|
|
29
|
-
columns: ({ columns }, { store }) => [
|
|
30
|
-
Tr: ({ Tr }, { store }) => (
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
effect(() => setAttribute(_el$, "colspan", props.columns?.length));
|
|
40
|
-
return _el$;
|
|
41
|
-
} }));
|
|
29
|
+
columns: ({ columns: e }, { store: h }) => [h.expandCol, ...e],
|
|
30
|
+
Tr: ({ Tr: h }, { store: g }) => (_) => {
|
|
31
|
+
let { props: v } = useContext(Ctx);
|
|
32
|
+
return _.data?.[g.expandCol.id] ? createComponent(h, mergeProps(_, { get children() {
|
|
33
|
+
var h = _tmpl$();
|
|
34
|
+
return insert(h, (() => {
|
|
35
|
+
var h = memo(() => !!v.expand?.render);
|
|
36
|
+
return () => h() && renderComponent(v.expand.render, _, v.renderer);
|
|
37
|
+
})()), effect(() => setAttribute(h, "colspan", v.columns?.length)), h;
|
|
38
|
+
} })) : createComponent(h, _);
|
|
42
39
|
},
|
|
43
|
-
data: ({ data }, { store }) =>
|
|
40
|
+
data: ({ data: e }, { store: h }) => h.expands.length ? e?.flatMap((e) => h.isExpand(e) ? [e, { [h.expandCol.id]: 1 }] : e) : e
|
|
44
41
|
}
|
|
45
42
|
};
|
|
46
|
-
var ArrowCell = (
|
|
47
|
-
|
|
43
|
+
var ArrowCell = (e) => {
|
|
44
|
+
let h = createMemo(() => e.store.isExpand(e.data));
|
|
48
45
|
return (() => {
|
|
49
|
-
var
|
|
50
|
-
insert(
|
|
51
|
-
return `transform: rotate(${
|
|
52
|
-
} }));
|
|
53
|
-
return _el$2;
|
|
46
|
+
var e = _tmpl$2();
|
|
47
|
+
return insert(e, createComponent(chevron_right_default, { get style() {
|
|
48
|
+
return `transform: rotate(${h() ? 90 : 0}deg);`;
|
|
49
|
+
} })), e;
|
|
54
50
|
})();
|
|
55
51
|
};
|
|
56
52
|
export { ExpandPlugin };
|
|
@@ -5,31 +5,26 @@ import { unwrap } from "solid-js/store";
|
|
|
5
5
|
import { combineProps } from "@solid-primitives/props";
|
|
6
6
|
import { captureStoreUpdates } from "@solid-primitives/deep";
|
|
7
7
|
const HistoryPlugin = {
|
|
8
|
-
store: (
|
|
9
|
-
|
|
10
|
-
let clonedState;
|
|
8
|
+
store: (r) => {
|
|
9
|
+
let i = createMemo(() => captureStoreUpdates(r.rawProps.data || [])), s;
|
|
11
10
|
return { history: useHistory([() => {
|
|
12
|
-
|
|
13
|
-
if (
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
let e = i()();
|
|
12
|
+
if (e.length) {
|
|
13
|
+
for (let { path: r, value: i } of e) if (r.length == 0) s = structuredClone(unwrap(i));
|
|
14
|
+
else {
|
|
15
|
+
let e = [...s];
|
|
16
|
+
r.reduce((e, a, s) => e[a] = s < r.length - 1 ? Array.isArray(e[a]) ? [...e[a]] : { ...e[a] } : structuredClone(unwrap(i)), e), s = e;
|
|
17
|
+
}
|
|
18
|
+
return s;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
}, (v) => store.props.onDataChange?.(v)]) };
|
|
20
|
+
}, (e) => r.props.onDataChange?.(e)]) };
|
|
22
21
|
},
|
|
23
22
|
rewriteProps: {
|
|
24
|
-
Table: ({ Table }, { store }) => (o) => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
o = combineProps({ tabindex: -1 }, o);
|
|
30
|
-
return createComponent(Table, o);
|
|
31
|
-
},
|
|
32
|
-
tdProps: ({ tdProps }, { store }) => (o) => combineProps(tdProps?.(o) || {}, {})
|
|
23
|
+
Table: ({ Table: e }, { store: a }) => (o) => (useTinykeys(() => a.table, {
|
|
24
|
+
"Control+Z": () => a.history.undo(),
|
|
25
|
+
"Control+Y": () => a.history.redo()
|
|
26
|
+
}), o = combineProps({ tabindex: -1 }, o), createComponent(e, o)),
|
|
27
|
+
tdProps: ({ tdProps: e }, { store: r }) => (r) => combineProps(e?.(r) || {}, {})
|
|
33
28
|
}
|
|
34
29
|
};
|
|
35
30
|
export { HistoryPlugin };
|
|
@@ -8,124 +8,99 @@ import { range, remove } from "es-toolkit";
|
|
|
8
8
|
import { createEventListener } from "@solid-primitives/event-listener";
|
|
9
9
|
import { autoPlacement, computePosition } from "@floating-ui/dom";
|
|
10
10
|
const MenuPlugin = {
|
|
11
|
-
store: (
|
|
12
|
-
rewriteProps: { Table: ({ Table }, { store }) => (
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
const [pos, setPos] = createSignal();
|
|
17
|
-
function onContextMenu(e) {
|
|
18
|
-
e.preventDefault();
|
|
19
|
-
setPos({
|
|
11
|
+
store: (e) => ({}),
|
|
12
|
+
rewriteProps: { Table: ({ Table: e }, { store: d }) => (m) => {
|
|
13
|
+
let [h, g] = createSignal(), _ = mapArray(() => d.plugins || [], (e) => createMemo(() => e.menus?.(d))), v = createMemo(() => _().flatMap((e) => e() || [])), [y, b] = createSignal();
|
|
14
|
+
function x(e) {
|
|
15
|
+
e.preventDefault(), b({
|
|
20
16
|
x: e.x,
|
|
21
17
|
y: e.y
|
|
22
18
|
});
|
|
23
19
|
}
|
|
24
20
|
createEventListener(document, "pointerdown", (e) => {
|
|
25
|
-
|
|
21
|
+
h()?.contains(e.target) || b();
|
|
26
22
|
});
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
if (
|
|
30
|
-
return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(pos()) }, mel, {
|
|
23
|
+
let S = useMemoAsync(() => {
|
|
24
|
+
let e = h();
|
|
25
|
+
if (e) return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(y()) }, e, {
|
|
31
26
|
strategy: "fixed",
|
|
32
27
|
placement: "top-start",
|
|
33
28
|
middleware: [autoPlacement({
|
|
34
29
|
boundary: document.body,
|
|
35
30
|
alignment: "start"
|
|
36
31
|
})]
|
|
37
|
-
}).then(({ x, y }) => ({
|
|
32
|
+
}).then(({ x: e, y: o }) => ({
|
|
38
33
|
position: "fixed",
|
|
39
|
-
transform: `translate(${
|
|
34
|
+
transform: `translate(${e}px, ${o}px)`,
|
|
40
35
|
top: 0,
|
|
41
36
|
left: 0,
|
|
42
37
|
"z-index": 10
|
|
43
38
|
}));
|
|
44
39
|
});
|
|
45
|
-
|
|
40
|
+
return m = combineProps({
|
|
46
41
|
tabindex: -1,
|
|
47
|
-
onContextMenu
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
ref: setMenuEl,
|
|
42
|
+
onContextMenu: x
|
|
43
|
+
}, m), createComponent(e, mergeProps(m, { get children() {
|
|
44
|
+
return [memo(() => memo(() => !!y())() && createComponent(Menu, {
|
|
45
|
+
ref: g,
|
|
52
46
|
get style() {
|
|
53
|
-
return
|
|
47
|
+
return S() || "position: absolute";
|
|
54
48
|
},
|
|
55
49
|
get items() {
|
|
56
|
-
return
|
|
50
|
+
return v();
|
|
57
51
|
},
|
|
58
|
-
onAction: () =>
|
|
59
|
-
})), memo(() =>
|
|
52
|
+
onAction: () => b()
|
|
53
|
+
})), memo(() => m.children)];
|
|
60
54
|
} }));
|
|
61
55
|
} },
|
|
62
|
-
menus: (
|
|
56
|
+
menus: (e) => [
|
|
63
57
|
{
|
|
64
58
|
label: "新增行 ↑",
|
|
65
|
-
disabled: () =>
|
|
66
|
-
cb: () =>
|
|
59
|
+
disabled: () => !0,
|
|
60
|
+
cb: () => e.commands.addRows(e.selected.end[1], [e.props.newRow(e.selected.end[1])])
|
|
67
61
|
},
|
|
68
62
|
{
|
|
69
63
|
label: "新增行 ↓",
|
|
70
|
-
cb: () =>
|
|
64
|
+
cb: () => e.commands.addRows(e.selected.end[1], [e.props.newRow(e.selected.end[1])], !1)
|
|
71
65
|
},
|
|
72
66
|
{
|
|
73
67
|
label: "删除行",
|
|
74
|
-
cb: () =>
|
|
68
|
+
cb: () => e.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([e.selected.start[1], e.selected.end[1]].sort((e, o) => e - o))))
|
|
75
69
|
}
|
|
76
70
|
],
|
|
77
|
-
commands: (
|
|
78
|
-
rowEquals(
|
|
79
|
-
return
|
|
71
|
+
commands: (o) => ({
|
|
72
|
+
rowEquals(e, o) {
|
|
73
|
+
return e == o;
|
|
80
74
|
},
|
|
81
|
-
rowIndexOf(
|
|
82
|
-
return
|
|
75
|
+
rowIndexOf(e, s) {
|
|
76
|
+
return e.findIndex((e) => o.commands.rowEquals(e, s));
|
|
83
77
|
},
|
|
84
|
-
rowChange(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
if (i > -1) {
|
|
88
|
-
data[i] = row;
|
|
89
|
-
store.props.onDataChange?.(data);
|
|
90
|
-
}
|
|
78
|
+
rowChange(e, s) {
|
|
79
|
+
let c = [...o.rawProps.data || []];
|
|
80
|
+
s = s == null ? o.commands.rowIndexOf(c, e) : c.findIndex((e) => e == o.props.data[s]), s > -1 && (c[s] = e, o.props.onDataChange?.(c));
|
|
91
81
|
},
|
|
92
|
-
addRows(
|
|
93
|
-
addRows(
|
|
82
|
+
addRows(e, s, c = !0) {
|
|
83
|
+
addRows(o, e, s, c);
|
|
94
84
|
},
|
|
95
|
-
deleteRows(
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
const ids = new Set(ii.map((i) => data[i]));
|
|
99
|
-
log([...ids]);
|
|
100
|
-
remove(val, (e) => ids.has(e));
|
|
101
|
-
store.props?.onDataChange?.(val);
|
|
85
|
+
deleteRows(s) {
|
|
86
|
+
let { rowKey: c, data: l } = o.props, u = [...o.rawProps.data || []], d = new Set(s.map((e) => l[e]));
|
|
87
|
+
log([...d]), remove(u, (e) => d.has(e)), o.props?.onDataChange?.(u);
|
|
102
88
|
}
|
|
103
89
|
})
|
|
104
90
|
};
|
|
105
|
-
function addRows(
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
if (anchor) batch(() => {
|
|
119
|
-
i = store.commands.rowIndexOf(data, anchor);
|
|
120
|
-
if (!store.selected) return;
|
|
121
|
-
store.selected.start = [0, i + (before ? 0 : 1)];
|
|
122
|
-
store.selected.end = [Infinity, i + rows.length - 1 + (before ? 0 : 1)];
|
|
123
|
-
});
|
|
124
|
-
(() => {
|
|
125
|
-
const data$1 = [...store.rawProps.data || []];
|
|
126
|
-
const i$1 = anchor ? store.commands.rowIndexOf(data$1, anchor) + (before ? 0 : 1) : data$1.length;
|
|
127
|
-
data$1.splice(i$1, 0, ...rows);
|
|
128
|
-
store.props?.onDataChange?.(data$1);
|
|
91
|
+
function addRows(e, o, s, c) {
|
|
92
|
+
let { data: l } = e.props, u = (o) => {
|
|
93
|
+
for (c = !1; --o >= 0 && l[o]?.[e.internal];);
|
|
94
|
+
return o >= 0 ? l[o] : null;
|
|
95
|
+
}, f = (o) => {
|
|
96
|
+
for (c = !0; ++o < l.length && l[o]?.[e.internal];);
|
|
97
|
+
return o < l.length ? l[o] : null;
|
|
98
|
+
}, p = l[o]?.[e.internal] ? c ? u(o) || f(o) : f(o) || u(o) : l[o];
|
|
99
|
+
p && batch(() => {
|
|
100
|
+
o = e.commands.rowIndexOf(l, p), e.selected && (e.selected.start = [0, o + (c ? 0 : 1)], e.selected.end = [Infinity, o + s.length - 1 + (c ? 0 : 1)]);
|
|
101
|
+
}), (() => {
|
|
102
|
+
let o = [...e.rawProps.data || []], l = p ? e.commands.rowIndexOf(o, p) + (c ? 0 : 1) : o.length;
|
|
103
|
+
o.splice(l, 0, ...s), e.props?.onDataChange?.(o);
|
|
129
104
|
})();
|
|
130
105
|
}
|
|
131
106
|
export { MenuPlugin };
|