intable 0.0.5 → 0.0.7

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 (169) hide show
  1. package/README.md +1 -2
  2. package/docs/index-BaMALNy6.css +1 -0
  3. package/docs/index-CDN48t9E.js +3 -0
  4. package/docs/index-Cc4RNkLY.css +1 -0
  5. package/docs/index-MRnbkYmU.js +3 -0
  6. package/docs/index.html +15 -0
  7. package/docs/vite.svg +1 -0
  8. package/index.html +14 -0
  9. package/package.json +30 -37
  10. package/packages/intable/README.md +379 -0
  11. package/packages/intable/package.json +51 -0
  12. package/packages/intable/src/assets/ClearFormat.svg +3 -0
  13. package/packages/intable/src/assets/Forms.svg +4 -0
  14. package/packages/intable/src/assets/MergeCell.svg +4 -0
  15. package/packages/intable/src/assets/SplitCell.svg +4 -0
  16. package/packages/intable/src/assets/gap.svg +3 -0
  17. package/packages/intable/src/assets/loading.svg +12 -0
  18. package/packages/intable/src/assets/paint.svg +9 -0
  19. package/packages/intable/src/assets/solid.svg +1 -0
  20. package/packages/intable/src/components/Columns.tsx +86 -0
  21. package/packages/intable/src/components/DocTree.tsx +36 -0
  22. package/packages/intable/src/components/Menu.tsx +109 -0
  23. package/packages/intable/src/components/Popover.tsx +55 -0
  24. package/packages/intable/src/components/RecycleList.tsx +99 -0
  25. package/packages/intable/src/components/Render.tsx +26 -0
  26. package/packages/intable/src/components/Split.tsx +56 -0
  27. package/packages/intable/src/components/Tree.tsx +115 -0
  28. package/packages/intable/src/components/utils.tsx +12 -0
  29. package/packages/intable/src/hooks/index.ts +200 -0
  30. package/packages/intable/src/hooks/useDir.ts +78 -0
  31. package/packages/intable/src/hooks/useSelector.ts +91 -0
  32. package/packages/intable/src/hooks/useSort.tsx +118 -0
  33. package/packages/intable/src/hooks/useVirtualizer.ts +180 -0
  34. package/packages/intable/src/index.tsx +481 -0
  35. package/packages/intable/src/plugins/CellChangeHighlightPlugin.tsx +5 -0
  36. package/packages/intable/src/plugins/CellMergePlugin.tsx +153 -0
  37. package/packages/intable/src/plugins/CellSelectionPlugin.tsx +175 -0
  38. package/packages/intable/src/plugins/CommandPlugin.tsx +74 -0
  39. package/packages/intable/src/plugins/CopyPastePlugin.tsx +63 -0
  40. package/packages/intable/src/plugins/DiffPlugin.tsx +107 -0
  41. package/packages/intable/src/plugins/DragPlugin.tsx +81 -0
  42. package/packages/intable/src/plugins/EditablePlugin.tsx +252 -0
  43. package/packages/intable/src/plugins/ExpandPlugin.tsx +80 -0
  44. package/packages/intable/src/plugins/HeaderGroup.tsx +289 -0
  45. package/packages/intable/src/plugins/HistoryPlugin.tsx +49 -0
  46. package/packages/intable/src/plugins/MenuPlugin.tsx +195 -0
  47. package/packages/intable/src/plugins/RenderPlugin/components.tsx +51 -0
  48. package/packages/intable/src/plugins/RenderPlugin/index.tsx +81 -0
  49. package/packages/intable/src/plugins/ResizePlugin.tsx +122 -0
  50. package/packages/intable/src/plugins/RowGroupPlugin.tsx +122 -0
  51. package/packages/intable/src/plugins/RowSelectionPlugin.tsx +65 -0
  52. package/packages/intable/src/plugins/TreePlugin.tsx +212 -0
  53. package/packages/intable/src/plugins/VirtualScrollPlugin.tsx +190 -0
  54. package/packages/intable/src/plugins/ZodValidatorPlugin.tsx +61 -0
  55. package/packages/intable/src/style.scss +244 -0
  56. package/{dist → packages/intable/src}/theme/antd.scss +14 -5
  57. package/{dist → packages/intable/src}/theme/element-plus.scss +6 -5
  58. package/packages/intable/src/tree.ts +13 -0
  59. package/packages/intable/src/types/auto-imports.d.ts +13 -0
  60. package/packages/intable/src/utils.ts +122 -0
  61. package/packages/intable/src/wc.tsx +35 -0
  62. package/packages/intable/src/web-component.ts +1 -0
  63. package/packages/react/package.json +31 -0
  64. package/packages/react/src/index.ts +44 -0
  65. package/packages/react/src/plugins/antd.ts +94 -0
  66. package/packages/react/src/style.scss +12 -0
  67. package/packages/react/src/types/auto-imports.d.ts +10 -0
  68. package/packages/vue/package.json +34 -0
  69. package/packages/vue/src/index.ts +63 -0
  70. package/packages/vue/src/plugins/element-plus.ts +69 -0
  71. package/packages/vue/src/style.scss +12 -0
  72. package/packages/vue/src/types/auto-imports.d.ts +10 -0
  73. package/pnpm-workspace.yaml +2 -0
  74. package/public/vite.svg +1 -0
  75. package/scripts/build.js +184 -0
  76. package/scripts/publish.js +95 -0
  77. package/src/assets/ClearFormat.svg +3 -0
  78. package/src/assets/Forms.svg +4 -0
  79. package/src/assets/MergeCell.svg +4 -0
  80. package/src/assets/SplitCell.svg +4 -0
  81. package/src/assets/gap.svg +3 -0
  82. package/src/assets/loading.svg +12 -0
  83. package/src/assets/paint.svg +9 -0
  84. package/src/assets/solid.svg +1 -0
  85. package/src/demo-vue.ts +54 -0
  86. package/src/demo.tsx +107 -0
  87. package/src/index.scss +105 -0
  88. package/src/styles/index.scss +172 -0
  89. package/src/types/auto-imports.d.ts +13 -0
  90. package/stats.html +4949 -0
  91. package/tsconfig.app.json +34 -0
  92. package/tsconfig.json +7 -0
  93. package/tsconfig.node.json +26 -0
  94. package/vite.config.ts +63 -0
  95. package/dist/__uno.css +0 -1
  96. package/dist/chevron-right.js +0 -6
  97. package/dist/components/Columns.d.ts +0 -3
  98. package/dist/components/Columns.js +0 -71
  99. package/dist/components/DocTree.d.ts +0 -4
  100. package/dist/components/DocTree.js +0 -32
  101. package/dist/components/Menu.d.ts +0 -1
  102. package/dist/components/Menu.js +0 -107
  103. package/dist/components/Popover.d.ts +0 -14
  104. package/dist/components/Popover.js +0 -41
  105. package/dist/components/Render.d.ts +0 -4
  106. package/dist/components/Render.js +0 -20
  107. package/dist/components/Split.d.ts +0 -15
  108. package/dist/components/Split.js +0 -76
  109. package/dist/components/Tree.d.ts +0 -37
  110. package/dist/components/Tree.js +0 -82
  111. package/dist/components/utils.d.ts +0 -3
  112. package/dist/components/utils.js +0 -8
  113. package/dist/hooks/index.d.ts +0 -40
  114. package/dist/hooks/index.js +0 -157
  115. package/dist/hooks/useDir.d.ts +0 -11
  116. package/dist/hooks/useDir.js +0 -42
  117. package/dist/hooks/useSelector.d.ts +0 -16
  118. package/dist/hooks/useSelector.js +0 -35
  119. package/dist/hooks/useSort.d.ts +0 -18
  120. package/dist/hooks/useSort.js +0 -83
  121. package/dist/hooks/useVirtualizer.d.ts +0 -25
  122. package/dist/hooks/useVirtualizer.js +0 -67
  123. package/dist/index.d.ts +0 -130
  124. package/dist/index.js +0 -347
  125. package/dist/loading.js +0 -6
  126. package/dist/plugins/CellChangeHighlightPlugin.d.ts +0 -2
  127. package/dist/plugins/CellChangeHighlightPlugin.js +0 -4
  128. package/dist/plugins/CellMergePlugin.d.ts +0 -12
  129. package/dist/plugins/CellMergePlugin.js +0 -2
  130. package/dist/plugins/CellSelectionPlugin.d.ts +0 -15
  131. package/dist/plugins/CellSelectionPlugin.js +0 -115
  132. package/dist/plugins/CommandPlugin.d.ts +0 -14
  133. package/dist/plugins/CommandPlugin.js +0 -12
  134. package/dist/plugins/CopyPastePlugin.d.ts +0 -14
  135. package/dist/plugins/CopyPastePlugin.js +0 -42
  136. package/dist/plugins/DiffPlugin.d.ts +0 -23
  137. package/dist/plugins/DiffPlugin.js +0 -56
  138. package/dist/plugins/DragPlugin.d.ts +0 -14
  139. package/dist/plugins/DragPlugin.js +0 -47
  140. package/dist/plugins/EditablePlugin.d.ts +0 -48
  141. package/dist/plugins/EditablePlugin.js +0 -141
  142. package/dist/plugins/ExpandPlugin.d.ts +0 -18
  143. package/dist/plugins/ExpandPlugin.js +0 -50
  144. package/dist/plugins/HistoryPlugin.d.ts +0 -10
  145. package/dist/plugins/HistoryPlugin.js +0 -30
  146. package/dist/plugins/MenuPlugin.d.ts +0 -18
  147. package/dist/plugins/MenuPlugin.js +0 -107
  148. package/dist/plugins/RenderPlugin/components.d.ts +0 -5
  149. package/dist/plugins/RenderPlugin/components.js +0 -87
  150. package/dist/plugins/RenderPlugin/index.d.ts +0 -30
  151. package/dist/plugins/RenderPlugin/index.js +0 -49
  152. package/dist/plugins/ResizePlugin.d.ts +0 -27
  153. package/dist/plugins/ResizePlugin.js +0 -81
  154. package/dist/plugins/RowGroupPlugin.d.ts +0 -17
  155. package/dist/plugins/RowGroupPlugin.js +0 -83
  156. package/dist/plugins/RowSelectionPlugin.d.ts +0 -20
  157. package/dist/plugins/RowSelectionPlugin.js +0 -42
  158. package/dist/plugins/VirtualScrollPlugin.d.ts +0 -15
  159. package/dist/plugins/VirtualScrollPlugin.js +0 -96
  160. package/dist/plus.js +0 -6
  161. package/dist/style.css +0 -3
  162. package/dist/types/auto-imports.d.js +0 -0
  163. package/dist/utils.d.ts +0 -30
  164. package/dist/utils.js +0 -70
  165. package/dist/wc.d.ts +0 -1
  166. package/dist/wc.js +0 -21
  167. package/dist/web-component.d.ts +0 -1
  168. package/dist/web-component.js +0 -2
  169. package/dist/x.js +0 -6
