@sia.soul/sia-react-ui 0.1.60 → 0.1.62

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.
package/dist/core.css CHANGED
@@ -5009,7 +5009,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
5009
5009
  display: flex;
5010
5010
  flex-wrap: wrap;
5011
5011
  align-items: center;
5012
- gap: var(--sia-query-field-gap, 6px);
5012
+ gap: var(--sia-query-field-gap, 8px);
5013
5013
  padding-top: 8px;
5014
5014
  }
5015
5015
  .sia-query-form__field {
@@ -5020,10 +5020,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
5020
5020
  max-width: 100%;
5021
5021
  }
5022
5022
  .sia-query-form__field:has(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical) > :nth-child(2)) {
5023
- --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 6px));
5023
+ --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 8px));
5024
5024
  }
5025
5025
  .sia-query-form .sia-query-form__fields > .sia-query-form__field:has(.sia-select-date-range) {
5026
- --sia-query-item-width: calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 6px) * 2);
5026
+ --sia-query-item-width: calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 8px) * 2);
5027
5027
  }
5028
5028
  .sia-query-form__field :is(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical)) {
5029
5029
  width: 100%;
@@ -6642,7 +6642,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
6642
6642
  box-sizing: border-box;
6643
6643
  display: inline-flex;
6644
6644
  align-items: stretch;
6645
- width: min(calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 6px) * 2), 100%);
6645
+ width: min(calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 8px) * 2), 100%);
6646
6646
  min-width: 0;
6647
6647
  vertical-align: middle;
6648
6648
  }
package/dist/index.cjs CHANGED
@@ -23459,7 +23459,15 @@ function QueryForm({
23459
23459
  const snapshot = (0, import_react94.useRef)();
23460
23460
  const busy = disabled || loading || searching;
23461
23461
  const shortcutBusy = busy || shortcutsLoading || saving || removing;
23462
- const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Form.Item, { noStyle: true, ...item }) })) : import_react94.Children.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
23462
+ const entries = fields ? fields.map(({ key, width, ...item }) => ({
23463
+ key,
23464
+ width,
23465
+ content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Form.Item, { noStyle: true, ...item })
23466
+ })) : import_react94.Children.toArray(children).map((content, index) => ({
23467
+ key: String(index),
23468
+ width: void 0,
23469
+ content
23470
+ }));
23463
23471
  const limit = Math.max(1, Math.floor(collapsedCount));
23464
23472
  const rowRef = (0, import_react94.useRef)(null);
23465
23473
  const actionsRef = (0, import_react94.useRef)(null);
