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

package/dist/{core-D2IjiQhj.d.cts → core-KIaXZ4_O.d.cts}

@@ -467,7 +467,7 @@ type MenuItem = {
     icon?: ReactNode;
     /** 主体之外的补充内容或操作区。 */
     extra?: ReactNode;
-    /** 标题内容，可传入文本或 React 节点。 */
+    /** 菜单项的悬停提示文字，停留 600ms 后显示，禁用项同样支持；收起的图标菜单未设置时使用纯文本 label。 */
     title?: string;
     /** 是否禁用交互。 */
     disabled?: boolean;

package/dist/{core-Bb0160em.d.ts → core-murmERqF.d.ts}

@@ -467,7 +467,7 @@ type MenuItem = {
     icon?: ReactNode;
     /** 主体之外的补充内容或操作区。 */
     extra?: ReactNode;
-    /** 标题内容，可传入文本或 React 节点。 */
+    /** 菜单项的悬停提示文字，停留 600ms 后显示，禁用项同样支持；收起的图标菜单未设置时使用纯文本 label。 */
     title?: string;
     /** 是否禁用交互。 */
     disabled?: boolean;

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/core.d.cts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-D2IjiQhj.cjs';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-KIaXZ4_O.cjs';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-YJbT-MF1.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-Bb0160em.js';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-murmERqF.js';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-CCrPqULn.js';
 import 'react';
 import './shared-Bx4B28Wh.js';

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,
@@ -14344,6 +14386,8 @@ function createColumnSettingPlugin(options = {}) {
         ...customItems.map((item) => ({
           key: "custom:" + item.key,
           label: item.label,
+          // 设置菜单复用菜单项提示，禁用操作也需说明不可用原因。
+          title: item.title,
           icon: item.icon,
           danger: item.danger,
           disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
@@ -14439,6 +14483,7 @@ function ToolbarItems({
       {
         size: "small",
         danger: item.danger,
+        title: item.title,
         icon: item.icon,
         disabled,
         onClick: () => void item.onClick?.(context),
@@ -23291,7 +23336,8 @@ function QueryForm({
 }) {
   const [form] = useForm(providedForm);
   const [internalCollapsed, setInternalCollapsed] = (0, import_react93.useState)(defaultCollapsed);
-  const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
+  const [needsCollapse, setNeedsCollapse] = (0, import_react93.useState)(false);
+  const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
   const [searching, setSearching] = (0, import_react93.useState)(false);
   const [saving, setSaving] = (0, import_react93.useState)(false);
   const [removing, setRemoving] = (0, import_react93.useState)(false);
@@ -23311,15 +23357,33 @@ function QueryForm({
   const limit = Math.max(1, Math.floor(collapsedCount));
   const rowRef = (0, import_react93.useRef)(null);
   const actionsRef = (0, import_react93.useRef)(null);
+  const toggleRef = (0, import_react93.useRef)(null);
   const [fittingCount, setFittingCount] = (0, import_react93.useState)(limit);
   (0, import_react93.useLayoutEffect)(() => {
-    if (!collapsed) return;
     const row = rowRef.current;
     const actions = actionsRef.current;
     if (!row || !actions) return;
     function measure() {
       if (!row || !actions) return;
       const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+      const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
+      const hiddenFields = allFields.filter((field) => field.hidden);
+      const wasCollapsed = row.classList.contains("is-collapsed");
+      const toggle = toggleRef.current;
+      const toggleHidden = toggle?.hidden;
+      row.classList.remove("is-collapsed");
+      hiddenFields.forEach((field) => {
+        field.hidden = false;
+      });
+      if (toggle) toggle.hidden = true;
+      const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
+      setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
+      if (toggle) toggle.hidden = Boolean(toggleHidden);
+      hiddenFields.forEach((field) => {
+        field.hidden = true;
+      });
+      row.classList.toggle("is-collapsed", wasCollapsed);
+      if (!collapsed) return;
       let remaining = row.clientWidth - actions.getBoundingClientRect().width;
       let count = 0;
       for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
@@ -23336,7 +23400,7 @@ function QueryForm({
     observer.observe(actions);
     row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
     return () => observer.disconnect();
-  }, [collapsed, limit, fieldWidth, fields, children]);
+  }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
   async function search(values) {
     const info = source.current;
     source.current = { source: "submit" };
@@ -23467,7 +23531,7 @@ function QueryForm({
                   setSaveOpen(true);
                 }, children: saveText }) : null
               ] }),
-              collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
                 Button,
                 {
                   variant: "link",
@@ -23480,7 +23544,7 @@ function QueryForm({
                   },
                   children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
                 }
-              ) : null,
+              ) }) : null,
               actionsExtra
             ] })
           ] }),

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

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-D2IjiQhj.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-D2IjiQhj.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-KIaXZ4_O.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-KIaXZ4_O.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -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;
     /**
      * 字段的校验规则，按配置执行。
@@ -2733,6 +2733,8 @@ interface TableToolbarItem<T> {
     key: string;
     /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 操作的悬停提示文字；普通工具栏按钮和设置菜单项均支持，禁用时仍可显示，停留 600ms 后出现。 */
+    title?: string;
     /** 显示在内容旁的图标节点，建议使用 Icon 组件。 */
     icon?: ReactNode;
     /** 显示位置或定位配置。 */
@@ -3099,11 +3101,11 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     fieldWidth?: number | string;
     /**
-     是否显示展开和收起入口；false 时始终展示全部字段。
+     * 是否允许展开和收起；仅全部字段与操作区无法在一行内显示时提供入口，false 时始终展示全部字段。
      * @defaultValue true
      */
     collapsible?: boolean;
-    /** 受控收起状态，需在 onCollapsedChange 中更新。收起时保留字段挂载和值，只隐藏放不下的字段和底部快捷标签。 */
+    /** 受控收起状态，需在 onCollapsedChange 中更新；全部字段能单行显示时不执行收起。收起时保留字段挂载和值，只隐藏放不下的字段和底部快捷标签。 */
     collapsed?: boolean;
     /**
      * 非受控模式的初始收起状态。
@@ -3111,7 +3113,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     defaultCollapsed?: boolean;
     /**
-     * 收起时最多保留的字段数；实际数量会根据可用宽度减少，以保持单行。
+     * 需要折叠时最多保留的字段数；实际数量会根据可用宽度减少，以保持单行。全部字段能单行显示时不限制字段数。
      * @defaultValue 3
      */
     collapsedCount?: number;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-Bb0160em.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-Bb0160em.js';
+import { T as TagStatus, B as BadgeProps } from './core-murmERqF.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-murmERqF.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -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;
     /**
      * 字段的校验规则，按配置执行。
@@ -2733,6 +2733,8 @@ interface TableToolbarItem<T> {
     key: string;
     /** 展示给用户的名称，可传入文本或 React 节点。 */
     label: ReactNode;
+    /** 操作的悬停提示文字；普通工具栏按钮和设置菜单项均支持，禁用时仍可显示，停留 600ms 后出现。 */
+    title?: string;
     /** 显示在内容旁的图标节点，建议使用 Icon 组件。 */
     icon?: ReactNode;
     /** 显示位置或定位配置。 */
@@ -3099,11 +3101,11 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     fieldWidth?: number | string;
     /**
-     是否显示展开和收起入口；false 时始终展示全部字段。
+     * 是否允许展开和收起；仅全部字段与操作区无法在一行内显示时提供入口，false 时始终展示全部字段。
      * @defaultValue true
      */
     collapsible?: boolean;
-    /** 受控收起状态，需在 onCollapsedChange 中更新。收起时保留字段挂载和值，只隐藏放不下的字段和底部快捷标签。 */
+    /** 受控收起状态，需在 onCollapsedChange 中更新；全部字段能单行显示时不执行收起。收起时保留字段挂载和值，只隐藏放不下的字段和底部快捷标签。 */
     collapsed?: boolean;
     /**
      * 非受控模式的初始收起状态。
@@ -3111,7 +3113,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
      */
     defaultCollapsed?: boolean;
     /**
-     * 收起时最多保留的字段数；实际数量会根据可用宽度减少，以保持单行。
+     * 需要折叠时最多保留的字段数；实际数量会根据可用宽度减少，以保持单行。全部字段能单行显示时不限制字段数。
      * @defaultValue 3
      */
     collapsedCount?: number;

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;
@@ -7094,6 +7136,8 @@ function createColumnSettingPlugin(options = {}) {
         ...customItems.map((item) => ({
           key: "custom:" + item.key,
           label: item.label,
+          // 设置菜单复用菜单项提示，禁用操作也需说明不可用原因。
+          title: item.title,
           icon: item.icon,
           danger: item.danger,
           disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
@@ -7189,6 +7233,7 @@ function ToolbarItems({
       {
         size: "small",
         danger: item.danger,
+        title: item.title,
         icon: item.icon,
         disabled,
         onClick: () => void item.onClick?.(context),
@@ -8425,7 +8470,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,
@@ -8460,7 +8505,8 @@ function QueryForm({
 }) {
   const [form] = useForm(providedForm);
   const [internalCollapsed, setInternalCollapsed] = useState20(defaultCollapsed);
-  const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
+  const [needsCollapse, setNeedsCollapse] = useState20(false);
+  const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
   const [searching, setSearching] = useState20(false);
   const [saving, setSaving] = useState20(false);
   const [removing, setRemoving] = useState20(false);
@@ -8480,15 +8526,33 @@ function QueryForm({
   const limit = Math.max(1, Math.floor(collapsedCount));
   const rowRef = useRef18(null);
   const actionsRef = useRef18(null);
+  const toggleRef = useRef18(null);
   const [fittingCount, setFittingCount] = useState20(limit);
-  useLayoutEffect4(() => {
-    if (!collapsed) return;
+  useLayoutEffect5(() => {
     const row = rowRef.current;
     const actions = actionsRef.current;
     if (!row || !actions) return;
     function measure() {
       if (!row || !actions) return;
       const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
+      const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
+      const hiddenFields = allFields.filter((field) => field.hidden);
+      const wasCollapsed = row.classList.contains("is-collapsed");
+      const toggle = toggleRef.current;
+      const toggleHidden = toggle?.hidden;
+      row.classList.remove("is-collapsed");
+      hiddenFields.forEach((field) => {
+        field.hidden = false;
+      });
+      if (toggle) toggle.hidden = true;
+      const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
+      setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
+      if (toggle) toggle.hidden = Boolean(toggleHidden);
+      hiddenFields.forEach((field) => {
+        field.hidden = true;
+      });
+      row.classList.toggle("is-collapsed", wasCollapsed);
+      if (!collapsed) return;
       let remaining = row.clientWidth - actions.getBoundingClientRect().width;
       let count = 0;
       for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
@@ -8505,7 +8569,7 @@ function QueryForm({
     observer.observe(actions);
     row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
     return () => observer.disconnect();
-  }, [collapsed, limit, fieldWidth, fields, children]);
+  }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
   async function search(values) {
     const info = source.current;
     source.current = { source: "submit" };
@@ -8636,7 +8700,7 @@ function QueryForm({
                   setSaveOpen(true);
                 }, children: saveText }) : null
               ] }),
-              collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26(
+              collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ jsx26(
                 Button,
                 {
                   variant: "link",
@@ -8649,7 +8713,7 @@ function QueryForm({
                   },
                   children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
                 }
-              ) : null,
+              ) }) : null,
               actionsExtra
             ] })
           ] }),

package/package.json

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