@vanstack/solid-ark 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,59 @@
+# @vanstack/solid-ark
+
+基于 [Ark UI](https://ark-ui.com) + TanStack 生态（[TanStack Form](https://tanstack.com/form)、[TanStack Table](https://tanstack.com/table)）的 Solid 组件库。样式统一消费 Tailwind 语义 token，支持 CSS 变量主题化。
+
+## 安装
+
+```bash
+pnpm add @vanstack/solid-ark
+```
+
+按使用的子入口安装对应 peer 依赖：`solid-js`、`@ark-ui/solid`、`@tanstack/solid-form`、`@tanstack/solid-table`、`zod`。
+
+## 快速开始
+
+```tsx
+import { Button } from "@vanstack/solid-ark/button";
+
+function Demo() {
+    return (
+        <Button variant="success" loading={false} onClick={() => console.log("clicked")}>
+            确认
+        </Button>
+    );
+}
+```
+
+## 子入口
+
+包按功能拆分为独立子入口，按需引入：
+
+| 入口 | 说明 |
+|------|------|
+| `@vanstack/solid-ark/button` | 原生 `<button>` 样式封装，支持 `loading`、`variant` |
+| `@vanstack/solid-ark/form` | 受控表单：TanStack Form + Ark UI + Zod，支持外部 `values` 双向绑定、变更集（patch）、跨字段校验、防抖输入、datePicker 等控件 |
+| `@vanstack/solid-ark/modal` | 基于 Ark UI Dialog 的命令式弹窗管理器，Promise 驱动 |
+| `@vanstack/solid-ark/drawer` | 基于 Ark UI Drawer 的命令式抽屉管理器，支持四方向滑入 |
+| `@vanstack/solid-ark/toast` | 基于 Ark UI Toast 的通知组件，命令式调用 |
+| `@vanstack/solid-ark/table` | 基于 TanStack Table 的非受控表格，内置排序和行选择 |
+| `@vanstack/solid-ark/data-table` | 搜索表单 + 表格 + 分页的组合组件，支持内部/外部取数两种模式 |
+
+## 详细文档
+
+各子入口的完整使用文档位于源码对应目录的 `README.md`，可在线查看：
+
+- [packages/solid/ark/src/form](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/form)
+- [packages/solid/ark/src/button](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/button)
+- [packages/solid/ark/src/modal](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/modal)
+- [packages/solid/ark/src/drawer](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/drawer)
+- [packages/solid/ark/src/toast](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/toast)
+- [packages/solid/ark/src/table](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/table)
+- [packages/solid/ark/src/data-table](https://gitee.com/janzho/vanstack/tree/master/packages/solid/ark/src/data-table)
+
+## 主题化
+
+组件样式基于 Tailwind 语义 token，覆盖 `:root` CSS 变量即可自定义（各子入口文档中有对应的 token 示例）。
+
+## License
+
+MIT

package/dist/FormDatePicker-BWrGST8J.js

@@ -1,3 +1,4 @@
+import "./solid-ark.css";
 import { Portal as e, createComponent as t, delegateEvents as n, effect as r, insert as i, memo as a, template as o } from "solid-js/web";
 import { Index as s, createMemo as c, createSignal as l } from "solid-js";
 import { DatePicker as u, useDatePicker as d } from "@ark-ui/solid/date-picker";

package/dist/FormSelect-Dex9R5TZ.js

@@ -1,3 +1,4 @@
+import "./solid-ark.css";
 import { Index as e, Portal as t, createComponent as n, memo as r, template as i } from "solid-js/web";
 import { createMemo as a } from "solid-js";
 import { Select as o, createListCollection as s } from "@ark-ui/solid/select";

package/dist/button-C9xYlZbo.js

@@ -1,3 +1,4 @@
+import "./solid-ark.css";
 import { createComponent as e, insert as t, mergeProps as n, spread as r, template as i } from "solid-js/web";
 import { Show as a, splitProps as o } from "solid-js";
 //#region src/button/Button.tsx

package/dist/data-table/index.mjs

@@ -1,6 +1,6 @@
 import "../solid-ark.css";
 import { t as e } from "../button-C9xYlZbo.js";
-import { t } from "../form-TmnHhNkx.js";
+import { t } from "../form-DmSwMQlR.js";
 import { t as n } from "../table-B88tYpbb.js";
 import { className as r, createComponent as i, effect as a, insert as o, memo as s, setAttribute as c, template as l } from "solid-js/web";
 import { For as u, Show as d, createEffect as f, createMemo as p, createSignal as m, mergeProps as h, on as g, onMount as _ } from "solid-js";

package/dist/form/index.d.ts

@@ -1,2 +1,2 @@
 export { Form } from './Form';
-export type { DatePickerStoredValue, FieldConfig, FieldControlProps, FieldRule, FieldRuleContext, FormInvalidSubmitProps, FormProps, } from './type';
+export type { DatePickerStoredValue, FieldConfig, FieldControlProps, FieldRule, FieldRuleContext, FormInvalidSubmitProps, FormProps, FormSubmitProps, } from './type';

package/dist/form/index.mjs

@@ -1,3 +1,3 @@
 import "../solid-ark.css";
-import { t as e } from "../form-TmnHhNkx.js";
+import { t as e } from "../form-DmSwMQlR.js";
 export { e as Form };

package/dist/form/patch.d.ts

@@ -0,0 +1,16 @@
+import { FieldConfig } from './type';
+export interface BuildPatchResult<TData extends Record<string, unknown>> {
+    /** 与初始值不同的字段集合；无变化时为空对象 */
+    patch: Partial<TData>;
+    /** patch 是否非空 */
+    changed: boolean;
+}
+/**
+ * 对比初始快照与当前值，返回发生变化的字段集合。
+ * - 字符串/布尔：空值归一（undefined/null → ""）后严格比较；
+ * - valueType: "number"：比较前 Number() 归一（1 与 "1" 视为相同），patch 里放数字（清空保存 0）；
+ * - 数组：空值归一 []，排序后深度比较（[1,2] 与 [2,1] 视为相同）；
+ * - 对象：空值归一 {}，深度比较；
+ * - 用户改后又改回原值 → 无变化，不进 patch。
+ */
+export declare function buildPatch<TData extends Record<string, unknown>>(initial: TData, current: TData, fields: FieldConfig[]): BuildPatchResult<TData>;

package/dist/form/type.d.ts

@@ -25,6 +25,8 @@ interface BaseFieldConfig {
     renderLabel?: (label: string) => JSX.Element;
     /** 自定义 error */
     renderError?: (errors: string[]) => JSX.Element;
+    /** 提交/比较前转换为数字（select/radio 值是字符串、目标字段是数字时使用） */
+    valueType?: "number";
 }
 export interface InputFieldConfig extends BaseFieldConfig {
     fieldType: "input";
@@ -75,7 +77,7 @@ export interface CheckboxGroupFieldConfig extends BaseFieldConfig {
         value: string;
     }[];
 }
-export interface DatePickerFieldConfig extends BaseFieldConfig {
+export interface DatePickerFieldConfig extends Omit<BaseFieldConfig, "valueType"> {
     fieldType: "datePicker";
     /** 选择粒度：year | month | week | date | datetime，默认 date */
     mode?: "date" | "datetime" | "month" | "week" | "year";
@@ -108,6 +110,15 @@ export interface FormInvalidSubmitProps<TData extends Record<string, unknown>> {
     /** 字段名 → 错误消息列表，只包含有错误的字段 */
     errors: Record<string, string[]>;
 }
+/** 校验通过后的提交载荷：patch=true 时额外携带 patch / changed */
+export interface FormSubmitProps<TData extends Record<string, unknown>> {
+    /** 当前表单值 */
+    value: TData;
+    /** patch=true 时提供：与初始值不同的字段集合（含变化的数组/对象） */
+    patch?: Partial<TData>;
+    /** patch=true 时提供：patch 是否非空 */
+    changed?: boolean;
+}
 export interface FormProps<TData extends Record<string, unknown>> {
     /** 字段配置 */
     fields: FieldConfig[];
@@ -115,10 +126,10 @@ export interface FormProps<TData extends Record<string, unknown>> {
     values?: Partial<TData>;
     /** 表单值变化通知：内部值变化（用户输入、外部 values 同步）时触发，配合 values 使用可实现双向绑定 */
     onValuesChange?: (values: TData) => void;
+    /** 是否计算变更集：默认 false；开启后 onSubmit 额外收到 { patch, changed }（与初始值比较，提交时计算） */
+    patch?: boolean;
     /** 提交回调（仅在校验通过时触发） */
-    onSubmit: (props: {
-        value: TData;
-    }) => Promise<void> | void;
+    onSubmit: (props: FormSubmitProps<TData>) => Promise<void> | void;
     /** 提交被校验拦截时的回调 */
     onSubmitInvalid?: (props: FormInvalidSubmitProps<TData>) => void;
     /** 表单布局 class */

package/dist/{form-TmnHhNkx.js → form-DmSwMQlR.js}

@@ -1,3 +1,4 @@
+import "./solid-ark.css";
 import { Index as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, style as s, template as c } from "solid-js/web";
 import { For as l, Show as u, Suspense as d, createEffect as f, createMemo as p, createSignal as m, createUniqueId as h, lazy as g, mergeProps as _, on as v, onCleanup as y } from "solid-js";
 import { Field as b } from "@ark-ui/solid/field";
@@ -5,15 +6,16 @@ import { createForm as x } from "@tanstack/solid-form";
 import { Checkbox as S } from "@ark-ui/solid/checkbox";
 import { RadioGroup as C } from "@ark-ui/solid/radio-group";
 import { Switch as w } from "@ark-ui/solid/switch";
+import { deepEqual as T } from "fast-equals";
 //#region src/form/components/FieldSkeleton.tsx
-var T = /*#__PURE__*/ c("<div aria-hidden=true class=van-form-field-skeleton>");
-function E() {
-	return T();
+var E = /*#__PURE__*/ c("<div aria-hidden=true class=van-form-field-skeleton>");
+function D() {
+	return E();
 }
 //#endregion
 //#region src/form/components/FormCheckbox.tsx
-var D = /*#__PURE__*/ c("<svg class=van-form-check-icon fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=3 viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10 -10\">");
-function O(e) {
+var O = /*#__PURE__*/ c("<svg class=van-form-check-icon fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=3 viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10 -10\">");
+function k(e) {
 	return n(S.Root, {
 		get checked() {
 			return e.value ?? !1;
@@ -31,7 +33,7 @@ function O(e) {
 						return n(S.Indicator, {
 							class: "van-form-checkbox-indicator",
 							get children() {
-								return D();
+								return O();
 							}
 						});
 					}
@@ -49,8 +51,8 @@ function O(e) {
 }
 //#endregion
 //#region src/form/components/FormCheckboxGroup.tsx
-var k = /*#__PURE__*/ c("<svg class=van-form-check-icon fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=3 viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10 -10\">");
-function A(t) {
+var A = /*#__PURE__*/ c("<svg class=van-form-check-icon fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=3 viewBox=\"0 0 24 24\"><path d=\"M5 12l5 5l10 -10\">");
+function j(t) {
 	return n(S.Group, {
 		class: "van-form-checkbox-group",
 		get id() {
@@ -85,7 +87,7 @@ function A(t) {
 									return n(S.Indicator, {
 										class: "van-form-checkbox-indicator",
 										get children() {
-											return k();
+											return A();
 										}
 									});
 								}
@@ -106,7 +108,7 @@ function A(t) {
 }
 //#endregion
 //#region src/form/components/useDebouncedValue.ts
-function j(e) {
+function M(e) {
 	let [t, n] = m(e.value() ?? ""), r, i = (t) => {
 		if (n(t), (e.debounce ?? 0) > 0) {
 			clearTimeout(r), r = setTimeout(() => {
@@ -131,12 +133,12 @@ function j(e) {
 }
 //#endregion
 //#region src/form/components/FormInput.tsx
-var M = /*#__PURE__*/ c("<svg fill=none height=14 stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox=\"0 0 24 24\"width=14 xmlns=http://www.w3.org/2000/svg><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\">"), N = /*#__PURE__*/ c("<button aria-label=清空 type=button>"), P = /*#__PURE__*/ c("<div class=van-form-input-group>"), F = /*#__PURE__*/ c("<span class=\"van-form-input-addon van-form-input-addon-prefix\">"), I = /*#__PURE__*/ c("<span class=\"van-form-input-addon van-form-input-addon-suffix\">");
+var ee = /*#__PURE__*/ c("<svg fill=none height=14 stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2 viewBox=\"0 0 24 24\"width=14 xmlns=http://www.w3.org/2000/svg><path d=\"M18 6 6 18\"></path><path d=\"m6 6 12 12\">"), N = /*#__PURE__*/ c("<button aria-label=清空 type=button>"), P = /*#__PURE__*/ c("<div class=van-form-input-group>"), F = /*#__PURE__*/ c("<span class=\"van-form-input-addon van-form-input-addon-prefix\">"), I = /*#__PURE__*/ c("<span class=\"van-form-input-addon van-form-input-addon-suffix\">");
 function L() {
-	return M();
+	return ee();
 }
 function R(e) {
-	let { local: r, handleInput: s, handleBlur: c, handleClear: l } = j({
+	let { local: r, handleInput: s, handleBlur: c, handleClear: l } = M({
 		value: () => e.value,
 		debounce: e.field.debounce,
 		onChange: e.onChange,
@@ -267,7 +269,7 @@ function B(e) {
 //#endregion
 //#region src/form/components/FormTextarea.tsx
 function V(e) {
-	let { local: t, handleInput: r, handleBlur: i } = j({
+	let { local: t, handleInput: r, handleBlur: i } = M({
 		value: () => e.value,
 		debounce: e.field.debounce,
 		onChange: e.onChange,
@@ -324,7 +326,7 @@ function K(e) {
 		}
 	}) : H(e.field, "select") ? n(d, {
 		get fallback() {
-			return n(E, {});
+			return n(D, {});
 		},
 		get children() {
 			return n(G, {
@@ -345,7 +347,7 @@ function K(e) {
 		}
 	}) : H(e.field, "datePicker") ? n(d, {
 		get fallback() {
-			return n(E, {});
+			return n(D, {});
 		},
 		get children() {
 			return n(W, {
@@ -364,7 +366,7 @@ function K(e) {
 				}
 			});
 		}
-	}) : H(e.field, "checkbox") ? n(O, {
+	}) : H(e.field, "checkbox") ? n(k, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -397,7 +399,7 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "checkbox-group") ? n(A, {
+	}) : H(e.field, "checkbox-group") ? n(j, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -411,12 +413,43 @@ function K(e) {
 	}) : null;
 }
 //#endregion
-//#region src/form/Form.tsx
-var q = /*#__PURE__*/ c("<form>"), J = /*#__PURE__*/ c("<div class=van-form-field>");
+//#region src/form/patch.ts
+function q(e) {
+	return Y(e) || e === "" ? void 0 : Number(e);
+}
+function J(e) {
+	return Y(e) || e === "" ? 0 : Number(e);
+}
 function Y(e) {
-	return typeof e == "string" ? e : e && typeof e == "object" && "message" in e ? String(e.message) : String(e);
+	return e == null;
 }
 function X(e) {
+	return Array.isArray(e) ? [...e].sort() : [];
+}
+function Z(e) {
+	return e && typeof e == "object" && !Array.isArray(e) ? e : {};
+}
+function Q(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function te(e, t, n) {
+	let r = {};
+	for (let i of n) {
+		let { name: n, valueType: a } = i, o = e[n], s = t[n], c;
+		c = a === "number" ? T(q(o), q(s)) : Array.isArray(o) || Array.isArray(s) ? T(X(o), X(s)) : Q(o) || Q(s) ? T(Z(o), Z(s)) : T(Y(o) ? "" : o, Y(s) ? "" : s), c || (r[n] = a === "number" ? J(s) : s);
+	}
+	return {
+		patch: r,
+		changed: Object.keys(r).length > 0
+	};
+}
+//#endregion
+//#region src/form/Form.tsx
+var ne = /*#__PURE__*/ c("<form>"), re = /*#__PURE__*/ c("<div class=van-form-field>");
+function $(e) {
+	return typeof e == "string" ? e : e && typeof e == "object" && "message" in e ? String(e.message) : String(e);
+}
+function ie(e) {
 	let t = e.rule;
 	if (t) return {
 		onChange: typeof t == "function" ? (e) => t({
@@ -426,17 +459,27 @@ function X(e) {
 		...e.validateListenTo?.length ? { onChangeListenTo: e.validateListenTo } : {}
 	};
 }
-function Z(e) {
+function ae(e) {
 	let r = _({ values: {} }, e), c = r.values, d = h(), m = (e) => `${d}-${e}`, g = x(() => ({
 		defaultValues: c,
 		onSubmit: async ({ value: e }) => {
-			await r.onSubmit({ value: e });
+			let t = e;
+			if (r.patch) {
+				let { patch: e, changed: n } = te(c, t, r.fields);
+				await r.onSubmit({
+					value: t,
+					patch: e,
+					changed: n
+				});
+				return;
+			}
+			await r.onSubmit({ value: t });
 		},
 		onSubmitInvalid: ({ value: e, formApi: t }) => {
 			if (!r.onSubmitInvalid) return;
 			let n = {}, i = t.state.fieldMeta;
 			for (let [e, t] of Object.entries(i)) {
-				let r = (t?.errors ?? []).map(Y).filter(Boolean);
+				let r = (t?.errors ?? []).map($).filter(Boolean);
 				r.length > 0 && (n[e] = r);
 			}
 			r.onSubmitInvalid({
@@ -448,7 +491,7 @@ function Z(e) {
 	return f(v(() => r.values, (e) => {
 		for (let [t, n] of Object.entries(e ?? {})) g.state.values[t] !== n && C(t, n);
 	}, { defer: !0 })), f(v(S, (e) => r.onValuesChange?.(e), { defer: !0 })), (() => {
-		var e = q();
+		var e = ne();
 		return e.addEventListener("submit", (e) => {
 			e.preventDefault(), e.stopPropagation(), g.handleSubmit();
 		}), a(e, n(l, {
@@ -460,12 +503,12 @@ function Z(e) {
 					return e.name;
 				},
 				get validators() {
-					return X(e);
+					return ie(e);
 				},
 				children: (t) => {
-					let r = t(), c = p(() => (t().state.meta.errors ?? []).map(Y).filter(Boolean)), d = p(() => t().state.value), f = U(e.fieldWidth), h = f ? { width: f } : void 0;
+					let r = t(), c = p(() => (t().state.meta.errors ?? []).map($).filter(Boolean)), d = p(() => t().state.value), f = U(e.fieldWidth), h = f ? { width: f } : void 0;
 					return e.control ? (() => {
-						var t = J();
+						var t = re();
 						return a(t, () => e.control({
 							value: d(),
 							onChange: (e) => r.handleChange(e),
@@ -556,4 +599,4 @@ function Z(e) {
 	})();
 }
 //#endregion
-export { Z as t };
+export { ae as t };

package/dist/table-B88tYpbb.js

@@ -1,3 +1,4 @@
+import "./solid-ark.css";
 import { addEventListener as e, className as t, createComponent as n, delegateEvents as r, effect as i, insert as a, memo as o, setAttribute as s, style as c, template as l } from "solid-js/web";
 import { For as u, Show as d, createSignal as f, mergeProps as p } from "solid-js";
 import { Checkbox as m } from "@ark-ui/solid/checkbox";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanstack/solid-ark",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -52,7 +52,8 @@
     "zod": "^4.4.0"
   },
   "dependencies": {
-    "@internationalized/date": "^3.12.2"
+    "@internationalized/date": "^3.12.2",
+    "fast-equals": "^6.0.2"
   },
   "devDependencies": {
     "@ark-ui/solid": "^5.0.0",
@@ -63,15 +64,17 @@
     "solid-js": "^1.9.0",
     "vite": "^8.0.0",
     "vite-plugin-solid": "^2.11.0",
+    "vitest": "^4.1.10",
     "zod": "^4.4.0",
-    "@vanstack/eslint-config": "0.0.1",
-    "@vanstack/vite-config": "0.0.1",
+    "@vanstack/vite-config": "0.0.2",
     "@vanstack/tsconfig": "0.0.1",
-    "@vanstack/prettier-config": "0.0.1"
+    "@vanstack/prettier-config": "0.0.1",
+    "@vanstack/eslint-config": "0.0.1"
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",
     "tsc": "tsc --noEmit",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix",
+    "test": "vitest run"
   }
 }