@@ -23472,7 +23480,9 @@ function QueryForm({
23472
23480
  function measure() {
23473
23481
  if (!row || !actions) return;
23474
23482
  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
23475
- const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
23483
+ const allFields = Array.from(
23484
+ row.querySelectorAll(":scope > .sia-query-form__field")
23485
+ );
23476
23486
  const hiddenFields = allFields.filter((field) => field.hidden);
23477
23487
  const wasCollapsed = row.classList.contains("is-collapsed");
23478
23488
  const toggle = toggleRef.current;
@@ -23482,8 +23492,13 @@ function QueryForm({
23482
23492
  field.hidden = false;
23483
23493
  });
23484
23494
  if (toggle) toggle.hidden = true;
23485
- const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
23486
- setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
23495
+ const requiredWidth = allFields.reduce(
23496
+ (total, field) => total + field.getBoundingClientRect().width + gap,
23497
+ actions.getBoundingClientRect().width
23498
+ );
23499
+ setNeedsCollapse(
23500
+ allFields.length > 0 && requiredWidth > row.clientWidth + 0.5
23501
+ );
23487
23502
  if (toggle) toggle.hidden = Boolean(toggleHidden);
23488
23503
  hiddenFields.forEach((field) => {
23489
23504
  field.hidden = true;
@@ -23492,7 +23507,9 @@ function QueryForm({
23492
23507
  if (!collapsed) return;
23493
23508
  let remaining = row.clientWidth - actions.getBoundingClientRect().width;
23494
23509
  let count = 0;
23495
- for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
23510
+ for (const field of Array.from(
23511
+ row.querySelectorAll(":scope > .sia-query-form__field")
23512
+ ).slice(0, limit)) {
23496
23513
  const width = parseFloat(getComputedStyle(field).width) || 220;
23497
23514
  if (remaining + 0.5 < width + gap) break;
23498
23515
  remaining -= width + gap;
@@ -23506,7 +23523,20 @@ function QueryForm({
23506
23523
  observer.observe(actions);
23507
23524
  row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
23508
23525
  return () => observer.disconnect();
23509
- }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
23526
+ }, [
23527
+ collapsed,
23528
+ needsCollapse,
23529
+ collapsible,
23530
+ limit,
23531
+ fieldWidth,
23532
+ fields,
23533
+ children,
23534
+ actionsExtra,
23535
+ onSaveQuery,
23536
+ searchText,
23537
+ resetText,
23538
+ saveText
23539
+ ]);
23510
23540
  async function search(values) {
23511
23541
  const info = source.current;
23512
23542
  source.current = { source: "submit" };
@@ -23557,7 +23587,9 @@ function QueryForm({
23557
23587
  await onSaveQuery({ name, values: snapshot.current });
23558
23588
  setSaveOpen(false);
23559
23589
  } catch (reason) {
23560
- setSaveError(reason instanceof Error ? reason.message : "\u4FDD\u5B58\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
23590
+ setSaveError(
23591
+ reason instanceof Error ? reason.message : "\u4FDD\u5B58\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
23592
+ );
23561
23593
  onError?.(reason, "save");
23562
23594
  return false;
23563
23595
  } finally {
@@ -23602,58 +23634,98 @@ function QueryForm({
23602
23634
  },
23603
23635
  children: [
23604
23636
  quickQueries.length ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-form__quick", "aria-label": "\u9884\u8BBE\u5FEB\u6377\u67E5\u8BE2", children: [
23605
- quickQueries.map((query) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Badge, { className: "sia-query-form__quick-badge", showZero: true, size: "small", title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`, ...query.badgeProps, count: query.count, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23606
- Button,
23637
+ quickQueries.map((query) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23638
+ Badge,
23607
23639
  {
23608
- size: query.size ?? quickQuerySize,
23609
- "aria-pressed": activeShortcut === `quick:${query.key}`,
23610
- variant: activeShortcut === `quick:${query.key}` ? "primary" : "default",
23611
- disabled: shortcutBusy || query.disabled,
23612
- onClick: () => applyShortcut(query, "quick"),
23613
- children: query.label
23614
- }
23615
- ) }, query.key)),
23640
+ className: "sia-query-form__quick-badge",
23641
+ showZero: true,
23642
+ size: "small",
23643
+ title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`,
23644
+ ...query.badgeProps,
23645
+ count: query.count,
23646
+ children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23647
+ Button,
23648
+ {
23649
+ size: query.size ?? quickQuerySize,
23650
+ "aria-pressed": activeShortcut === `quick:${query.key}`,
23651
+ variant: activeShortcut === `quick:${query.key}` ? "primary" : "default",
23652
+ disabled: shortcutBusy || query.disabled,
23653
+ onClick: () => applyShortcut(query, "quick"),
23654
+ children: query.label
23655
+ }
23656
+ )
23657
+ },
23658
+ query.key
23659
+ )),
23616
23660
  " "
23617
23661
  ] }) : null,
23618
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { ref: rowRef, className: `sia-query-form__fields${collapsed ? " is-collapsed" : ""}`, style: { "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth }, children: [
23619
- entries.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23620
- "div",
23621
- {
23622
- className: "sia-query-form__field",
23623
- hidden: collapsed && index >= Math.min(limit, fittingCount),
23624
- style: entry.width !== void 0 ? { "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width } : void 0,
23625
- children: entry.content
23662
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
23663
+ "div",
23664
+ {
23665
+ ref: rowRef,
23666
+ className: `sia-query-form__fields${collapsed ? " is-collapsed" : ""}`,
23667
+ style: {
23668
+ "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth
23626
23669
  },
23627
- entry.key
23628
- )),
23629
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
23630
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Space.Compact, { children: [
23631
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { type: "submit", variant: "primary", loading: loading || searching, disabled, children: searchText }),
23632
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { disabled: busy, onClick: reset, children: resetText }),
23633
- onSaveQuery ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { disabled: shortcutBusy, onClick: () => {
23634
- snapshot.current = form.getFieldsValue();
23635
- setSaveName("");
23636
- setSaveError("");
23637
- setSaveOpen(true);
23638
- }, children: saveText }) : null
23639
- ] }),
23640
- collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23641
- Button,
23642
- {
23643
- variant: "link",
23644
- "aria-expanded": !collapsed,
23645
- icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
23646
- iconPosition: "end",
23647
- onClick: () => {
23648
- setInternalCollapsed(!collapsed);
23649
- onCollapsedChange?.(!collapsed);
23670
+ children: [
23671
+ entries.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23672
+ "div",
23673
+ {
23674
+ className: "sia-query-form__field",
23675
+ hidden: collapsed && index >= Math.min(limit, fittingCount),
23676
+ style: entry.width !== void 0 ? {
23677
+ "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width
23678
+ } : void 0,
23679
+ children: entry.content
23650
23680
  },
23651
- children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
23652
- }
23653
- ) }) : null,
23654
- actionsExtra
23655
- ] })
23656
- ] }),
23681
+ entry.key
23682
+ )),
23683
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
23684
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Space.Compact, { children: [
23685
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23686
+ Button,
23687
+ {
23688
+ type: "submit",
23689
+ variant: "primary",
23690
+ loading: loading || searching,
23691
+ disabled,
23692
+ children: searchText
23693
+ }
23694
+ ),
23695
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { disabled: busy, onClick: reset, children: resetText }),
23696
+ onSaveQuery ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23697
+ Button,
23698
+ {
23699
+ disabled: shortcutBusy,
23700
+ onClick: () => {
23701
+ snapshot.current = form.getFieldsValue();
23702
+ setSaveName("");
23703
+ setSaveError("");
23704
+ setSaveOpen(true);
23705
+ },
23706
+ children: saveText
23707
+ }
23708
+ ) : null
23709
+ ] }),
23710
+ collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23711
+ Button,
23712
+ {
23713
+ variant: "link",
23714
+ "aria-expanded": !collapsed,
23715
+ icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
23716
+ iconPosition: "end",
23717
+ onClick: () => {
23718
+ setInternalCollapsed(!collapsed);
23719
+ onCollapsedChange?.(!collapsed);
23720
+ },
23721
+ children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
23722
+ }
23723
+ ) }) : null,
23724
+ actionsExtra
23725
+ ] })
23726
+ ]
23727
+ }
23728
+ ),
23657
23729
  savedQueries.length && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-form__saved", "aria-label": "\u5DF2\u4FDD\u5B58\u5FEB\u6377\u67E5\u8BE2", children: [
