intable 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +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 +1 -0
- package/dist/hooks/index.js +103 -130
- package/dist/hooks/useDir.js +22 -39
- package/dist/hooks/useSelector.d.ts +16 -0
- package/dist/hooks/useSelector.js +35 -0
- package/dist/hooks/useSort.js +47 -70
- package/dist/hooks/useVirtualizer.js +43 -68
- package/dist/index.d.ts +11 -4
- package/dist/index.js +194 -218
- package/dist/loading.js +3 -5
- package/dist/plugins/CellMergePlugin.d.ts +0 -2
- package/dist/plugins/CellSelectionPlugin.js +78 -117
- package/dist/plugins/CommandPlugin.js +11 -8
- package/dist/plugins/CopyPastePlugin.js +25 -37
- package/dist/plugins/DiffPlugin.js +33 -45
- package/dist/plugins/DragPlugin.d.ts +2 -2
- package/dist/plugins/DragPlugin.js +29 -45
- package/dist/plugins/EditablePlugin.js +89 -139
- package/dist/plugins/ExpandPlugin.d.ts +3 -5
- package/dist/plugins/ExpandPlugin.js +41 -47
- package/dist/plugins/HistoryPlugin.js +16 -21
- package/dist/plugins/MenuPlugin.js +52 -76
- package/dist/plugins/RenderPlugin/components.js +45 -63
- package/dist/plugins/RenderPlugin/index.js +30 -42
- package/dist/plugins/ResizePlugin.js +45 -80
- package/dist/plugins/RowGroupPlugin.js +58 -74
- package/dist/plugins/RowSelectionPlugin.d.ts +3 -15
- package/dist/plugins/RowSelectionPlugin.js +21 -48
- package/dist/plugins/VirtualScrollPlugin.js +54 -79
- package/dist/plus.js +3 -5
- package/dist/style.css +2 -192
- package/dist/theme/element-plus.scss +5 -0
- package/dist/utils.js +44 -65
- package/dist/wc.js +10 -13
- package/dist/x.js +3 -5
- package/package.json +2 -1
- package/dist/plugins/DragColumnPlugin.d.ts +0 -2
- package/dist/plugins/DragColumnPlugin.js +0 -4
|
@@ -3,102 +3,84 @@ import x_default from "../../x.js";
|
|
|
3
3
|
import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
|
|
4
4
|
import { For, splitProps } from "solid-js";
|
|
5
5
|
import { combineProps } from "@solid-primitives/props";
|
|
6
|
-
var _tmpl$ = /* @__PURE__ */ template(
|
|
7
|
-
const Checkbox = (
|
|
8
|
-
let
|
|
9
|
-
[
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
spread(_el$, mergeProps({ get checked() {
|
|
17
|
-
return _props.value || false;
|
|
18
|
-
} }, props), false, false);
|
|
19
|
-
return _el$;
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ template("<input type=checkbox>"), _tmpl$2 = /* @__PURE__ */ template("<div>");
|
|
7
|
+
const Checkbox = (e) => {
|
|
8
|
+
let f;
|
|
9
|
+
return [e, f] = splitProps(e, ["value", "onChange"]), f = combineProps({ get class() {
|
|
10
|
+
return `you-checkbox ${e.value && "checked"}`;
|
|
11
|
+
} }, f), (() => {
|
|
12
|
+
var p = _tmpl$();
|
|
13
|
+
return p.addEventListener("change", (f) => e.onChange?.(f.currentTarget.checked)), spread(p, mergeProps({ get checked() {
|
|
14
|
+
return e.value || !1;
|
|
15
|
+
} }, f), !1, !1), p;
|
|
20
16
|
})();
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const Tags = (_props3) => {
|
|
28
|
-
let props;
|
|
29
|
-
[_props3, props] = splitProps(_props3, [
|
|
17
|
+
}, Files = (e) => {
|
|
18
|
+
let f;
|
|
19
|
+
return [e, f] = splitProps(e, []), createComponent(Tags, f);
|
|
20
|
+
}, Tags = (f) => {
|
|
21
|
+
let h;
|
|
22
|
+
[f, h] = splitProps(f, [
|
|
30
23
|
"value",
|
|
31
24
|
"children",
|
|
32
25
|
"disabled",
|
|
33
26
|
"onChange",
|
|
34
27
|
"onAdd"
|
|
35
|
-
]);
|
|
36
|
-
|
|
37
|
-
const toarr = (v) => Array.isArray(v) ? v : v != null ? [v] : [];
|
|
28
|
+
]), h = combineProps({ class: "flex flex-wrap items-center gap-2 h-full" }, h);
|
|
29
|
+
let g = (e) => Array.isArray(e) ? e : e == null ? [] : [e];
|
|
38
30
|
return (() => {
|
|
39
|
-
var
|
|
40
|
-
spread(
|
|
41
|
-
insert(_el$2, createComponent(For, {
|
|
31
|
+
var _ = _tmpl$2();
|
|
32
|
+
return spread(_, h, !1, !0), insert(_, createComponent(For, {
|
|
42
33
|
get each() {
|
|
43
|
-
return
|
|
34
|
+
return g(f.value);
|
|
44
35
|
},
|
|
45
36
|
children: (e) => createComponent(Tag, {
|
|
46
37
|
get style() {
|
|
47
38
|
return `background: ${e.color}`;
|
|
48
39
|
},
|
|
49
40
|
get disabled() {
|
|
50
|
-
return
|
|
41
|
+
return f.disabled;
|
|
51
42
|
},
|
|
52
|
-
onDel: () =>
|
|
43
|
+
onDel: () => f.onChange(g(f.value).filter((f) => f != e)),
|
|
53
44
|
get children() {
|
|
54
|
-
return memo(() => !!
|
|
45
|
+
return memo(() => !!f.children)() ? f.children(e) : e?.text ?? e?.label ?? e?.name ?? e;
|
|
55
46
|
}
|
|
56
47
|
})
|
|
57
|
-
}), null)
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
disabled: true,
|
|
48
|
+
}), null), insert(_, (() => {
|
|
49
|
+
var m = memo(() => !f.disabled);
|
|
50
|
+
return () => m() && createComponent(Tag, {
|
|
51
|
+
disabled: !0,
|
|
62
52
|
get onClick() {
|
|
63
|
-
return
|
|
53
|
+
return f.onAdd;
|
|
64
54
|
},
|
|
65
55
|
get children() {
|
|
66
56
|
return createComponent(plus_default, {});
|
|
67
57
|
}
|
|
68
58
|
});
|
|
69
|
-
})(), null);
|
|
70
|
-
return _el$2;
|
|
59
|
+
})(), null), _;
|
|
71
60
|
})();
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
[_props4, props] = splitProps(_props4, [
|
|
61
|
+
}, Tag = (e) => {
|
|
62
|
+
let h;
|
|
63
|
+
return [e, h] = splitProps(e, [
|
|
76
64
|
"disabled",
|
|
77
65
|
"children",
|
|
78
66
|
"onDel"
|
|
79
|
-
])
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
insert(_el$3, (() => {
|
|
86
|
-
var _c$2 = memo(() => !!!_props4.disabled);
|
|
87
|
-
return () => _c$2() && createComponent(x_default, {
|
|
88
|
-
"class": "icon-clickable flex-shrink-0 size-4! ml-1 mr--1 op-75",
|
|
67
|
+
]), h = combineProps({ class: "flex items-center px-2 py-1 rd-sm bg-gray/20 text-3.5 lh-[1]" }, h), (() => {
|
|
68
|
+
var g = _tmpl$2();
|
|
69
|
+
return spread(g, h, !1, !0), insert(g, () => e.children, null), insert(g, (() => {
|
|
70
|
+
var m = memo(() => !e.disabled);
|
|
71
|
+
return () => m() && createComponent(x_default, {
|
|
72
|
+
class: "icon-clickable flex-shrink-0 size-4! ml-1 mr--1 op-75",
|
|
89
73
|
get onClick() {
|
|
90
|
-
return
|
|
74
|
+
return e.onDel;
|
|
91
75
|
}
|
|
92
76
|
});
|
|
93
|
-
})(), null);
|
|
94
|
-
return _el$3;
|
|
77
|
+
})(), null), g;
|
|
95
78
|
})();
|
|
96
|
-
}
|
|
97
|
-
const evaluateFormula = (formula, data) => {
|
|
79
|
+
}, evaluateFormula = (e, f) => {
|
|
98
80
|
try {
|
|
99
|
-
|
|
100
|
-
return
|
|
101
|
-
} catch
|
|
81
|
+
let p = { data: f };
|
|
82
|
+
return Function(...Object.keys(p), "return " + e)(...Object.values(p));
|
|
83
|
+
} catch {
|
|
102
84
|
return "公式错误";
|
|
103
85
|
}
|
|
104
86
|
};
|
|
@@ -3,59 +3,47 @@ import { Checkbox, Files } from "./components.js";
|
|
|
3
3
|
import { renderComponent, solidComponent } from "../../components/utils.js";
|
|
4
4
|
import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
|
|
5
5
|
import { mergeProps as mergeProps$1 } from "solid-js";
|
|
6
|
-
var _tmpl$ = /* @__PURE__ */ template(
|
|
6
|
+
var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center h-full\">");
|
|
7
7
|
const RenderPlugin = {
|
|
8
|
+
name: "render",
|
|
8
9
|
priority: -Infinity,
|
|
9
10
|
store: () => ({ renders: { ...renders } }),
|
|
10
|
-
rewriteProps: { Td: ({ Td }, { store }) => (
|
|
11
|
-
return
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} }));
|
|
20
|
-
} }
|
|
11
|
+
rewriteProps: { Td: ({ Td: e }, { store: p }) => (m) => createComponent(e, mergeProps(m, { get children() {
|
|
12
|
+
return (() => {
|
|
13
|
+
let e = ((e) => typeof e == "string" ? p.renders[e] : e)(m.col.render) || text;
|
|
14
|
+
return renderComponent(e, mergeProps$1(m, { onChange: (e) => p.commands.rowChange({
|
|
15
|
+
...m.data,
|
|
16
|
+
[m.col.id]: e
|
|
17
|
+
}, m.y) }), p.props.renderer);
|
|
18
|
+
})();
|
|
19
|
+
} })) }
|
|
21
20
|
};
|
|
22
|
-
var text = (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"class": "",
|
|
21
|
+
var text = (p) => memo(() => ((m) => p.col.enum ? resolveOptions(p.col.enum).find((e) => e.value == m)?.label ?? m : m)(p.data[p.col.id]));
|
|
22
|
+
const renders = {
|
|
23
|
+
text,
|
|
24
|
+
number: text,
|
|
25
|
+
date: text,
|
|
26
|
+
checkbox: (e) => (() => {
|
|
27
|
+
var m = _tmpl$();
|
|
28
|
+
return insert(m, createComponent(Checkbox, {
|
|
29
|
+
class: "",
|
|
32
30
|
get value() {
|
|
33
|
-
return
|
|
31
|
+
return e.data[e.col.id];
|
|
34
32
|
},
|
|
35
33
|
get onChange() {
|
|
36
|
-
return
|
|
34
|
+
return e.onChange;
|
|
37
35
|
}
|
|
38
|
-
}));
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
};
|
|
42
|
-
var file = (_props3) => {
|
|
43
|
-
return createComponent(Files, {
|
|
36
|
+
})), m;
|
|
37
|
+
})(),
|
|
38
|
+
file: (e) => createComponent(Files, {
|
|
44
39
|
get value() {
|
|
45
|
-
return
|
|
40
|
+
return e.data[e.col.id];
|
|
46
41
|
},
|
|
47
42
|
get onChange() {
|
|
48
|
-
return
|
|
43
|
+
return e.onChange;
|
|
49
44
|
},
|
|
50
|
-
disabled:
|
|
51
|
-
})
|
|
52
|
-
};
|
|
53
|
-
const renders = {
|
|
54
|
-
text,
|
|
55
|
-
number,
|
|
56
|
-
date,
|
|
57
|
-
checkbox,
|
|
58
|
-
file
|
|
45
|
+
disabled: !0
|
|
46
|
+
})
|
|
59
47
|
};
|
|
60
|
-
for (
|
|
48
|
+
for (let e in renders) renders[e] = solidComponent(renders[e]);
|
|
61
49
|
export { RenderPlugin, renders };
|
|
@@ -8,109 +8,74 @@ 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(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const sw = th.offsetWidth;
|
|
23
|
-
move((e$1, { ox }) => store[COL][o.x] = clamp(sw + ox, min, max));
|
|
24
|
-
end(() => {
|
|
25
|
-
const col = props.columns[i];
|
|
26
|
-
const cols = [...store.rawProps.columns || []];
|
|
27
|
-
const index = cols.indexOf(col[store.raw] ?? col);
|
|
28
|
-
if (index > -1) {
|
|
29
|
-
cols[index] = {
|
|
30
|
-
...cols[index],
|
|
31
|
-
width: th.offsetWidth
|
|
32
|
-
};
|
|
33
|
-
props.onColumnsChange?.(cols);
|
|
34
|
-
}
|
|
35
|
-
col.onWidthChange?.(th.offsetWidth);
|
|
11
|
+
var _tmpl$ = /* @__PURE__ */ template("<div>"), COL = Symbol("col_size"), ROW = Symbol("row_size"), ColHandle = (e) => {
|
|
12
|
+
let { props: g, store: v } = useContext(Ctx), y;
|
|
13
|
+
return usePointerDrag(() => y, { start(p, m, h) {
|
|
14
|
+
p.stopPropagation();
|
|
15
|
+
let _ = e.x, { min: b, max: x } = g.resizable.col, S = y.parentElement, C = S.offsetWidth;
|
|
16
|
+
m((p, { ox: m }) => v[COL][e.x] = clamp(C + m, b, x)), h(() => {
|
|
17
|
+
let e = g.columns[_], p = [...v.rawProps.columns || []], m = p.indexOf(e[v.raw] ?? e);
|
|
18
|
+
m > -1 && (p[m] = {
|
|
19
|
+
...p[m],
|
|
20
|
+
width: S.offsetWidth
|
|
21
|
+
}, g.onColumnsChange?.(p)), e.onWidthChange?.(S.offsetWidth);
|
|
36
22
|
});
|
|
37
|
-
} })
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var _ref$ = el;
|
|
41
|
-
typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
|
|
42
|
-
effect(() => className(_el$, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${o.x == props.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`));
|
|
43
|
-
return _el$;
|
|
23
|
+
} }), (() => {
|
|
24
|
+
var p = _tmpl$(), m = y;
|
|
25
|
+
return typeof m == "function" ? use(m, p) : y = p, effect(() => className(p, `in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${e.x == g.columns.length - 1 ? "justify-end!" : "w-10px! translate-x-1/2"} after:w-1 cursor-w-resize z-1`)), p;
|
|
44
26
|
})();
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
e.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const sh = el.parentElement.offsetHeight;
|
|
54
|
-
move((e$1, { oy }) => store[ROW][o.y] = clamp(sh + oy, min, max));
|
|
55
|
-
end(() => {
|
|
56
|
-
const row = props.data[i];
|
|
57
|
-
if ([...store.rawProps.data || []].indexOf(row[store.raw] ?? row) > -1) {}
|
|
27
|
+
}, RowHandle = (e) => {
|
|
28
|
+
let { props: g, store: v } = useContext(Ctx), y;
|
|
29
|
+
return usePointerDrag(() => y, { start(p, m, h) {
|
|
30
|
+
p.stopPropagation();
|
|
31
|
+
let _ = e.y, { min: b, max: x } = g.resizable.row, S = y.parentElement.offsetHeight;
|
|
32
|
+
m((p, { oy: m }) => v[ROW][e.y] = clamp(S + m, b, x)), h(() => {
|
|
33
|
+
let e = g.data[_];
|
|
34
|
+
[...v.rawProps.data || []].indexOf(e[v.raw] ?? e);
|
|
58
35
|
});
|
|
59
|
-
} })
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
var _el$2 = _tmpl$();
|
|
63
|
-
var _ref$2 = el;
|
|
64
|
-
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : el = _el$2;
|
|
65
|
-
effect(() => className(_el$2, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${o.y == props.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-1`));
|
|
66
|
-
return _el$2;
|
|
36
|
+
} }), createEventListener(() => y, "dblclick", () => e.data[COL] = void 0), (() => {
|
|
37
|
+
var p = _tmpl$(), m = y;
|
|
38
|
+
return typeof m == "function" ? use(m, p) : y = p, effect(() => className(p, `in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${e.y == g.data.length - 1 ? "justify-end!" : ""} after:h-1 cursor-s-resize z-1`)), p;
|
|
67
39
|
})();
|
|
68
40
|
};
|
|
69
41
|
const ResizePlugin = {
|
|
42
|
+
name: "resize",
|
|
70
43
|
store: () => ({
|
|
71
44
|
[COL]: [],
|
|
72
45
|
[ROW]: []
|
|
73
46
|
}),
|
|
74
47
|
rewriteProps: {
|
|
75
|
-
resizable: ({ resizable }) => defaultsDeep(
|
|
48
|
+
resizable: ({ resizable: e }) => defaultsDeep(e, {
|
|
76
49
|
col: {
|
|
77
|
-
enable:
|
|
50
|
+
enable: !0,
|
|
78
51
|
min: 45,
|
|
79
52
|
max: 800
|
|
80
53
|
},
|
|
81
54
|
row: {
|
|
82
|
-
enable:
|
|
55
|
+
enable: !1,
|
|
83
56
|
min: 20,
|
|
84
57
|
max: 400
|
|
85
58
|
}
|
|
86
59
|
}),
|
|
87
|
-
columns: ({ columns }, { store }) => (
|
|
60
|
+
columns: ({ columns: e }, { store: p }) => (e = e.map((e, m) => ({
|
|
88
61
|
...e,
|
|
89
|
-
[
|
|
90
|
-
})),
|
|
62
|
+
[p.raw]: e[p.raw] ?? e
|
|
63
|
+
})), e = e.map((e) => e.resizable === void 0 ? {
|
|
91
64
|
...e,
|
|
92
|
-
resizable:
|
|
93
|
-
[
|
|
94
|
-
} : e),
|
|
65
|
+
resizable: p.props?.resizable?.col.enable,
|
|
66
|
+
[p.raw]: e[p.raw] ?? e
|
|
67
|
+
} : e), e = e.map((e, m) => p[COL][m] ? {
|
|
95
68
|
...e,
|
|
96
|
-
width:
|
|
97
|
-
[
|
|
98
|
-
} : e), untrack(() => batch(() => reconcile(
|
|
99
|
-
Th: ({ Th }, { store }) => (
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
},
|
|
105
|
-
|
|
106
|
-
o = combineProps({ class: "relative" }, o);
|
|
107
|
-
return createComponent(Td, mergeProps(o, { get children() {
|
|
108
|
-
return [memo(() => o.children), memo(() => memo(() => !!(o.x == 0 && store.props?.resizable?.row.enable))() && createComponent(RowHandle, o))];
|
|
109
|
-
} }));
|
|
110
|
-
},
|
|
111
|
-
cellStyle: ({ cellStyle }, { store }) => (o) => {
|
|
112
|
-
return `${unFn(cellStyle, o)};` + (store[ROW][o.y] ? `height: ${store[ROW][o.y]}px` : "");
|
|
113
|
-
}
|
|
69
|
+
width: p[COL][m],
|
|
70
|
+
[p.raw]: e[p.raw] ?? e
|
|
71
|
+
} : e), untrack(() => batch(() => reconcile(e, { key: p.raw })(p.__resize__cols ??= [])))),
|
|
72
|
+
Th: ({ Th: e }, { store: p }) => (p) => (p = combineProps({ class: "relative" }, p), createComponent(e, mergeProps(p, { get children() {
|
|
73
|
+
return [memo(() => p.children), memo(() => memo(() => !!p.col.resizable)() && createComponent(ColHandle, p))];
|
|
74
|
+
} }))),
|
|
75
|
+
Td: ({ Td: e }, { store: p }) => p.props?.resizable?.row.enable ? (m) => (m = combineProps({ class: "relative" }, m), createComponent(e, mergeProps(m, { get children() {
|
|
76
|
+
return [memo(() => m.children), memo(() => memo(() => !!(m.x == 0 && p.props?.resizable?.row.enable))() && createComponent(RowHandle, m))];
|
|
77
|
+
} }))) : e,
|
|
78
|
+
cellStyle: ({ cellStyle: p }, { store: m }) => (h) => `${unFn(p, h)};` + (m[ROW][h.y] ? `height: ${m[ROW][h.y]}px` : "")
|
|
114
79
|
}
|
|
115
80
|
};
|
|
116
81
|
export { ResizePlugin };
|
|
@@ -1,98 +1,82 @@
|
|
|
1
|
-
import { Ctx } from "../index.js";
|
|
2
1
|
import chevron_right_default from "../chevron-right.js";
|
|
2
|
+
import { Ctx } from "../index.js";
|
|
3
3
|
import { createComponent, delegateEvents, effect, insert, memo, mergeProps, style, template } from "solid-js/web";
|
|
4
4
|
import { batch, createMemo, useContext } from "solid-js";
|
|
5
5
|
import { groupBy, isEqual, remove, zipObject } from "es-toolkit";
|
|
6
6
|
import { findLast } from "es-toolkit/compat";
|
|
7
|
-
var _tmpl$ = /* @__PURE__ */ template(
|
|
7
|
+
var _tmpl$ = /* @__PURE__ */ template("<div class=\"flex items-center\">");
|
|
8
8
|
const RowGroupPlugin = {
|
|
9
9
|
priority: -Infinity,
|
|
10
|
-
store: (
|
|
10
|
+
store: (e) => ({ rowGroup: {
|
|
11
11
|
expands: [],
|
|
12
|
-
isExpand: (
|
|
13
|
-
expand: (
|
|
14
|
-
toggleExpand: (
|
|
12
|
+
isExpand: (u) => e.rowGroup.expands.some((e) => isEqual(e, u[GROUP].path)),
|
|
13
|
+
expand: (u, d) => batch(() => d ? u[GROUP].path2.forEach((u) => e.rowGroup.isExpand(u) || e.rowGroup.expands.push(u[GROUP].path)) : e.rowGroup.isExpand(u) || e.rowGroup.expands.push(u[GROUP].path)),
|
|
14
|
+
toggleExpand: (u) => e.rowGroup.isExpand(u) ? remove(e.rowGroup.expands, (e) => isEqual(e, u[GROUP].path)) : e.rowGroup.expand(u)
|
|
15
15
|
} }),
|
|
16
|
-
commands: (
|
|
17
|
-
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
if (
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
i = store.props.data.indexOf(anchor);
|
|
28
|
-
before = true;
|
|
29
|
-
}
|
|
16
|
+
commands: (e, { addRows: u }) => ({ addRows(d, f, p) {
|
|
17
|
+
let { data: m, rowGroup: h, rowKey: g } = e.props;
|
|
18
|
+
if (h?.fields?.length) {
|
|
19
|
+
let h = findLast(m, (e) => e[GROUP], d);
|
|
20
|
+
if (h && m[d][GROUP]) {
|
|
21
|
+
let u = function e(u) {
|
|
22
|
+
return u[GROUP]?.children[0]?.[GROUP] ? e(u[GROUP].children[0]) : u;
|
|
23
|
+
}(h);
|
|
24
|
+
e.rowGroup.expand(u, !0);
|
|
25
|
+
let f = u[GROUP].children[0];
|
|
26
|
+
d = e.props.data.indexOf(f), p = !0;
|
|
30
27
|
}
|
|
31
|
-
|
|
32
|
-
} else
|
|
28
|
+
u?.(d, f, p);
|
|
29
|
+
} else u?.(...arguments);
|
|
33
30
|
} }),
|
|
34
31
|
rewriteProps: {
|
|
35
|
-
data: ({ data }, { store }) =>
|
|
36
|
-
newRow: ({ newRow }, { store }) => function(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
const extra = zipObject(rowGroup.fields, leaf[GROUP].path);
|
|
46
|
-
Object.assign(row, extra);
|
|
32
|
+
data: ({ data: e }, { store: u }) => u.props?.rowGroup?.fields?.length ? expandData(e, u) : e,
|
|
33
|
+
newRow: ({ newRow: e }, { store: u }) => function(d) {
|
|
34
|
+
let f = e(...arguments), { data: p, rowGroup: m } = u.props;
|
|
35
|
+
if (m?.fields?.length) {
|
|
36
|
+
let e = findLast(p, (e) => e[GROUP], d);
|
|
37
|
+
if (e) {
|
|
38
|
+
let u = function e(u) {
|
|
39
|
+
return u[GROUP]?.children[0]?.[GROUP] ? e(u[GROUP].children[0]) : u;
|
|
40
|
+
}(e), d = zipObject(m.fields, u[GROUP].path);
|
|
41
|
+
Object.assign(f, d);
|
|
47
42
|
}
|
|
48
43
|
}
|
|
49
|
-
return
|
|
44
|
+
return f;
|
|
50
45
|
},
|
|
51
|
-
Td: ({ Td }, { store }) => (
|
|
52
|
-
if (!
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
insert(_el$, createComponent(chevron_right_default, {
|
|
60
|
-
"class": "icon-clickable mr-2",
|
|
46
|
+
Td: ({ Td: f }, { store: v }) => (y) => {
|
|
47
|
+
if (!y.data?.[GROUP]) return createComponent(f, y);
|
|
48
|
+
let { props: b } = useContext(Ctx), x = createMemo(() => v.rowGroup.isExpand(y.data));
|
|
49
|
+
return createComponent(f, mergeProps(y, { get children() {
|
|
50
|
+
return memo(() => b.columns?.findIndex((e) => !e[v.internal]) == y.x)() ? (() => {
|
|
51
|
+
var u = _tmpl$();
|
|
52
|
+
return u.$$dblclick = () => v.rowGroup.toggleExpand(y.data), insert(u, createComponent(chevron_right_default, {
|
|
53
|
+
class: "icon-clickable mr-2",
|
|
61
54
|
get style() {
|
|
62
|
-
return `transform: rotate(${
|
|
55
|
+
return `transform: rotate(${x() ? 90 : 0}deg); opacity: .6`;
|
|
63
56
|
},
|
|
64
|
-
onClick: () =>
|
|
65
|
-
}), null);
|
|
66
|
-
|
|
67
|
-
effect((_$p) => style(_el$, `padding-left: ${(o.data[GROUP].path.length - 1) * 16}px`, _$p));
|
|
68
|
-
return _el$;
|
|
69
|
-
})() : o.children;
|
|
57
|
+
onClick: () => v.rowGroup.toggleExpand(y.data)
|
|
58
|
+
}), null), insert(u, () => y.data[GROUP].value, null), effect((e) => style(u, `padding-left: ${(y.data[GROUP].path.length - 1) * 16}px`, e)), u;
|
|
59
|
+
})() : y.children;
|
|
70
60
|
} }));
|
|
71
61
|
}
|
|
72
62
|
}
|
|
73
63
|
};
|
|
74
|
-
var GROUP = Symbol("row-group")
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
value: k,
|
|
91
|
-
path2: ps
|
|
92
|
-
};
|
|
93
|
-
group[GROUP].children = expandData(obj[k], store, ps);
|
|
94
|
-
const arr = store.rowGroup.isExpand(group) ? group[GROUP].children : [];
|
|
95
|
-
return [group, ...arr];
|
|
64
|
+
var GROUP = Symbol("row-group"), expandData = (e, u, d = []) => {
|
|
65
|
+
let f = u.props.rowGroup.fields, p = u.props.columns.find((e) => !e[u.internal]);
|
|
66
|
+
if (!p || f.length == d.length) return e;
|
|
67
|
+
let m = d[d.length - 1]?.[GROUP].path || [], h = groupBy(e, (e) => e[f[m.length]]);
|
|
68
|
+
return Object.keys(h).flatMap((e) => {
|
|
69
|
+
let f = {
|
|
70
|
+
[p.id]: e,
|
|
71
|
+
[u.internal]: 1
|
|
72
|
+
}, g = [...d, f];
|
|
73
|
+
f[GROUP] = {
|
|
74
|
+
path: [...m, e],
|
|
75
|
+
value: e,
|
|
76
|
+
path2: g
|
|
77
|
+
}, f[GROUP].children = expandData(h[e], u, g);
|
|
78
|
+
let _ = u.rowGroup.isExpand(f) ? f[GROUP].children : [];
|
|
79
|
+
return [f, ..._];
|
|
96
80
|
});
|
|
97
81
|
};
|
|
98
82
|
delegateEvents(["dblclick"]);
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { type Plugin } from '..';
|
|
2
|
+
import { useSelector } from '../hooks/useSelector';
|
|
2
3
|
declare module '../index' {
|
|
3
4
|
interface TableProps {
|
|
4
5
|
rowSelection?: {
|
|
5
6
|
enable?: boolean;
|
|
6
7
|
multiple?: boolean;
|
|
7
|
-
value?: any
|
|
8
|
+
value?: any;
|
|
8
9
|
selectable?: (row: any) => boolean;
|
|
9
|
-
onChange?: (selected: any
|
|
10
|
+
onChange?: (selected: any) => void;
|
|
10
11
|
};
|
|
11
12
|
}
|
|
12
13
|
interface TableStore {
|
|
@@ -17,16 +18,3 @@ declare module '../index' {
|
|
|
17
18
|
}
|
|
18
19
|
}
|
|
19
20
|
export declare const RowSelectionPlugin: Plugin;
|
|
20
|
-
declare function useSelector(opt: Partial<{
|
|
21
|
-
value: any;
|
|
22
|
-
rowKey: any;
|
|
23
|
-
multiple: any;
|
|
24
|
-
selectable: any;
|
|
25
|
-
onChange: any;
|
|
26
|
-
}>): {
|
|
27
|
-
isSelected: (data: any) => boolean;
|
|
28
|
-
select: (data: any, bool?: boolean) => void;
|
|
29
|
-
clear: () => any;
|
|
30
|
-
set: (rows?: any[]) => any;
|
|
31
|
-
};
|
|
32
|
-
export {};
|