intable 0.0.1 → 0.0.3

package/README.md

@@ -7,16 +7,126 @@
 - 单元格编辑、数据校验
 - 列宽、行高可拖动
 - 虚拟滚动
-- 历史回滚
-<!-- - 合并单元格 -->
-<!-- - 表头分组 -->
 - 数据分组
 - 行展开
-<!-- - tree -->
-<!-- - 过滤、排序 -->
-- Diff 数据对比
-<!-- - 导出 Excel -->
 - 插件易扩展
 - 多框架支持（Vue、React）
+- 多 UI库支持（Antd、ElementPlus）
 
-## 快速开始
+## 快速开始
+
+<details>
+<summary>solid-js</summary>
+
+**安装**
+
+```sh
+pnpm add intable
+```
+
+**使用**
+
+```jsx
+import { render } from 'solid-js/web'
+import Intable from 'intable'
+
+const App = () => {
+  const columns = [
+    { id: 'name', name: '名称' },
+    { id: 'date', name: '日期' },
+    { id: 'address', name: '地址' },
+  ]
+
+  const data = [
+    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  ]
+
+  return <Intable data={data} columns={columns} />
+}
+
+render(() => <App />)
+```
+</details>
+
+<details>
+<summary>vue</summary>
+
+**安装**
+
+```sh
+pnpm add @intable/react
+```
+
+**使用**
+
+```html
+<template>
+  <Intable data={data} columns={columns} />
+</template>
+
+<script setup>
+import Intable from '@intable/vue'
+
+const columns = [
+  { id: 'name', name: '名称' },
+  { id: 'date', name: '日期' },
+  { id: 'address', name: '地址' },
+]
+
+const data = [
+  { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+]
+</script>
+```
+</details>
+
+<details>
+<summary>react</summary>
+
+**安装**
+
+```sh
+pnpm add @intable/react
+```
+
+**使用**
+
+```jsx
+import Intable from 'intable'
+
+const App = () => {
+  const columns = [
+    { id: 'name', name: '名称' },
+    { id: 'date', name: '日期' },
+    { id: 'address', name: '地址' },
+  ]
+
+  const data = [
+    { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+    { date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  ]
+
+  return <Intable data={data} columns={columns} />
+}
+```
+</details>
+
+## Props
+
+| 属性名       | 描述         | 类型                            | 默认值 |
+| ------------ | ------------ | ------------------------------- | ------ |
+| data         | 数据         | any[]                           |        |
+| columns      | 展示列       | Column[]                        |        |
+| index        | 显示序号     | bool                            | false  |
+| border       | 显示纵向边框 | bool                            | false  |
+| stickyHeader | 表头吸顶     | bool                            | false  |
+| size         | 尺寸         | 'large' \| 'default' \| 'small' | false  |
+| rowSelection | 启用行选择   | [@see]()                        | false  |

package/dist/__uno.css