package/docs/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/index.html ADDED
@@ -0,0 +1,14 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>intable</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/demo.tsx"></script>
12
+ <!-- <script type="module" src="/src/demo-vue.ts"></script> -->
13
+ </body>
14
+ </html>
package/package.json CHANGED
@@ -1,50 +1,43 @@
1
1
  {
2
2
  "name": "intable",
3
- "version": "0.0.5",
4
- "license": "MIT",
3
+ "version": "0.0.7",
5
4
  "type": "module",
6
- "files": [
7
- "dist"
8
- ],
9
- "main": "./dist/index.js",
10
- "module": "./dist/index.js",
11
- "exports": {
12
- ".": "./dist/index.js",
13
- "./theme/*": "./dist/theme/*",
14
- "./*": {
15
- "import": "./dist/*.js",
16
- "types": "./dist/*.d.ts"
17
- }
18
- },
19
5
  "dependencies": {
20
- "@floating-ui/dom": "^1.7.4",
21
- "@solid-primitives/bounds": "^0.1.3",
22
- "@solid-primitives/deep": "^0.3.3",
23
- "@solid-primitives/event-listener": "^2.4.3",
24
- "@solid-primitives/history": "^0.2.2",
25
- "@solid-primitives/keyboard": "^1.3.3",
26
- "@solid-primitives/media": "^2.3.3",
27
- "@solid-primitives/memo": "^1.4.3",
28
- "@solid-primitives/mutation-observer": "^1.2.2",
29
- "@solid-primitives/pointer": "^0.3.3",
30
- "@solid-primitives/props": "^3.2.2",
31
- "@solid-primitives/resize-observer": "^2.1.3",
32
- "@solid-primitives/scroll": "^2.1.3",
33
- "@solid-primitives/storage": "^4.3.3",
34
- "@solid-primitives/utils": "^6.3.2",
35
- "@tanstack/solid-virtual": "^3.13.12",
36
6
  "es-toolkit": "^1.39.10",
37
- "floating-ui-solid": "^1.0.63",
38
- "solid-element": "^1.9.1",
39
7
  "solid-js": "^1.9.9",
40
- "tinykeys": "^3.0.0",
41
- "uuid": "^13.0.0"
8
+ "@intable/vue": "^0.0.7",
9
+ "intable": "^0.0.7"
10
+ },
11
+ "devDependencies": {
12
+ "@babel/plugin-syntax-typescript": "^7.27.1",
13
+ "@iconify-json/lucide": "^1.2.63",
14
+ "@iconify-json/solar": "^1.2.4",
15
+ "@iconify-json/vscode-icons": "^1.2.29",
16
+ "@types/node": "^25.0.8",
17
+ "@unocss/transformer-directives": "^66.4.2",
18
+ "babel-plugin-solid-undestructure": "^1.1.0",
19
+ "rollup-plugin-visualizer": "^6.0.3",
20
+ "sass": "^1.90.0",
21
+ "tinyglobby": "^0.2.15",
22
+ "typescript": "~5.8.3",
23
+ "undestructure-macros": "^0.0.1",
24
+ "unocss": "^66.4.2",
25
+ "unplugin-auto-import": "^19.3.0",
26
+ "unplugin-icons": "^22.2.0",
27
+ "vite": "npm:rolldown-vite@7.1.12",
28
+ "vite-plugin-lib-inject-css": "^2.2.2",
29
+ "vite-plugin-solid": "^2.11.8",
30
+ "vue": "^3.5.24"
42
31
  },
43
32
  "publishConfig": {
44
33
  "access": "public",
45
34
  "registry": "https://registry.npmjs.org/"
46
35
  },
47
- "devDependencies": {
48
- "diff": "^8.0.2"
36
+ "scripts": {
37
+ "dev": "vite",
38
+ "build": "vite build",
39
+ "build:lib": "node scripts/build.js",
40
+ "publish:lib": "pnpm build:lib && node scripts/publish.js",
41
+ "preview": "vite preview"
49
42
  }
50
43
  }
package/packages/intable/README.md ADDED
@@ -0,0 +1,379 @@
1
+ ---
2
+ name: intable
3
+ description: A high-performance, plugin-based Excel-like table component for SolidJS with virtual scroll, cell editing, validation, copy/paste, row grouping, tree data, column/row drag, merge cells, diff view, and multi-framework support (Vue, React).
4
+ ---
5
+
6
+ # intable
7
+
8
+ ## 特征
9
+
10
+ - 类似 Excel 的表格组件
11
+ - 单元格多选、复制、粘贴
12
+ - 单元格编辑、数据校验
13
+ - 列宽、行高可调整
14
+ - 列、行可拖拽
15
+ - 虚拟滚动
16
+ - 数据分组
17
+ - 行展开
18
+ - 树嵌套
19
+ - 插件易扩展
20
+ - 多框架支持（Vue、React）
21
+ - 多 UI库支持（Antd、ElementPlus）
22
+
23
+ ## 快速开始
24
+
25
+ <details>
26
+ <summary>solid-js</summary>
27
+
28
+ **安装**
29
+
30
+ ```sh
31
+ pnpm add intable
32
+ ```
33
+
34
+ **使用**
35
+
36
+ ```jsx
37
+ import Intable from 'intable'
38
+
39
+ const App = () => {
40
+ const columns = [
41
+ { id: 'name', name: '名称' },
42
+ { id: 'date', name: '日期' },
43
+ { id: 'address', name: '地址' },
44
+ ]
45
+
46
+ const data = [
47
+ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
48
+ { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
49
+ { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
50
+ { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
51
+ ]
52
+
53
+ return <Intable data={data} columns={columns} />
54
+ }
55
+ ```
56
+ </details>
57
+
58
+ <details>
59
+ <summary>vue</summary>
60
+
61
+ **安装**
62
+
63
+ ```sh
64
+ pnpm add @intable/vue
65
+ ```
66
+
67
+ **使用**
68
+
69
+ ```html
70
+ <template>
71
+ <Intable :data="data" :columns="columns" />
72
+ </template>
73
+
74
+ <script setup>
75
+ import Intable from '@intable/vue'
76
+
77
+ const columns = [
78
+ { id: 'name', name: '名称' },
79
+ { id: 'date', name: '日期' },
80
+ { id: 'address', name: '地址' },
81
+ ]
82
+
83
+ const data = [
84
+ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
85
+ { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
86
+ { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
87
+ { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
88
+ ]
89
+ </script>
90
+ ```
91
+ </details>
92
+
93
+ <details>
94
+ <summary>react</summary>
95
+
96
+ **安装**
97
+
98
+ ```sh
99
+ pnpm add @intable/react
100
+ ```
101
+
102
+ **使用**
103
+
104
+ ```jsx
105
+ import Intable from '@intable/react'
106
+
107
+ const App = () => {
108
+ const columns = [
109
+ { id: 'name', name: '名称' },
110
+ { id: 'date', name: '日期' },
111
+ { id: 'address', name: '地址' },
112
+ ]
113
+
114
+ const data = [
115
+ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
116
+ { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
117
+ { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
118
+ { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
119
+ ]
120
+
121
+ return <Intable data={data} columns={columns} />
122
+ }
123
+ ```
124
+ </details>
125
+
126
+ ## Props
127
+
128
+ | 属性名 | 描述 | 类型 | 默认值 |
129
+ | ------------ | ------------ | ------------------------------- | ------- |
130
+ | data | 数据 | any[] | |
131
+ | columns | 展示列 | Column[] | |
132
+ | rowKey | 行唯一键字段 | string | `'id'` |
133
+ | index | 显示序号 | boolean | false |
134
+ | border | 显示纵向边框 | boolean | false |
135
+ | stickyHeader | 表头吸顶 | boolean | false |
136
+ | size | 尺寸 | `'large' \| 'default' \| 'small'` | — |
137
+ | plugins | 插件列表 | Plugin[] | `[]` |
138
+
139
+ ## Column
140
+
141
+ | 属性名 | 描述 | 类型 |
142
+ | -------- | ---------------------- | ----------------------------- |
143
+ | id | 字段名，对应数据 key | string \| symbol |
144
+ | name | 表头显示名称 | string |
145
+ | width | 列宽（px） | number |
146
+ | fixed | 固定列 | `'left' \| 'right'` |
147
+ | render | 自定义渲染器 | `string \| Render` |
148
+ | enum | 枚举映射（用于渲染） | `Record<string,any> \| {label?,value}[]` |
149
+ | editable | 是否可编辑 | boolean |
150
+ | editor | 编辑器类型或自定义实现 | `string \| Editor` |
151
+ | resizable| 是否允许调整列宽 | boolean |
152
+
153
+ ## 插件
154
+
155
+ 插件通过 `plugins` 属性传入，部分插件需从对应路径手动引入。
156
+
157
+ ---
158
+
159
+ ### VirtualScrollPlugin — 虚拟滚动
160
+
161
+ 大数据量下只渲染可见行列，显著提升性能。
162
+
163
+ ```jsx
164
+ import { VirtualScrollPlugin } from 'intable/plugins/VirtualScrollPlugin'
165
+
166
+ <Intable
167
+ plugins={[VirtualScrollPlugin]}
168
+ virtual={{
169
+ y: { estimateSize: () => 40, overscan: 10 }, // 行虚拟化参数
170
+ x: { overscan: 5 }, // 列虚拟化参数
171
+ }}
172
+ />
173
+ ```
174
+
175
+ ---
176
+
177
+ ### EditablePlugin — 单元格编辑
178
+
179
+ 在 Column 上设置 `editable: true` 开启单元格编辑，双击或输入字符进入编辑状态。
180
+
181
+ ```jsx
182
+ const columns = [
183
+ { id: 'name', name: '姓名', editable: true },
184
+ { id: 'age', name: '年龄', editable: true, editor: 'number' },
185
+ { id: 'type', name: '类型', editable: true, editor: 'select', enum: { 1: 'A', 2: 'B' } },
186
+ { id: 'date', name: '日期', editable: true, editor: 'date' },
187
+ ]
188
+
189
+ <Intable columns={columns} onDataChange={setData} />
190
+ ```
191
+
192
+ 内置编辑器类型：`text`（默认）、`number`、`select`、`date`、`time`、`datetime`、`switch`、`checkbox`、`rate`、`color`、`file`。
193
+
194
+ 搭配 UI 库插件可直接使用对应组件：
195
+ - **Antd**：`import { AntdPlugin } from '@intable/react/plugins/antd'`
196
+ - **Element Plus**：`import { ElementPlusPlugin } from '@intable/vue/plugins/element-plus'`
197
+
198
+ ---
199
+
200
+ ### RowSelectionPlugin — 行选择
201
+
202
+ ```jsx
203
+ <Intable
204
+ rowSelection={{
205
+ enable: true,
206
+ multiple: true, // 多选，默认 true
207
+ value: selectedRows, // 受控选中值
208
+ selectable: row => row.age > 18, // 可选条件
209
+ onChange: rows => setSelected(rows),
210
+ }}
211
+ />
212
+ ```
213
+
214
+ ---
215
+
216
+ ### ExpandPlugin — 行展开
217
+
218
+ 点击行首箭头展开自定义内容区域。
219
+
220
+ ```jsx
221
+ <Intable
222
+ expand={{
223
+ enable: true,
224
+ render: ({ data, y }) => <div>详情：{data.name}</div>,
225
+ }}
226
+ />
227
+ ```
228
+
229
+ ---
230
+
231
+ ### RowGroupPlugin — 行分组
232
+
233
+ 按指定字段对行进行分级树形分组，支持展开/折叠。
234
+
235
+ ```jsx
236
+ <Intable
237
+ rowGroup={{ fields: ['type', 'subType'] }}
238
+ />
239
+ ```
240
+
241
+ ---
242
+
243
+ ### TreePlugin — 树形数据
244
+
245
+ 渲染嵌套 `children` 字段的树状数据，支持展开/折叠，自动缩进。
246
+
247
+ ```jsx
248
+ const data = [
249
+ { id: 1, name: '总部', children: [
250
+ { id: 2, name: '研发部' },
251
+ { id: 3, name: '产品部', children: [
252
+ { id: 4, name: '设计组' },
253
+ ]},
254
+ ]},
255
+ ]
256
+
257
+ <Intable
258
+ tree={{ children: 'children' }} // 子节点字段名，默认 'children'
259
+ data={data}
260
+ columns={[{ id: 'name', name: '名称' }]}
261
+ />
262
+ ```
263
+
264
+ ---
265
+
266
+ ### ResizePlugin — 调整列宽 / 行高
267
+
268
+ 拖动表头右侧边框调整列宽，拖动行底部边框调整行高。
269
+
270
+ ```jsx
271
+ <Intable
272
+ resizable={{
273
+ col: { enable: true, min: 60, max: 600 },
274
+ row: { enable: true, min: 28, max: 200 },
275
+ }}
276
+ onColumnsChange={cols => setColumns(cols)}
277
+ />
278
+ ```
279
+
280
+ 也可在单列上单独控制：
281
+
282
+ ```js
283
+ { id: 'name', name: '姓名', resizable: false } // 禁止该列拖拽
284
+ ```
285
+
286
+ ---
287
+
288
+ ### DragPlugin — 列 / 行拖拽排序
289
+
290
+ 长按后拖拽列标题或行首单元格可重新排序。
291
+
292
+ ```jsx
293
+ <Intable
294
+ colDrag={true} // 开启列拖拽
295
+ rowDrag={true} // 开启行拖拽
296
+ onColumnsChange={cols => setColumns(cols)}
297
+ />
298
+ ```
299
+
300
+ ---
301
+
302
+ ### HistoryPlugin — 撤销 / 重做
303
+
304
+ 记录数据变更历史，支持 `Ctrl+Z` / `Ctrl+Y`。
305
+
306
+ ```jsx
307
+ import { HistoryPlugin } from 'intable/plugins/HistoryPlugin'
308
+
309
+ <Intable plugins={[HistoryPlugin]} />
310
+ ```
311
+
312
+ 通过命令调用：
313
+ ```js
314
+ store.history.undo()
315
+ store.history.redo()
316
+ ```
317
+
318
+ ---
319
+
320
+ ### DiffPlugin — 数据差异对比
321
+
322
+ 将当前数据与快照进行比较，高亮新增/删除/修改行，支持提交。
323
+
324
+ ```jsx
325
+ import { DiffPlugin } from 'intable/plugins/DiffPlugin'
326
+
327
+ <Intable
328
+ plugins={[DiffPlugin]}
329
+ diff={{
330
+ added: true, // 高亮新增行，默认 true
331
+ removed: true, // 高亮删除行，默认 true
332
+ changed: true, // 高亮修改行，默认 true
333
+ onCommit: (data, { added, removed, changed }) => save(data),
334
+ }}
335
+ />
336
+ ```
337
+
338
+ `Ctrl+S` 触发提交，或通过命令：
339
+ ```js
340
+ store.commands.diffCommit()
341
+ ```
342
+
343
+ ---
344
+
345
+ ### CellMergePlugin — 单元格合并
346
+
347
+ 通过 `merge` 回调或 Column 的 `mergeRow` 快捷属性合并相邻单元格。
348
+
349
+ ```jsx
350
+ // 方式一：全局 merge 回调
351
+ <Intable
352
+ merge={(row, col, y, x) => {
353
+ if (col.id === 'name') {
354
+ let rowspan = 1
355
+ while (data[y + rowspan]?.name === row.name) rowspan++
356
+ return rowspan > 1 ? { rowspan } : null
357
+ }
358
+ }}
359
+ />
360
+
361
+ // 方式二：列级 mergeRow 快捷属性（自动合并相邻等值行）
362
+ const columns = [
363
+ { id: 'type', name: '类型', mergeRow: true },
364
+ { id: 'name', name: '名称' },
365
+ ]
366
+ <Intable columns={columns} />
367
+ ```
368
+
369
+ ---
370
+
371
+ ### CellSelectionPlugin — 单元格多选
372
+
373
+ 鼠标拖拽或 `Shift+点击` 选择矩形区域，箭头键移动焦点。
374
+
375
+ ---
376
+
377
+ ### CopyPastePlugin — 复制粘贴
378
+
379
+ `Ctrl+C` 复制选中区域为 TSV 格式，`Ctrl+V` 粘贴。
package/packages/intable/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "intable",
3
+ "version": "0.0.7",
4
+ "license": "MIT",
5
+ "type": "module",
6
+ "files": [
7
+ "dist"
8
+ ],
9
+ "main": "./dist/index.js",
10
+ "module": "./dist/index.js",
11
+ "exports": {
12
+ ".": "./dist/index.js",
13
+ "./theme/*": "./dist/theme/*",
14
+ "./*": {
15
+ "import": "./dist/*.js",
16
+ "types": "./dist/*.d.ts"
17
+ }
18
+ },
19
+ "dependencies": {
20
+ "@floating-ui/dom": "^1.7.4",
21
+ "@solid-primitives/bounds": "^0.1.3",
22
+ "@solid-primitives/deep": "^0.3.3",
23
+ "@solid-primitives/event-listener": "^2.4.3",
24
+ "@solid-primitives/history": "^0.2.2",
25
+ "@solid-primitives/keyboard": "^1.3.3",
26
+ "@solid-primitives/media": "^2.3.3",
27
+ "@solid-primitives/memo": "^1.4.3",
28
+ "@solid-primitives/mutation-observer": "^1.2.2",
29
+ "@solid-primitives/pointer": "^0.3.3",
30
+ "@solid-primitives/props": "^3.2.2",
31
+ "@solid-primitives/resize-observer": "^2.1.3",
32
+ "@solid-primitives/scroll": "^2.1.3",
33
+ "@solid-primitives/storage": "^4.3.3",
34
+ "@solid-primitives/utils": "^6.3.2",
35
+ "@tanstack/solid-virtual": "^3.13.12",
36
+ "es-toolkit": "^1.39.10",
37
+ "floating-ui-solid": "^1.0.63",
38
+ "solid-element": "^1.9.1",
39
+ "solid-js": "^1.9.9",
40
+ "tinykeys": "^3.0.0",
41
+ "uuid": "^13.0.0",
42
+ "zod": "^4.3.6"
43
+ },
44
+ "publishConfig": {
45
+ "access": "public",
46
+ "registry": "https://registry.npmjs.org/"
47
+ },
48
+ "devDependencies": {
49
+ "diff": "^8.0.2"
50
+ }
51
+ }
package/packages/intable/src/assets/ClearFormat.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="currentColor" d="m14.031 1.888l9.657 9.657l-8.345 8.345l-.27.272H20v2H6.748L.253 15.667zm.322 16.164l6.507-6.507l-6.829-6.828l-6.828 6.828l6.828 6.828l.32-.323zM5.788 12.96l-2.707 2.707l4.495 4.495h4.68l.365-.37z" />
3
+ </svg>
package/packages/intable/src/assets/Forms.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
3
+ d="M12 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3m7-14h7a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7M5 7H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1m12-5h.01M13 12h.01" />
4
+ </svg>
package/packages/intable/src/assets/MergeCell.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="currentColor"
3
+ d="M5 10H3V4h8v2H5zm14 8h-6v2h8v-6h-2zM5 18v-4H3v6h8v-2zM21 4h-8v2h6v4h2zM8 13v2l3-3l-3-3v2H3v2zm8-2V9l-3 3l3 3v-2h5v-2z" />
4
+ </svg>
package/packages/intable/src/assets/SplitCell.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="currentColor"
3
+ d="M19 14h2v6H3v-6h2v4h14zM3 4v6h2V6h14v4h2V4zm8 7v2H8v2l-3-3l3-3v2zm5 0V9l3 3l-3 3v-2h-3v-2z" />
4
+ </svg>
package/packages/intable/src/assets/gap.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <path fill="currentColor" d="M19 5h-4v14h4v-2h-2V7h2zM5 5h4v14H5v-2h2V7H5zm8 2v10h-2V7z" />
3
+ </svg>
package/packages/intable/src/assets/loading.svg ADDED
@@ -0,0 +1,12 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <g>
3
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".14" />
4
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".29" transform="rotate(30 12 12)" />
5
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".43" transform="rotate(60 12 12)" />
6
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".57" transform="rotate(90 12 12)" />
7
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".71" transform="rotate(120 12 12)" />
8
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity=".86" transform="rotate(150 12 12)" />
9
+ <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
10
+ <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
11
+ </g>
12
+ </svg>
package/packages/intable/src/assets/paint.svg ADDED
@@ -0,0 +1,9 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
2
+ <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
3
+ color="currentColor">
4
+ <path
5
+ d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10c.842 0 2 .116 2-1c0-.609-.317-1.079-.631-1.546c-.46-.683-.917-1.359-.369-2.454c.667-1.333 1.778-1.333 3.482-1.333c.851 0 1.851 0 3.018-.167c2.101-.3 2.5-1.592 2.5-3.5M7 15.002L7.009 15" />
6
+ <circle cx="9.5" cy="8.5" r="1.5" />
7
+ <circle cx="16.5" cy="9.5" r="1.5" />
8
+ </g>
9
+ </svg>
package/packages/intable/src/assets/solid.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
package/packages/intable/src/components/Columns.tsx ADDED
@@ -0,0 +1,86 @@
1
+ import { createEffect, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from 'solid-js'
2
+ import { render } from 'solid-js/web'
3
+ import { createMutationObserver } from '@solid-primitives/mutation-observer'
4
+ import { createElementBounds } from '@solid-primitives/bounds'
5
+ import { clamp, sum } from 'es-toolkit'
6
+ import { usePointerDrag } from '../hooks'
7
+
8
+ export const Columns = (attrs: Partial<{ gap: number }>) => {
9
+ const [_, props] = splitProps(mergeProps({ gap: 0 }, attrs), ['children'])
10
+
11
+ let ref!: HTMLElement
12
+
13
+ const [children, setChildren] = createSignal<HTMLElement[]>([])
14
+ const cols = createMemo(() => children().length)
15
+
16
+ const update = () => setChildren([...ref!.querySelectorAll('& > [tiptap-is="column"]')])
17
+ onMount(() => update())
18
+ createMutationObserver(() => ref, { childList: true }, () => {
19
+ update()
20
+ container.parentElement || ref.insertBefore(container, ref.firstChild)
21
+ })
22
+
23
+ const container = <div style='position: absolute; z-index: 1' /> as HTMLElement
24
+ const bounds2 = createElementBounds(() => container, { trackScroll: false })
25
+ createEffect(() => {
26
+ ref.insertBefore(container, ref.firstChild)
27
+ onCleanup(() => container.remove())
28
+ })
29
+
30
+ createEffect(() => {
31
+ children().forEach((el, i) => {
32
+ if (i == children().length - 1) return
33
+ const dispose = render(() => <Hand index={i} gap={props.gap} reference={el} bounds2={bounds2} onAdd={props.onAdd} />, container)
34
+ onCleanup(dispose)
35
+ })
36
+ const cw = ref.offsetWidth
37
+ const tgap = (cols() - 1) * props.gap
38
+ const meanw = (cw - tgap) / cols()
39
+ children().forEach(el => el.style.width ||= `${meanw}px`)
40
+ const ws = children().map(el => el.offsetWidth)
41
+ const sumw = sum(ws) + tgap
42
+ const sgap = tgap / cols()
43
+ children().forEach((el, i) => el.style.width = `calc(${(ws[i] + sgap) / sumw * 100}% - ${sgap}px)`)
44
+ })
45
+
46
+ return (
47
+ <div ref={ref} style={`display: flex; gap: ${props.gap}px;`} {...props} cols={cols()}>
48
+ {attrs.children}
49
+ </div>
50
+ )
51
+ }
52
+
53
+ const Hand = (props) => {
54
+ const bounds = createElementBounds(props.reference, { trackScroll: false })
55
+
56
+ const style = createMemo(() => (`
57
+ position: absolute;
58
+ width: ${props.gap}px;
59
+ height: ${bounds.height}px;
60
+ transform: translate(${bounds.right - props.bounds2.left}px, ${bounds.top - props.bounds2.top}px);
61
+ `))
62
+
63
+ let el: HTMLElement
64
+ usePointerDrag(() => el, {
65
+ start(e, move) {
66
+ const col = props.reference!
67
+ const container = col.parentElement!, cw = container.offsetWidth
68
+ const [cols, gap] = [+container.getAttribute('cols')!, +container.getAttribute('gap')!]
69
+ const [left, right] = [col, col.nextElementSibling as HTMLElement]
70
+ const [lw, rw] = [left?.offsetWidth || 0, right?.offsetWidth || 0]
71
+ const minw = cw * .05, maxw = lw + rw - minw
72
+ const sgap = (cols - 1) * gap / cols
73
+
74
+ move((e, { ox }) => {
75
+ left && (left.style.width = `calc(${(clamp(lw + ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
76
+ right && (right.style.width = `calc(${(clamp(rw - ox, minw, maxw) + sgap) / cw * 100}% - ${sgap}px)`)
77
+ })
78
+ },
79
+ })
80
+
81
+ return (
82
+ <div ref={el} ref={props.ref} class='col-hand' style={style()} contenteditable='false'>
83
+ {props.onAdd && <div class='dot' onClick={() => props.onAdd(props.index)} on:pointerdown={{ handleEvent: e => e.stopPropagation() }} />}
84
+ </div>
85
+ )
86
+ }