23658
23730
  savedQueries.map((query, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23659
23731
  Tag,
@@ -23685,30 +23757,41 @@ function QueryForm({
23685
23757
  ]
23686
23758
  }
23687
23759
  ),
23688
- /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Modal2, { open: saveOpen, title: "\u53E6\u5B58\u4E3A\u5FEB\u6377\u67E5\u8BE2", width: 420, confirmLoading: saving, onOk: save, onOpenChange: (next) => {
23689
- if (!saveLock.current) setSaveOpen(next);
23690
- }, children: [
23691
- /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23692
- Input,
23693
- {
23694
- autoFocus: true,
23695
- "aria-label": "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
23696
- placeholder: "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
23697
- value: saveName,
23698
- maxLength: 80,
23699
- disabled: saving,
23700
- status: saveError ? "error" : "default",
23701
- onChange: (event) => setSaveName(event.target.value),
23702
- onKeyDown: (event) => {
23703
- if (event.key === "Enter") {
23704
- event.preventDefault();
23705
- void save();
23760
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
23761
+ Modal2,
23762
+ {
23763
+ open: saveOpen,
23764
+ title: "\u53E6\u5B58\u4E3A\u5FEB\u6377\u67E5\u8BE2",
23765
+ width: 420,
23766
+ confirmLoading: saving,
23767
+ onOk: save,
23768
+ onOpenChange: (next) => {
23769
+ if (!saveLock.current) setSaveOpen(next);
23770
+ },
23771
+ children: [
23772
+ /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
23773
+ Input,
23774
+ {
23775
+ autoFocus: true,
23776
+ "aria-label": "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
23777
+ placeholder: "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
23778
+ value: saveName,
23779
+ maxLength: 80,
23780
+ disabled: saving,
23781
+ status: saveError ? "error" : "default",
23782
+ onChange: (event) => setSaveName(event.target.value),
23783
+ onKeyDown: (event) => {
23784
+ if (event.key === "Enter") {
23785
+ event.preventDefault();
23786
+ void save();
23787
+ }
23788
+ }
23706
23789
  }
23707
- }
23708
- }
23709
- ),
23710
- saveError ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
23711
- ] })
23790
+ ),
23791
+ saveError ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
23792
+ ]
23793
+ }
23794
+ )
23712
23795
  ] });
