intable 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +22 -0
  3. package/dist/chevron-right.js +8 -0
  4. package/dist/components/Columns.d.ts +3 -0
  5. package/dist/components/Columns.js +105 -0
  6. package/dist/components/DocTree.d.ts +4 -0
  7. package/dist/components/DocTree.js +40 -0
  8. package/dist/components/Menu.d.ts +1 -0
  9. package/dist/components/Menu.js +131 -0
  10. package/dist/components/Popover.d.ts +14 -0
  11. package/dist/components/Popover.js +49 -0
  12. package/dist/components/Render.d.ts +4 -0
  13. package/dist/components/Render.js +21 -0
  14. package/dist/components/Split.d.ts +15 -0
  15. package/dist/components/Split.js +88 -0
  16. package/dist/components/Tree.d.ts +37 -0
  17. package/dist/components/Tree.js +101 -0
  18. package/dist/components/utils.d.ts +3 -0
  19. package/dist/components/utils.js +10 -0
  20. package/dist/demo.d.ts +2 -0
  21. package/dist/demo.js +64 -0
  22. package/dist/hooks/index.d.ts +38 -0
  23. package/dist/hooks/index.js +182 -0
  24. package/dist/hooks/useDir.d.ts +11 -0
  25. package/dist/hooks/useDir.js +59 -0
  26. package/dist/hooks/useVirtualizer.d.ts +25 -0
  27. package/dist/hooks/useVirtualizer.js +92 -0
  28. package/dist/index.d.ts +116 -0
  29. package/dist/index.js +348 -0
  30. package/dist/intable.css +277 -0
  31. package/dist/loading.js +8 -0
  32. package/dist/plugins/CellChangeHighlightPlugin.d.ts +2 -0
  33. package/dist/plugins/CellChangeHighlightPlugin.js +4 -0
  34. package/dist/plugins/CellSelectionPlugin.d.ts +15 -0
  35. package/dist/plugins/CellSelectionPlugin.js +150 -0
  36. package/dist/plugins/CommandPlugin.d.ts +14 -0
  37. package/dist/plugins/CommandPlugin.js +9 -0
  38. package/dist/plugins/CopyPastePlugin.d.ts +14 -0
  39. package/dist/plugins/CopyPastePlugin.js +54 -0
  40. package/dist/plugins/DiffPlugin.d.ts +23 -0
  41. package/dist/plugins/DiffPlugin.js +68 -0
  42. package/dist/plugins/DragColumnPlugin.d.ts +2 -0
  43. package/dist/plugins/DragColumnPlugin.js +4 -0
  44. package/dist/plugins/EditablePlugin.d.ts +49 -0
  45. package/dist/plugins/EditablePlugin.js +191 -0
  46. package/dist/plugins/ExpandPlugin.d.ts +20 -0
  47. package/dist/plugins/ExpandPlugin.js +56 -0
  48. package/dist/plugins/HistoryPlugin.d.ts +10 -0
  49. package/dist/plugins/HistoryPlugin.js +35 -0
  50. package/dist/plugins/MenuPlugin.d.ts +18 -0
  51. package/dist/plugins/MenuPlugin.js +131 -0
  52. package/dist/plugins/RenderPlugin/components.d.ts +5 -0
  53. package/dist/plugins/RenderPlugin/components.js +105 -0
  54. package/dist/plugins/RenderPlugin/index.d.ts +30 -0
  55. package/dist/plugins/RenderPlugin/index.js +61 -0
  56. package/dist/plugins/ResizePlugin.d.ts +27 -0
  57. package/dist/plugins/ResizePlugin.js +103 -0
  58. package/dist/plugins/RowGroupPlugin.d.ts +17 -0
  59. package/dist/plugins/RowGroupPlugin.js +99 -0
  60. package/dist/plugins/RowSelectionPlugin.d.ts +32 -0
  61. package/dist/plugins/RowSelectionPlugin.js +69 -0
  62. package/dist/plugins/VirtualScrollPlugin.d.ts +15 -0
  63. package/dist/plugins/VirtualScrollPlugin.js +121 -0
  64. package/dist/plus.js +8 -0
  65. package/dist/types/auto-imports.d.js +0 -0
  66. package/dist/utils.d.ts +29 -0
  67. package/dist/utils.js +88 -0
  68. package/dist/vite.svg +1 -0
  69. package/dist/wc.d.ts +1 -0
  70. package/dist/wc.js +24 -0
  71. package/dist/web-component.d.ts +1 -0
  72. package/dist/web-component.js +2 -0
  73. package/dist/x.js +8 -0
  74. package/package.json +71 -0