@@ -0,0 +1 @@
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*, ::before, ::after, ::backdrop{--un-bg-opacity:100%;--un-content:"";--un-translate-x:initial;--un-translate-y:initial;--un-translate-z:initial;--un-text-opacity:100%;--un-border-opacity:100%;--un-space-y-reverse:initial;--un-space-x-reverse:initial;--un-outline-style:solid;--un-outline-opacity:100%;--un-leading:initial;}}@property --un-leading{syntax:"*";inherits:false;}@property --un-outline-style{syntax:"*";inherits:false;initial-value:solid;}@property --un-outline-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-translate-x{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-y{syntax:"*";inherits:false;initial-value:0;}@property --un-translate-z{syntax:"*";inherits:false;initial-value:0;}:root, :host {--spacing: 0.25rem;--colors-gray-DEFAULT: oklch(70.7% 0.022 261.325);--text-sm-fontSize: 0.875rem;--text-sm-lineHeight: 1.25rem;--radius-sm: 0.25rem;--colors-blue-DEFAULT: oklch(70.7% 0.165 254.624);--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono);}/*  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)  2. Remove default margins and padding  3. Reset all borders.*/*,::after,::before,::backdrop,::file-selector-button {  box-sizing: border-box; /* 1 */  margin: 0; /* 2 */  padding: 0; /* 2 */  border: 0 solid; /* 3 */}/*  1. Use a consistent sensible line-height in all browsers.  2. Prevent adjustments of font size after orientation changes in iOS.  3. Use a more readable tab size.  4. Use the user's configured `sans` font-family by default.  5. Use the user's configured `sans` font-feature-settings by default.  6. Use the user's configured `sans` font-variation-settings by default.  7. Disable tap highlights on iOS.*/html,:host {  line-height: 1.5; /* 1 */  -webkit-text-size-adjust: 100%; /* 2 */  tab-size: 4; /* 3 */  font-family: var(    --default-font-family,    ui-sans-serif,    system-ui,    sans-serif,    'Apple Color Emoji',    'Segoe UI Emoji',    'Segoe UI Symbol',    'Noto Color Emoji'  ); /* 4 */  font-feature-settings: var(--default-font-featureSettings, normal); /* 5 */  font-variation-settings: var(--default-font-variationSettings, normal); /* 6 */  -webkit-tap-highlight-color: transparent; /* 7 */}/*  1. Add the correct height in Firefox.  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)  3. Reset the default border style to a 1px solid border.*/hr {  height: 0; /* 1 */  color: inherit; /* 2 */  border-top-width: 1px; /* 3 */}/*  Add the correct text decoration in Chrome, Edge, and Safari.*/abbr:where([title]) {  -webkit-text-decoration: underline dotted;  text-decoration: underline dotted;}/*  Remove the default font size and weight for headings.*/h1,h2,h3,h4,h5,h6 {  font-size: inherit;  font-weight: inherit;}/*  Reset links to optimize for opt-in styling instead of opt-out.*/a {  color: inherit;  -webkit-text-decoration: inherit;  text-decoration: inherit;}/*  Add the correct font weight in Edge and Safari.*/b,strong {  font-weight: bolder;}/*  1. Use the user's configured `mono` font-family by default.  2. Use the user's configured `mono` font-feature-settings by default.  3. Use the user's configured `mono` font-variation-settings by default.  4. Correct the odd `em` font sizing in all browsers.*/code,kbd,samp,pre {  font-family: var(    --default-monoFont-family,    ui-monospace,    SFMono-Regular,    Menlo,    Monaco,    Consolas,    'Liberation Mono',    'Courier New',    monospace  ); /* 1 */  font-feature-settings: var(--default-monoFont-featureSettings, normal); /* 2 */  font-variation-settings: var(--default-monoFont-variationSettings, normal); /* 3 */  font-size: 1em; /* 4 */}/*  Add the correct font size in all browsers.*/small {  font-size: 80%;}/*  Prevent `sub` and `sup` elements from affecting the line height in all browsers.*/sub,sup {  font-size: 75%;  line-height: 0;  position: relative;  vertical-align: baseline;}sub {  bottom: -0.25em;}sup {  top: -0.5em;}/*  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)  3. Remove gaps between table borders by default.*/table {  text-indent: 0; /* 1 */  border-color: inherit; /* 2 */  border-collapse: collapse; /* 3 */}/*  Use the modern Firefox focus style for all focusable elements.*/:-moz-focusring {  outline: auto;}/*  Add the correct vertical alignment in Chrome and Firefox.*/progress {  vertical-align: baseline;}/*  Add the correct display in Chrome and Safari.*/summary {  display: list-item;}/*  Make lists unstyled by default.*/ol,ul,menu {  list-style: none;}/*  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)      This can trigger a poorly considered lint error in some tools but is included by design.*/img,svg,video,canvas,audio,iframe,embed,object {  display: block; /* 1 */  vertical-align: middle; /* 2 */}/*  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)*/img,video {  max-width: 100%;  height: auto;}/*  1. Inherit font styles in all browsers.  2. Remove border radius in all browsers.  3. Remove background color in all browsers.  4. Ensure consistent opacity for disabled states in all browsers.*/button,input,select,optgroup,textarea,::file-selector-button {  font: inherit; /* 1 */  font-feature-settings: inherit; /* 1 */  font-variation-settings: inherit; /* 1 */  letter-spacing: inherit; /* 1 */  color: inherit; /* 1 */  border-radius: 0; /* 2 */  background-color: transparent; /* 3 */  opacity: 1; /* 4 */}/*  Restore default font weight.*/:where(select:is([multiple], [size])) optgroup {  font-weight: bolder;}/*  Restore indentation.*/:where(select:is([multiple], [size])) optgroup option {  padding-inline-start: 20px;}/*  Restore space after button.*/::file-selector-button {  margin-inline-end: 4px;}/*  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)*/::placeholder {  opacity: 1;}/*  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)*/@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or  (contain-intrinsic-size: 1px) /* Safari 17+ */ {  ::placeholder {    color: color-mix(in oklab, currentcolor 50%, transparent);  }}/*  Prevent resizing textareas horizontally by default.*/textarea {  resize: vertical;}/*  Remove the inner padding in Chrome and Safari on macOS.*/::-webkit-search-decoration {  -webkit-appearance: none;}/*  1. Ensure date/time inputs have the same height when empty in iOS Safari.  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.*/::-webkit-date-and-time-value {  min-height: 1lh; /* 1 */  text-align: inherit; /* 2 */}/*  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.*/::-webkit-datetime-edit {  display: inline-flex;}/*  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.*/::-webkit-datetime-edit-fields-wrapper {  padding: 0;}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {  padding-block: 0;}/*  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)*/::-webkit-calendar-picker-indicator {  line-height: 1;}/*  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)*/:-moz-ui-invalid {  box-shadow: none;}/*  Correct the inability to style the border radius in iOS Safari.*/button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {  appearance: button;}/*  Correct the cursor style of increment and decrement buttons in Safari.*/::-webkit-inner-spin-button,::-webkit-outer-spin-button {  height: auto;}/*  Make elements with the HTML hidden attribute stay hidden by default.*/[hidden]:where(:not([hidden~='until-found'])) {  display: none !important;}.container{width:100%;}.aic{align-items:center;}@media (min-width: 40rem){.container{max-width:40rem;}}@media (min-width: 48rem){.container{max-width:48rem;}}@media (min-width: 64rem){.container{max-width:64rem;}}@media (min-width: 80rem){.container{max-width:80rem;}}@media (min-width: 96rem){.container{max-width:96rem;}}.text-3\.5{font-size:0.875rem;}.lh-\[1\]{--un-leading:1;line-height:1;}.m9{margin:calc(var(--spacing) * 9);}.mx-1{margin-inline:calc(var(--spacing) * 1);}.mx-3\!{margin-inline:calc(var(--spacing) * 3) !important;}.my-1{margin-block:calc(var(--spacing) * 1);}.ml{margin-left:calc(var(--spacing) * 4);}.ml-\.5{margin-left:calc(var(--spacing) * 0.5);}.ml-1{margin-left:calc(var(--spacing) * 1);}.mr--1{margin-right:calc(var(--spacing) * -1);}.mr-1{margin-right:calc(var(--spacing) * 1);}.mr-2{margin-right:calc(var(--spacing) * 2);}.mr-2\.5{margin-right:calc(var(--spacing) * 2.5);}.p-1{padding:calc(var(--spacing) * 1);}.px,.px-4{padding-inline:calc(var(--spacing) * 4);}.px-2{padding-inline:calc(var(--spacing) * 2);}.py-1{padding-block:calc(var(--spacing) * 1);}.py-2{padding-block:calc(var(--spacing) * 2);}.pl-1{padding-left:calc(var(--spacing) * 1);}.pr-4{padding-right:calc(var(--spacing) * 4);}.ps{padding-inline-start:calc(var(--spacing) * 4);}.outline-0{outline-style:var(--un-outline-style);outline-width:0px;}.outline-2{outline-style:var(--un-outline-style);outline-width:2px;}.outline-blue{outline-color:color-mix(in srgb, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.b{border-width:1px;}.rd-2{border-radius:0.5rem;}.rd-sm{border-radius:var(--radius-sm);}.bg-\#dafaea{background-color:color-mix(in oklab, #dafaea var(--un-bg-opacity), transparent) /* #dafaea */;}.bg-\#ffe8e8{background-color:color-mix(in oklab, #ffe8e8 var(--un-bg-opacity), transparent) /* #ffe8e8 */;}.bg-\#fff{background-color:color-mix(in oklab, #fff var(--un-bg-opacity), transparent) /* #fff */;}.bg-gray\/20{background-color:color-mix(in srgb, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}.op-75{opacity:75%;}.op40{opacity:40%;}.flex{display:flex;}.flex-shrink-0{flex-shrink:0;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.gap-2{gap:calc(var(--spacing) * 2);}.size-4\!{width:calc(var(--spacing) * 4) !important;height:calc(var(--spacing) * 4) !important;}.size-full{width:100%;height:100%;}.h-1\!{height:calc(var(--spacing) * 1) !important;}.h-a\!{height:auto !important;}.h-full{height:100%;}.max-h-100{max-height:calc(var(--spacing) * 100);}.min-h-40{min-height:calc(var(--spacing) * 40);}.min-h-a\!{min-height:auto !important;}.w-10px\!{width:10px !important;}.after\:h-1::after{height:calc(var(--spacing) * 1);}.after\:w-1::after{width:calc(var(--spacing) * 1);}.inline{display:inline;}.block{display:block;}.cursor-s-resize{cursor:s-resize;}.cursor-w-resize{cursor:w-resize;}.resize-none{resize:none;}.select-none{-webkit-user-select:none;user-select:none;}.translate-x-1\/2{--un-translate-x:50%;translate:var(--un-translate-x) var(--un-translate-y);}.transform{transform:var(--un-rotate-x) var(--un-rotate-y) var(--un-rotate-z) var(--un-skew-x) var(--un-skew-y);}.items-center{align-items:center;}.box-border{box-sizing:border-box;}.bottom-0{bottom:calc(var(--spacing) * 0);}.left-0{left:calc(var(--spacing) * 0);}.right-0{right:calc(var(--spacing) * 0);}.top-0{top:calc(var(--spacing) * 0);}.justify-end\!{justify-content:flex-end !important;}.justify-center{justify-content:center;}.absolute{position:absolute;}.fixed{position:fixed;}.relative{position:relative;}.z-1{z-index:1;}.z-9{z-index:9;}.overflow-auto{overflow:auto;}.table{display:table;}.table-cell{display:table-cell;}@supports (color: color-mix(in lab, red, red)){.outline-blue{outline-color:color-mix(in oklab, var(--colors-blue-DEFAULT) var(--un-outline-opacity), transparent) /* oklch(70.7% 0.165 254.624) */;}.bg-gray\/20{background-color:color-mix(in oklab, var(--colors-gray-DEFAULT) 20%, transparent) /* oklch(70.7% 0.022 261.325) */;}}

package/dist/components/Menu.js

@@ -7,8 +7,8 @@ import loading_default from "../loading.js";
 import { className, createComponent, effect, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
 import { children, createContext, createEffect, createMemo, createSignal, onMount, splitProps, useContext } from "solid-js";
 import { createMutable } from "solid-js/store";
-import { delay } from "es-toolkit";
 import { combineProps } from "@solid-primitives/props";
+import { delay } from "es-toolkit";
 import { pointerHover } from "@solid-primitives/pointer";
 import { isEmpty } from "es-toolkit/compat";
 import { autoUpdate, createFloating, offset } from "floating-ui-solid";

package/dist/components/Render.d.ts

@@ -1,4 +1,4 @@
 export declare function createRender({ is, processProps }?: {
-    processProps?: ((e: any) => any) | undefined;
+    processProps?: (e: any) => any;
 }): (props: any) => import("solid-js").JSX.Element;
 export declare const Render: (props: any) => import("solid-js").JSX.Element;

package/dist/components/Tree.d.ts

@@ -4,17 +4,17 @@ export declare abstract class $Node {
     get label(): any;
     abstract getChildren(): $Node[] | undefined;
     children: $Node[] | undefined;
-    $children: import("solid-js").Accessor<$Node[] | undefined>;
+    $children: import("solid-js").Accessor<$Node[]>;
     parent: $Node | undefined;
     $parent: import("solid-js").Signal<unknown>;
     deep: number;
     $deep: import("solid-js").Accessor<number>;
     index: number;
-    $index: import("solid-js").Accessor<number | undefined>;
+    $index: import("solid-js").Accessor<number>;
     prev: $Node | undefined;
-    $prev: import("solid-js").Accessor<$Node | undefined>;
+    $prev: import("solid-js").Accessor<$Node>;
     next: $Node | undefined;
-    $next: import("solid-js").Accessor<$Node | undefined>;
+    $next: import("solid-js").Accessor<$Node>;
     root: $Node;
     $root: any;
     path: $Node[];

package/dist/hooks/index.d.ts

@@ -1,6 +1,7 @@
 import { type Signal } from 'solid-js';
 import { type Many, type MaybeAccessor } from '@solid-primitives/utils';
-interface UseDragOptions {
+interface UseMoveOptions {
+    preventDefault?: boolean;
     start?(e: PointerEvent, move: (cb: MoveCB) => void, end: (cb: EndCb) => void): void;
 }
 type MoveCB = (e: PointerEvent, o: {
@@ -10,11 +11,11 @@ type MoveCB = (e: PointerEvent, o: {
     oy: number;
 }) => void;
 type EndCb = (e: PointerEvent) => void;
-export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseDragOptions): void;
+export declare function usePointerDrag(el: MaybeAccessor<HTMLElement | undefined>, options: UseMoveOptions): void;
 export declare function model(el: any, value: () => [() => string, (v: string) => any]): void;
 export declare function toSignle<T extends Record<string, any>>(state: T, k: keyof T): ((v: any) => any)[];
-export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string> | null];
-export declare function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>): import("solid-js").Accessor<Awaited<T> | undefined>;
+export declare function useDark(): [get: import("solid-js").Accessor<boolean>, set: import("solid-js").Setter<boolean>, init: string | Promise<string>];
+export declare function useMemoAsync<T>(fn: (prev?: T) => Promise<T> | T, init?: Awaited<T>): import("solid-js").Accessor<Awaited<T>>;
 export declare function useSignle2<T>(v: T | (() => T), opt?: {
     before?: (v: T) => Promise<T | void> | T;
 }): Signal<T>;

package/dist/hooks/index.js

@@ -1,8 +1,8 @@
 import { unFn } from "../utils.js";
-import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, on, onCleanup } from "solid-js";
+import { $PROXY, createComputed, createEffect, createMemo, createRenderEffect, createRoot, createSignal, mergeProps, on, onCleanup, untrack } from "solid-js";
 import { $RAW, createMutable } from "solid-js/store";
 import { isFunction, isPromise, mapValues } from "es-toolkit";
-import { createEventListener } from "@solid-primitives/event-listener";
+import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 import { createPointerListeners } from "@solid-primitives/pointer";
 import { access } from "@solid-primitives/utils";
 import { makePersisted, storageSync } from "@solid-primitives/storage";
@@ -10,11 +10,12 @@ import { createMutationObserver } from "@solid-primitives/mutation-observer";
 import { castArray } from "es-toolkit/compat";
 import { createKeybindingsHandler } from "tinykeys";
 function usePointerDrag(el, options) {
+	options = mergeProps({ preventDefault: true }, options);
 	createPointerListeners({
 		target: el,
 		passive: false,
 		onDown(e) {
-			e.preventDefault();
+			options.preventDefault && e.preventDefault();
 			const [sx, sy] = [e.x, e.y];
 			let move;
 			let end;
@@ -38,6 +39,7 @@ function usePointerDrag(el, options) {
 						end = void 0;
 					}
 				});
+				createEventListenerMap(document, { drop: dispose });
 			});
 		}
 	});