23713
23796
  }
23714
23797
  // Annotate the CommonJS export names for ESM import in node:
package/dist/index.css CHANGED
@@ -5009,7 +5009,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
5009
5009
  display: flex;
5010
5010
  flex-wrap: wrap;
5011
5011
  align-items: center;
5012
- gap: var(--sia-query-field-gap, 6px);
5012
+ gap: var(--sia-query-field-gap, 8px);
5013
5013
  padding-top: 8px;
5014
5014
  }
5015
5015
  .sia-query-form__field {
@@ -5020,10 +5020,10 @@ fieldset:disabled .sia-input-number__floating-placeholder {
5020
5020
  max-width: 100%;
5021
5021
  }
5022
5022
  .sia-query-form__field:has(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical) > :nth-child(2)) {
5023
- --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 6px));
5023
+ --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 8px));
5024
5024
  }
5025
5025
  .sia-query-form .sia-query-form__fields > .sia-query-form__field:has(.sia-select-date-range) {
5026
- --sia-query-item-width: calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 6px) * 2);
5026
+ --sia-query-item-width: calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 8px) * 2);
5027
5027
  }
5028
5028
  .sia-query-form__field :is(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical)) {
5029
5029
  width: 100%;
@@ -6642,7 +6642,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
6642
6642
  box-sizing: border-box;
6643
6643
  display: inline-flex;
6644
6644
  align-items: stretch;
6645
- width: min(calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 6px) * 2), 100%);
6645
+ width: min(calc(var(--sia-query-field-width, 220px) * 3 + var(--sia-query-field-gap, 8px) * 2), 100%);
6646
6646
  min-width: 0;
6647
6647
  vertical-align: middle;
6648
6648
  }
package/dist/index.d.cts CHANGED
@@ -3113,7 +3113,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
3113
3113
  */
3114
3114
  loading?: boolean;
