@sia.soul/sia-react-ui 0.1.3 → 0.1.4
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/{Select-CJJ5LQap.d.ts → Select-GiTHMScg.d.cts} +4 -5
- package/dist/{Select-CJJ5LQap.d.cts → Select-rtDktLYY.d.ts} +4 -5
- package/dist/chart.cjs +731 -707
- package/dist/chart.css +1 -1
- package/dist/chart.js +3 -2
- package/dist/{chunk-6VXOLMKZ.js → chunk-5ZTWY3PG.js} +18 -1
- package/dist/{chunk-2RRTDU3N.js → chunk-EJ23MVR6.js} +3 -18
- package/dist/chunk-EJDPRAU2.js +36 -0
- package/dist/{chunk-IMZT6VCU.js → chunk-IHTODT53.js} +8 -5
- package/dist/{chunk-R4OWKIXJ.js → chunk-MJUTLEEE.js} +20 -8
- package/dist/{chunk-OQLDEVCF.js → chunk-PX6BOFTW.js} +10 -3
- package/dist/{chunk-OAC7BSUR.js → chunk-R7BVDN3Q.js} +91 -43
- package/dist/{chunk-Q4XNFMUH.js → chunk-S2JAJCLN.js} +6 -4
- package/dist/{chunk-NZAT2RUM.js → chunk-WHARTF2I.js} +10 -1
- package/dist/{chunk-I342FGQY.js → chunk-Z3T6RDQP.js} +1 -1
- package/dist/{core-DFYheaoJ.d.ts → core-CBtbeAms.d.cts} +2 -1
- package/dist/{core-De2pRX5w.d.cts → core-D8BSMfHD.d.ts} +2 -1
- package/dist/core.cjs +275 -210
- package/dist/core.css +211 -27
- package/dist/core.d.cts +3 -2
- package/dist/core.d.ts +3 -2
- package/dist/core.js +6 -5
- package/dist/index.cjs +2531 -2412
- package/dist/index.css +212 -28
- package/dist/index.d.cts +17 -9
- package/dist/index.d.ts +17 -9
- package/dist/index.js +224 -190
- package/dist/markdown-editor.cjs +52 -20
- package/dist/markdown-editor.d.cts +3 -1
- package/dist/markdown-editor.d.ts +3 -1
- package/dist/markdown-editor.js +2 -1
- package/dist/rich-text-editor.cjs +884 -864
- package/dist/rich-text-editor.d.cts +3 -1
- package/dist/rich-text-editor.d.ts +3 -1
- package/dist/rich-text-editor.js +4 -3
- package/dist/{select-date-range-DOyG1DGp.d.ts → select-date-range-CQ1vmze_.d.ts} +7 -4
- package/dist/{select-date-range-UyYrHex6.d.cts → select-date-range-DRmGaEzP.d.cts} +7 -4
- package/dist/select-date-range.cjs +972 -903
- package/dist/select-date-range.d.cts +3 -2
- package/dist/select-date-range.d.ts +3 -2
- package/dist/select-date-range.js +4 -3
- package/dist/shared-DAYZvZVu.d.cts +5 -0
- package/dist/shared-DAYZvZVu.d.ts +5 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -56,7 +56,7 @@ import {
|
|
|
56
56
|
smoothSvgPath,
|
|
57
57
|
svgArcPath,
|
|
58
58
|
transferCompositeValue
|
|
59
|
-
} from "./chunk-
|
|
59
|
+
} from "./chunk-Z3T6RDQP.js";
|
|
60
60
|
import {
|
|
61
61
|
Badge,
|
|
62
62
|
Breadcrumb,
|
|
@@ -87,24 +87,24 @@ import {
|
|
|
87
87
|
message,
|
|
88
88
|
notification,
|
|
89
89
|
useOverlayLifecycle
|
|
90
|
-
} from "./chunk-
|
|
90
|
+
} from "./chunk-S2JAJCLN.js";
|
|
91
91
|
import {
|
|
92
92
|
TextArea
|
|
93
|
-
} from "./chunk-
|
|
93
|
+
} from "./chunk-WHARTF2I.js";
|
|
94
94
|
import {
|
|
95
95
|
MarkdownEditor
|
|
96
|
-
} from "./chunk-
|
|
96
|
+
} from "./chunk-5ZTWY3PG.js";
|
|
97
97
|
import {
|
|
98
98
|
RichTextContent,
|
|
99
99
|
RichTextEditor
|
|
100
|
-
} from "./chunk-
|
|
100
|
+
} from "./chunk-PX6BOFTW.js";
|
|
101
101
|
import {
|
|
102
102
|
Dropdown,
|
|
103
103
|
Input,
|
|
104
104
|
Menu,
|
|
105
105
|
Segmented,
|
|
106
106
|
Steps
|
|
107
|
-
} from "./chunk-
|
|
107
|
+
} from "./chunk-IHTODT53.js";
|
|
108
108
|
import {
|
|
109
109
|
Button
|
|
110
110
|
} from "./chunk-MBS2HXLZ.js";
|
|
@@ -112,17 +112,23 @@ import {
|
|
|
112
112
|
DatePicker,
|
|
113
113
|
SelectDateRange,
|
|
114
114
|
TimePanel
|
|
115
|
-
} from "./chunk-
|
|
115
|
+
} from "./chunk-MJUTLEEE.js";
|
|
116
116
|
import {
|
|
117
|
+
OverflowTags,
|
|
117
118
|
Select
|
|
118
|
-
} from "./chunk-
|
|
119
|
+
} from "./chunk-R7BVDN3Q.js";
|
|
119
120
|
import {
|
|
120
121
|
FILLED_ICON_NAMES,
|
|
121
122
|
ICON_NAMES,
|
|
122
123
|
Icon,
|
|
123
|
-
PopupPortal
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
PopupPortal
|
|
125
|
+
} from "./chunk-EJ23MVR6.js";
|
|
126
|
+
import {
|
|
127
|
+
PlaceholderModeContext,
|
|
128
|
+
useControllableState,
|
|
129
|
+
useFloatingPlaceholder,
|
|
130
|
+
usePlaceholderMode
|
|
131
|
+
} from "./chunk-EJDPRAU2.js";
|
|
126
132
|
|
|
127
133
|
// src/components/Alert.tsx
|
|
128
134
|
import { useState } from "react";
|
|
@@ -316,6 +322,7 @@ function Cascader({
|
|
|
316
322
|
changeOnSelect = false,
|
|
317
323
|
expandTrigger = "click",
|
|
318
324
|
placeholder = "\u8BF7\u9009\u62E9",
|
|
325
|
+
placeholderMode,
|
|
319
326
|
disabled = false,
|
|
320
327
|
fieldNames,
|
|
321
328
|
displayRender,
|
|
@@ -335,7 +342,7 @@ function Cascader({
|
|
|
335
342
|
const [active, setActive] = useState3([]);
|
|
336
343
|
const [search, setSearch] = useState3("");
|
|
337
344
|
const [loadingKey, setLoadingKey] = useState3("");
|
|
338
|
-
const selectedPaths = multiple ? current
|
|
345
|
+
const selectedPaths = multiple ? Array.isArray(current) ? current : [] : current?.length && !Array.isArray(current[0]) ? [current] : [];
|
|
339
346
|
const selectedKeys = new Set(selectedPaths.map(pathKey));
|
|
340
347
|
const selectedPathSignature = selectedPaths.map(pathKey).join("");
|
|
341
348
|
const searchPaths = useMemo(() => search ? leafPaths(options, fields).filter((path) => path.some((option) => String(optionLabel(option, fields)).toLowerCase().includes(search.toLowerCase()))) : [], [fields, options, search]);
|
|
@@ -411,13 +418,15 @@ function Cascader({
|
|
|
411
418
|
const children = optionChildren(option, fields);
|
|
412
419
|
if (children?.length) columns.push(children);
|
|
413
420
|
});
|
|
421
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedPaths.length > 0, active: open });
|
|
414
422
|
return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className: `sia-cascader${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
|
|
415
|
-
/* @__PURE__ */ jsxs3("button", { type: "button", className:
|
|
423
|
+
/* @__PURE__ */ jsxs3("button", { type: "button", className: `sia-cascader__trigger${floating.className}`, disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
|
|
416
424
|
/* @__PURE__ */ jsx3("span", { className: "sia-cascader__value", children: display ? multiple && Array.isArray(display) ? display.map((label, index) => /* @__PURE__ */ jsx3("span", { className: "sia-cascader__tag", children: label }, pathKey(selectedPaths[index] ?? []))) : display : /* @__PURE__ */ jsx3("span", { className: "sia-cascader__placeholder", children: placeholder }) }),
|
|
417
425
|
allowClear && selectedPaths.length ? /* @__PURE__ */ jsx3("span", { className: "sia-cascader__clear", role: "button", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
|
|
418
426
|
event.stopPropagation();
|
|
419
427
|
clearSelection();
|
|
420
428
|
}, children: /* @__PURE__ */ jsx3(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
429
|
+
floating.label,
|
|
421
430
|
/* @__PURE__ */ jsx3(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
|
|
422
431
|
] }),
|
|
423
432
|
/* @__PURE__ */ jsxs3(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-cascader__popup", children: [
|
|
@@ -1530,6 +1539,7 @@ function FormRoot({
|
|
|
1530
1539
|
form,
|
|
1531
1540
|
initialValues,
|
|
1532
1541
|
layout = "horizontal",
|
|
1542
|
+
placeholderMode,
|
|
1533
1543
|
disabled = false,
|
|
1534
1544
|
requiredMark = true,
|
|
1535
1545
|
className = "",
|
|
@@ -1539,11 +1549,12 @@ function FormRoot({
|
|
|
1539
1549
|
children,
|
|
1540
1550
|
...props
|
|
1541
1551
|
}) {
|
|
1552
|
+
const resolvedPlaceholderMode = usePlaceholderMode(placeholderMode);
|
|
1542
1553
|
const [internalForm] = useForm(form);
|
|
1543
1554
|
const instance = internalForm;
|
|
1544
1555
|
instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
|
|
1545
1556
|
const context = useMemo4(() => instance, [instance]);
|
|
1546
|
-
return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(
|
|
1557
|
+
return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(
|
|
1547
1558
|
"form",
|
|
1548
1559
|
{
|
|
1549
1560
|
...props,
|
|
@@ -1555,7 +1566,7 @@ function FormRoot({
|
|
|
1555
1566
|
},
|
|
1556
1567
|
children: /* @__PURE__ */ jsx9("fieldset", { disabled, children })
|
|
1557
1568
|
}
|
|
1558
|
-
) });
|
|
1569
|
+
) }) });
|
|
1559
1570
|
}
|
|
1560
1571
|
function defaultEventValue(valuePropName, args) {
|
|
1561
1572
|
const first = args[0];
|
|
@@ -2229,6 +2240,7 @@ function TimePicker({
|
|
|
2229
2240
|
onChange,
|
|
2230
2241
|
onOpenChange,
|
|
2231
2242
|
placeholder = "\u8BF7\u9009\u62E9\u65F6\u95F4",
|
|
2243
|
+
placeholderMode,
|
|
2232
2244
|
min,
|
|
2233
2245
|
max,
|
|
2234
2246
|
step,
|
|
@@ -2283,7 +2295,8 @@ function TimePicker({
|
|
|
2283
2295
|
changeOpen(false);
|
|
2284
2296
|
inputRef.current?.focus();
|
|
2285
2297
|
}
|
|
2286
|
-
|
|
2298
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: Boolean(display), active: open });
|
|
2299
|
+
return /* @__PURE__ */ jsxs13("span", { ref: rootRef, style, className: `sia-picker sia-time-picker${floating.className} sia-picker--${size} sia-picker--${status}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
2287
2300
|
/* @__PURE__ */ jsx13(
|
|
2288
2301
|
"input",
|
|
2289
2302
|
{
|
|
@@ -2320,6 +2333,7 @@ function TimePicker({
|
|
|
2320
2333
|
}
|
|
2321
2334
|
}
|
|
2322
2335
|
),
|
|
2336
|
+
floating.label,
|
|
2323
2337
|
allowClear && currentValue && !disabled && !readOnly ? /* @__PURE__ */ jsx13("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65F6\u95F4", onMouseDown: (event) => event.preventDefault(), onClick: () => {
|
|
2324
2338
|
setValue2("");
|
|
2325
2339
|
changeOpen(false);
|
|
@@ -2358,7 +2372,7 @@ function TimePicker({
|
|
|
2358
2372
|
] });
|
|
2359
2373
|
}
|
|
2360
2374
|
function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F00\u59CB\u65F6\u95F4", "\u7ED3\u675F\u65F6\u95F4"], separator = "\u2192", onChange, className = "", style, ...props }) {
|
|
2361
|
-
const [currentValue, setValue2] = useControllableState({ value, defaultValue, onChange });
|
|
2375
|
+
const [currentValue, setValue2] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
|
|
2362
2376
|
function update(index, next) {
|
|
2363
2377
|
const pair = [currentValue[0], currentValue[1]];
|
|
2364
2378
|
pair[index] = next;
|
|
@@ -2406,6 +2420,7 @@ function TreeSelect({
|
|
|
2406
2420
|
allowClear = false,
|
|
2407
2421
|
treeDefaultExpandAll = false,
|
|
2408
2422
|
placeholder = "\u8BF7\u9009\u62E9",
|
|
2423
|
+
placeholderMode,
|
|
2409
2424
|
searchPlaceholder = "\u641C\u7D22\u8282\u70B9",
|
|
2410
2425
|
maxTagCount = 3,
|
|
2411
2426
|
disabled = false,
|
|
@@ -2469,7 +2484,7 @@ function TreeSelect({
|
|
|
2469
2484
|
collect(treeData);
|
|
2470
2485
|
return new Set(values);
|
|
2471
2486
|
});
|
|
2472
|
-
const selectedValues = Array.isArray(currentValue) ? [...currentValue] : currentValue === void 0 ? [] : [currentValue];
|
|
2487
|
+
const selectedValues = Array.isArray(currentValue) ? [...currentValue] : currentValue === void 0 || currentValue === "" && !nodeIndex.has("") ? [] : [currentValue];
|
|
2473
2488
|
const expandedSet = treeExpandedKeys ? new Set(treeExpandedKeys) : expanded;
|
|
2474
2489
|
const selectedNodes = resolveNodes(selectedValues);
|
|
2475
2490
|
const visibleNodes = flattenTree(treeData, expandedSet, search, filterTreeNode);
|
|
@@ -2584,6 +2599,7 @@ function TreeSelect({
|
|
|
2584
2599
|
changeOpen(false);
|
|
2585
2600
|
}
|
|
2586
2601
|
}
|
|
2602
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedNodes.length > 0, active: open });
|
|
2587
2603
|
return /* @__PURE__ */ jsxs14(
|
|
2588
2604
|
"div",
|
|
2589
2605
|
{
|
|
@@ -2603,7 +2619,7 @@ function TreeSelect({
|
|
|
2603
2619
|
"button",
|
|
2604
2620
|
{
|
|
2605
2621
|
type: "button",
|
|
2606
|
-
className:
|
|
2622
|
+
className: `sia-tree-select__trigger${floating.className}`,
|
|
2607
2623
|
disabled,
|
|
2608
2624
|
"aria-haspopup": "tree",
|
|
2609
2625
|
"aria-expanded": open,
|
|
@@ -2617,13 +2633,8 @@ function TreeSelect({
|
|
|
2617
2633
|
if (event.key === "Escape") changeOpen(false);
|
|
2618
2634
|
},
|
|
2619
2635
|
children: [
|
|
2620
|
-
/* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */
|
|
2621
|
-
|
|
2622
|
-
selectedNodes.length > maxTagCount ? /* @__PURE__ */ jsxs14("span", { className: "sia-tree-select__tag", children: [
|
|
2623
|
-
"+",
|
|
2624
|
-
selectedNodes.length - maxTagCount
|
|
2625
|
-
] }) : null
|
|
2626
|
-
] }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
|
|
2636
|
+
/* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */ jsx14(OverflowTags, { tagClassName: "sia-tree-select__tag", maxCount: maxTagCount, items: selectedNodes.map((node) => ({ key: node.value, label: node.title })) }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
|
|
2637
|
+
floating.label,
|
|
2627
2638
|
/* @__PURE__ */ jsx14(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
|
|
2628
2639
|
]
|
|
2629
2640
|
}
|
|
@@ -3842,7 +3853,7 @@ var InputNumber = forwardRef4(function InputNumber2({
|
|
|
3842
3853
|
prefix,
|
|
3843
3854
|
suffix,
|
|
3844
3855
|
controls = true,
|
|
3845
|
-
placeholderMode
|
|
3856
|
+
placeholderMode,
|
|
3846
3857
|
placeholder,
|
|
3847
3858
|
disabled,
|
|
3848
3859
|
readOnly,
|
|
@@ -3911,7 +3922,7 @@ var InputNumber = forwardRef4(function InputNumber2({
|
|
|
3911
3922
|
}
|
|
3912
3923
|
const increaseDisabled = disabled || readOnly || max !== void 0 && currentValue !== null && currentValue >= max;
|
|
3913
3924
|
const decreaseDisabled = disabled || readOnly || min !== void 0 && currentValue !== null && currentValue <= min;
|
|
3914
|
-
const floatingPlaceholder = placeholderMode === "floating" && Boolean(placeholder);
|
|
3925
|
+
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
3915
3926
|
const input = /* @__PURE__ */ jsx17(
|
|
3916
3927
|
"input",
|
|
3917
3928
|
{
|
|
@@ -4387,11 +4398,31 @@ function Treemap({
|
|
|
4387
4398
|
);
|
|
4388
4399
|
}
|
|
4389
4400
|
|
|
4401
|
+
// src/components/Table/TableCellContent.tsx
|
|
4402
|
+
import { useLayoutEffect, useRef as useRef12, useState as useState15 } from "react";
|
|
4403
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
4404
|
+
function TableCellContent({ children, ellipsis, title }) {
|
|
4405
|
+
const ref = useRef12(null);
|
|
4406
|
+
const [overflowing, setOverflowing] = useState15(false);
|
|
4407
|
+
const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
|
|
4408
|
+
useLayoutEffect(() => {
|
|
4409
|
+
const element = ref.current;
|
|
4410
|
+
if (!element || !ellipsis || !customContent) return;
|
|
4411
|
+
const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
|
|
4412
|
+
update();
|
|
4413
|
+
const observer = new ResizeObserver(update);
|
|
4414
|
+
observer.observe(element);
|
|
4415
|
+
for (const child of element.children) observer.observe(child);
|
|
4416
|
+
return () => observer.disconnect();
|
|
4417
|
+
}, [children, ellipsis, customContent]);
|
|
4418
|
+
return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
|
|
4419
|
+
}
|
|
4420
|
+
|
|
4390
4421
|
// src/components/Table/Table.tsx
|
|
4391
|
-
import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as
|
|
4422
|
+
import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef14, useState as useState17 } from "react";
|
|
4392
4423
|
|
|
4393
4424
|
// src/components/Table/plugins.tsx
|
|
4394
|
-
import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as
|
|
4425
|
+
import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef13, useState as useState16 } from "react";
|
|
4395
4426
|
|
|
4396
4427
|
// src/components/Table/utils.ts
|
|
4397
4428
|
var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
|
|
@@ -4444,9 +4475,9 @@ function toTablePageParams(current, pageSize) {
|
|
|
4444
4475
|
}
|
|
4445
4476
|
|
|
4446
4477
|
// src/components/Table/plugins.tsx
|
|
4447
|
-
import { Fragment as Fragment6, jsx as
|
|
4478
|
+
import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
4448
4479
|
function TableCheckbox({ checked, indeterminate, disabled, label, onChange }) {
|
|
4449
|
-
return /* @__PURE__ */
|
|
4480
|
+
return /* @__PURE__ */ jsx20(Checkbox, { className: "sia-table__checkbox", "aria-label": label, checked, indeterminate, disabled, onClick: (event) => event.stopPropagation(), onChange });
|
|
4450
4481
|
}
|
|
4451
4482
|
function flattenRecords(data, childrenColumnName) {
|
|
4452
4483
|
const result = [];
|
|
@@ -4898,7 +4929,7 @@ function TableSelectedItemsPanel({
|
|
|
4898
4929
|
onRemove,
|
|
4899
4930
|
onClear
|
|
4900
4931
|
}) {
|
|
4901
|
-
const [showAll, setShowAll] =
|
|
4932
|
+
const [showAll, setShowAll] = useState16(false);
|
|
4902
4933
|
const visibleEntries = showAll ? entries : entries.slice(0, maxCount);
|
|
4903
4934
|
const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
|
|
4904
4935
|
const baseColumnMap = new Map(flattenTableColumns(baseColumns).map((column) => [column.key, column]));
|
|
@@ -4906,33 +4937,33 @@ function TableSelectedItemsPanel({
|
|
|
4906
4937
|
/* @__PURE__ */ jsxs19("div", { className: "sia-table-selection-panel__header", children: [
|
|
4907
4938
|
/* @__PURE__ */ jsxs19("strong", { children: [
|
|
4908
4939
|
"\u5DF2\u9009 ",
|
|
4909
|
-
/* @__PURE__ */
|
|
4940
|
+
/* @__PURE__ */ jsx20("span", { children: entries.length }),
|
|
4910
4941
|
" \u9879"
|
|
4911
4942
|
] }),
|
|
4912
|
-
/* @__PURE__ */
|
|
4943
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", disabled: entries.length === 0, onClick: onClear, children: "\u6E05\u7A7A" })
|
|
4913
4944
|
] }),
|
|
4914
|
-
/* @__PURE__ */
|
|
4915
|
-
/* @__PURE__ */
|
|
4916
|
-
columns.map((column) => /* @__PURE__ */
|
|
4917
|
-
/* @__PURE__ */
|
|
4945
|
+
/* @__PURE__ */ jsx20("div", { className: "sia-table-selection-panel__body", children: /* @__PURE__ */ jsxs19("table", { children: [
|
|
4946
|
+
/* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs19("tr", { children: [
|
|
4947
|
+
columns.map((column) => /* @__PURE__ */ jsx20("th", { children: getColumnLabel(column) }, column.key)),
|
|
4948
|
+
/* @__PURE__ */ jsx20("th", { "aria-label": "\u64CD\u4F5C" })
|
|
4918
4949
|
] }) }),
|
|
4919
|
-
/* @__PURE__ */
|
|
4950
|
+
/* @__PURE__ */ jsx20("tbody", { children: visibleEntries.map((entry, selectedIndex) => /* @__PURE__ */ jsxs19("tr", { children: [
|
|
4920
4951
|
columns.map((column) => {
|
|
4921
|
-
if (column.meta?.plugin === "index") return /* @__PURE__ */
|
|
4952
|
+
if (column.meta?.plugin === "index") return /* @__PURE__ */ jsx20("td", { children: entry.sourceIndex + 1 }, column.key);
|
|
4922
4953
|
const baseColumn = baseColumnMap.get(column.key) ?? column;
|
|
4923
4954
|
const value = getTableValue(entry.record, baseColumn.dataIndex, baseColumn.code ?? baseColumn.key);
|
|
4924
4955
|
const row = { key: entry.key, record: entry.record, sourceIndex: entry.sourceIndex, depth: 0, meta: {} };
|
|
4925
4956
|
const content = baseColumn.render?.(value, entry.record, entry.sourceIndex, { row, rowIndex: entry.sourceIndex, column: baseColumn }) ?? value;
|
|
4926
|
-
return /* @__PURE__ */
|
|
4957
|
+
return /* @__PURE__ */ jsx20("td", { children: content }, column.key);
|
|
4927
4958
|
}),
|
|
4928
|
-
/* @__PURE__ */
|
|
4959
|
+
/* @__PURE__ */ jsx20("td", { children: /* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", onClick: () => onRemove(entry.key), children: "\u53D6\u6D88" }) })
|
|
4929
4960
|
] }, entry.key)) })
|
|
4930
4961
|
] }) }),
|
|
4931
4962
|
hiddenCount > 0 ? /* @__PURE__ */ jsxs19("div", { className: "sia-table-selection-panel__more", children: [
|
|
4932
4963
|
"\u8FD8\u6709 ",
|
|
4933
4964
|
hiddenCount,
|
|
4934
4965
|
" \u9879\u672A\u5C55\u793A",
|
|
4935
|
-
/* @__PURE__ */
|
|
4966
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", onClick: () => setShowAll(true), children: "\u5C55\u793A\u5168\u90E8" })
|
|
4936
4967
|
] }) : null
|
|
4937
4968
|
] });
|
|
4938
4969
|
}
|
|
@@ -5010,12 +5041,12 @@ function createSelectionPlugin(options = {}) {
|
|
|
5010
5041
|
const keys = selected(context);
|
|
5011
5042
|
const allChecked = enabledRows.length > 0 && enabledRows.every((row) => keys.includes(row.key));
|
|
5012
5043
|
const someChecked = enabledRows.some((row) => keys.includes(row.key));
|
|
5013
|
-
return /* @__PURE__ */
|
|
5044
|
+
return /* @__PURE__ */ jsx20(TableCheckbox, { label: "\u9009\u62E9\u5F53\u524D\u9875\u5168\u90E8\u884C", checked: allChecked, indeterminate: !allChecked && someChecked, onChange: (checked) => {
|
|
5014
5045
|
const pageKeys = enabledRows.map((row) => row.key);
|
|
5015
5046
|
setKeys(checked ? [.../* @__PURE__ */ new Set([...keys, ...pageKeys])] : keys.filter((key) => !pageKeys.includes(key)), context);
|
|
5016
5047
|
} });
|
|
5017
5048
|
},
|
|
5018
|
-
render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */
|
|
5049
|
+
render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */ jsx20(Radio2, { className: "sia-table__checkbox", value: String(info.row.key), "aria-label": `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onClick: (event) => event.stopPropagation(), onChange: () => toggle(info.row.key, record, context) }) : /* @__PURE__ */ jsx20(TableCheckbox, { label: `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onChange: (checked) => toggle(info.row.key, record, context, checked) })
|
|
5019
5050
|
};
|
|
5020
5051
|
return [selectionColumn, ...columns];
|
|
5021
5052
|
},
|
|
@@ -5043,7 +5074,7 @@ function createSelectionPlugin(options = {}) {
|
|
|
5043
5074
|
const entries = entriesForKeys(keys, context);
|
|
5044
5075
|
const columns = flattenTableColumns(context.columns).filter((column) => !column.hidden && column.meta?.plugin !== "selection").slice(0, Math.max(1, options.selectionPanelColumnCount ?? 4));
|
|
5045
5076
|
return /* @__PURE__ */ jsxs19("span", { className: "sia-table__selection-footer", children: [
|
|
5046
|
-
/* @__PURE__ */
|
|
5077
|
+
/* @__PURE__ */ jsx20(
|
|
5047
5078
|
Popover,
|
|
5048
5079
|
{
|
|
5049
5080
|
placement: "top-start",
|
|
@@ -5051,7 +5082,7 @@ function createSelectionPlugin(options = {}) {
|
|
|
5051
5082
|
open: context.state.panelOpen && entries.length > 0,
|
|
5052
5083
|
onOpenChange: (panelOpen) => context.setState((state) => ({ ...state, panelOpen })),
|
|
5053
5084
|
overlayClassName: "sia-table-selection-popover",
|
|
5054
|
-
content: /* @__PURE__ */
|
|
5085
|
+
content: /* @__PURE__ */ jsx20(TableSelectedItemsPanel, { entries, columns, baseColumns: context.baseColumns, maxCount: Math.max(1, options.selectionPanelMaxCount ?? 100), onRemove: (key) => {
|
|
5055
5086
|
setKeys(keys.filter((item) => item !== key), context);
|
|
5056
5087
|
}, onClear: () => setKeys([], context) }),
|
|
5057
5088
|
children: /* @__PURE__ */ jsxs19(Button, { className: "sia-table__selected-trigger", size: "small", variant: "link", disabled: entries.length === 0, children: [
|
|
@@ -5061,7 +5092,7 @@ function createSelectionPlugin(options = {}) {
|
|
|
5061
5092
|
] })
|
|
5062
5093
|
}
|
|
5063
5094
|
),
|
|
5064
|
-
mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */
|
|
5095
|
+
mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */ jsx20(Checkbox, { checked: preserving(context), onChange: (checked) => setPreserving(checked, context), children: "\u8DE8\u9875\u4FDD\u7559\u52FE\u9009" }) : null
|
|
5065
5096
|
] });
|
|
5066
5097
|
},
|
|
5067
5098
|
getApi(context) {
|
|
@@ -5106,13 +5137,13 @@ function createSortPlugin(options = {}) {
|
|
|
5106
5137
|
return { ...column, renderHeader: (currentColumn, coreContext) => {
|
|
5107
5138
|
const info = current(context);
|
|
5108
5139
|
return /* @__PURE__ */ jsxs19("span", { className: "sia-table__sortable-header", children: [
|
|
5109
|
-
/* @__PURE__ */
|
|
5140
|
+
/* @__PURE__ */ jsx20("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
|
|
5110
5141
|
/* @__PURE__ */ jsxs19("button", { type: "button", className: "sia-table__sort-button", "aria-label": `\u5207\u6362${getColumnLabel(currentColumn)}\u6392\u5E8F`, onClick: (event) => {
|
|
5111
5142
|
event.stopPropagation();
|
|
5112
5143
|
cycle(field, context);
|
|
5113
5144
|
}, children: [
|
|
5114
|
-
/* @__PURE__ */
|
|
5115
|
-
/* @__PURE__ */
|
|
5145
|
+
/* @__PURE__ */ jsx20(Icon, { name: "chevron-up", size: 11, className: info?.field === field && info.order === "ascend" ? "is-active" : "" }),
|
|
5146
|
+
/* @__PURE__ */ jsx20(Icon, { name: "chevron-down", size: 11, className: info?.field === field && info.order === "descend" ? "is-active" : "" })
|
|
5116
5147
|
] })
|
|
5117
5148
|
] });
|
|
5118
5149
|
} };
|
|
@@ -5138,8 +5169,8 @@ function TableFilterControl({
|
|
|
5138
5169
|
placeholder,
|
|
5139
5170
|
onApply
|
|
5140
5171
|
}) {
|
|
5141
|
-
const [open, setOpen] =
|
|
5142
|
-
const [draft, setDraft] =
|
|
5172
|
+
const [open, setOpen] = useState16(false);
|
|
5173
|
+
const [draft, setDraft] = useState16(value);
|
|
5143
5174
|
const label = getColumnLabel(column);
|
|
5144
5175
|
useEffect11(() => {
|
|
5145
5176
|
if (open) setDraft(value);
|
|
@@ -5149,8 +5180,8 @@ function TableFilterControl({
|
|
|
5149
5180
|
setOpen(false);
|
|
5150
5181
|
};
|
|
5151
5182
|
return /* @__PURE__ */ jsxs19("span", { className: "sia-table__filter-header", children: [
|
|
5152
|
-
/* @__PURE__ */
|
|
5153
|
-
/* @__PURE__ */
|
|
5183
|
+
/* @__PURE__ */ jsx20("span", { children: column.title ?? column.name ?? column.key }),
|
|
5184
|
+
/* @__PURE__ */ jsx20(
|
|
5154
5185
|
Popover,
|
|
5155
5186
|
{
|
|
5156
5187
|
open,
|
|
@@ -5158,7 +5189,7 @@ function TableFilterControl({
|
|
|
5158
5189
|
placement: "bottom-end",
|
|
5159
5190
|
overlayClassName: "sia-table-filter-popover",
|
|
5160
5191
|
content: /* @__PURE__ */ jsxs19("div", { className: "sia-table-filter-panel", children: [
|
|
5161
|
-
/* @__PURE__ */
|
|
5192
|
+
/* @__PURE__ */ jsx20(
|
|
5162
5193
|
Input,
|
|
5163
5194
|
{
|
|
5164
5195
|
size: "small",
|
|
@@ -5173,14 +5204,14 @@ function TableFilterControl({
|
|
|
5173
5204
|
}
|
|
5174
5205
|
),
|
|
5175
5206
|
/* @__PURE__ */ jsxs19("div", { className: "sia-table-filter-panel__actions", children: [
|
|
5176
|
-
/* @__PURE__ */
|
|
5207
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", disabled: !value && !draft, onClick: () => {
|
|
5177
5208
|
setDraft("");
|
|
5178
5209
|
apply("");
|
|
5179
5210
|
}, children: "\u6E05\u9664" }),
|
|
5180
|
-
/* @__PURE__ */
|
|
5211
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: "primary", onClick: () => apply(draft), children: "\u5E94\u7528" })
|
|
5181
5212
|
] })
|
|
5182
5213
|
] }),
|
|
5183
|
-
children: /* @__PURE__ */
|
|
5214
|
+
children: /* @__PURE__ */ jsx20(
|
|
5184
5215
|
"button",
|
|
5185
5216
|
{
|
|
5186
5217
|
type: "button",
|
|
@@ -5188,7 +5219,7 @@ function TableFilterControl({
|
|
|
5188
5219
|
"aria-label": `\u7B5B\u9009${label}`,
|
|
5189
5220
|
"aria-pressed": Boolean(value),
|
|
5190
5221
|
onClick: (event) => event.stopPropagation(),
|
|
5191
|
-
children: /* @__PURE__ */
|
|
5222
|
+
children: /* @__PURE__ */ jsx20(Icon, { name: "search", size: 13 })
|
|
5192
5223
|
}
|
|
5193
5224
|
)
|
|
5194
5225
|
}
|
|
@@ -5229,7 +5260,7 @@ function createFilterPlugin(options = {}) {
|
|
|
5229
5260
|
return { ...column, renderHeader: (currentColumn, coreContext) => {
|
|
5230
5261
|
const renderedColumn = { ...currentColumn, title: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title };
|
|
5231
5262
|
const placeholder = typeof options.placeholder === "function" ? options.placeholder(currentColumn) : options.placeholder ?? `\u8F93\u5165${getColumnLabel(currentColumn)}\u7B5B\u9009`;
|
|
5232
|
-
return /* @__PURE__ */
|
|
5263
|
+
return /* @__PURE__ */ jsx20(TableFilterControl, { column: renderedColumn, value: current(context)[column.key] ?? "", placeholder, onApply: (value) => update({ ...current(context), [column.key]: value }, context) });
|
|
5233
5264
|
} };
|
|
5234
5265
|
});
|
|
5235
5266
|
},
|
|
@@ -5282,7 +5313,7 @@ function createPaginationPlugin(options = {}) {
|
|
|
5282
5313
|
const page = currentPage(context);
|
|
5283
5314
|
const filteredCount = context.getPluginApi("filter")?.getFilteredRows().length;
|
|
5284
5315
|
const totalRecords = options.totalCount ?? filteredCount ?? context.sourceData.length;
|
|
5285
|
-
return /* @__PURE__ */
|
|
5316
|
+
return /* @__PURE__ */ jsx20(
|
|
5286
5317
|
Pagination,
|
|
5287
5318
|
{
|
|
5288
5319
|
className: "sia-table__pagination",
|
|
@@ -5371,10 +5402,10 @@ function createTreePlugin(options = {}) {
|
|
|
5371
5402
|
wrapped = true;
|
|
5372
5403
|
const previousRender = column.render;
|
|
5373
5404
|
return { ...column, render: (value, record, index, info) => /* @__PURE__ */ jsxs19("span", { className: "sia-table__tree-cell", style: { paddingLeft: info.row.depth * 18 }, children: [
|
|
5374
|
-
info.row.meta.treeHasChildren ? /* @__PURE__ */
|
|
5405
|
+
info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx20("button", { type: "button", className: "sia-table__tree-toggle", "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9", "aria-expanded": current(context).includes(info.row.key), onClick: (event) => {
|
|
5375
5406
|
event.stopPropagation();
|
|
5376
5407
|
toggle(info.row.key, context);
|
|
5377
|
-
}, children: /* @__PURE__ */
|
|
5408
|
+
}, children: /* @__PURE__ */ jsx20(Icon, { name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ jsx20("span", { className: "sia-table__tree-placeholder" }),
|
|
5378
5409
|
previousRender ? previousRender(value, record, index, info) : value
|
|
5379
5410
|
] }) };
|
|
5380
5411
|
});
|
|
@@ -5406,13 +5437,13 @@ function EditableTableCell({
|
|
|
5406
5437
|
trigger
|
|
5407
5438
|
}) {
|
|
5408
5439
|
const config = typeof editable === "object" ? editable : { type: "input" };
|
|
5409
|
-
const [editValue, setEditValue] =
|
|
5410
|
-
const [saving, setSaving] =
|
|
5411
|
-
const inputRef =
|
|
5412
|
-
const editorRef =
|
|
5413
|
-
const editValueRef =
|
|
5414
|
-
const savingRef =
|
|
5415
|
-
const saveRef =
|
|
5440
|
+
const [editValue, setEditValue] = useState16(value);
|
|
5441
|
+
const [saving, setSaving] = useState16(false);
|
|
5442
|
+
const inputRef = useRef13(null);
|
|
5443
|
+
const editorRef = useRef13(null);
|
|
5444
|
+
const editValueRef = useRef13(value);
|
|
5445
|
+
const savingRef = useRef13(false);
|
|
5446
|
+
const saveRef = useRef13(async () => {
|
|
5416
5447
|
});
|
|
5417
5448
|
useEffect11(() => {
|
|
5418
5449
|
if (!active) return;
|
|
@@ -5456,14 +5487,14 @@ function EditableTableCell({
|
|
|
5456
5487
|
return () => document.removeEventListener("pointerdown", handleOutsidePointerDown, true);
|
|
5457
5488
|
}, [active, config.type]);
|
|
5458
5489
|
if (!active) return /* @__PURE__ */ jsxs19("div", { className: "sia-table__editable-display", onClick: trigger === "click" ? onStart : void 0, onDoubleClick: trigger === "doubleClick" ? onStart : void 0, children: [
|
|
5459
|
-
/* @__PURE__ */
|
|
5460
|
-
/* @__PURE__ */
|
|
5490
|
+
/* @__PURE__ */ jsx20("span", { children: content }),
|
|
5491
|
+
/* @__PURE__ */ jsx20(Icon, { name: "edit", size: 13 })
|
|
5461
5492
|
] });
|
|
5462
5493
|
let editor;
|
|
5463
5494
|
if (config.type === "custom" && config.editRender) {
|
|
5464
5495
|
editor = config.editRender(record, (next) => void save(next), onCancel);
|
|
5465
5496
|
} else if (config.type === "inputNumber") {
|
|
5466
|
-
editor = /* @__PURE__ */
|
|
5497
|
+
editor = /* @__PURE__ */ jsx20(InputNumber, { ref: inputRef, size: "small", value: typeof editValue === "number" ? editValue : null, onChange: updateEditValue, disabled: saving, onBlur: () => void save(), onKeyDown: (event) => {
|
|
5467
5498
|
if (event.key === "Enter") {
|
|
5468
5499
|
const rawValue = event.currentTarget.value.trim();
|
|
5469
5500
|
const nextValue = rawValue === "" ? null : Number(rawValue);
|
|
@@ -5472,17 +5503,17 @@ function EditableTableCell({
|
|
|
5472
5503
|
if (event.key === "Escape") onCancel();
|
|
5473
5504
|
} });
|
|
5474
5505
|
} else if (config.type === "select") {
|
|
5475
|
-
editor = /* @__PURE__ */
|
|
5506
|
+
editor = /* @__PURE__ */ jsx20(Select, { size: "small", value: editValue, options: config.options ?? [], disabled: saving, onChange: (next) => {
|
|
5476
5507
|
updateEditValue(next);
|
|
5477
5508
|
void save(next);
|
|
5478
5509
|
} });
|
|
5479
5510
|
} else {
|
|
5480
|
-
editor = /* @__PURE__ */
|
|
5511
|
+
editor = /* @__PURE__ */ jsx20(Input, { ref: inputRef, size: "small", value: String(editValue ?? ""), disabled: saving, suffix: saving ? /* @__PURE__ */ jsx20(Icon, { name: "loader", size: 13, spin: true }) : null, onChange: (event) => updateEditValue(event.target.value), onBlur: () => void save(), onKeyDown: (event) => {
|
|
5481
5512
|
if (event.key === "Enter") void save();
|
|
5482
5513
|
if (event.key === "Escape") onCancel();
|
|
5483
5514
|
} });
|
|
5484
5515
|
}
|
|
5485
|
-
return /* @__PURE__ */
|
|
5516
|
+
return /* @__PURE__ */ jsx20("div", { ref: editorRef, className: "sia-table__editor", children: editor });
|
|
5486
5517
|
}
|
|
5487
5518
|
function createEditablePlugin(options = {}) {
|
|
5488
5519
|
const trigger = options.trigger ?? "click";
|
|
@@ -5500,7 +5531,7 @@ function createEditablePlugin(options = {}) {
|
|
|
5500
5531
|
const active = canEdit && context.state.editing?.rowKey === info.row.key && context.state.editing.columnKey === column.key;
|
|
5501
5532
|
const content = previousRender ? previousRender(value, record, index, info) : value;
|
|
5502
5533
|
if (!canEdit) return content;
|
|
5503
|
-
return /* @__PURE__ */
|
|
5534
|
+
return /* @__PURE__ */ jsx20(EditableTableCell, { active, editable: column.editable, value, record, content, trigger, onStart: () => context.setState({ editing: { rowKey: info.row.key, columnKey: column.key } }), onCancel: () => context.setState((state) => state.editing?.rowKey === info.row.key && state.editing.columnKey === column.key ? { editing: null } : state), onSave: async (nextValue) => await options.onCellChange?.(column.key, record, nextValue) !== false });
|
|
5504
5535
|
} };
|
|
5505
5536
|
});
|
|
5506
5537
|
},
|
|
@@ -5528,8 +5559,8 @@ function createResizePlugin(options = {}) {
|
|
|
5528
5559
|
const width = configuredWidth ?? (autoWidth ? void 0 : 160);
|
|
5529
5560
|
const previousHeader = column.renderHeader;
|
|
5530
5561
|
return { ...column, autoWidth, width, renderHeader: (currentColumn, coreContext) => /* @__PURE__ */ jsxs19("span", { className: "sia-table__resizable-header", children: [
|
|
5531
|
-
/* @__PURE__ */
|
|
5532
|
-
/* @__PURE__ */
|
|
5562
|
+
/* @__PURE__ */ jsx20("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
|
|
5563
|
+
/* @__PURE__ */ jsx20("span", { className: "sia-table__resize-handle", role: "separator", "aria-label": `\u8C03\u6574${getColumnLabel(currentColumn)}\u5217\u5BBD`, onMouseDown: (event) => {
|
|
5533
5564
|
if (event.button !== 0) return;
|
|
5534
5565
|
event.preventDefault();
|
|
5535
5566
|
event.stopPropagation();
|
|
@@ -5604,8 +5635,8 @@ function applyColumnSettingsToTree(columns, items) {
|
|
|
5604
5635
|
return walk(columns).map((entry) => entry.column);
|
|
5605
5636
|
}
|
|
5606
5637
|
function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
|
|
5607
|
-
const [draft, setDraft] =
|
|
5608
|
-
const dragIndex =
|
|
5638
|
+
const [draft, setDraft] = useState16(items);
|
|
5639
|
+
const dragIndex = useRef13(null);
|
|
5609
5640
|
useEffect11(() => {
|
|
5610
5641
|
if (open) setDraft(items);
|
|
5611
5642
|
}, [items, open]);
|
|
@@ -5625,11 +5656,11 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
|
|
|
5625
5656
|
return /* @__PURE__ */ jsxs19(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
|
|
5626
5657
|
if (!next) onClose();
|
|
5627
5658
|
}, footer: /* @__PURE__ */ jsxs19(Fragment6, { children: [
|
|
5628
|
-
/* @__PURE__ */
|
|
5629
|
-
/* @__PURE__ */
|
|
5659
|
+
/* @__PURE__ */ jsx20(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
|
|
5660
|
+
/* @__PURE__ */ jsx20(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
|
|
5630
5661
|
] }), children: [
|
|
5631
5662
|
/* @__PURE__ */ jsxs19("label", { className: "sia-table-settings__all", children: [
|
|
5632
|
-
/* @__PURE__ */
|
|
5663
|
+
/* @__PURE__ */ jsx20(TableCheckbox, { label: "\u5168\u9009\u5217", checked: visibleCount === draft.length && draft.length > 0, indeterminate: visibleCount > 0 && visibleCount < draft.length, onChange: (checked) => setDraft((previous) => previous.map((item) => ({ ...item, visible: checked }))) }),
|
|
5633
5664
|
/* @__PURE__ */ jsxs19("span", { children: [
|
|
5634
5665
|
"\u5168\u9009\uFF08",
|
|
5635
5666
|
visibleCount,
|
|
@@ -5638,7 +5669,7 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
|
|
|
5638
5669
|
"\uFF09"
|
|
5639
5670
|
] })
|
|
5640
5671
|
] }),
|
|
5641
|
-
/* @__PURE__ */
|
|
5672
|
+
/* @__PURE__ */ jsx20("div", { className: "sia-table-settings__list", children: draft.map((item, index) => /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__item", draggable: true, onDragStart: () => {
|
|
5642
5673
|
dragIndex.current = index;
|
|
5643
5674
|
}, onDragOver: (event) => event.preventDefault(), onDrop: () => {
|
|
5644
5675
|
if (dragIndex.current == null || dragIndex.current === index) return;
|
|
@@ -5648,14 +5679,14 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
|
|
|
5648
5679
|
setDraft(next.map((entry, order) => ({ ...entry, order })));
|
|
5649
5680
|
dragIndex.current = null;
|
|
5650
5681
|
}, children: [
|
|
5651
|
-
/* @__PURE__ */
|
|
5652
|
-
/* @__PURE__ */
|
|
5653
|
-
/* @__PURE__ */
|
|
5682
|
+
/* @__PURE__ */ jsx20(Icon, { name: "menu", size: 15 }),
|
|
5683
|
+
/* @__PURE__ */ jsx20(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
|
|
5684
|
+
/* @__PURE__ */ jsx20("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
|
|
5654
5685
|
/* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__actions", children: [
|
|
5655
|
-
/* @__PURE__ */
|
|
5656
|
-
/* @__PURE__ */
|
|
5657
|
-
/* @__PURE__ */
|
|
5658
|
-
/* @__PURE__ */
|
|
5686
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-up", size: 13 }), "aria-label": "\u4E0A\u79FB", disabled: index === 0, onClick: () => move(index, -1) }),
|
|
5687
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-down", size: 13 }), "aria-label": "\u4E0B\u79FB", disabled: index === draft.length - 1, onClick: () => move(index, 1) }),
|
|
5688
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
|
|
5689
|
+
/* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
|
|
5659
5690
|
] })
|
|
5660
5691
|
] }, item.key)) })
|
|
5661
5692
|
] });
|
|
@@ -5701,8 +5732,8 @@ function createColumnSettingPlugin(options = {}) {
|
|
|
5701
5732
|
void save({ columns: currentItems(context), pageSize, version: 1 });
|
|
5702
5733
|
}
|
|
5703
5734
|
},
|
|
5704
|
-
renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */
|
|
5705
|
-
renderOverlay: (context) => /* @__PURE__ */
|
|
5735
|
+
renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }), "aria-label": "\u6253\u5F00\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", onClick: () => context.setState((state) => ({ ...state, open: true })) }),
|
|
5736
|
+
renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
|
|
5706
5737
|
getApi: (context) => ({ open: () => context.setState((state) => ({ ...state, open: true })), close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
|
|
5707
5738
|
};
|
|
5708
5739
|
}
|
|
@@ -5725,10 +5756,10 @@ function createLocalStorageTableSettingsAdapter(prefix = "sia-table") {
|
|
|
5725
5756
|
};
|
|
5726
5757
|
}
|
|
5727
5758
|
function ToolbarItems({ items, context }) {
|
|
5728
|
-
return /* @__PURE__ */
|
|
5759
|
+
return /* @__PURE__ */ jsx20(Fragment6, { children: items.map((item) => {
|
|
5729
5760
|
if (item.hidden === true || typeof item.hidden === "function" && item.hidden(context)) return null;
|
|
5730
5761
|
const disabled = item.disabled === true || typeof item.disabled === "function" && item.disabled(context);
|
|
5731
|
-
return /* @__PURE__ */
|
|
5762
|
+
return /* @__PURE__ */ jsx20(Button, { size: "small", danger: item.danger, icon: item.icon, disabled, title: typeof item.label === "string" ? item.label : void 0, onClick: () => void item.onClick?.(context), children: item.label }, item.key);
|
|
5732
5763
|
}) });
|
|
5733
5764
|
}
|
|
5734
5765
|
function createToolbarPlugin(options) {
|
|
@@ -5739,14 +5770,14 @@ function createToolbarPlugin(options) {
|
|
|
5739
5770
|
order: 5,
|
|
5740
5771
|
renderToolbarStart: (context) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
|
|
5741
5772
|
options.start,
|
|
5742
|
-
/* @__PURE__ */
|
|
5773
|
+
/* @__PURE__ */ jsx20(ToolbarItems, { items: items("start"), context })
|
|
5743
5774
|
] }),
|
|
5744
5775
|
renderToolbarEnd: (context) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
|
|
5745
5776
|
options.end,
|
|
5746
|
-
/* @__PURE__ */
|
|
5777
|
+
/* @__PURE__ */ jsx20(ToolbarItems, { items: items("end"), context }),
|
|
5747
5778
|
items("end", true).length > 0 ? /* @__PURE__ */ jsxs19("details", { className: "sia-table__toolbar-menu", children: [
|
|
5748
|
-
/* @__PURE__ */
|
|
5749
|
-
/* @__PURE__ */
|
|
5779
|
+
/* @__PURE__ */ jsx20("summary", { "aria-label": "\u66F4\u591A\u8868\u683C\u64CD\u4F5C", children: /* @__PURE__ */ jsx20(Icon, { name: "more-horizontal", size: 16 }) }),
|
|
5780
|
+
/* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(ToolbarItems, { items: items("end", true), context }) })
|
|
5750
5781
|
] }) : null
|
|
5751
5782
|
] })
|
|
5752
5783
|
};
|
|
@@ -5816,11 +5847,11 @@ function createExportPlugin(options = {}) {
|
|
|
5816
5847
|
return {
|
|
5817
5848
|
id: "export",
|
|
5818
5849
|
order: 95,
|
|
5819
|
-
renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */
|
|
5850
|
+
renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx20(
|
|
5820
5851
|
Button,
|
|
5821
5852
|
{
|
|
5822
5853
|
size: "small",
|
|
5823
|
-
icon: /* @__PURE__ */
|
|
5854
|
+
icon: /* @__PURE__ */ jsx20(Icon, { name: "download", size: 14 }),
|
|
5824
5855
|
disabled: getRows(context).length === 0,
|
|
5825
5856
|
onClick: () => void download(context),
|
|
5826
5857
|
children: options.buttonLabel ?? "\u5BFC\u51FA"
|
|
@@ -5835,7 +5866,7 @@ function createExportPlugin(options = {}) {
|
|
|
5835
5866
|
}
|
|
5836
5867
|
|
|
5837
5868
|
// src/components/Table/Table.tsx
|
|
5838
|
-
import { jsx as
|
|
5869
|
+
import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
5839
5870
|
var EMPTY_DATA = [];
|
|
5840
5871
|
var EMPTY_COLUMNS = [];
|
|
5841
5872
|
var EMPTY_PLUGINS = [];
|
|
@@ -5927,7 +5958,7 @@ var TableBodyRow = memo(function TableBodyRow2({
|
|
|
5927
5958
|
onCellPointerDown,
|
|
5928
5959
|
onCellPointerMove
|
|
5929
5960
|
}) {
|
|
5930
|
-
return /* @__PURE__ */
|
|
5961
|
+
return /* @__PURE__ */ jsx21(
|
|
5931
5962
|
"tr",
|
|
5932
5963
|
{
|
|
5933
5964
|
className: `sia-table__row${striped && rowIndex % 2 === 1 ? " sia-table__row--striped" : ""} ${className}`.trim(),
|
|
@@ -5945,7 +5976,7 @@ var TableBodyRow = memo(function TableBodyRow2({
|
|
|
5945
5976
|
const fixedStyle = fixed === "left" ? { left: leftOffsets.get(column.key) } : fixed === "right" ? { right: rightOffsets.get(column.key) } : void 0;
|
|
5946
5977
|
const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
|
|
5947
5978
|
const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
|
|
5948
|
-
return /* @__PURE__ */
|
|
5979
|
+
return /* @__PURE__ */ jsx21(
|
|
5949
5980
|
"td",
|
|
5950
5981
|
{
|
|
5951
5982
|
"data-column-key": column.key,
|
|
@@ -5959,10 +5990,10 @@ var TableBodyRow = memo(function TableBodyRow2({
|
|
|
5959
5990
|
onContextMenu: (event) => onCellContextMenu(column, event),
|
|
5960
5991
|
onPointerDown: (event) => onCellPointerDown(column, event),
|
|
5961
5992
|
onPointerMove: (event) => onCellPointerMove(column, event),
|
|
5962
|
-
children: /* @__PURE__ */
|
|
5963
|
-
|
|
5993
|
+
children: /* @__PURE__ */ jsx21(
|
|
5994
|
+
TableCellContent,
|
|
5964
5995
|
{
|
|
5965
|
-
|
|
5996
|
+
ellipsis: column.ellipsis !== false,
|
|
5966
5997
|
title: column.showTitle !== false && column.ellipsis !== false && typeof value === "string" ? value : void 0,
|
|
5967
5998
|
children: pluginCellProps.content !== void 0 ? pluginCellProps.content : column.render ? column.render(value, row.record, row.sourceIndex, { row, rowIndex, column }) : value
|
|
5968
5999
|
}
|
|
@@ -6002,15 +6033,15 @@ function TableInner(props, ref) {
|
|
|
6002
6033
|
style,
|
|
6003
6034
|
...htmlProps
|
|
6004
6035
|
} = props;
|
|
6005
|
-
const rootRef =
|
|
6006
|
-
const scrollRef =
|
|
6007
|
-
const tableRef =
|
|
6008
|
-
const scrollbarDragRef =
|
|
6009
|
-
const [internalLoading, setInternalLoading] =
|
|
6010
|
-
const [scrollTop, setScrollTop] =
|
|
6011
|
-
const [viewportHeight, setViewportHeight] =
|
|
6012
|
-
const [viewportWidth, setViewportWidth] =
|
|
6013
|
-
const [autoColumnWidths, setAutoColumnWidths] =
|
|
6036
|
+
const rootRef = useRef14(null);
|
|
6037
|
+
const scrollRef = useRef14(null);
|
|
6038
|
+
const tableRef = useRef14(null);
|
|
6039
|
+
const scrollbarDragRef = useRef14(null);
|
|
6040
|
+
const [internalLoading, setInternalLoading] = useState17(false);
|
|
6041
|
+
const [scrollTop, setScrollTop] = useState17(0);
|
|
6042
|
+
const [viewportHeight, setViewportHeight] = useState17(420);
|
|
6043
|
+
const [viewportWidth, setViewportWidth] = useState17(0);
|
|
6044
|
+
const [autoColumnWidths, setAutoColumnWidths] = useState17({});
|
|
6014
6045
|
const getRowKey = useCallback2((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
|
|
6015
6046
|
const builtInResizePlugin = useMemo9(() => createResizePlugin(), []);
|
|
6016
6047
|
const builtInHighlightPlugin = useMemo9(() => createHighlightPlugin(), []);
|
|
@@ -6021,14 +6052,14 @@ function TableInner(props, ref) {
|
|
|
6021
6052
|
return plugins;
|
|
6022
6053
|
}, [builtInHighlightPlugin, builtInResizePlugin, providedPlugins, resizable]);
|
|
6023
6054
|
const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
|
|
6024
|
-
const pluginsByIdRef =
|
|
6055
|
+
const pluginsByIdRef = useRef14(/* @__PURE__ */ new Map());
|
|
6025
6056
|
pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
|
|
6026
|
-
const [pluginStates, setPluginStates] =
|
|
6057
|
+
const [pluginStates, setPluginStates] = useState17(() => Object.fromEntries(
|
|
6027
6058
|
sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
|
|
6028
6059
|
));
|
|
6029
|
-
const pluginApisRef =
|
|
6030
|
-
const contextsRef =
|
|
6031
|
-
const mountedPluginsRef =
|
|
6060
|
+
const pluginApisRef = useRef14({});
|
|
6061
|
+
const contextsRef = useRef14(/* @__PURE__ */ new Map());
|
|
6062
|
+
const mountedPluginsRef = useRef14(/* @__PURE__ */ new Map());
|
|
6032
6063
|
const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
|
|
6033
6064
|
const nextApis = {};
|
|
6034
6065
|
const contexts = /* @__PURE__ */ new Map();
|
|
@@ -6224,20 +6255,20 @@ function TableInner(props, ref) {
|
|
|
6224
6255
|
const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
|
|
6225
6256
|
const toolbarStart = sortedPlugins.map((plugin) => {
|
|
6226
6257
|
const content = plugin.renderToolbarStart?.(getContext(plugin));
|
|
6227
|
-
return content ? /* @__PURE__ */
|
|
6258
|
+
return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `toolbar-start-${plugin.id}`) : null;
|
|
6228
6259
|
}).filter(Boolean);
|
|
6229
6260
|
const toolbarEnd = sortedPlugins.map((plugin) => {
|
|
6230
6261
|
const content = plugin.renderToolbarEnd?.(getContext(plugin));
|
|
6231
|
-
return content ? /* @__PURE__ */
|
|
6262
|
+
return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `toolbar-end-${plugin.id}`) : null;
|
|
6232
6263
|
}).filter(Boolean);
|
|
6233
6264
|
const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
|
|
6234
6265
|
const footers = sortedPlugins.map((plugin) => {
|
|
6235
6266
|
const content = plugin.renderFooter?.(getContext(plugin));
|
|
6236
|
-
return content ? /* @__PURE__ */
|
|
6267
|
+
return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `footer-${plugin.id}`) : null;
|
|
6237
6268
|
}).filter(Boolean);
|
|
6238
6269
|
const overlays = sortedPlugins.map((plugin) => {
|
|
6239
6270
|
const content = plugin.renderOverlay?.(getContext(plugin));
|
|
6240
|
-
return content ? /* @__PURE__ */
|
|
6271
|
+
return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `overlay-${plugin.id}`) : null;
|
|
6241
6272
|
}).filter(Boolean);
|
|
6242
6273
|
const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
|
|
6243
6274
|
const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
|
|
@@ -6324,8 +6355,8 @@ function TableInner(props, ref) {
|
|
|
6324
6355
|
function renderHeaderContent(column, content) {
|
|
6325
6356
|
if (column.description === void 0 || column.description === null) return content;
|
|
6326
6357
|
return /* @__PURE__ */ jsxs20("span", { className: "sia-table__header-label", children: [
|
|
6327
|
-
/* @__PURE__ */
|
|
6328
|
-
/* @__PURE__ */
|
|
6358
|
+
/* @__PURE__ */ jsx21("span", { className: "sia-table__header-label-content", children: content }),
|
|
6359
|
+
/* @__PURE__ */ jsx21(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx21("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx21(Icon, { name: "info", size: 14 }) }) })
|
|
6329
6360
|
] });
|
|
6330
6361
|
}
|
|
6331
6362
|
function getPluginCellProps(row, column) {
|
|
@@ -6355,13 +6386,13 @@ function TableInner(props, ref) {
|
|
|
6355
6386
|
}
|
|
6356
6387
|
function renderSummaryRow(summary) {
|
|
6357
6388
|
let labelRendered = false;
|
|
6358
|
-
return /* @__PURE__ */
|
|
6389
|
+
return /* @__PURE__ */ jsx21("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
|
|
6359
6390
|
const value = summary.values[column.key];
|
|
6360
6391
|
const content = value !== void 0 ? value : !labelRendered && summary.label !== void 0 ? (labelRendered = true, summary.label) : null;
|
|
6361
6392
|
const fixed = normalizeFixed(column.fixed);
|
|
6362
6393
|
const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
|
|
6363
6394
|
const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
|
|
6364
|
-
return /* @__PURE__ */
|
|
6395
|
+
return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
|
|
6365
6396
|
}) }, summary.key);
|
|
6366
6397
|
}
|
|
6367
6398
|
return /* @__PURE__ */ jsxs20(
|
|
@@ -6377,21 +6408,22 @@ function TableInner(props, ref) {
|
|
|
6377
6408
|
...htmlProps,
|
|
6378
6409
|
children: [
|
|
6379
6410
|
hasToolbar ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__toolbar", children: [
|
|
6380
|
-
/* @__PURE__ */
|
|
6381
|
-
/* @__PURE__ */
|
|
6411
|
+
/* @__PURE__ */ jsx21("div", { children: toolbarStart }),
|
|
6412
|
+
/* @__PURE__ */ jsx21("div", { children: toolbarEnd })
|
|
6382
6413
|
] }) : null,
|
|
6383
6414
|
/* @__PURE__ */ jsxs20("div", { className: "sia-table__viewport-wrap", children: [
|
|
6384
|
-
/* @__PURE__ */
|
|
6385
|
-
/* @__PURE__ */
|
|
6386
|
-
/* @__PURE__ */
|
|
6415
|
+
/* @__PURE__ */ jsx21("div", { className: "sia-table__viewport", ref: scrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxs20("table", { ref: tableRef, className: "sia-table__element", style: { width: Math.max(totalWidth, 1), ...manualColumnLayout ? { minWidth: 0 } : {}, ...tableStyle }, children: [
|
|
6416
|
+
/* @__PURE__ */ jsx21("colgroup", { children: leafColumns.map((column) => /* @__PURE__ */ jsx21("col", { "data-column-key": column.key, style: { width: columnWidths.get(column.key) ?? DEFAULT_WIDTH } }, column.key)) }),
|
|
6417
|
+
/* @__PURE__ */ jsx21("thead", { className: stickyHeader ? "sia-table__head sia-table__head--sticky" : "sia-table__head", children: headerRows.map((headerRow, depth) => /* @__PURE__ */ jsx21("tr", { children: headerRow.map((cell) => {
|
|
6387
6418
|
const fixed = cell.leaf ? normalizeFixed(cell.column.fixed) : void 0;
|
|
6388
6419
|
const pluginHeaderProps = getPluginHeaderCellProps(cell.column);
|
|
6389
6420
|
const fixedEdgeClass = fixed === "left" && cell.column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && cell.column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
|
|
6390
6421
|
const autoWidthClass = cell.column.autoWidth ? " sia-table__cell--auto-width" : "";
|
|
6391
|
-
return /* @__PURE__ */
|
|
6422
|
+
return /* @__PURE__ */ jsx21(
|
|
6392
6423
|
"th",
|
|
6393
6424
|
{
|
|
6394
6425
|
"data-column-key": cell.column.key,
|
|
6426
|
+
"data-last-leaf-column": cell.leaf && cell.column.key === leafColumns[leafColumns.length - 1]?.key || void 0,
|
|
6395
6427
|
colSpan: cell.colSpan,
|
|
6396
6428
|
rowSpan: cell.rowSpan,
|
|
6397
6429
|
className: `sia-table__header-cell sia-table__cell--${cell.column.align ?? "left"}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass} ${cell.column.headerClassName ?? ""} ${pluginHeaderProps.className ?? ""}`.trim(),
|
|
@@ -6409,12 +6441,12 @@ function TableInner(props, ref) {
|
|
|
6409
6441
|
);
|
|
6410
6442
|
}) }, depth)) }),
|
|
6411
6443
|
/* @__PURE__ */ jsxs20("tbody", { children: [
|
|
6412
|
-
topSpacer > 0 ? /* @__PURE__ */
|
|
6444
|
+
topSpacer > 0 ? /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx21("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
|
|
6413
6445
|
renderedRows.map((row, offset) => {
|
|
6414
6446
|
const rowIndex = startIndex + offset;
|
|
6415
6447
|
const pluginClasses = sortedPlugins.map((plugin) => plugin.getRowClassName?.(row, getContext(plugin))).filter(Boolean).join(" ");
|
|
6416
6448
|
const customClass = typeof rowClassName === "function" ? rowClassName(row.record, row.sourceIndex) : rowClassName ?? "";
|
|
6417
|
-
return /* @__PURE__ */
|
|
6449
|
+
return /* @__PURE__ */ jsx21(
|
|
6418
6450
|
TableBodyRow,
|
|
6419
6451
|
{
|
|
6420
6452
|
row,
|
|
@@ -6461,12 +6493,12 @@ function TableInner(props, ref) {
|
|
|
6461
6493
|
row.key
|
|
6462
6494
|
);
|
|
6463
6495
|
}),
|
|
6464
|
-
bottomSpacer > 0 ? /* @__PURE__ */
|
|
6496
|
+
bottomSpacer > 0 ? /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx21("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
|
|
6465
6497
|
] }),
|
|
6466
|
-
summaries.length > 0 ? /* @__PURE__ */
|
|
6498
|
+
summaries.length > 0 ? /* @__PURE__ */ jsx21("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
|
|
6467
6499
|
] }) }),
|
|
6468
|
-
pipeline.rows.length === 0 ? /* @__PURE__ */
|
|
6469
|
-
/* @__PURE__ */
|
|
6500
|
+
pipeline.rows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
|
|
6501
|
+
/* @__PURE__ */ jsx21("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(
|
|
6470
6502
|
"div",
|
|
6471
6503
|
{
|
|
6472
6504
|
className: "sia-table__scrollbar-thumb",
|
|
@@ -6476,7 +6508,7 @@ function TableInner(props, ref) {
|
|
|
6476
6508
|
onPointerCancel: handleScrollbarPointerEnd
|
|
6477
6509
|
}
|
|
6478
6510
|
) }),
|
|
6479
|
-
/* @__PURE__ */
|
|
6511
|
+
/* @__PURE__ */ jsx21("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical", "aria-hidden": "true", children: /* @__PURE__ */ jsx21(
|
|
6480
6512
|
"div",
|
|
6481
6513
|
{
|
|
6482
6514
|
className: "sia-table__scrollbar-thumb",
|
|
@@ -6487,10 +6519,10 @@ function TableInner(props, ref) {
|
|
|
6487
6519
|
}
|
|
6488
6520
|
) })
|
|
6489
6521
|
] }),
|
|
6490
|
-
footers.length > 0 ? /* @__PURE__ */
|
|
6522
|
+
footers.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__footer", children: footers }) : null,
|
|
6491
6523
|
loading || internalLoading ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__loading", role: "status", children: [
|
|
6492
|
-
/* @__PURE__ */
|
|
6493
|
-
/* @__PURE__ */
|
|
6524
|
+
/* @__PURE__ */ jsx21(Icon, { name: "loader", size: 22, spin: true }),
|
|
6525
|
+
/* @__PURE__ */ jsx21("span", { children: "\u52A0\u8F7D\u4E2D" })
|
|
6494
6526
|
] }) : null,
|
|
6495
6527
|
overlays
|
|
6496
6528
|
]
|
|
@@ -6501,7 +6533,7 @@ var Table = forwardRef5(TableInner);
|
|
|
6501
6533
|
|
|
6502
6534
|
// src/components/ThemeSwitch.tsx
|
|
6503
6535
|
import { forwardRef as forwardRef6 } from "react";
|
|
6504
|
-
import { jsx as
|
|
6536
|
+
import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
6505
6537
|
var ThemeSwitch = forwardRef6(function ThemeSwitch2({
|
|
6506
6538
|
checked,
|
|
6507
6539
|
onCheckedChange,
|
|
@@ -6527,12 +6559,12 @@ var ThemeSwitch = forwardRef6(function ThemeSwitch2({
|
|
|
6527
6559
|
onClick: handleClick,
|
|
6528
6560
|
...props,
|
|
6529
6561
|
children: [
|
|
6530
|
-
/* @__PURE__ */
|
|
6531
|
-
/* @__PURE__ */
|
|
6532
|
-
/* @__PURE__ */
|
|
6533
|
-
/* @__PURE__ */
|
|
6562
|
+
/* @__PURE__ */ jsx22("span", { className: "sia-theme-switch__selection", "aria-hidden": "true" }),
|
|
6563
|
+
/* @__PURE__ */ jsx22("span", { className: `sia-theme-switch__icon${checked ? "" : " is-active"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 24 24", children: [
|
|
6564
|
+
/* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "3.5" }),
|
|
6565
|
+
/* @__PURE__ */ jsx22("path", { d: "M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4" })
|
|
6534
6566
|
] }) }),
|
|
6535
|
-
/* @__PURE__ */
|
|
6567
|
+
/* @__PURE__ */ jsx22("span", { className: `sia-theme-switch__icon${checked ? " is-active" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx22("path", { d: "M20 15.2A8 8 0 0 1 8.8 4 8.5 8.5 0 1 0 20 15.2Z" }) }) })
|
|
6536
6568
|
]
|
|
6537
6569
|
}
|
|
6538
6570
|
);
|
|
@@ -6871,8 +6903,8 @@ function applySiaTheme(mode, target = document.documentElement) {
|
|
|
6871
6903
|
}
|
|
6872
6904
|
|
|
6873
6905
|
// src/components/SelectionPanel.tsx
|
|
6874
|
-
import { useEffect as useEffect14, useId as useId7, useMemo as useMemo10, useRef as
|
|
6875
|
-
import { jsx as
|
|
6906
|
+
import { useEffect as useEffect14, useId as useId7, useMemo as useMemo10, useRef as useRef15, useState as useState18 } from "react";
|
|
6907
|
+
import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
6876
6908
|
function SelectionPanel({
|
|
6877
6909
|
options,
|
|
6878
6910
|
value,
|
|
@@ -6890,11 +6922,11 @@ function SelectionPanel({
|
|
|
6890
6922
|
maxHeight = 250,
|
|
6891
6923
|
autoFocusSearch = false
|
|
6892
6924
|
}) {
|
|
6893
|
-
const [localSearch, setLocalSearch] =
|
|
6925
|
+
const [localSearch, setLocalSearch] = useState18("");
|
|
6894
6926
|
const search = searchValue ?? localSearch;
|
|
6895
|
-
const [scrollTop, setScrollTop] =
|
|
6896
|
-
const [active, setActive] =
|
|
6897
|
-
const listRef =
|
|
6927
|
+
const [scrollTop, setScrollTop] = useState18(0);
|
|
6928
|
+
const [active, setActive] = useState18();
|
|
6929
|
+
const listRef = useRef15(null);
|
|
6898
6930
|
const id = useId7();
|
|
6899
6931
|
const selected = useMemo10(() => new Set(value), [value]);
|
|
6900
6932
|
const count = Math.max(1, Math.floor(columns));
|
|
@@ -6954,7 +6986,7 @@ function SelectionPanel({
|
|
|
6954
6986
|
onChange([...retained, ...add]);
|
|
6955
6987
|
}
|
|
6956
6988
|
return /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel", children: [
|
|
6957
|
-
showSearch && /* @__PURE__ */
|
|
6989
|
+
showSearch && /* @__PURE__ */ jsx23(
|
|
6958
6990
|
Input,
|
|
6959
6991
|
{
|
|
6960
6992
|
"aria-label": "\u641C\u7D22\u9009\u9879",
|
|
@@ -6969,16 +7001,16 @@ function SelectionPanel({
|
|
|
6969
7001
|
}
|
|
6970
7002
|
),
|
|
6971
7003
|
multiple && /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel__actions", children: [
|
|
6972
|
-
/* @__PURE__ */
|
|
6973
|
-
/* @__PURE__ */
|
|
6974
|
-
/* @__PURE__ */
|
|
7004
|
+
/* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
|
|
7005
|
+
/* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
|
|
7006
|
+
/* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
|
|
6975
7007
|
/* @__PURE__ */ jsxs22("span", { children: [
|
|
6976
7008
|
"\u5DF2\u9009 ",
|
|
6977
7009
|
value.length,
|
|
6978
7010
|
" \u9879"
|
|
6979
7011
|
] })
|
|
6980
7012
|
] }),
|
|
6981
|
-
/* @__PURE__ */
|
|
7013
|
+
/* @__PURE__ */ jsx23(
|
|
6982
7014
|
"div",
|
|
6983
7015
|
{
|
|
6984
7016
|
ref: listRef,
|
|
@@ -7008,12 +7040,12 @@ function SelectionPanel({
|
|
|
7008
7040
|
toggle(enabled[index]);
|
|
7009
7041
|
}
|
|
7010
7042
|
},
|
|
7011
|
-
children: loading ? /* @__PURE__ */
|
|
7043
|
+
children: loading ? /* @__PURE__ */ jsx23("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx23("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx23("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx23(
|
|
7012
7044
|
"div",
|
|
7013
7045
|
{
|
|
7014
7046
|
className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
|
|
7015
7047
|
style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
|
|
7016
|
-
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */
|
|
7048
|
+
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ jsx23("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx23(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsxs22(
|
|
7017
7049
|
"button",
|
|
7018
7050
|
{
|
|
7019
7051
|
type: "button",
|
|
@@ -7025,10 +7057,10 @@ function SelectionPanel({
|
|
|
7025
7057
|
className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
|
|
7026
7058
|
onClick: () => toggle(option),
|
|
7027
7059
|
children: [
|
|
7028
|
-
multiple && /* @__PURE__ */
|
|
7060
|
+
multiple && /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "sia-selection-panel__check", children: selected.has(option.value) ? "\u2713" : "" }),
|
|
7029
7061
|
/* @__PURE__ */ jsxs22("span", { className: "sia-selection-panel__text", children: [
|
|
7030
7062
|
showValue || displayField === "label" ? option.label : String(option.value),
|
|
7031
|
-
showValue && /* @__PURE__ */
|
|
7063
|
+
showValue && /* @__PURE__ */ jsx23("small", { children: String(option.value) })
|
|
7032
7064
|
] })
|
|
7033
7065
|
]
|
|
7034
7066
|
}
|
|
@@ -7042,8 +7074,8 @@ function SelectionPanel({
|
|
|
7042
7074
|
}
|
|
7043
7075
|
|
|
7044
7076
|
// src/components/InputSelect.tsx
|
|
7045
|
-
import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as
|
|
7046
|
-
import { jsx as
|
|
7077
|
+
import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef16, useState as useState19 } from "react";
|
|
7078
|
+
import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
7047
7079
|
var InputSelect = forwardRef7(function InputSelect2({
|
|
7048
7080
|
options,
|
|
7049
7081
|
value,
|
|
@@ -7053,6 +7085,7 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7053
7085
|
displayField = "label",
|
|
7054
7086
|
showValue = false,
|
|
7055
7087
|
placeholder = "\u8BF7\u9009\u62E9",
|
|
7088
|
+
placeholderMode,
|
|
7056
7089
|
size = "medium",
|
|
7057
7090
|
status,
|
|
7058
7091
|
disabled = false,
|
|
@@ -7068,22 +7101,22 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7068
7101
|
onOpenChange,
|
|
7069
7102
|
...inputProps
|
|
7070
7103
|
}, forwardedRef) {
|
|
7071
|
-
const [internal, setInternal] =
|
|
7104
|
+
const [internal, setInternal] = useState19(defaultValue);
|
|
7072
7105
|
const current = value !== void 0 ? value : internal;
|
|
7073
7106
|
const values = current == null ? [] : Array.isArray(current) ? current : [current];
|
|
7074
7107
|
const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
|
|
7075
|
-
const [draft, setDraft] =
|
|
7108
|
+
const [draft, setDraft] = useState19(text);
|
|
7076
7109
|
useEffect15(() => {
|
|
7077
7110
|
setDraft(text);
|
|
7078
7111
|
}, [text, current]);
|
|
7079
|
-
const [open, setOpen] =
|
|
7080
|
-
const [search, setSearch] =
|
|
7081
|
-
const [modalOpen, setModalOpen] =
|
|
7082
|
-
const [modalValues, setModalValues] =
|
|
7083
|
-
const [selectedOnly, setSelectedOnly] =
|
|
7084
|
-
const rootRef =
|
|
7085
|
-
const popupRef =
|
|
7086
|
-
const inputRef =
|
|
7112
|
+
const [open, setOpen] = useState19(false);
|
|
7113
|
+
const [search, setSearch] = useState19("");
|
|
7114
|
+
const [modalOpen, setModalOpen] = useState19(false);
|
|
7115
|
+
const [modalValues, setModalValues] = useState19([]);
|
|
7116
|
+
const [selectedOnly, setSelectedOnly] = useState19(false);
|
|
7117
|
+
const rootRef = useRef16(null);
|
|
7118
|
+
const popupRef = useRef16(null);
|
|
7119
|
+
const inputRef = useRef16(null);
|
|
7087
7120
|
const config = typeof enableModal === "object" ? enableModal : {};
|
|
7088
7121
|
function changeOpen(next) {
|
|
7089
7122
|
if (next && (disabled || loading)) return;
|
|
@@ -7124,14 +7157,14 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7124
7157
|
setSelectedOnly(false);
|
|
7125
7158
|
setModalOpen(true);
|
|
7126
7159
|
}
|
|
7127
|
-
return /* @__PURE__ */ jsxs23("div", { ref: rootRef, style, className: `sia-input-select ${className}`, onKeyDown: (event) => {
|
|
7160
|
+
return /* @__PURE__ */ jsxs23("div", { ref: rootRef, style, className: `sia-input-select${open || modalOpen ? " is-open" : ""} ${className}`, onKeyDown: (event) => {
|
|
7128
7161
|
if (event.key === "Escape" && open) {
|
|
7129
7162
|
event.stopPropagation();
|
|
7130
7163
|
changeOpen(false);
|
|
7131
7164
|
inputRef.current?.focus();
|
|
7132
7165
|
}
|
|
7133
7166
|
}, children: [
|
|
7134
|
-
/* @__PURE__ */
|
|
7167
|
+
/* @__PURE__ */ jsx24(
|
|
7135
7168
|
Input,
|
|
7136
7169
|
{
|
|
7137
7170
|
...inputProps,
|
|
@@ -7149,6 +7182,7 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7149
7182
|
disabled,
|
|
7150
7183
|
readOnly: displayField === "label" || loading,
|
|
7151
7184
|
placeholder,
|
|
7185
|
+
placeholderMode,
|
|
7152
7186
|
value: draft,
|
|
7153
7187
|
maxLength: inputMaxLength && inputMaxLength > 0 ? inputMaxLength : void 0,
|
|
7154
7188
|
showCount: !!inputMaxLength && inputMaxLength > 0,
|
|
@@ -7168,25 +7202,25 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7168
7202
|
changeOpen(true);
|
|
7169
7203
|
},
|
|
7170
7204
|
suffix: /* @__PURE__ */ jsxs23("span", { className: "sia-input-select__suffix", children: [
|
|
7171
|
-
allowClear && draft && !disabled && /* @__PURE__ */
|
|
7205
|
+
allowClear && draft && !disabled && /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: loading, "aria-label": "\u6E05\u9664\u8F93\u5165\u9009\u62E9", onClick: (event) => {
|
|
7172
7206
|
event.stopPropagation();
|
|
7173
7207
|
setDraft("");
|
|
7174
7208
|
emit(multiple ? [] : void 0);
|
|
7175
7209
|
inputRef.current?.focus();
|
|
7176
7210
|
}, children: "\xD7" }),
|
|
7177
7211
|
suffix,
|
|
7178
|
-
enableModal && /* @__PURE__ */
|
|
7212
|
+
enableModal && /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
|
|
7179
7213
|
event.stopPropagation();
|
|
7180
7214
|
openModal();
|
|
7181
7215
|
}, children: "\u2026" }),
|
|
7182
|
-
/* @__PURE__ */
|
|
7216
|
+
/* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
|
|
7183
7217
|
event.stopPropagation();
|
|
7184
7218
|
changeOpen(!open);
|
|
7185
|
-
}, children: /* @__PURE__ */
|
|
7219
|
+
}, children: /* @__PURE__ */ jsx24(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
|
|
7186
7220
|
] })
|
|
7187
7221
|
}
|
|
7188
7222
|
),
|
|
7189
|
-
/* @__PURE__ */
|
|
7223
|
+
/* @__PURE__ */ jsx24(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx24(
|
|
7190
7224
|
SelectionPanel,
|
|
7191
7225
|
{
|
|
7192
7226
|
options,
|
|
@@ -7215,14 +7249,14 @@ var InputSelect = forwardRef7(function InputSelect2({
|
|
|
7215
7249
|
},
|
|
7216
7250
|
children: [
|
|
7217
7251
|
/* @__PURE__ */ jsxs23("div", { className: "sia-selection-panel__actions", role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
|
|
7218
|
-
/* @__PURE__ */
|
|
7252
|
+
/* @__PURE__ */ jsx24(Button, { role: "tab", "aria-selected": !selectedOnly, variant: !selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
|
|
7219
7253
|
/* @__PURE__ */ jsxs23(Button, { role: "tab", "aria-selected": selectedOnly, variant: selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(true), children: [
|
|
7220
7254
|
"\u5DF2\u9009\u9879(",
|
|
7221
7255
|
modalValues.length,
|
|
7222
7256
|
")"
|
|
7223
7257
|
] })
|
|
7224
7258
|
] }),
|
|
7225
|
-
modalOpen && /* @__PURE__ */
|
|
7259
|
+
modalOpen && /* @__PURE__ */ jsx24(
|
|
7226
7260
|
SelectionPanel,
|
|
7227
7261
|
{
|
|
7228
7262
|
options,
|