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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1461,6 +1461,7 @@ var UploadRoot = forwardRef(function UploadRoot2({
1461
1461
  downloadRequest,
1462
1462
  itemRender,
1463
1463
  children,
1464
+ onChoose,
1464
1465
  className = "",
1465
1466
  style,
1466
1467
  onDragOver,
@@ -1663,7 +1664,9 @@ var UploadRoot = forwardRef(function UploadRoot2({
1663
1664
  event.preventDefault();
1664
1665
  ingest(selected.map((file) => ({ file, path: file.name })));
1665
1666
  }
1666
- const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ jsx8("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ jsx8(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => inputRef.current?.click(), children: children ?? (listType === "picture-card" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
1667
+ const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ jsx8("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ jsx8(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
1668
+ if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
1669
+ }, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
1667
1670
  /* @__PURE__ */ jsx8(Icon, { name: "plus", size: 24 }),
1668
1671
  /* @__PURE__ */ jsx8("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
1669
1672
  ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
@@ -467,7 +467,7 @@ type MenuItem = {
467
467
  icon?: ReactNode;
468
468
  /** 主体之外的补充内容或操作区。 */
469
469
  extra?: ReactNode;
470
- /** 标题内容,可传入文本或 React 节点。 */
470
+ /** 菜单项的悬停提示文字,停留 600ms 后显示,禁用项同样支持;收起的图标菜单未设置时使用纯文本 label。 */
471
471
  title?: string;
472
472
  /** 是否禁用交互。 */
473
473
  disabled?: boolean;
@@ -2027,6 +2027,8 @@ interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue
2027
2027
  itemRender?: (node: ReactNode, file: UploadFile, fileList: readonly UploadFile[], actions: UploadItemActions) => ReactNode;
2028
2028
  /** 上传按钮内容,不应嵌套其他交互控件;外层负责点击和键盘操作。 */
2029
2029
  children?: ReactNode;
2030
+ /** 点击或键盘激活上传入口时同步调用;返回 false 阻止打开系统文件选择器,可用于打开业务上传弹框。默认打开系统选择器。禁用或已达数量上限时不调用,不影响拖拽与粘贴。 */
2031
+ onChoose?: () => boolean | void;
2030
2032
  }
2031
2033
  /** 拖拽区域继承全部 Upload 能力,ref 同样支持手动控制。 */
2032
2034
  interface UploadDraggerProps extends UploadProps {
@@ -467,7 +467,7 @@ type MenuItem = {
467
467
  icon?: ReactNode;
468
468
  /** 主体之外的补充内容或操作区。 */
469
469
  extra?: ReactNode;
470
- /** 标题内容,可传入文本或 React 节点。 */
470
+ /** 菜单项的悬停提示文字,停留 600ms 后显示,禁用项同样支持;收起的图标菜单未设置时使用纯文本 label。 */
471
471
  title?: string;
472
472
  /** 是否禁用交互。 */
473
473
  disabled?: boolean;
@@ -2027,6 +2027,8 @@ interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue
2027
2027
  itemRender?: (node: ReactNode, file: UploadFile, fileList: readonly UploadFile[], actions: UploadItemActions) => ReactNode;
2028
2028
  /** 上传按钮内容,不应嵌套其他交互控件;外层负责点击和键盘操作。 */
2029
2029
  children?: ReactNode;
2030
+ /** 点击或键盘激活上传入口时同步调用;返回 false 阻止打开系统文件选择器,可用于打开业务上传弹框。默认打开系统选择器。禁用或已达数量上限时不调用,不影响拖拽与粘贴。 */
2031
+ onChoose?: () => boolean | void;
2030
2032
  }
2031
2033
  /** 拖拽区域继承全部 Upload 能力,ref 同样支持手动控制。 */
2032
2034
  interface UploadDraggerProps extends UploadProps {
package/dist/core.cjs CHANGED
@@ -4562,6 +4562,7 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
4562
4562
  downloadRequest,
4563
4563
  itemRender,
4564
4564
  children,
4565
+ onChoose,
4565
4566
  className = "",
4566
4567
  style,
4567
4568
  onDragOver,
@@ -4764,7 +4765,9 @@ var UploadRoot = (0, import_react24.forwardRef)(function UploadRoot2({
4764
4765
  event.preventDefault();
4765
4766
  ingest(selected.map((file) => ({ file, path: file.name })));
4766
4767
  }
4767
- const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => inputRef.current?.click(), children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
4768
+ const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
4769
+ if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
4770
+ }, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
4768
4771
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "plus", size: 24 }),
4769
4772
  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
4770
4773
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
package/dist/core.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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-DtGYdU61.cjs';
2
2
  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';
3
3
  import 'react';
4
4
  import './shared-Bx4B28Wh.cjs';
package/dist/core.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- 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';
1
+ 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-DXJ4b0lT.js';
2
2
  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';
3
3
  import 'react';
4
4
  import './shared-Bx4B28Wh.js';
package/dist/core.js CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  Typography,
11
11
  Upload,
12
12
  message
13
- } from "./chunk-FJ3FP4YV.js";
13
+ } from "./chunk-MFR2FYQA.js";
14
14
  import "./chunk-SMCYEPBL.js";
15
15
  import {
16
16
  Modal,
package/dist/index.cjs CHANGED
@@ -8769,6 +8769,7 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
8769
8769
  downloadRequest,
8770
8770
  itemRender,
8771
8771
  children,
8772
+ onChoose,
8772
8773
  className = "",
8773
8774
  style,
8774
8775
  onDragOver,
@@ -8971,7 +8972,9 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
8971
8972
  event.preventDefault();
8972
8973
  ingest(selected.map((file) => ({ file, path: file.name })));
8973
8974
  }
8974
- const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => inputRef.current?.click(), children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
8975
+ const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
8976
+ if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
8977
+ }, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
8975
8978
  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "plus", size: 24 }),
8976
8979
  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
8977
8980
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
@@ -14386,6 +14389,8 @@ function createColumnSettingPlugin(options = {}) {
14386
14389
  ...customItems.map((item) => ({
14387
14390
  key: "custom:" + item.key,
14388
14391
  label: item.label,
14392
+ // 设置菜单复用菜单项提示,禁用操作也需说明不可用原因。
14393
+ title: item.title,
14389
14394
  icon: item.icon,
14390
14395
  danger: item.danger,
14391
14396
  disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
@@ -14481,6 +14486,7 @@ function ToolbarItems({
14481
14486
  {
14482
14487
  size: "small",
14483
14488
  danger: item.danger,
14489
+ title: item.title,
14484
14490
  icon: item.icon,
14485
14491
  disabled,
14486
14492
  onClick: () => void item.onClick?.(context),
@@ -23333,7 +23339,8 @@ function QueryForm({
23333
23339
  }) {
23334
23340
  const [form] = useForm(providedForm);
23335
23341
  const [internalCollapsed, setInternalCollapsed] = (0, import_react93.useState)(defaultCollapsed);
23336
- const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
23342
+ const [needsCollapse, setNeedsCollapse] = (0, import_react93.useState)(false);
23343
+ const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
23337
23344
  const [searching, setSearching] = (0, import_react93.useState)(false);
23338
23345
  const [saving, setSaving] = (0, import_react93.useState)(false);
23339
23346
  const [removing, setRemoving] = (0, import_react93.useState)(false);
@@ -23353,15 +23360,33 @@ function QueryForm({
23353
23360
  const limit = Math.max(1, Math.floor(collapsedCount));
23354
23361
  const rowRef = (0, import_react93.useRef)(null);
23355
23362
  const actionsRef = (0, import_react93.useRef)(null);
23363
+ const toggleRef = (0, import_react93.useRef)(null);
23356
23364
  const [fittingCount, setFittingCount] = (0, import_react93.useState)(limit);
23357
23365
  (0, import_react93.useLayoutEffect)(() => {
23358
- if (!collapsed) return;
23359
23366
  const row = rowRef.current;
23360
23367
  const actions = actionsRef.current;
23361
23368
  if (!row || !actions) return;
23362
23369
  function measure() {
23363
23370
  if (!row || !actions) return;
23364
23371
  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
23372
+ const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
23373
+ const hiddenFields = allFields.filter((field) => field.hidden);
23374
+ const wasCollapsed = row.classList.contains("is-collapsed");
23375
+ const toggle = toggleRef.current;
23376
+ const toggleHidden = toggle?.hidden;
23377
+ row.classList.remove("is-collapsed");
23378
+ hiddenFields.forEach((field) => {
23379
+ field.hidden = false;
23380
+ });
23381
+ if (toggle) toggle.hidden = true;
23382
+ const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
23383
+ setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
23384
+ if (toggle) toggle.hidden = Boolean(toggleHidden);
23385
+ hiddenFields.forEach((field) => {
23386
+ field.hidden = true;
23387
+ });
23388
+ row.classList.toggle("is-collapsed", wasCollapsed);
23389
+ if (!collapsed) return;
23365
23390
  let remaining = row.clientWidth - actions.getBoundingClientRect().width;
23366
23391
  let count = 0;
23367
23392
  for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
@@ -23378,7 +23403,7 @@ function QueryForm({
23378
23403
  observer.observe(actions);
23379
23404
  row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
23380
23405
  return () => observer.disconnect();
23381
- }, [collapsed, limit, fieldWidth, fields, children]);
23406
+ }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
23382
23407
  async function search(values) {
23383
23408
  const info = source.current;
23384
23409
  source.current = { source: "submit" };
@@ -23509,7 +23534,7 @@ function QueryForm({
23509
23534
  setSaveOpen(true);
23510
23535
  }, children: saveText }) : null
23511
23536
  ] }),
23512
- collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23537
+ collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23513
23538
  Button,
23514
23539
  {
23515
23540
  variant: "link",
@@ -23522,7 +23547,7 @@ function QueryForm({
23522
23547
  },
23523
23548
  children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
23524
23549
  }
23525
- ) : null,
23550
+ ) }) : null,
23526
23551
  actionsExtra
23527
23552
  ] })
23528
23553
  ] }),
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-D2IjiQhj.cjs';
2
- 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';
1
+ import { T as TagStatus, B as BadgeProps } from './core-DtGYdU61.cjs';
2
+ 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-DtGYdU61.cjs';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -2733,6 +2733,8 @@ interface TableToolbarItem<T> {
2733
2733
  key: string;
2734
2734
  /** 展示给用户的名称,可传入文本或 React 节点。 */
2735
2735
  label: ReactNode;
2736
+ /** 操作的悬停提示文字;普通工具栏按钮和设置菜单项均支持,禁用时仍可显示,停留 600ms 后出现。 */
2737
+ title?: string;
2736
2738
  /** 显示在内容旁的图标节点,建议使用 Icon 组件。 */
2737
2739
  icon?: ReactNode;
2738
2740
  /** 显示位置或定位配置。 */
@@ -3099,19 +3101,19 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
3099
3101
  */
3100
3102
  fieldWidth?: number | string;
3101
3103
  /**
3102
- 是否显示展开和收起入口;false 时始终展示全部字段。
3104
+ * 是否允许展开和收起;仅全部字段与操作区无法在一行内显示时提供入口,false 时始终展示全部字段。
3103
3105
  * @defaultValue true
3104
3106
  */
3105
3107
  collapsible?: boolean;
3106
- /** 受控收起状态,需在 onCollapsedChange 中更新。收起时保留字段挂载和值,只隐藏放不下的字段和底部快捷标签。 */
3108
+ /** 受控收起状态,需在 onCollapsedChange 中更新;全部字段能单行显示时不执行收起。收起时保留字段挂载和值,只隐藏放不下的字段和底部快捷标签。 */
3107
3109
  collapsed?: boolean;
3108
3110
  /**
3109
- * 非受控模式的初始收起状态。
3111
+ * 非受控模式的初始收起状态;默认展开全部查询条件,即使条件超过一行也不自动收起。显式传 true 时才初始收起。
3110
3112
  * @defaultValue false
3111
3113
  */
3112
3114
  defaultCollapsed?: boolean;
3113
3115
  /**
3114
- * 收起时最多保留的字段数;实际数量会根据可用宽度减少,以保持单行。
3116
+ * 需要折叠时最多保留的字段数;实际数量会根据可用宽度减少,以保持单行。全部字段能单行显示时不限制字段数。
3115
3117
  * @defaultValue 3
3116
3118
  */
3117
3119
  collapsedCount?: number;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { T as TagStatus, B as BadgeProps } from './core-Bb0160em.js';
2
- 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';
1
+ import { T as TagStatus, B as BadgeProps } from './core-DXJ4b0lT.js';
2
+ 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-DXJ4b0lT.js';
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
5
5
  import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -2733,6 +2733,8 @@ interface TableToolbarItem<T> {
2733
2733
  key: string;
2734
2734
  /** 展示给用户的名称,可传入文本或 React 节点。 */
2735
2735
  label: ReactNode;
2736
+ /** 操作的悬停提示文字;普通工具栏按钮和设置菜单项均支持,禁用时仍可显示,停留 600ms 后出现。 */
2737
+ title?: string;
2736
2738
  /** 显示在内容旁的图标节点,建议使用 Icon 组件。 */
2737
2739
  icon?: ReactNode;
2738
2740
  /** 显示位置或定位配置。 */
@@ -3099,19 +3101,19 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
3099
3101
  */
3100
3102
  fieldWidth?: number | string;
3101
3103
  /**
3102
- 是否显示展开和收起入口;false 时始终展示全部字段。
3104
+ * 是否允许展开和收起;仅全部字段与操作区无法在一行内显示时提供入口,false 时始终展示全部字段。
3103
3105
  * @defaultValue true
3104
3106
  */
3105
3107
  collapsible?: boolean;
3106
- /** 受控收起状态,需在 onCollapsedChange 中更新。收起时保留字段挂载和值,只隐藏放不下的字段和底部快捷标签。 */
3108
+ /** 受控收起状态,需在 onCollapsedChange 中更新;全部字段能单行显示时不执行收起。收起时保留字段挂载和值,只隐藏放不下的字段和底部快捷标签。 */
3107
3109
  collapsed?: boolean;
3108
3110
  /**
3109
- * 非受控模式的初始收起状态。
3111
+ * 非受控模式的初始收起状态;默认展开全部查询条件,即使条件超过一行也不自动收起。显式传 true 时才初始收起。
3110
3112
  * @defaultValue false
3111
3113
  */
3112
3114
  defaultCollapsed?: boolean;
3113
3115
  /**
3114
- * 收起时最多保留的字段数;实际数量会根据可用宽度减少,以保持单行。
3116
+ * 需要折叠时最多保留的字段数;实际数量会根据可用宽度减少,以保持单行。全部字段能单行显示时不限制字段数。
3115
3117
  * @defaultValue 3
3116
3118
  */
3117
3119
  collapsedCount?: number;
package/dist/index.js CHANGED
@@ -80,7 +80,7 @@ import {
80
80
  Watermark,
81
81
  message,
82
82
  notification
83
- } from "./chunk-FJ3FP4YV.js";
83
+ } from "./chunk-MFR2FYQA.js";
84
84
  import {
85
85
  TextArea
86
86
  } from "./chunk-SMCYEPBL.js";
@@ -7136,6 +7136,8 @@ function createColumnSettingPlugin(options = {}) {
7136
7136
  ...customItems.map((item) => ({
7137
7137
  key: "custom:" + item.key,
7138
7138
  label: item.label,
7139
+ // 设置菜单复用菜单项提示,禁用操作也需说明不可用原因。
7140
+ title: item.title,
7139
7141
  icon: item.icon,
7140
7142
  danger: item.danger,
7141
7143
  disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
@@ -7231,6 +7233,7 @@ function ToolbarItems({
7231
7233
  {
7232
7234
  size: "small",
7233
7235
  danger: item.danger,
7236
+ title: item.title,
7234
7237
  icon: item.icon,
7235
7238
  disabled,
7236
7239
  onClick: () => void item.onClick?.(context),
@@ -8502,7 +8505,8 @@ function QueryForm({
8502
8505
  }) {
8503
8506
  const [form] = useForm(providedForm);
8504
8507
  const [internalCollapsed, setInternalCollapsed] = useState20(defaultCollapsed);
8505
- const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
8508
+ const [needsCollapse, setNeedsCollapse] = useState20(false);
8509
+ const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
8506
8510
  const [searching, setSearching] = useState20(false);
8507
8511
  const [saving, setSaving] = useState20(false);
8508
8512
  const [removing, setRemoving] = useState20(false);
@@ -8522,15 +8526,33 @@ function QueryForm({
8522
8526
  const limit = Math.max(1, Math.floor(collapsedCount));
8523
8527
  const rowRef = useRef18(null);
8524
8528
  const actionsRef = useRef18(null);
8529
+ const toggleRef = useRef18(null);
8525
8530
  const [fittingCount, setFittingCount] = useState20(limit);
8526
8531
  useLayoutEffect5(() => {
8527
- if (!collapsed) return;
8528
8532
  const row = rowRef.current;
8529
8533
  const actions = actionsRef.current;
8530
8534
  if (!row || !actions) return;
8531
8535
  function measure() {
8532
8536
  if (!row || !actions) return;
8533
8537
  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
8538
+ const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
8539
+ const hiddenFields = allFields.filter((field) => field.hidden);
8540
+ const wasCollapsed = row.classList.contains("is-collapsed");
8541
+ const toggle = toggleRef.current;
8542
+ const toggleHidden = toggle?.hidden;
8543
+ row.classList.remove("is-collapsed");
8544
+ hiddenFields.forEach((field) => {
8545
+ field.hidden = false;
8546
+ });
8547
+ if (toggle) toggle.hidden = true;
8548
+ const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
8549
+ setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
8550
+ if (toggle) toggle.hidden = Boolean(toggleHidden);
8551
+ hiddenFields.forEach((field) => {
8552
+ field.hidden = true;
8553
+ });
8554
+ row.classList.toggle("is-collapsed", wasCollapsed);
8555
+ if (!collapsed) return;
8534
8556
  let remaining = row.clientWidth - actions.getBoundingClientRect().width;
8535
8557
  let count = 0;
8536
8558
  for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
@@ -8547,7 +8569,7 @@ function QueryForm({
8547
8569
  observer.observe(actions);
8548
8570
  row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
8549
8571
  return () => observer.disconnect();
8550
- }, [collapsed, limit, fieldWidth, fields, children]);
8572
+ }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
8551
8573
  async function search(values) {
8552
8574
  const info = source.current;
8553
8575
  source.current = { source: "submit" };
@@ -8678,7 +8700,7 @@ function QueryForm({
8678
8700
  setSaveOpen(true);
8679
8701
  }, children: saveText }) : null
8680
8702
  ] }),
8681
- collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26(
8703
+ collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ jsx26(
8682
8704
  Button,
8683
8705
  {
8684
8706
  variant: "link",
@@ -8691,7 +8713,7 @@ function QueryForm({
8691
8713
  },
8692
8714
  children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
8693
8715
  }
8694
- ) : null,
8716
+ ) }) : null,
8695
8717
  actionsExtra
8696
8718
  ] })
8697
8719
  ] }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sia.soul/sia-react-ui",
3
- "version": "0.1.49",
3
+ "version": "0.1.52",
4
4
  "description": "Sia Design components and tokens for React",
5
5
  "publishConfig": {
6
6
  "access": "public",