3115
3115
  /**
3116
- * 单列查询字段的默认宽度,数值单位为像素,可传 CSS 尺寸字符串。区间及横向组合控件默认占两列,SelectDateRange 占三列,均包含跨列间距;行列间距可通过 --sia-query-field-gap 调整(默认 6px)。
3116
+ * 单列查询字段的默认宽度,数值单位为像素,可传 CSS 尺寸字符串。区间及横向组合控件默认占两列,SelectDateRange 占三列,均包含跨列间距;行列间距可通过 --sia-query-field-gap 调整(默认 8px)。
3117
3117
  * @defaultValue 220
3118
3118
  */
3119
3119
  fieldWidth?: number | string;
package/dist/index.d.ts CHANGED
@@ -3113,7 +3113,7 @@ interface QueryFormProps<T extends FormValues = FormValues> extends Omit<FormPro
3113
3113
  */
3114
3114
  loading?: boolean;
3115
3115
  /**
3116
- * 单列查询字段的默认宽度,数值单位为像素,可传 CSS 尺寸字符串。区间及横向组合控件默认占两列,SelectDateRange 占三列,均包含跨列间距;行列间距可通过 --sia-query-field-gap 调整(默认 6px)。
3116
+ * 单列查询字段的默认宽度,数值单位为像素,可传 CSS 尺寸字符串。区间及横向组合控件默认占两列,SelectDateRange 占三列,均包含跨列间距;行列间距可通过 --sia-query-field-gap 调整(默认 8px)。
3117
3117
  * @defaultValue 220
3118
3118
  */
3119
3119
  fieldWidth?: number | string;
package/dist/index.js CHANGED
@@ -8615,7 +8615,15 @@ function QueryForm({
8615
8615
  const snapshot = useRef18();
8616
8616
  const busy = disabled || loading || searching;
8617
8617
  const shortcutBusy = busy || shortcutsLoading || saving || removing;
8618
- const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ jsx26(Form.Item, { noStyle: true, ...item }) })) : Children4.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
8618
+ const entries = fields ? fields.map(({ key, width, ...item }) => ({
8619
+ key,
8620
+ width,
8621
+ content: /* @__PURE__ */ jsx26(Form.Item, { noStyle: true, ...item })
8622
+ })) : Children4.toArray(children).map((content, index) => ({
8623
+ key: String(index),
8624
+ width: void 0,
8625
+ content
8626
+ }));
8619
8627
  const limit = Math.max(1, Math.floor(collapsedCount));
8620
8628
  const rowRef = useRef18(null);
8621
8629
  const actionsRef = useRef18(null);