@@ -0,0 +1,10 @@
1
+ import { useHistory } from '@/hooks';
2
+ import { type Plugin } from '..';
3
+ declare module '../index' {
4
+ interface TableProps {
5
+ }
6
+ interface TableStore {
7
+ history: ReturnType<typeof useHistory>;
8
+ }
9
+ }
10
+ export declare const HistoryPlugin: Plugin;
@@ -0,0 +1,35 @@
1
+ import { useHistory, useTinykeys } from "../hooks/index.js";
2
+ import { createComponent } from "solid-js/web";
3
+ import { createMemo } from "solid-js";
4
+ import { unwrap } from "solid-js/store";
5
+ import { combineProps } from "@solid-primitives/props";
6
+ import { captureStoreUpdates } from "@solid-primitives/deep";
7
+ const HistoryPlugin = {
8
+ store: (store) => {
9
+ const getDelta = createMemo(() => captureStoreUpdates(store.rawProps.data || []));
10
+ let clonedState;
11
+ return { history: useHistory([() => {
12
+ const delta = getDelta()();
13
+ if (!delta.length) return;
14
+ for (const { path, value } of delta) if (path.length == 0) clonedState = structuredClone(unwrap(value));
15
+ else {
16
+ const target = [...clonedState];
17
+ path.reduce((o, k, i) => o[k] = i < path.length - 1 ? Array.isArray(o[k]) ? [...o[k]] : { ...o[k] } : structuredClone(unwrap(value)), target);
18
+ clonedState = target;
19
+ }
20
+ return clonedState;
21
+ }, (v) => store.props.onDataChange?.(v)]) };
22
+ },
23
+ rewriteProps: {
24
+ Table: ({ Table }, { store }) => (o) => {
25
+ useTinykeys(() => store.table, {
26
+ "Control+Z": () => store.history.undo(),
27
+ "Control+Y": () => store.history.redo()
28
+ });
29
+ o = combineProps({ tabindex: -1 }, o);
30
+ return createComponent(Table, o);
31
+ },
32
+ tdProps: ({ tdProps }, { store }) => (o) => combineProps(tdProps?.(o) || {}, {})
33
+ }
34
+ };
35
+ export { HistoryPlugin };
@@ -0,0 +1,18 @@
1
+ import { type Plugin } from '..';
2
+ declare module '../index' {
3
+ interface TableProps {
4
+ }
5
+ interface TableStore {
6
+ }
7
+ interface Plugin {
8
+ menus?: (store: TableStore) => any[];
9
+ }
10
+ interface Commands {
11
+ rowEquals: (a: any, b: any) => boolean;
12
+ rowIndexOf: (data: any[], row: any) => number;
13
+ rowChange: (row: any, i?: any) => void;
14
+ addRows: (i: number, rows: any[], before?: boolean) => void;
15
+ deleteRows: (i: number[]) => void;
16
+ }
17
+ }
18
+ export declare const MenuPlugin: Plugin;
@@ -0,0 +1,131 @@
1
+ import { log } from "../utils.js";
2
+ import { useMemoAsync } from "../hooks/index.js";
3
+ import { Menu } from "../components/Menu.js";
4
+ import { createComponent, memo, mergeProps } from "solid-js/web";
5
+ import { batch, createMemo, createSignal, mapArray } from "solid-js";
6
+ import { range, remove } from "es-toolkit";
7
+ import { combineProps } from "@solid-primitives/props";
8
+ import { createEventListener } from "@solid-primitives/event-listener";
9
+ import { autoPlacement, computePosition } from "@floating-ui/dom";
10
+ const MenuPlugin = {
11
+ store: (store) => ({}),
12
+ rewriteProps: { Table: ({ Table }, { store }) => (o) => {
13
+ const [menuEl, setMenuEl] = createSignal();
14
+ const _menus = mapArray(() => store.plugins || [], (plugin) => createMemo(() => plugin.menus?.(store)));
15
+ const menus = createMemo(() => _menus().flatMap((e) => e() || []));
16
+ const [pos, setPos] = createSignal();
17
+ function onContextMenu(e) {
18
+ e.preventDefault();
19
+ setPos({
20
+ x: e.x,
21
+ y: e.y
22
+ });
23
+ }
24
+ createEventListener(document, "pointerdown", (e) => {
25
+ menuEl()?.contains(e.target) || setPos();
26
+ });
27
+ const style$1 = useMemoAsync(() => {
28
+ const mel = menuEl();
29
+ if (!mel) return;
30
+ return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(pos()) }, mel, {
31
+ strategy: "fixed",
32
+ placement: "top-start",
33
+ middleware: [autoPlacement({
34
+ boundary: document.body,
35
+ alignment: "start"
36
+ })]
37
+ }).then(({ x, y }) => ({
38
+ position: "fixed",
39
+ transform: `translate(${x}px, ${y}px)`,
40
+ top: 0,
41
+ left: 0,
42
+ "z-index": 10
43
+ }));
44
+ });
45
+ o = combineProps({
46
+ tabindex: -1,
47
+ onContextMenu
48
+ }, o);
49
+ return createComponent(Table, mergeProps(o, { get children() {
50
+ return [memo(() => memo(() => !!pos())() && createComponent(Menu, {
51
+ ref: setMenuEl,
52
+ get style() {
53
+ return style$1() || "position: absolute";
54
+ },
55
+ get items() {
56
+ return menus();
57
+ },
58
+ onAction: () => setPos()
59
+ })), memo(() => o.children)];
60
+ } }));
61
+ } },
62
+ menus: (store) => [
63
+ {
64
+ label: "新增行 ↑",
65
+ disabled: () => true,
66
+ cb: () => store.commands.addRows(store.selected.end[1], [store.props.newRow(store.selected.end[1])])
67
+ },
68
+ {
69
+ label: "新增行 ↓",
70
+ cb: () => store.commands.addRows(store.selected.end[1], [store.props.newRow(store.selected.end[1])], false)
71
+ },
72
+ {
73
+ label: "删除行",
74
+ cb: () => store.commands.deleteRows(range(...((e) => [e[0], e[1] + 1])([store.selected.start[1], store.selected.end[1]].sort((a, b) => a - b))))
75
+ }
76
+ ],
77
+ commands: (store) => ({
78
+ rowEquals(a, b) {
79
+ return a == b;
80
+ },
81
+ rowIndexOf(data, row) {
82
+ return data.findIndex((e) => store.commands.rowEquals(e, row));
83
+ },
84
+ rowChange(row, i) {
85
+ const data = [...store.rawProps.data || []];
86
+ i = i != null ? data.findIndex((ee) => ee == store.props.data[i]) : store.commands.rowIndexOf(data, row);
87
+ if (i > -1) {
88
+ data[i] = row;
89
+ store.props.onDataChange?.(data);
90
+ }
91
+ },
92
+ addRows(i, rows, before = true) {
93
+ addRows(store, i, rows, before);
94
+ },
95
+ deleteRows(ii) {
96
+ const { rowKey, data } = store.props;
97
+ const val = [...store.rawProps.data || []];
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);
102
+ }
103
+ })
104
+ };
105
+ function addRows(store, i, rows, before) {
106
+ const { data } = store.props;
107
+ const prev = (i$1) => {
108
+ before = false;
109
+ while (--i$1 >= 0 && data[i$1]?.[store.internal]);
110
+ return i$1 >= 0 ? data[i$1] : null;
111
+ };
112
+ const next = (i$1) => {
113
+ before = true;
114
+ while (++i$1 < data.length && data[i$1]?.[store.internal]);
115
+ return i$1 < data.length ? data[i$1] : null;
116
+ };
117
+ const anchor = !data[i]?.[store.internal] ? data[i] : before ? prev(i) || next(i) : next(i) || prev(i);
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);
129
+ })();
130
+ }
131
+ export { MenuPlugin };
@@ -0,0 +1,5 @@
1
+ export declare const Checkbox: import("solid-js").Component<Record<string, any>>;
2
+ export declare const Files: import("solid-js").Component<Record<string, any>>;
3
+ export declare const Tags: import("solid-js").Component<Record<string, any>>;
4
+ export declare const Tag: import("solid-js").Component<Record<string, any>>;
5
+ export declare const evaluateFormula: (formula: string, data: any) => any;
@@ -0,0 +1,105 @@
1
+ import plus_default from "../../plus.js";
2
+ import x_default from "../../x.js";
3
+ import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
4
+ import { For, splitProps } from "solid-js";
5
+ import { combineProps } from "@solid-primitives/props";
6
+ var _tmpl$ = /* @__PURE__ */ template(`<input type=checkbox>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`);
7
+ const Checkbox = (_props) => {
8
+ let props;
9
+ [_props, props] = splitProps(_props, ["value", "onChange"]);
10
+ props = combineProps({ get class() {
11
+ return `you-checkbox ${_props.value && "checked"}`;
12
+ } }, props);
13
+ return (() => {
14
+ var _el$ = _tmpl$();
15
+ _el$.addEventListener("change", (e) => _props.onChange?.(e.currentTarget.checked));
16
+ spread(_el$, mergeProps({ get checked() {
17
+ return _props.value || false;
18
+ } }, props), false, false);
19
+ return _el$;
20
+ })();
21
+ };
22
+ const Files = (_props2) => {
23
+ let props;
24
+ [_props2, props] = splitProps(_props2, []);
25
+ return createComponent(Tags, props);
26
+ };
27
+ const Tags = (_props3) => {
28
+ let props;
29
+ [_props3, props] = splitProps(_props3, [
30
+ "value",
31
+ "children",
32
+ "disabled",
33
+ "onChange",
34
+ "onAdd"
35
+ ]);
36
+ props = combineProps({ class: "flex flex-wrap items-center gap-2 h-full" }, props);
37
+ const toarr = (v) => Array.isArray(v) ? v : v != null ? [v] : [];
38
+ return (() => {
39
+ var _el$2 = _tmpl$2();
40
+ spread(_el$2, props, false, true);
41
+ insert(_el$2, createComponent(For, {
42
+ get each() {
43
+ return toarr(_props3.value);
44
+ },
45
+ children: (e) => createComponent(Tag, {
46
+ get style() {
47
+ return `background: ${e.color}`;
48
+ },
49
+ get disabled() {
50
+ return _props3.disabled;
51
+ },
52
+ onDel: () => _props3.onChange(toarr(_props3.value).filter((e2) => e2 != e)),
53
+ get children() {
54
+ return memo(() => !!_props3.children)() ? _props3.children(e) : e?.text ?? e?.label ?? e?.name ?? e;
55
+ }
56
+ })
57
+ }), null);
58
+ insert(_el$2, (() => {
59
+ var _c$ = memo(() => !!!_props3.disabled);
60
+ return () => _c$() && createComponent(Tag, {
61
+ disabled: true,
62
+ get onClick() {
63
+ return _props3.onAdd;
64
+ },
65
+ get children() {
66
+ return createComponent(plus_default, {});
67
+ }
68
+ });
69
+ })(), null);
70
+ return _el$2;
71
+ })();
72
+ };
73
+ const Tag = (_props4) => {
74
+ let props;
75
+ [_props4, props] = splitProps(_props4, [
76
+ "disabled",
77
+ "children",
78
+ "onDel"
79
+ ]);
80
+ props = combineProps({ class: "flex items-center px-2 py-1 rd-sm bg-gray/20 text-3.5 lh-[1]" }, props);
81
+ return (() => {
82
+ var _el$3 = _tmpl$2();
83
+ spread(_el$3, props, false, true);
84
+ insert(_el$3, () => _props4.children, null);
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",
89
+ get onClick() {
90
+ return _props4.onDel;
91
+ }
92
+ });
93
+ })(), null);
94
+ return _el$3;
95
+ })();
96
+ };
97
+ const evaluateFormula = (formula, data) => {
98
+ try {
99
+ const ctx = { data };
100
+ return new Function(...Object.keys(ctx), `return ` + formula)(...Object.values(ctx));
101
+ } catch (error) {
102
+ return "公式错误";
103
+ }
104
+ };
105
+ export { Checkbox, Files, Tag, Tags, evaluateFormula };
@@ -0,0 +1,30 @@
1
+ import { type JSX } from 'solid-js';
2
+ import { type Plugin, type TD } from '../..';
3
+ declare module '../../index' {
4
+ interface TableProps {
5
+ }
6
+ interface TableColumn {
7
+ render?: Render;
8
+ enum?: Record<string, any> | {
9
+ label?: string;
10
+ value: any;
11
+ }[];
12
+ }
13
+ interface TableStore {
14
+ renders: {
15
+ [key: string]: Render;
16
+ };
17
+ }
18
+ }
19
+ export type RenderProps = Parameters<TD>[0] & {
20
+ onChange: (v: any) => void;
21
+ };
22
+ export type Render = (props: RenderProps) => JSX.Element | any;
23
+ export declare const RenderPlugin: Plugin;
24
+ export declare const renders: {
25
+ text: Render;
26
+ number: Render;
27
+ date: Render;
28
+ checkbox: Render;
29
+ file: Render;
30
+ };
@@ -0,0 +1,61 @@
1
+ import { resolveOptions } from "../../utils.js";
2
+ import { Checkbox, Files } from "./components.js";
3
+ import { renderComponent, solidComponent } from "../../components/utils.js";
4
+ import { createComponent, insert, memo, mergeProps, template } from "solid-js/web";
5
+ import { mergeProps as mergeProps$1 } from "solid-js";
6
+ var _tmpl$ = /* @__PURE__ */ template(`<div class="flex items-center h-full">`);
7
+ const RenderPlugin = {
8
+ priority: -Infinity,
9
+ store: () => ({ renders: { ...renders } }),
10
+ rewriteProps: { Td: ({ Td }, { store }) => (o) => {
11
+ return createComponent(Td, mergeProps(o, { get children() {
12
+ return (() => {
13
+ let Comp = ((e) => typeof e == "string" ? store.renders[e] : e)(o.col.render) || text;
14
+ return renderComponent(Comp, mergeProps$1(o, { onChange: (v) => store.commands.rowChange({
15
+ ...o.data,
16
+ [o.col.id]: v
17
+ }, o.y) }), store.props.renderer);
18
+ })();
19
+ } }));
20
+ } }
21
+ };
22
+ var text = (_props) => {
23
+ return memo(() => ((v) => _props.col.enum ? resolveOptions(_props.col.enum).find((e) => e.value == v)?.label ?? v : v)(_props.data[_props.col.id]));
24
+ };
25
+ var number = text;
26
+ var date = text;
27
+ var checkbox = (_props2) => {
28
+ return (() => {
29
+ var _el$ = _tmpl$();
30
+ insert(_el$, createComponent(Checkbox, {
31
+ "class": "",
32
+ get value() {
33
+ return _props2.data[_props2.col.id];
34
+ },
35
+ get onChange() {
36
+ return _props2.onChange;
37
+ }
38
+ }));
39
+ return _el$;
40
+ })();
41
+ };
42
+ var file = (_props3) => {
43
+ return createComponent(Files, {
44
+ get value() {
45
+ return _props3.data[_props3.col.id];
46
+ },
47
+ get onChange() {
48
+ return _props3.onChange;
49
+ },
50
+ disabled: true
51
+ });
52
+ };
53
+ const renders = {
54
+ text,
55
+ number,
56
+ date,
57
+ checkbox,
58
+ file
59
+ };
60
+ for (const k in renders) renders[k] = solidComponent(renders[k]);
61
+ export { RenderPlugin, renders };
@@ -0,0 +1,27 @@
1
+ import { type Plugin } from "@/index";
2
+ declare module '../index' {
3
+ interface TableProps {
4
+ resizable?: {
5
+ col: Partial<{
6
+ enable: boolean;
7
+ min: number;
8
+ max: number;
9
+ }>;
10
+ row: Partial<{
11
+ enable: boolean;
12
+ min: number;
13
+ max: number;
14
+ }>;
15
+ };
16
+ onColumnsChange?: (columns: TableColumn[]) => void;
17
+ }
18
+ interface TableColumn {
19
+ resizable?: boolean;
20
+ onWidthChange?: (width: number) => void;
21
+ }
22
+ interface TableStore {
23
+ }
24
+ interface Commands {
25
+ }
26
+ }
27
+ export declare const ResizePlugin: Plugin;
@@ -0,0 +1,103 @@
1
+ import { usePointerDrag } from "../hooks/index.js";
2
+ import { Ctx } from "../index.js";
3
+ import { useSplit } from "../components/Split.js";
4
+ import { createComponent, template, use } from "solid-js/web";
5
+ import { createMemo, onMount, useContext } from "solid-js";
6
+ import { clamp } from "es-toolkit";
7
+ import { combineProps } from "@solid-primitives/props";
8
+ import { defaultsDeep } from "es-toolkit/compat";
9
+ var _tmpl$ = /* @__PURE__ */ template(`<div class="in-cell__resize-handle flex justify-center after:w-1 cursor-w-resize">`), _tmpl$2 = /* @__PURE__ */ template(`<div class="in-cell__resize-handle flex flex-row items-center after:h-1 cursor-s-resize">`);
10
+ const ResizePlugin = { rewriteProps: {
11
+ resizable: ({ resizable }) => defaultsDeep(resizable, {
12
+ col: {
13
+ enable: true,
14
+ min: 45,
15
+ max: 800
16
+ },
17
+ row: {
18
+ enable: false,
19
+ min: 20,
20
+ max: 400
21
+ }
22
+ }),
23
+ columns: ({ columns }, { store }) => columns.map((e) => defaultsDeep(e, { resizable: store.props?.resizable?.col.enable })),
24
+ Thead: ({ Thead }, { store }) => (o) => {
25
+ let theadEl;
26
+ const { props } = useContext(Ctx);
27
+ const ths = createMemo(() => store.ths.filter((e) => e != null));
28
+ onMount(() => {
29
+ useSplit({
30
+ container: theadEl,
31
+ cells: ths,
32
+ size: 10,
33
+ trailing: true,
34
+ dir: "x",
35
+ handle: (i) => createComponent(Handle, { i })
36
+ });
37
+ });
38
+ const Handle = (_props) => {
39
+ let el;
40
+ usePointerDrag(() => el, { start(e, move, end) {
41
+ const { min, max } = props.resizable.col;
42
+ const th = ths()[_props.i];
43
+ const sw = th.offsetWidth;
44
+ move((e$1, o$1) => th.style.width = `${clamp(sw + o$1.ox, min, max)}px`);
45
+ end(() => {
46
+ const col = props.columns[_props.i];
47
+ const cols = [...store.rawProps.columns || []];
48
+ const index = cols?.findIndex((e$1) => e$1.id == col.id);
49
+ if (index > -1) {
50
+ cols[index] = {
51
+ ...cols[index],
52
+ width: th.offsetWidth
53
+ };
54
+ props.onColumnsChange?.(cols);
55
+ }
56
+ col.onWidthChange?.(th.offsetWidth);
57
+ });
58
+ } });
59
+ return (() => {
60
+ var _el$ = _tmpl$();
61
+ var _ref$ = el;
62
+ typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
63
+ return _el$;
64
+ })();
65
+ };
66
+ o = combineProps({ ref: (e) => theadEl = e }, o);
67
+ return createComponent(Thead, o);
68
+ },
69
+ Tbody: ({ Tbody }, { store }) => (o) => {
70
+ let el;
71
+ const { props } = useContext(Ctx);
72
+ const tds = createMemo(() => store.trs.filter((e) => e != null).map((e) => e.firstElementChild));
73
+ onMount(() => {
74
+ useSplit({
75
+ container: el,
76
+ cells: tds,
77
+ size: 8,
78
+ trailing: true,
79
+ dir: "y",
80
+ handle: (i) => createComponent(Handle, { i })
81
+ });
82
+ });
83
+ const Handle = (_props2) => {
84
+ let el$1;
85
+ usePointerDrag(() => el$1, { start(e, move, end) {
86
+ const { min, max } = props.resizable.row;
87
+ const tr = tds()[_props2.i];
88
+ const sw = tr.offsetHeight;
89
+ move((e$1, o$1) => tr.style.height = `${clamp(sw + o$1.oy, min, max)}px`);
90
+ end(() => {});
91
+ } });
92
+ return (() => {
93
+ var _el$2 = _tmpl$2();
94
+ var _ref$2 = el$1;
95
+ typeof _ref$2 === "function" ? use(_ref$2, _el$2) : el$1 = _el$2;
96
+ return _el$2;
97
+ })();
98
+ };
99
+ o = combineProps({ ref: (e) => el = e }, o);
100
+ return createComponent(Tbody, o);
101
+ }
102
+ } };
103
+ export { ResizePlugin };
@@ -0,0 +1,17 @@
1
+ import { type Plugin } from '..';
2
+ declare module '../index' {
3
+ interface TableProps {
4
+ rowGroup?: {
5
+ fields?: string[];
6
+ };
7
+ }
8
+ interface TableStore {
9
+ rowGroup: {
10
+ expands: string[][];
11
+ isExpand: (data: any) => boolean;
12
+ expand: (data: any, r?: any) => void;
13
+ toggleExpand: (data: any) => void;
14
+ };
15
+ }
16
+ }
17
+ export declare const RowGroupPlugin: Plugin;
@@ -0,0 +1,99 @@
1
+ import { Ctx } from "../index.js";
2
+ import chevron_right_default from "../chevron-right.js";
3
+ import { createComponent, delegateEvents, effect, insert, memo, mergeProps, style, template } from "solid-js/web";
4
+ import { batch, createMemo, useContext } from "solid-js";
5
+ import { groupBy, isEqual, remove, zipObject } from "es-toolkit";
6
+ import { findLast } from "es-toolkit/compat";
7
+ var _tmpl$ = /* @__PURE__ */ template(`<div class="flex items-center">`);
8
+ const RowGroupPlugin = {
9
+ priority: -Infinity,
10
+ store: (store) => ({ rowGroup: {
11
+ expands: [],
12
+ isExpand: (data) => store.rowGroup.expands.some((e) => isEqual(e, data[GROUP].path)),
13
+ expand: (data, r) => batch(() => r ? data[GROUP].path2.forEach((e) => store.rowGroup.isExpand(e) || store.rowGroup.expands.push(e[GROUP].path)) : store.rowGroup.isExpand(data) || store.rowGroup.expands.push(data[GROUP].path)),
14
+ toggleExpand: (data) => store.rowGroup.isExpand(data) ? remove(store.rowGroup.expands, (e) => isEqual(e, data[GROUP].path)) : store.rowGroup.expand(data)
15
+ } }),
16
+ commands: (store, { addRows }) => ({ addRows(i, rows, before) {
17
+ const { data, rowGroup, rowKey } = store.props;
18
+ if (rowGroup?.fields?.length) {
19
+ const group = findLast(data, (e) => e[GROUP], i);
20
+ if (group) {
21
+ if (data[i][GROUP]) {
22
+ const leaf = function r(group$1) {
23
+ return group$1[GROUP]?.children[0]?.[GROUP] ? r(group$1[GROUP].children[0]) : group$1;
24
+ }(group);
25
+ store.rowGroup.expand(leaf, true);
26
+ const anchor = leaf[GROUP].children[0];
27
+ i = store.props.data.indexOf(anchor);
28
+ before = true;
29
+ }
30
+ }
31
+ addRows?.(i, rows, before);
32
+ } else addRows?.(...arguments);
33
+ } }),
34
+ rewriteProps: {
35
+ data: ({ data }, { store }) => store.props?.rowGroup?.fields?.length ? expandData(data, store) : data,
36
+ newRow: ({ newRow }, { store }) => function(i) {
37
+ const row = newRow(...arguments);
38
+ const { data, rowGroup } = store.props;
39
+ if (rowGroup?.fields?.length) {
40
+ const group = findLast(data, (e) => e[GROUP], i);
41
+ if (group) {
42
+ const leaf = function r(group$1) {
43
+ return group$1[GROUP]?.children[0]?.[GROUP] ? r(group$1[GROUP].children[0]) : group$1;
44
+ }(group);
45
+ const extra = zipObject(rowGroup.fields, leaf[GROUP].path);
46
+ Object.assign(row, extra);
47
+ }
48
+ }
49
+ return row;
50
+ },
51
+ Td: ({ Td }, { store }) => (o) => {
52
+ if (!o.data?.[GROUP]) return createComponent(Td, o);
53
+ const { props } = useContext(Ctx);
54
+ const show = createMemo(() => store.rowGroup.isExpand(o.data));
55
+ return createComponent(Td, mergeProps(o, { get children() {
56
+ return memo(() => props.columns?.findIndex((e) => !e[store.internal]) == o.x)() ? (() => {
57
+ var _el$ = _tmpl$();
58
+ _el$.$$dblclick = () => store.rowGroup.toggleExpand(o.data);
59
+ insert(_el$, createComponent(chevron_right_default, {
60
+ "class": "icon-clickable mr-2",
61
+ get style() {
62
+ return `transform: rotate(${show() ? 90 : 0}deg); opacity: .6`;
63
+ },
64
+ onClick: () => store.rowGroup.toggleExpand(o.data)
65
+ }), null);
66
+ insert(_el$, () => o.data[GROUP].value, null);
67
+ effect((_$p) => style(_el$, `padding-left: ${(o.data[GROUP].path.length - 1) * 16}px`, _$p));
68
+ return _el$;
69
+ })() : o.children;
70
+ } }));
71
+ }
72
+ }
73
+ };
74
+ var GROUP = Symbol("row-group");
75
+ var expandData = (data, store, path2 = []) => {
76
+ const fields = store.props.rowGroup.fields;
77
+ const col = store.props.columns.find((e) => !e[store.internal]);
78
+ if (!col) return data;
79
+ if (fields.length == path2.length) return data;
80
+ const path = path2[path2.length - 1]?.[GROUP].path || [];
81
+ const obj = groupBy(data, (e) => e[fields[path.length]]);
82
+ return Object.keys(obj).flatMap((k) => {
83
+ const group = {
84
+ [col.id]: k,
85
+ [store.internal]: 1
86
+ };
87
+ const ps = [...path2, group];
88
+ group[GROUP] = {
89
+ path: [...path, k],
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];
96
+ });
97
+ };
98
+ delegateEvents(["dblclick"]);
99
+ export { RowGroupPlugin };
@@ -0,0 +1,32 @@
1
+ import { type Plugin } from '..';
2
+ declare module '../index' {
3
+ interface TableProps {
4
+ rowSelection?: {
5
+ enable?: boolean;
6
+ multiple?: boolean;
7
+ value?: any[];
8
+ selectable?: (row: any) => boolean;
9
+ onChange?: (selected: any[]) => void;
10
+ };
11
+ }
12
+ interface TableStore {
13
+ rowSelectionCol: TableColumn;
14
+ }
15
+ interface Commands {
16
+ rowSelector: ReturnType<typeof useSelector>;
17
+ }
18
+ }
19
+ 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?: never[]) => any;
31
+ };
32
+ export {};