@vanstack/solid-ark 0.0.23 → 0.0.24

package/README.md

@@ -54,6 +54,10 @@ function Demo() {
 
 组件样式基于 Tailwind 语义 token，覆盖 `:root` CSS 变量即可自定义（各子入口文档中有对应的 token 示例）。
 
+## 演示
+
+组件演示见 monorepo 的 [apps/solid-demo](https://gitee.com/janzho/vanstack/tree/master/apps/solid-demo)：`pnpm dev` 后打开 Form / Modal / DataTable / Badge 等页面。
+
 ## License
 
 MIT

package/dist/data-table/index.mjs

@@ -1,7 +1,7 @@
 import "../solid-ark.css";
 import { t as e } from "../button-Br_upy12.js";
 import { t } from "../badge-Dt0uZnmA.js";
-import { t as n } from "../form-B5rMsobe.js";
+import { t as n } from "../form-B1_Ea0zH.js";
 import { t as r } from "../table-Dl0ngdNr.js";
 import { className as i, createComponent as a, effect as o, insert as s, memo as c, setAttribute as l, setStyleProperty as u, template as d, use as f } from "solid-js/web";
 import { For as p, Show as m, createEffect as ee, createMemo as h, createSignal as g, mergeProps as _, on as te, onCleanup as v, onMount as y } from "solid-js";

package/dist/form/index.mjs

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

package/dist/form/type.d.ts

@@ -25,6 +25,10 @@ interface BaseFieldConfig {
     renderLabel?: (label: string) => JSX.Element;
     /** 自定义 error */
     renderError?: (errors: string[]) => JSX.Element;
+    /** 是否隐藏渲染：true 时不渲染但值仍提交，默认 false */
+    hidden?: boolean;
+    /** 是否渲染并提交：false 或函数返回 false 时不渲染且值不提交；函数接收当前表单值（响应式联动显隐） */
+    show?: ((values: Record<string, unknown>) => boolean) | boolean;
     /** 提交/比较前转换为数字（select/radio 值是字符串、目标字段是数字时使用） */
     valueType?: "number";
 }

package/dist/{form-B5rMsobe.js → form-B1_Ea0zH.js}

@@ -2,21 +2,21 @@ 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, setAttribute as s, style as c, template as l } from "solid-js/web";
 import { For as u, Show as d, Suspense as f, createEffect as p, createMemo as m, createSignal as h, createUniqueId as g, lazy as _, mergeProps as v, on as y, onCleanup as b } from "solid-js";
 import { Field as x } from "@ark-ui/solid/field";
-import { createForm as S } from "@tanstack/solid-form";
-import { Checkbox as C } from "@ark-ui/solid/checkbox";
-import { RadioGroup as w } from "@ark-ui/solid/radio-group";
-import { Switch as T } from "@ark-ui/solid/switch";
-import { deepEqual as E } from "fast-equals";
+import { createForm as ee } 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 D = /*#__PURE__*/ l("<div aria-hidden=true class=van-form-field-skeleton>");
-function O() {
-	return D();
+var E = /*#__PURE__*/ l("<div aria-hidden=true class=van-form-field-skeleton>");
+function D() {
+	return E();
 }
 //#endregion
 //#region src/form/components/FormCheckbox.tsx
-var ee = /*#__PURE__*/ l("<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(C.Root, {
+var te = /*#__PURE__*/ l("<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) {
+	return n(S.Root, {
 		get checked() {
 			return e.value ?? !1;
 		},
@@ -27,33 +27,33 @@ function k(e) {
 		onCheckedChange: (t) => e.onChange(t.checked === !0),
 		get children() {
 			return [
-				n(C.Control, {
+				n(S.Control, {
 					class: "van-form-checkbox-control",
 					get children() {
-						return n(C.Indicator, {
+						return n(S.Indicator, {
 							class: "van-form-checkbox-indicator",
 							get children() {
-								return ee();
+								return te();
 							}
 						});
 					}
 				}),
-				o(() => o(() => !!e.label)() && n(C.Label, {
+				o(() => o(() => !!e.label)() && n(S.Label, {
 					class: "van-form-checkbox-label",
 					get children() {
 						return e.label;
 					}
 				})),
-				n(C.HiddenInput, {})
+				n(S.HiddenInput, {})
 			];
 		}
 	});
 }
 //#endregion
 //#region src/form/components/FormCheckboxGroup.tsx
-var A = /*#__PURE__*/ l("<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(C.Group, {
+var k = /*#__PURE__*/ l("<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) {
+	return n(S.Group, {
 		class: "van-form-checkbox-group",
 		get id() {
 			return t.controlId;
@@ -65,7 +65,7 @@ function j(t) {
 				get each() {
 					return t.field.options;
 				},
-				children: (e) => n(C.Root, {
+				children: (e) => n(S.Root, {
 					class: "van-form-checkbox-root",
 					get id() {
 						return `${t.controlId}-item-${e().value}`;
@@ -81,24 +81,24 @@ function j(t) {
 					},
 					get children() {
 						return [
-							n(C.Control, {
+							n(S.Control, {
 								class: "van-form-checkbox-control",
 								get children() {
-									return n(C.Indicator, {
+									return n(S.Indicator, {
 										class: "van-form-checkbox-indicator",
 										get children() {
-											return A();
+											return k();
 										}
 									});
 								}
 							}),
-							n(C.Label, {
+							n(S.Label, {
 								class: "van-form-checkbox-label",
 								get children() {
 									return e().label;
 								}
 							}),
-							n(C.HiddenInput, {})
+							n(S.HiddenInput, {})
 						];
 					}
 				})
@@ -108,7 +108,7 @@ function j(t) {
 }
 //#endregion
 //#region src/form/components/useDebouncedValue.ts
-function M(e) {
+function j(e) {
 	let [t, n] = h(e.value() ?? ""), r, i = (t) => {
 		if (n(t), (e.debounce ?? 0) > 0) {
 			clearTimeout(r), r = setTimeout(() => {
@@ -133,12 +133,12 @@ function M(e) {
 }
 //#endregion
 //#region src/form/components/FormInput.tsx
-var te = /*#__PURE__*/ l("<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__*/ l("<button aria-label=清空 type=button>"), P = /*#__PURE__*/ l("<div class=van-form-input-group>"), F = /*#__PURE__*/ l("<span class=\"van-form-input-addon van-form-input-addon-prefix\">"), I = /*#__PURE__*/ l("<span class=\"van-form-input-addon van-form-input-addon-suffix\">");
-function L() {
-	return te();
+var ne = /*#__PURE__*/ l("<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\">"), M = /*#__PURE__*/ l("<button aria-label=清空 type=button>"), N = /*#__PURE__*/ l("<div class=van-form-input-group>"), P = /*#__PURE__*/ l("<span class=\"van-form-input-addon van-form-input-addon-prefix\">"), F = /*#__PURE__*/ l("<span class=\"van-form-input-addon van-form-input-addon-suffix\">");
+function I() {
+	return ne();
 }
-function R(e) {
-	let { local: r, handleInput: s, handleBlur: c, handleClear: l } = M({
+function L(e) {
+	let { local: r, handleInput: s, handleBlur: c, handleClear: l } = j({
 		value: () => e.value,
 		debounce: e.field.debounce,
 		onChange: e.onChange,
@@ -164,11 +164,11 @@ function R(e) {
 		}
 	}), p = e.field.prefix !== void 0 || e.field.suffix !== void 0, m = e.field.clearable === !0;
 	return !p && !m ? f : (() => {
-		var s = P();
+		var s = N();
 		return a(s, (() => {
 			var t = o(() => e.field.prefix !== void 0);
 			return () => t() && (() => {
-				var t = F();
+				var t = P();
 				return a(t, () => e.field.prefix), t;
 			})();
 		})(), null), a(s, f, null), a(s, n(d, {
@@ -176,15 +176,15 @@ function R(e) {
 				return m && r() !== "";
 			},
 			get children() {
-				var r = N();
+				var r = M();
 				return r.$$click = () => {
 					l(), u?.focus();
-				}, a(r, n(L, {})), i(() => t(r, `van-form-input-clear${e.field.suffix === void 0 ? "" : " van-form-input-clear-before-suffix"}`)), r;
+				}, a(r, n(I, {})), i(() => t(r, `van-form-input-clear${e.field.suffix === void 0 ? "" : " van-form-input-clear-before-suffix"}`)), r;
 			}
 		}), null), a(s, (() => {
 			var t = o(() => e.field.suffix !== void 0);
 			return () => t() && (() => {
-				var t = I();
+				var t = F();
 				return a(t, () => e.field.suffix), t;
 			})();
 		})(), null), s;
@@ -193,9 +193,9 @@ function R(e) {
 r(["click"]);
 //#endregion
 //#region src/form/components/FormRadio.tsx
-function z(t) {
+function R(t) {
 	let r = m(() => t.field.options.map((e) => e.value));
-	return n(w.Root, {
+	return n(C.Root, {
 		class: "van-form-radio-group",
 		get id() {
 			return t.controlId;
@@ -212,21 +212,21 @@ function z(t) {
 				},
 				children: (e) => {
 					let r = t.field.options.find((t) => t.value === e());
-					return n(w.Item, {
+					return n(C.Item, {
 						class: "van-form-radio-item",
 						get value() {
 							return e();
 						},
 						get children() {
 							return [
-								n(w.ItemControl, { class: "van-form-radio-control" }),
-								n(w.ItemText, {
+								n(C.ItemControl, { class: "van-form-radio-control" }),
+								n(C.ItemText, {
 									class: "van-form-radio-text",
 									get children() {
 										return r?.label ?? e();
 									}
 								}),
-								n(w.ItemHiddenInput, {})
+								n(C.ItemHiddenInput, {})
 							];
 						}
 					});
@@ -237,8 +237,8 @@ function z(t) {
 }
 //#endregion
 //#region src/form/components/FormSwitch.tsx
-function B(e) {
-	return n(T.Root, {
+function z(e) {
+	return n(w.Root, {
 		get checked() {
 			return e.value ?? !1;
 		},
@@ -249,27 +249,27 @@ function B(e) {
 		onCheckedChange: (t) => e.onChange(t.checked),
 		get children() {
 			return [
-				n(T.Control, {
+				n(w.Control, {
 					class: "van-form-switch-control",
 					get children() {
-						return n(T.Thumb, { class: "van-form-switch-thumb" });
+						return n(w.Thumb, { class: "van-form-switch-thumb" });
 					}
 				}),
-				o(() => o(() => !!e.label)() && n(T.Label, {
+				o(() => o(() => !!e.label)() && n(w.Label, {
 					class: "van-form-switch-label",
 					get children() {
 						return e.label;
 					}
 				})),
-				n(T.HiddenInput, {})
+				n(w.HiddenInput, {})
 			];
 		}
 	});
 }
 //#endregion
 //#region src/form/components/FormTextarea.tsx
-function V(e) {
-	let { local: t, handleInput: r, handleBlur: i } = M({
+function B(e) {
+	let { local: t, handleInput: r, handleBlur: i } = j({
 		value: () => e.value,
 		debounce: e.field.debounce,
 		onChange: e.onChange,
@@ -292,17 +292,17 @@ function V(e) {
 }
 //#endregion
 //#region src/form/components/utils.ts
-function H(e, t) {
+function V(e, t) {
 	return e.fieldType === t;
 }
-function U(e) {
+function H(e) {
 	if (e != null) return typeof e == "number" ? `${e}px` : e;
 }
 //#endregion
 //#region src/form/components/FieldRenderer.tsx
-var W = _(() => import("./FormDatePicker-Cazd9kkD.js").then((e) => ({ default: e.FormDatePicker }))), G = _(() => import("./FormSelect-BDZATc3u.js").then((e) => ({ default: e.FormSelect })));
-function K(e) {
-	return H(e.field, "input") ? n(R, {
+var U = _(() => import("./FormDatePicker-Cazd9kkD.js").then((e) => ({ default: e.FormDatePicker }))), W = _(() => import("./FormSelect-BDZATc3u.js").then((e) => ({ default: e.FormSelect })));
+function G(e) {
+	return V(e.field, "input") ? n(L, {
 		get field() {
 			return e.field;
 		},
@@ -313,7 +313,7 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "textarea") ? n(V, {
+	}) : V(e.field, "textarea") ? n(B, {
 		get field() {
 			return e.field;
 		},
@@ -324,12 +324,12 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "select") ? n(f, {
+	}) : V(e.field, "select") ? n(f, {
 		get fallback() {
-			return n(O, {});
+			return n(D, {});
 		},
 		get children() {
-			return n(G, {
+			return n(W, {
 				get controlId() {
 					return e.controlId;
 				},
@@ -345,12 +345,12 @@ function K(e) {
 				}
 			});
 		}
-	}) : H(e.field, "datePicker") ? n(f, {
+	}) : V(e.field, "datePicker") ? n(f, {
 		get fallback() {
-			return n(O, {});
+			return n(D, {});
 		},
 		get children() {
-			return n(W, {
+			return n(U, {
 				get controlId() {
 					return e.controlId;
 				},
@@ -366,7 +366,7 @@ function K(e) {
 				}
 			});
 		}
-	}) : H(e.field, "checkbox") ? n(k, {
+	}) : V(e.field, "checkbox") ? n(O, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -377,7 +377,7 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "switch") ? n(B, {
+	}) : V(e.field, "switch") ? n(z, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -388,7 +388,7 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "radio") ? n(z, {
+	}) : V(e.field, "radio") ? n(R, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -399,7 +399,7 @@ function K(e) {
 		get value() {
 			return e.value;
 		}
-	}) : H(e.field, "checkbox-group") ? n(j, {
+	}) : V(e.field, "checkbox-group") ? n(A, {
 		get controlId() {
 			return e.controlId;
 		},
@@ -414,29 +414,29 @@ function K(e) {
 }
 //#endregion
 //#region src/form/patch.ts
+function K(e) {
+	return J(e) || e === "" ? void 0 : Number(e);
+}
 function q(e) {
-	return Y(e) || e === "" ? void 0 : Number(e);
+	return J(e) || e === "" ? 0 : Number(e);
 }
 function J(e) {
-	return Y(e) || e === "" ? 0 : Number(e);
-}
-function Y(e) {
 	return e == null;
 }
-function X(e) {
+function Y(e) {
 	return Array.isArray(e) ? [...e].sort() : [];
 }
-function Z(e) {
+function X(e) {
 	return e && typeof e == "object" && !Array.isArray(e) ? e : {};
 }
-function Q(e) {
+function Z(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e);
 }
-function ne(e, t, n) {
+function re(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" ? E(q(o), q(s)) : Array.isArray(o) || Array.isArray(s) ? E(X(o), X(s)) : Q(o) || Q(s) ? E(Z(o), Z(s)) : E(Y(o) ? "" : o, Y(s) ? "" : s), c || (r[n] = a === "number" ? J(s) : s);
+		c = a === "number" ? T(K(o), K(s)) : Array.isArray(o) || Array.isArray(s) ? T(Y(o), Y(s)) : Z(o) || Z(s) ? T(X(o), X(s)) : T(J(o) ? "" : o, J(s) ? "" : s), c || (r[n] = a === "number" ? q(s) : s);
 	}
 	return {
 		patch: r,
@@ -445,11 +445,11 @@ function ne(e, t, n) {
 }
 //#endregion
 //#region src/form/Form.tsx
-var re = /*#__PURE__*/ l("<form>"), ie = /*#__PURE__*/ l("<div class=van-form-field>");
-function $(e) {
+var ie = /*#__PURE__*/ l("<form>"), ae = /*#__PURE__*/ l("<div class=van-form-field>");
+function Q(e) {
 	return typeof e == "string" ? e : e && typeof e == "object" && "message" in e ? String(e.message) : String(e);
 }
-function ae(e) {
+function oe(e) {
 	let t = e.rule;
 	if (t) return {
 		onChange: typeof t == "function" ? (e) => t({
@@ -459,27 +459,34 @@ function ae(e) {
 		...e.validateListenTo?.length ? { onChangeListenTo: e.validateListenTo } : {}
 	};
 }
-function oe(e) {
-	let r = v({ values: {} }, e), l = r.values, f = g(), h = (e) => `${f}-${e}`, _ = S(() => ({
+function $(e, t) {
+	return typeof e.show == "function" ? e.show(t) : e.show !== !1;
+}
+function se(e, t) {
+	let n = new Set(t.filter((t) => !$(t, e)).map((e) => e.name));
+	return Object.fromEntries(Object.entries(e).filter(([e]) => !n.has(e)));
+}
+function ce(e) {
+	let r = v({ values: {} }, e), l = r.values, f = g(), h = (e) => `${f}-${e}`, _ = ee(() => ({
 		defaultValues: l,
 		onSubmit: async ({ value: e }) => {
-			let t = e;
+			let t = e, n = se(t, r.fields);
 			if (r.patch) {
-				let { patch: e, changed: n } = ne(l, t, r.fields);
+				let { patch: e, changed: i } = re(l, n, r.fields.filter((e) => $(e, t)));
 				await r.onSubmit?.({
-					value: t,
+					value: n,
 					patch: e,
-					changed: n
+					changed: i
 				});
 				return;
 			}
-			await r.onSubmit?.({ value: t });
+			await r.onSubmit?.({ value: n });
 		},
 		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($).filter(Boolean);
+				let r = (t?.errors ?? []).map(Q).filter(Boolean);
 				r.length > 0 && (n[e] = r);
 			}
 			r.onSubmitInvalid({
@@ -498,28 +505,28 @@ function oe(e) {
 		getFieldValue: (e) => _.getFieldValue(e),
 		setFieldValue: (e, t) => _.setFieldValue(e, t)
 	});
-	let b = _.useStore((e) => e.isSubmitting), C = _.useStore((e) => e.values), w = _.setFieldValue;
+	let b = _.useStore((e) => e.values), S = m(() => r.fields.filter((e) => !e.hidden && $(e, b()))), C = _.useStore((e) => e.isSubmitting), w = _.useStore((e) => e.values), T = _.setFieldValue;
 	return p(y(() => r.values, (e) => {
-		for (let [t, n] of Object.entries(e ?? {})) _.state.values[t] !== n && w(t, n);
-	}, { defer: !0 })), p(y(C, (e) => r.onValuesChange?.(e), { defer: !0 })), (() => {
-		var e = re();
+		for (let [t, n] of Object.entries(e ?? {})) _.state.values[t] !== n && T(t, n);
+	}, { defer: !0 })), p(y(w, (e) => r.onValuesChange?.(e), { defer: !0 })), (() => {
+		var e = ie();
 		return e.addEventListener("submit", (e) => {
 			e.preventDefault(), e.stopPropagation(), _.handleSubmit();
 		}), a(e, n(u, {
 			get each() {
-				return r.fields;
+				return S();
 			},
 			children: (e) => n(_.Field, {
 				get name() {
 					return e.name;
 				},
 				get validators() {
-					return ae(e);
+					return oe(e);
 				},
 				children: (t) => {
-					let r = t(), s = m(() => (t().state.meta.errors ?? []).map($).filter(Boolean)), l = m(() => t().state.value), f = U(e.fieldWidth), p = f ? { width: f } : void 0;
+					let r = t(), s = m(() => (t().state.meta.errors ?? []).map(Q).filter(Boolean)), l = m(() => t().state.value), f = H(e.fieldWidth), p = f ? { width: f } : void 0;
 					return e.control ? (() => {
-						var t = ie();
+						var t = ae();
 						return a(t, () => e.control({
 							value: l,
 							onChange: (e) => r.handleChange(e),
@@ -556,7 +563,7 @@ function oe(e) {
 										});
 									}
 								}),
-								n(K, {
+								n(G, {
 									get controlId() {
 										return h(e.name);
 									},
@@ -606,7 +613,7 @@ function oe(e) {
 					});
 				}
 			})
-		}), null), a(e, () => r.children?.({ isSubmitting: b() }), null), i((n) => {
+		}), null), a(e, () => r.children?.({ isSubmitting: C() }), null), i((n) => {
 			var i = `van-form-form ${r.className ?? ""}`, a = r.size ?? "default";
 			return i !== n.e && t(e, n.e = i), a !== n.t && s(e, "data-size", n.t = a), n;
 		}, {
@@ -616,4 +623,4 @@ function oe(e) {
 	})();
 }
 //#endregion
-export { oe as t };
+export { ce as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanstack/solid-ark",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -71,10 +71,10 @@
     "vite-plugin-solid": "^2.11.0",
     "vitest": "^4.1.10",
     "zod": "^4.4.0",
-    "@vanstack/prettier-config": "0.0.1",
-    "@vanstack/eslint-config": "0.0.1",
+    "@vanstack/vite-config": "0.0.2",
     "@vanstack/tsconfig": "0.0.1",
-    "@vanstack/vite-config": "0.0.2"
+    "@vanstack/prettier-config": "0.0.1",
+    "@vanstack/eslint-config": "0.0.1"
   },
   "scripts": {
     "build": "tsc --noEmit && vite build",