@@ -8628,7 +8636,9 @@ function QueryForm({
8628
8636
  function measure() {
8629
8637
  if (!row || !actions) return;
8630
8638
  const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
8631
- const allFields = Array.from(row.querySelectorAll(":scope > .sia-query-form__field"));
8639
+ const allFields = Array.from(
8640
+ row.querySelectorAll(":scope > .sia-query-form__field")
8641
+ );
8632
8642
  const hiddenFields = allFields.filter((field) => field.hidden);
8633
8643
  const wasCollapsed = row.classList.contains("is-collapsed");
8634
8644
  const toggle = toggleRef.current;
@@ -8638,8 +8648,13 @@ function QueryForm({
8638
8648
  field.hidden = false;
8639
8649
  });
8640
8650
  if (toggle) toggle.hidden = true;
8641
- const requiredWidth = allFields.reduce((total, field) => total + field.getBoundingClientRect().width + gap, actions.getBoundingClientRect().width);
8642
- setNeedsCollapse(allFields.length > 0 && requiredWidth > row.clientWidth + 0.5);
8651
+ const requiredWidth = allFields.reduce(
8652
+ (total, field) => total + field.getBoundingClientRect().width + gap,
8653
+ actions.getBoundingClientRect().width
8654
+ );
8655
+ setNeedsCollapse(
8656
+ allFields.length > 0 && requiredWidth > row.clientWidth + 0.5
8657
+ );
8643
8658
  if (toggle) toggle.hidden = Boolean(toggleHidden);
8644
8659
  hiddenFields.forEach((field) => {
8645
8660
  field.hidden = true;
@@ -8648,7 +8663,9 @@ function QueryForm({
8648
8663
  if (!collapsed) return;
8649
8664
  let remaining = row.clientWidth - actions.getBoundingClientRect().width;
8650
8665
  let count = 0;
8651
- for (const field of Array.from(row.querySelectorAll(":scope > .sia-query-form__field")).slice(0, limit)) {
8666
+ for (const field of Array.from(
8667
+ row.querySelectorAll(":scope > .sia-query-form__field")
8668
+ ).slice(0, limit)) {
8652
8669
  const width = parseFloat(getComputedStyle(field).width) || 220;
8653
8670
  if (remaining + 0.5 < width + gap) break;
8654
8671
  remaining -= width + gap;
@@ -8662,7 +8679,20 @@ function QueryForm({
8662
8679
  observer.observe(actions);
8663
8680
  row.querySelectorAll(":scope > .sia-query-form__field").forEach((field) => observer.observe(field));
8664
8681
  return () => observer.disconnect();
8665
- }, [collapsed, needsCollapse, collapsible, limit, fieldWidth, fields, children, actionsExtra, onSaveQuery, searchText, resetText, saveText]);
8682
+ }, [
8683
+ collapsed,
8684
+ needsCollapse,
8685
+ collapsible,
8686
+ limit,
8687
+ fieldWidth,
8688
+ fields,
8689
+ children,
8690
+ actionsExtra,
8691
+ onSaveQuery,
8692
+ searchText,
8693
+ resetText,
8694
+ saveText
8695
+ ]);
8666
8696
  async function search(values) {
8667
8697
  const info = source.current;
8668
8698
  source.current = { source: "submit" };
@@ -8713,7 +8743,9 @@ function QueryForm({
8713
8743
  await onSaveQuery({ name, values: snapshot.current });
8714
8744
  setSaveOpen(false);
8715
8745
  } catch (reason) {
8716
- setSaveError(reason instanceof Error ? reason.message : "\u4FDD\u5B58\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
8746
+ setSaveError(
8747
+ reason instanceof Error ? reason.message : "\u4FDD\u5B58\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5"
8748
+ );
8717
8749
  onError?.(reason, "save");
8718
8750
  return false;
8719
8751
  } finally {
@@ -8758,58 +8790,98 @@ function QueryForm({
8758
8790
  },
8759
8791
  children: [
8760
8792
  quickQueries.length ? /* @__PURE__ */ jsxs24("div", { className: "sia-query-form__quick", "aria-label": "\u9884\u8BBE\u5FEB\u6377\u67E5\u8BE2", children: [
8761
- quickQueries.map((query) => /* @__PURE__ */ jsx26(Badge, { className: "sia-query-form__quick-badge", showZero: true, size: "small", title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`, ...query.badgeProps, count: query.count, children: /* @__PURE__ */ jsx26(
8762
- Button,
8793
+ quickQueries.map((query) => /* @__PURE__ */ jsx26(
8794
+ Badge,
8763
8795
  {
8764
- size: query.size ?? quickQuerySize,
8765
- "aria-pressed": activeShortcut === `quick:${query.key}`,
8766
- variant: activeShortcut === `quick:${query.key}` ? "primary" : "default",
8767
- disabled: shortcutBusy || query.disabled,
8768
- onClick: () => applyShortcut(query, "quick"),
8769
- children: query.label
8770
- }
8771
- ) }, query.key)),
8796
+ className: "sia-query-form__quick-badge",
8797
+ showZero: true,
8798
+ size: "small",
8799
+ title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`,
8800
+ ...query.badgeProps,
8801
+ count: query.count,
8802
+ children: /* @__PURE__ */ jsx26(
8803
+ Button,
8804
+ {
8805
+ size: query.size ?? quickQuerySize,
8806
+ "aria-pressed": activeShortcut === `quick:${query.key}`,
8807
+ variant: activeShortcut === `quick:${query.key}` ? "primary" : "default",
8808
+ disabled: shortcutBusy || query.disabled,
8809
+ onClick: () => applyShortcut(query, "quick"),
8810
+ children: query.label
8811
+ }
8812
+ )
8813
+ },
8814
+ query.key
8815
+ )),
8772
8816
  " "
8773
8817
  ] }) : null,
8774
- /* @__PURE__ */ jsxs24("div", { ref: rowRef, className: `sia-query-form__fields${collapsed ? " is-collapsed" : ""}`, style: { "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth }, children: [
8775
- entries.map((entry, index) => /* @__PURE__ */ jsx26(
8776
- "div",
8777
- {
8778
- className: "sia-query-form__field",
8779
- hidden: collapsed && index >= Math.min(limit, fittingCount),
8780
- style: entry.width !== void 0 ? { "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width } : void 0,
8781
- children: entry.content
8818
+ /* @__PURE__ */ jsxs24(
8819
+ "div",
8820
+ {
8821
+ ref: rowRef,
8822
+ className: `sia-query-form__fields${collapsed ? " is-collapsed" : ""}`,
8823
+ style: {
8824
+ "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth
8782
8825
  },
8783
- entry.key
8784
- )),
8785
- /* @__PURE__ */ jsxs24("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
8786
- /* @__PURE__ */ jsxs24(Space.Compact, { children: [
8787
- /* @__PURE__ */ jsx26(Button, { type: "submit", variant: "primary", loading: loading || searching, disabled, children: searchText }),
8788
- /* @__PURE__ */ jsx26(Button, { disabled: busy, onClick: reset, children: resetText }),
8789
- onSaveQuery ? /* @__PURE__ */ jsx26(Button, { disabled: shortcutBusy, onClick: () => {
8790
- snapshot.current = form.getFieldsValue();
8791
- setSaveName("");
8792
- setSaveError("");
8793
- setSaveOpen(true);
8794
- }, children: saveText }) : null
8795
- ] }),
8796
- collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ jsx26(
8797
- Button,
8798
- {
8799
- variant: "link",
8800
- "aria-expanded": !collapsed,
8801
- icon: /* @__PURE__ */ jsx26(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
8802
- iconPosition: "end",
8803
- onClick: () => {
8804
- setInternalCollapsed(!collapsed);
8805
- onCollapsedChange?.(!collapsed);
8826
+ children: [
8827
+ entries.map((entry, index) => /* @__PURE__ */ jsx26(
8828
+ "div",
8829
+ {
8830
+ className: "sia-query-form__field",
8831
+ hidden: collapsed && index >= Math.min(limit, fittingCount),
8832
+ style: entry.width !== void 0 ? {
8833
+ "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width
8834
+ } : void 0,
8835
+ children: entry.content
8806
8836
  },
8807
- children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
8808
- }
8809
- ) }) : null,
8810
- actionsExtra
8811
- ] })
8812
- ] }),
8837
+ entry.key
8838
+ )),
8839
+ /* @__PURE__ */ jsxs24("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
8840
+ /* @__PURE__ */ jsxs24(Space.Compact, { children: [
8841
+ /* @__PURE__ */ jsx26(
8842
+ Button,
8843
+ {
8844
+ type: "submit",
8845
+ variant: "primary",
8846
+ loading: loading || searching,
8847
+ disabled,
8848
+ children: searchText
8849
+ }
8850
+ ),
8851
+ /* @__PURE__ */ jsx26(Button, { disabled: busy, onClick: reset, children: resetText }),
8852
+ onSaveQuery ? /* @__PURE__ */ jsx26(
8853
+ Button,
8854
+ {
8855
+ disabled: shortcutBusy,
8856
+ onClick: () => {
8857
+ snapshot.current = form.getFieldsValue();
8858
+ setSaveName("");
8859
+ setSaveError("");
8860
+ setSaveOpen(true);
8861
+ },
8862
+ children: saveText
8863
+ }
8864
+ ) : null
8865
+ ] }),
8866
+ collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ jsx26(
8867
+ Button,
8868
+ {
8869
+ variant: "link",
8870
+ "aria-expanded": !collapsed,
8871
+ icon: /* @__PURE__ */ jsx26(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
8872
+ iconPosition: "end",
8873
+ onClick: () => {
8874
+ setInternalCollapsed(!collapsed);
8875
+ onCollapsedChange?.(!collapsed);
8876
+ },
8877
+ children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
8878
+ }
8879
+ ) }) : null,
8880
+ actionsExtra
8881
+ ] })
8882
+ ]
8883
+ }
8884
+ ),
8813
8885
  savedQueries.length && !collapsed ? /* @__PURE__ */ jsxs24("div", { className: "sia-query-form__saved", "aria-label": "\u5DF2\u4FDD\u5B58\u5FEB\u6377\u67E5\u8BE2", children: [
8814
8886
  savedQueries.map((query, index) => /* @__PURE__ */ jsx26(
8815
8887
  Tag,
@@ -8841,30 +8913,41 @@ function QueryForm({
8841
8913
  ]
8842
8914
  }
8843
8915
  ),
8844
- /* @__PURE__ */ jsxs24(Modal, { open: saveOpen, title: "\u53E6\u5B58\u4E3A\u5FEB\u6377\u67E5\u8BE2", width: 420, confirmLoading: saving, onOk: save, onOpenChange: (next) => {
8845
- if (!saveLock.current) setSaveOpen(next);
8846
- }, children: [
8847
- /* @__PURE__ */ jsx26(
8848
- Input,
8849
- {
8850
- autoFocus: true,
8851
- "aria-label": "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
8852
- placeholder: "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
8853
- value: saveName,
8854
- maxLength: 80,
8855
- disabled: saving,
8856
- status: saveError ? "error" : "default",
8857
- onChange: (event) => setSaveName(event.target.value),
8858
- onKeyDown: (event) => {
8859
- if (event.key === "Enter") {
8860
- event.preventDefault();
8861
- void save();
8916
+ /* @__PURE__ */ jsxs24(
8917
+ Modal,
8918
+ {
8919
+ open: saveOpen,
8920
+ title: "\u53E6\u5B58\u4E3A\u5FEB\u6377\u67E5\u8BE2",
8921
+ width: 420,
8922
+ confirmLoading: saving,
8923
+ onOk: save,
8924
+ onOpenChange: (next) => {
8925
+ if (!saveLock.current) setSaveOpen(next);
8926
+ },
8927
+ children: [
8928
+ /* @__PURE__ */ jsx26(
8929
+ Input,
8930
+ {
8931
+ autoFocus: true,
8932
+ "aria-label": "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
8933
+ placeholder: "\u5FEB\u6377\u67E5\u8BE2\u540D\u79F0",
8934
+ value: saveName,
8935
+ maxLength: 80,
8936
+ disabled: saving,
8937
+ status: saveError ? "error" : "default",
8938
+ onChange: (event) => setSaveName(event.target.value),
8939
+ onKeyDown: (event) => {
8940
+ if (event.key === "Enter") {
8941
+ event.preventDefault();
8942
+ void save();
8943
+ }
8944
+ }
8862
8945
  }
8863
- }
8864
- }
8865
- ),
8866
- saveError ? /* @__PURE__ */ jsx26("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
8867
- ] })
8946
+ ),
8947
+ saveError ? /* @__PURE__ */ jsx26("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
8948
+ ]
8949
+ }
8950
+ )
8868
8951
  ] });
8869
8952
  }
8870
8953
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sia.soul/sia-react-ui",
3
- "version": "0.1.60",
3
+ "version": "0.1.62",
4
4
  "description": "Sia Design components and tokens for React",
5
5
  "publishConfig": {
6
6
  "access": "public",