@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 +4 -4
- package/dist/index.cjs +160 -77
- package/dist/index.css +4 -4
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +160 -77
- package/package.json +1 -1
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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 }) => ({
|
|
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(
|
|
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(
|
|
23486
|
-
|
|
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(
|
|
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
|
-
}, [
|
|
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(
|
|
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)(
|
|
23606
|
-
|
|
23637
|
+
quickQueries.map((query) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
|
|
23638
|
+
Badge,
|
|
23607
23639
|
{
|
|
23608
|
-
|
|
23609
|
-
|
|
23610
|
-
|
|
23611
|
-
|
|
23612
|
-
|
|
23613
|
-
|
|
23614
|
-
|
|
23615
|
-
|
|
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)(
|
|
23619
|
-
|
|
23620
|
-
|
|
23621
|
-
|
|
23622
|
-
|
|
23623
|
-
|
|
23624
|
-
|
|
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
|
-
|
|
23628
|
-
|
|
23629
|
-
|
|
23630
|
-
|
|
23631
|
-
|
|
23632
|
-
|
|
23633
|
-
|
|
23634
|
-
|
|
23635
|
-
|
|
23636
|
-
|
|
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
|
-
|
|
23652
|
-
|
|
23653
|
-
|
|
23654
|
-
|
|
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)(
|
|
23689
|
-
|
|
23690
|
-
|
|
23691
|
-
|
|
23692
|
-
|
|
23693
|
-
|
|
23694
|
-
|
|
23695
|
-
|
|
23696
|
-
|
|
23697
|
-
|
|
23698
|
-
|
|
23699
|
-
|
|
23700
|
-
|
|
23701
|
-
|
|
23702
|
-
|
|
23703
|
-
|
|
23704
|
-
|
|
23705
|
-
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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 调整(默认
|
|
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 调整(默认
|
|
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 }) => ({
|
|
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(
|
|
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(
|
|
8642
|
-
|
|
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(
|
|
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
|
-
}, [
|
|
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(
|
|
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(
|
|
8762
|
-
|
|
8793
|
+
quickQueries.map((query) => /* @__PURE__ */ jsx26(
|
|
8794
|
+
Badge,
|
|
8763
8795
|
{
|
|
8764
|
-
|
|
8765
|
-
|
|
8766
|
-
|
|
8767
|
-
|
|
8768
|
-
|
|
8769
|
-
|
|
8770
|
-
|
|
8771
|
-
|
|
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(
|
|
8775
|
-
|
|
8776
|
-
|
|
8777
|
-
|
|
8778
|
-
|
|
8779
|
-
|
|
8780
|
-
|
|
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
|
-
|
|
8784
|
-
|
|
8785
|
-
|
|
8786
|
-
|
|
8787
|
-
|
|
8788
|
-
|
|
8789
|
-
|
|
8790
|
-
|
|
8791
|
-
|
|
8792
|
-
|
|
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
|
-
|
|
8808
|
-
|
|
8809
|
-
|
|
8810
|
-
|
|
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(
|
|
8845
|
-
|
|
8846
|
-
|
|
8847
|
-
|
|
8848
|
-
|
|
8849
|
-
|
|
8850
|
-
|
|
8851
|
-
|
|
8852
|
-
|
|
8853
|
-
|
|
8854
|
-
|
|
8855
|
-
|
|
8856
|
-
|
|
8857
|
-
|
|
8858
|
-
|
|
8859
|
-
|
|
8860
|
-
|
|
8861
|
-
|
|
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
|
-
|
|
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 {
|