@sia.soul/sia-react-ui 0.1.48 → 0.1.49

package/dist/core.css

@@ -7458,11 +7458,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-form-item {
   display: grid;
-  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
+  grid-template-columns: var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px)) minmax(0, 1fr);
   gap: 8px 14px;
   margin-bottom: 6px;
   color: var(--sia-color-text);
 }
+.sia-form-item__label-content {
+  display: inline-block;
+  width: max-content;
+}
 .sia-form-item__label {
   padding-top: 8px;
   text-align: right;
@@ -7554,6 +7558,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 8px;
 }
 .sia-form--inline .sia-form-item__label {
+  flex: 0 0 var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px));
   text-align: left;
 }
 .sia-form-error-list {

package/dist/index.cjs

@@ -6352,9 +6352,51 @@ function FormRoot({
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = (0, import_react29.useMemo)(() => instance, [instance]);
+  const formRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useLayoutEffect)(() => {
+    const root = formRef.current;
+    if (!root) return;
+    let frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      const labels = [...root.querySelectorAll(".sia-form-item__label-content")].filter((label) => label.closest(".sia-form") === root);
+      const next = new Set(labels);
+      observed.forEach((label) => {
+        if (!next.has(label)) {
+          resizeObserver.unobserve(label);
+          observed.delete(label);
+        }
+      });
+      let width = 0;
+      labels.forEach((label) => {
+        if (!observed.has(label)) {
+          resizeObserver.observe(label);
+          observed.add(label);
+        }
+        if (label.getClientRects().length) width = Math.max(width, label.offsetWidth);
+      });
+      const value = `${Math.ceil(width)}px`;
+      if (root.style.getPropertyValue("--sia-form-auto-label-width") !== value) root.style.setProperty("--sia-form-auto-label-width", value);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(root);
+    const mutations = new MutationObserver(schedule);
+    mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
+    measure();
+    return () => {
+      resizeObserver.disconnect();
+      mutations.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "form",
     {
+      ref: formRef,
       ...withTitleTooltip(props),
       className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
@@ -6447,10 +6489,10 @@ function FormItem({
   const inputWrap = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sia-form-item__input-wrap", children: content });
   const hasError = status === "error" && Boolean(helpContent);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { id: labelId, className: "sia-form-item__label", children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { id: labelId, className: "sia-form-item__label", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "sia-form-item__label-content", children: [
       ruleRequired ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "sia-form-item__required-mark", "aria-hidden": "true", children: "*" }) : null,
       label
-    ] }) : null,
+    ] }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sia-form-item__control", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Tooltip,

package/dist/index.css

@@ -7458,11 +7458,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 }
 .sia-form-item {
   display: grid;
-  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
+  grid-template-columns: var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px)) minmax(0, 1fr);
   gap: 8px 14px;
   margin-bottom: 6px;
   color: var(--sia-color-text);
 }
+.sia-form-item__label-content {
+  display: inline-block;
+  width: max-content;
+}
 .sia-form-item__label {
   padding-top: 8px;
   text-align: right;
@@ -7554,6 +7558,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 8px;
 }
 .sia-form--inline .sia-form-item__label {
+  flex: 0 0 var(--sia-form-label-width, var(--sia-form-auto-label-width, 0px));
   text-align: left;
 }
 .sia-form-error-list {

package/dist/index.d.cts

@@ -736,7 +736,7 @@ interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"
     /** 表单初始值 */
     initialValues?: FormValues;
     /**
-     * 布局方式。
+     * 布局方式；horizontal 与 inline 默认按当前表单内最宽标签对齐，vertical 保持标签在控件上方。
      * @defaultValue "horizontal"
      */
     layout?: "horizontal" | "vertical" | "inline";
@@ -769,7 +769,7 @@ declare function FormRoot({ form, initialValues, layout, size: sizeProp, placeho
 interface FormItemProps {
     /** 绑定到表单值的字段名或嵌套路径，例如 ["user", "name"]。 */
     name?: NamePath;
-    /** 字段标签，支持文本或 React 节点。 */
+    /** 字段标签，支持文本或 React 节点；横向及行内布局未指定标签列宽时，与同一 Form 内最宽的可见标签对齐，测量包含必填标记。 */
     label?: ReactNode;
     /**
      * 字段的校验规则，按配置执行。

package/dist/index.d.ts

@@ -736,7 +736,7 @@ interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"
     /** 表单初始值 */
     initialValues?: FormValues;
     /**
-     * 布局方式。
+     * 布局方式；horizontal 与 inline 默认按当前表单内最宽标签对齐，vertical 保持标签在控件上方。
      * @defaultValue "horizontal"
      */
     layout?: "horizontal" | "vertical" | "inline";
@@ -769,7 +769,7 @@ declare function FormRoot({ form, initialValues, layout, size: sizeProp, placeho
 interface FormItemProps {
     /** 绑定到表单值的字段名或嵌套路径，例如 ["user", "name"]。 */
     name?: NamePath;
-    /** 字段标签，支持文本或 React 节点。 */
+    /** 字段标签，支持文本或 React 节点；横向及行内布局未指定标签列宽时，与同一 Form 内最宽的可见标签对齐，测量包含必填标记。 */
     label?: ReactNode;
     /**
      * 字段的校验规则，按配置执行。

package/dist/index.js

@@ -1413,7 +1413,7 @@ var Drawer2 = Object.assign(DrawerRoot, {
 });
 
 // src/components/Form.tsx
-import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId3, useMemo as useMemo4, useRef as useRef5, useSyncExternalStore } from "react";
+import { Children as Children3, cloneElement as cloneElement2, createContext as createContext2, forwardRef as forwardRef2, isValidElement as isValidElement2, useContext as useContext2, useEffect as useEffect3, useId as useId3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef5, useSyncExternalStore } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var Switch = forwardRef2(function Switch2({
   label,
@@ -1660,9 +1660,51 @@ function FormRoot({
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = useMemo4(() => instance, [instance]);
+  const formRef = useRef5(null);
+  useLayoutEffect2(() => {
+    const root = formRef.current;
+    if (!root) return;
+    let frame = 0;
+    const observed = /* @__PURE__ */ new Set();
+    const measure = () => {
+      frame = 0;
+      const labels = [...root.querySelectorAll(".sia-form-item__label-content")].filter((label) => label.closest(".sia-form") === root);
+      const next = new Set(labels);
+      observed.forEach((label) => {
+        if (!next.has(label)) {
+          resizeObserver.unobserve(label);
+          observed.delete(label);
+        }
+      });
+      let width = 0;
+      labels.forEach((label) => {
+        if (!observed.has(label)) {
+          resizeObserver.observe(label);
+          observed.add(label);
+        }
+        if (label.getClientRects().length) width = Math.max(width, label.offsetWidth);
+      });
+      const value = `${Math.ceil(width)}px`;
+      if (root.style.getPropertyValue("--sia-form-auto-label-width") !== value) root.style.setProperty("--sia-form-auto-label-width", value);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    const resizeObserver = new ResizeObserver(schedule);
+    resizeObserver.observe(root);
+    const mutations = new MutationObserver(schedule);
+    mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
+    measure();
+    return () => {
+      resizeObserver.disconnect();
+      mutations.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
   return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx9(
     "form",
     {
+      ref: formRef,
       ...withTitleTooltip(props),
       className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
@@ -1755,10 +1797,10 @@ function FormItem({
   const inputWrap = /* @__PURE__ */ jsx9("div", { className: "sia-form-item__input-wrap", children: content });
   const hasError = status === "error" && Boolean(helpContent);
   return /* @__PURE__ */ jsxs9("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
-    label ? /* @__PURE__ */ jsxs9("div", { id: labelId, className: "sia-form-item__label", children: [
+    label ? /* @__PURE__ */ jsx9("div", { id: labelId, className: "sia-form-item__label", children: /* @__PURE__ */ jsxs9("span", { className: "sia-form-item__label-content", children: [
       ruleRequired ? /* @__PURE__ */ jsx9("span", { className: "sia-form-item__required-mark", "aria-hidden": "true", children: "*" }) : null,
       label
-    ] }) : null,
+    ] }) }) : null,
     /* @__PURE__ */ jsxs9("div", { className: "sia-form-item__control", children: [
       /* @__PURE__ */ jsx9(
         Tooltip,
@@ -4652,7 +4694,7 @@ function Treemap({
 }
 
 // src/components/Table/TableCellContent.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState16 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState16 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var pendingLayouts = /* @__PURE__ */ new Map();
 var layoutFrame;
@@ -4674,7 +4716,7 @@ function TableCellContent({ children, ellipsis, title }) {
   const ref = useRef13(null);
   const [overflowing, setOverflowing] = useState16(false);
   const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
     const normalizeLayouts = (parent, layouts) => {
@@ -4710,7 +4752,7 @@ function TableCellContent({ children, ellipsis, title }) {
 }
 
 // src/components/Table/TableCanvasLayer.tsx
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef14 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef14 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -4766,7 +4808,7 @@ function toTablePageParams(current, pageSize) {
 import { jsx as jsx21 } from "react/jsx-runtime";
 function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
   const canvasRef = useRef14(null);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const canvas = canvasRef.current;
     const scroller = viewport.current;
     if (!canvas || !scroller) return;
@@ -8425,7 +8467,7 @@ var InputSelect = forwardRef7(function InputSelect2({
 });
 
 // src/components/QueryForm.tsx
-import { Children as Children4, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState20 } from "react";
+import { Children as Children4, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState20 } from "react";
 import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function QueryForm({
   fields,
@@ -8481,7 +8523,7 @@ function QueryForm({
   const rowRef = useRef18(null);
   const actionsRef = useRef18(null);
   const [fittingCount, setFittingCount] = useState20(limit);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (!collapsed) return;
     const row = rowRef.current;
     const actions = actionsRef.current;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.48",
+  "version": "0.1.49",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",