@@ -71,7 +73,7 @@ function useMemoAsync(fn, init) {
 	const REJECT = Symbol();
 	const [val, setVal] = createSignal(init);
 	createComputed(async () => {
-		const ret = fn(val());
+		const ret = fn(untrack(val));
 		const v = ret instanceof Promise ? await new Promise((resolve) => {
 			ret.then(resolve);
 			onCleanup(() => resolve(REJECT));

package/dist/hooks/useSort.d.ts

@@ -0,0 +1,18 @@
+import { type MaybeAccessor } from '@solid-primitives/utils';
+type Awaitable<T> = T | Promise<T>;
+interface UseSortOption {
+    enable?: boolean;
+    guideLine: any;
+    draggable: (el: HTMLElement) => Awaitable<boolean>;
+    dragover: (el: HTMLElement) => boolean;
+    children: (el: HTMLElement) => HTMLElement[];
+    dragend: () => void;
+}
+export declare const useSort: (el: MaybeAccessor<HTMLElement | undefined>, opt: UseSortOption) => {
+    style: any;
+    drag: any;
+    over: any;
+    rel: any;
+    type: string;
+};
+export {};

package/dist/hooks/useSort.js

@@ -0,0 +1,106 @@
+import { findAsync } from "../utils.js";
+import { Portal, createComponent, memo, mergeProps, spread, template } from "solid-js/web";
+import { createMutable, reconcile } from "solid-js/store";
+import { createEventListenerMap } from "@solid-primitives/event-listener";
+import { access } from "@solid-primitives/utils";
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+const useSort = (el, opt) => {
+	opt = mergeProps({ enable: true }, opt);
+	let count = 0;
+	createEventListenerMap(() => opt.enable ? access(el) : void 0, {
+		async pointerdown(e) {
+			const _c = count;
+			const drag = await findAsync(e.composedPath(), (e$1) => e$1 instanceof HTMLElement && opt.draggable(e$1));
+			if (_c != count) return;
+			if (!drag) return;
+			e.stopPropagation();
+			state.drag = drag;
+			state.drag?.setAttribute("draggable", "true");
+		},
+		pointerup() {
+			count++;
+			dragend();
+		},
+		pointermove() {
+			count++;
+		},
+		dragstart(e) {
+			e.dataTransfer.setDragImage(document.createElement("img"), 0, 0);
+		},
+		dragover(e) {
+			if (!state.drag) return;
+			const over = state.over = e.composedPath().filter((e$1) => e$1 instanceof HTMLElement).find((e$1) => opt.dragover(e$1)) ?? state.over;
+			if (!over) return;
+			e.preventDefault();
+			e.stopPropagation();
+			const children = opt.children(over);
+			if (children) {
+				let i = 0, d = Infinity, s = "";
+				children.forEach((el$1, ii) => {
+					const display = getComputedStyle(el$1).display;
+					const __ = ["table-cell", "inline"].some((e$1) => display.includes(e$1));
+					const rect = el$1.getBoundingClientRect();
+					if (__) {
+						let dd = Math.sqrt((e.clientX - rect.x) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2);
+						if (dd < d) i = ii, d = dd, s = "l";
+						dd = Math.sqrt((e.clientX - rect.right) ** 2 + (e.clientY - rect.y + rect.height / 2) ** 2);
+						if (dd < d) i = ii, d = dd, s = "r";
+					} else {
+						let dd = Math.sqrt((e.clientY - rect.y) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2);
+						if (dd < d) i = ii, d = dd, s = "t";
+						dd = Math.sqrt((e.clientY - rect.bottom) ** 2 + (e.clientX - rect.x + rect.width / 2) ** 2);
+						if (dd < d) i = ii, d = dd, s = "b";
+					}
+				});
+				const rect1 = children[i].getBoundingClientRect();
+				const x = s == "l" || s == "r", y = s == "t" || s == "b";
+				const size = 3;
+				state.style = {
+					width: `${y ? rect1.width : size}px`,
+					height: `${y ? size : rect1.height}px`,
+					translate: `${y ? rect1.x : (s == "l" ? rect1.x : rect1.right) - size / 2}px ${x ? rect1.y : (s == "t" ? rect1.y : rect1.bottom) - size / 2}px`
+				};
+				state.rel = children[i];
+				state.type = s == "l" || s == "t" ? "before" : "after";
+			} else {
+				const rect1 = over.getBoundingClientRect();
+				state.style = {
+					width: rect1.width,
+					height: rect1.height,
+					translate: `${rect1.x}px ${rect1.y}px`
+				};
+				state.rel = over;
+				state.type = "inner";
+			}
+		},
+		dragend() {
+			dragend();
+		}
+	});
+	function dragend() {
+		state.drag?.removeAttribute("draggable");
+		if (state.drag && state.rel) opt.dragend?.();
+		reconcile({})(state);
+	}
+	const state = createMutable({
+		style: void 0,
+		drag: void 0,
+		over: void 0,
+		rel: void 0,
+		type: ""
+	});
+	memo(() => memo(() => !!state.style)() && createComponent(Portal, {
+		get mount() {
+			return access(el);
+		},
+		get children() {
+			var _el$ = _tmpl$();
+			spread(_el$, mergeProps(() => opt.guideLine, { get style() {
+				return state.style;
+			} }), false, false);
+			return _el$;
+		}
+	}));
+	return state;
+};
+export { useSort };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { For, type JSX, type Component } from 'solid-js';
-import './styles/index.scss';
+import 'virtual:uno.css';
+import './style.scss';
 import './plugins/CellSelectionPlugin';
 import './plugins/CopyPastePlugin';
 import './plugins/EditablePlugin';
@@ -8,8 +9,10 @@ import './plugins/MenuPlugin';
 import './plugins/CommandPlugin';
 import './plugins/RowSelectionPlugin';
 import './plugins/ResizePlugin';
+import './plugins/DragPlugin';
 export declare const Ctx: import("solid-js").Context<{
     props: TableProps2;
+    store: TableStore;
 }>;
 type Requireds<T, K extends keyof T> = Pri<Omit<T, K> & Required<Pick<T, K>>>;
 type Pri<T> = {
@@ -26,6 +29,7 @@ export interface Plugin {
     store?: (store: TableStore) => Partial<TableStore> | void;
     rewriteProps?: ProcessProps;
     layers?: Component<TableStore>[];
+    onMount?: (store: TableStore) => void;
 }
 export interface TableProps {
     columns?: TableColumn[];
@@ -50,22 +54,24 @@ export interface TableProps {
     }>;
     EachRows?: typeof For;
     EachCells?: typeof For<TableColumn[], JSX.Element>;
-    cellClass?: ((props: Omit<TDProps, 'y'> & {
+    cellClass?: ((props: Omit<TDProps, 'y' | 'data'> & {
         y?: number;
+        data?: any;
     }) => string) | string;
-    cellStyle?: ((props: Omit<TDProps, 'y'> & {
+    cellStyle?: ((props: Omit<TDProps, 'y' | 'data'> & {
         y?: number;
+        data?: any;
     }) => string) | string;
     renderer?: (comp: (props: any) => JSX.Element) => ((props: any) => JSX.Element);
     plugins?: Plugin[];
     onDataChange?: (data: any[]) => void;
 }
-type THProps = {
+export type THProps = {
     x: number;
     col: TableColumn;
     children: JSX.Element;
 };
-type TDProps = {
+export type TDProps = {
     x: number;
     y: number;
     data: any;
@@ -106,11 +112,12 @@ export interface TableStore extends Obj {
         height: number;
     }>[];
     internal: symbol;
+    raw: symbol;
     props?: TableProps2;
     rawProps: TableProps;
     plugins: Plugin[];
 }
-export declare const Table: (props: TableProps) => JSX.Element;
+export declare const Intable: (props: TableProps) => JSX.Element;
+export default Intable;
 export declare const ScrollPlugin: Plugin;
 export declare const defaultsPlugins: Plugin[];
-export {};

package/dist/index.js

@@ -1,23 +1,30 @@
 import { unFn } from "./utils.js";
 import { toReactive, useMemo } from "./hooks/index.js";
-/* empty css       */
+import './style.css';;/* empty css      */
+/* empty css      */
 import { CellSelectionPlugin } from "./plugins/CellSelectionPlugin.js";
 import { ClipboardPlugin } from "./plugins/CopyPastePlugin.js";
 import { EditablePlugin } from "./plugins/EditablePlugin.js";
 import { solidComponent } from "./components/utils.js";
 import { RenderPlugin } from "./plugins/RenderPlugin/index.js";
+import { MenuPlugin } from "./plugins/MenuPlugin.js";
 import { CommandPlugin } from "./plugins/CommandPlugin.js";
 import { RowSelectionPlugin } from "./plugins/RowSelectionPlugin.js";
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { For, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, runWithOwner, useContext } from "solid-js";
+import { ResizePlugin } from "./plugins/ResizePlugin.js";
+import { DragPlugin } from "./plugins/DragPlugin.js";
+import { createComponent, insert, memo, mergeProps, spread, template, use } from "solid-js/web";
+import { For, batch, createComputed, createContext, createEffect, createMemo, createSignal, getOwner, mapArray, mergeProps as mergeProps$1, on, onCleanup, onMount, runWithOwner, untrack, useContext } from "solid-js";
 import { createMutable, reconcile } from "solid-js/store";
-import { difference, mapValues, sumBy } from "es-toolkit";
 import { combineProps } from "@solid-primitives/props";
-import { createElementSize } from "@solid-primitives/resize-observer";
+import { difference, mapValues, sumBy } from "es-toolkit";
+import { createElementSize, createResizeObserver } from "@solid-primitives/resize-observer";
 import { createScrollPosition } from "@solid-primitives/scroll";
 var _tmpl$ = /* @__PURE__ */ template(`<table>`), _tmpl$2 = /* @__PURE__ */ template(`<thead>`), _tmpl$3 = /* @__PURE__ */ template(`<tbody>`), _tmpl$4 = /* @__PURE__ */ template(`<tr>`), _tmpl$5 = /* @__PURE__ */ template(`<th>`), _tmpl$6 = /* @__PURE__ */ template(`<td>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div class=data-table__layers></div><table class=data-table--table>`);
-const Ctx = createContext({ props: {} });
-const Table = (props) => {
+const Ctx = createContext({
+	props: {},
+	store: {}
+});
+const Intable = (props) => {
 	props = mergeProps$1({ rowKey: "id" }, props);
 	const plugins = createMemo(() => [
 		...defaultsPlugins,
@@ -48,7 +55,13 @@ const Table = (props) => {
 	}));
 	const mProps = toReactive(() => pluginsProps()[pluginsProps().length - 1][0]());
 	store.props = mProps;
-	const ctx = createMutable({ props: mProps });
+	onMount(() => {
+		createEffect(mapArray(plugins, (e) => e.onMount?.(store)));
+	});
+	const ctx = createMutable({
+		props: mProps,
+		store
+	});
 	window.store = store;
 	window.ctx = ctx;
 	return createComponent(Ctx.Provider, {
@@ -117,6 +130,7 @@ var TBody = () => {
 		});
 	} });
 };
+var src_default = Intable;
 function BasePlugin() {
 	const omits = {
 		col: null,
@@ -159,13 +173,14 @@ function BasePlugin() {
 			thSizes: [],
 			trs: [],
 			trSizes: [],
-			internal: Symbol("internal")
+			internal: Symbol("internal"),
+			raw: Symbol("raw")
 		}),
 		rewriteProps: {
 			data: ({ data = [] }) => data,
 			columns: ({ columns = [] }) => columns,
 			newRow: ({ newRow = () => ({}) }) => newRow,
-			Table: ({ Table: Table$1 = table }, { store }) => (o) => {
+			Table: ({ Table = table }, { store }) => (o) => {
 				const [el, setEl] = createSignal();
 				const { props } = useContext(Ctx);
 				o = combineProps({
@@ -177,7 +192,7 @@ function BasePlugin() {
 						return props.style;
 					}
 				}, o);
-				return createComponent(Table$1, o);
+				return createComponent(Table, o);
 			},
 			Thead: ({ Thead = thead }, { store }) => (o) => {
 				o = combineProps({ ref: (el) => store.thead = el }, o);
@@ -266,7 +281,7 @@ var IndexPlugin = {
 		width: 40,
 		style: "text-align: center",
 		class: "index",
-		render: solidComponent((o) => o.y + 1)
+		render: solidComponent((o) => memo(() => o.y + 1))
 	} }),
 	rewriteProps: { columns: (props, { store }) => store.props?.index ? [store.$index, ...props.columns || []] : props.columns }
 };
@@ -286,23 +301,28 @@ var FixedColumnPlugin = { rewriteProps: {
 	cellClass: ({ cellClass }) => (o) => (unFn(cellClass, o) || "") + (o.col.fixed ? ` fixed-${o.col.fixed}` : ""),
 	cellStyle: ({ cellStyle }, { store }) => (o) => (unFn(cellStyle, o) || "") + (o.col.fixed ? `; ${o.col.fixed}: ${sumBy(store.thSizes.slice(o.col.fixed == "left" ? 0 : o.x + 1, o.col.fixed == "left" ? o.x : Infinity), (size) => size?.width || 0)}px` : "")
 } };
-var FitColWidthPlugin = { rewriteProps: {
-	Table: (prev, { store }) => (o) => {
-		const size1 = createElementSize(() => store.scroll_el);
-		createEffect(on(() => [size1.width, prev.columns], async () => {
-			const w = store.scroll_el.clientWidth;
-			store._fit_col_width__cols_temp = null;
-			await Promise.resolve();
-			const gap = (w - store.table.offsetWidth) / store.props.columns.filter((e) => !e.width).length;
-			store._fit_col_width__cols_temp = prev.columns.map((e, i) => ({ width: e.width ?? Math.max((store.thSizes[i]?.width || 0) + gap, 80) }));
-		}));
-		return createComponent(prev.Table, o);
-	},
-	columns: ({ columns }, { store }) => reconcile(columns.map((e, i) => ({
-		...e,
-		...store._fit_col_width__cols_temp?.[i]
-	})))(store._fit_col_width__cols ??= [])
-} };
+var FitColWidthPlugin = {
+	priority: -Infinity,
+	rewriteProps: {
+		Table: (prev, { store }) => (o) => {
+			const size = createMutable({ width: 0 });
+			createResizeObserver(() => store.scroll_el, (_, el, e) => size.width = e.contentBoxSize[0].inlineSize);
+			createEffect(on(() => [size.width, prev.columns.map((e) => e.width)], async () => {
+				if (!size.width) return;
+				store.__fit_col_width__cols_temp = null;
+				await Promise.resolve();
+				const gap = (size.width - store.table.getBoundingClientRect().width) / store.props.columns.filter((e) => !e.width).length;
+				store.__fit_col_width__cols_temp = store.props.columns.map((e, i) => e.width ? null : { width: Math.max((store.ths[i]?.getBoundingClientRect().width || 0) + gap, 80) });
+			}));
+			return createComponent(prev.Table, o);
+		},
+		columns: ({ columns }, { store }) => (columns = columns.map((e, i) => ({
+			...e,
+			...store.__fit_col_width__cols_temp?.[i],
+			[store.raw]: e[store.raw] ?? e
+		})), untrack(() => batch(() => reconcile(columns, { key: store.raw })(store.__fit_col_width__cols ??= []))))
+	}
+};
 const ScrollPlugin = {
 	priority: Infinity,
 	rewriteProps: { Table: (prev, { store }) => (o) => {
@@ -336,13 +356,16 @@ const defaultsPlugins = [
 	ScrollPlugin,
 	BasePlugin(),
 	CommandPlugin,
+	MenuPlugin,
 	CellSelectionPlugin,
 	RowSelectionPlugin,
 	IndexPlugin,
 	StickyHeaderPlugin,
 	FixedColumnPlugin,
+	ResizePlugin,
+	DragPlugin,
 	ClipboardPlugin,
 	EditablePlugin,
 	FitColWidthPlugin
 ];
-export { Ctx, ScrollPlugin, Table, defaultsPlugins };
+export { Ctx, Intable, ScrollPlugin, src_default as default, defaultsPlugins };

package/dist/plugins/CellMergePlugin.d.ts

@@ -0,0 +1,14 @@
+import { type Plugin } from "../index";
+declare module '../index' {
+    interface TableProps {
+        colDrag: boolean;
+        rowDrag: boolean;
+    }
+    interface TableColumn {
+    }
+    interface TableStore {
+    }
+    interface Commands {
+    }
+}
+export declare const CellMergePlugin: Plugin;

package/dist/plugins/CellMergePlugin.js

@@ -0,0 +1,2 @@
+const CellMergePlugin = { rewriteProps: {} };
+export { CellMergePlugin };