@sia.soul/sia-react-ui 0.1.11 → 0.1.13
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-EyinLic7.d.ts → core-VmiEI1Jp.d.ts} +1 -1
- package/dist/{core-D3ZPxJ7a.d.cts → core-y0w5PBO2.d.cts} +1 -1
- package/dist/core.css +16 -0
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/index.cjs +147 -58
- package/dist/index.css +16 -0
- package/dist/index.d.cts +8 -3
- package/dist/index.d.ts +8 -3
- package/dist/index.js +147 -58
- package/package.json +1 -1
|
@@ -1076,4 +1076,4 @@ declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & re
|
|
|
1076
1076
|
BackTop: typeof FloatButtonBackTop;
|
|
1077
1077
|
};
|
|
1078
1078
|
|
|
1079
|
-
export { Menu as $, type DropdownProps as A,
|
|
1079
|
+
export { Menu as $, type DropdownProps as A, type ButtonProps as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, Badge as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeProps as c, type BadgeRibbonProps as d, type BadgeStatus as e, Breadcrumb as f, type BreadcrumbItem as g, type BreadcrumbProps as h, Button as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };
|
|
@@ -1076,4 +1076,4 @@ declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & re
|
|
|
1076
1076
|
BackTop: typeof FloatButtonBackTop;
|
|
1077
1077
|
};
|
|
1078
1078
|
|
|
1079
|
-
export { Menu as $, type DropdownProps as A,
|
|
1079
|
+
export { Menu as $, type DropdownProps as A, type ButtonProps as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, Badge as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeProps as c, type BadgeRibbonProps as d, type BadgeStatus as e, Breadcrumb as f, type BreadcrumbItem as g, type BreadcrumbProps as h, Button as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };
|
package/dist/core.css
CHANGED
|
@@ -4443,6 +4443,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
|
|
|
4443
4443
|
transition: none;
|
|
4444
4444
|
}
|
|
4445
4445
|
}
|
|
4446
|
+
.sia-table-settings__item.is-dragging {
|
|
4447
|
+
border-color: var(--sia-color-primary);
|
|
4448
|
+
background: var(--sia-color-primary-light);
|
|
4449
|
+
opacity: .65;
|
|
4450
|
+
outline: 1px dashed var(--sia-color-primary);
|
|
4451
|
+
}
|
|
4452
|
+
.sia-table .sia-table__summary-cell--label {
|
|
4453
|
+
padding-inline: 4px;
|
|
4454
|
+
}
|
|
4455
|
+
.sia-table__summary-label {
|
|
4456
|
+
display: block;
|
|
4457
|
+
min-width: 0;
|
|
4458
|
+
overflow: hidden;
|
|
4459
|
+
white-space: nowrap;
|
|
4460
|
+
text-overflow: ellipsis;
|
|
4461
|
+
}
|
|
4446
4462
|
|
|
4447
4463
|
/* src/components-extra.css */
|
|
4448
4464
|
.sia-flex {
|
package/dist/core.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, B as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-y0w5PBO2.cjs';
|
|
2
2
|
export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-CVvF4mcy.cjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './shared-DAYZvZVu.cjs';
|
package/dist/core.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, B as ButtonProps, j as ButtonSize, k as ButtonVariant, m as Card, n as CardAccent, o as CardProps, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, Q as Icon, R as IconName, S as IconProps, T as IconVariant, Z as Input, _ as InputProps, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, a as OverlayApiHandle, al as Progress, am as ProgressProps, an as ProgressStatus, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, aA as TabItem, aB as Tabs, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-VmiEI1Jp.js';
|
|
2
2
|
export { S as Select, c as SelectOption, d as SelectProps, e as SelectValue } from './Select-Ce2Irbpt.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import './shared-DAYZvZVu.js';
|
package/dist/index.cjs
CHANGED
|
@@ -11543,87 +11543,163 @@ function applyColumnSettingsToTree(columns, items) {
|
|
|
11543
11543
|
}).sort((left, right) => left.order - right.order);
|
|
11544
11544
|
return walk(columns).map((entry) => entry.column);
|
|
11545
11545
|
}
|
|
11546
|
-
function
|
|
11546
|
+
function orderColumnSettings(items) {
|
|
11547
|
+
const rank = (item) => item.fixed === "left" ? 0 : item.fixed === "right" ? 2 : 1;
|
|
11548
|
+
return [...items].sort((a, b) => rank(a) - rank(b)).map((item, order) => ({ ...item, order }));
|
|
11549
|
+
}
|
|
11550
|
+
function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry, onClose, onApply }) {
|
|
11547
11551
|
const [draft, setDraft] = (0, import_react44.useState)(items);
|
|
11548
|
-
const
|
|
11552
|
+
const drag = (0, import_react44.useRef)(null);
|
|
11553
|
+
const [draggingKey, setDraggingKey] = (0, import_react44.useState)(null);
|
|
11549
11554
|
(0, import_react44.useEffect)(() => {
|
|
11550
|
-
if (open) setDraft(items);
|
|
11555
|
+
if (open) setDraft(orderColumnSettings(items));
|
|
11556
|
+
drag.current = null;
|
|
11557
|
+
setDraggingKey(null);
|
|
11551
11558
|
}, [items, open]);
|
|
11552
11559
|
const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
|
|
11553
11560
|
const visibleCount = draft.filter((item) => item.visible).length;
|
|
11554
|
-
function move(index, offset) {
|
|
11555
|
-
const target = index + offset;
|
|
11556
|
-
if (target < 0 || target >= draft.length) return;
|
|
11557
|
-
const next = [...draft];
|
|
11558
|
-
const [item] = next.splice(index, 1);
|
|
11559
|
-
next.splice(target, 0, item);
|
|
11560
|
-
setDraft(next.map((entry, order) => ({ ...entry, order })));
|
|
11561
|
-
}
|
|
11562
11561
|
function setFixed(key, fixed) {
|
|
11563
|
-
setDraft((previous) =>
|
|
11562
|
+
setDraft((previous) => {
|
|
11563
|
+
const item = previous.find((entry) => entry.key === key);
|
|
11564
|
+
if (!item) return previous;
|
|
11565
|
+
const next = previous.filter((entry) => entry.key !== key);
|
|
11566
|
+
const updated = { ...item, fixed };
|
|
11567
|
+
const target = fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : fixed === "right" ? next.findIndex((entry) => entry.fixed === "right") : item.fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : next.findIndex((entry) => entry.fixed === "right");
|
|
11568
|
+
next.splice(target < 0 ? next.length : target, 0, updated);
|
|
11569
|
+
return orderColumnSettings(next);
|
|
11570
|
+
});
|
|
11571
|
+
}
|
|
11572
|
+
function previewMove(key, clientY, element) {
|
|
11573
|
+
const active = drag.current;
|
|
11574
|
+
if (!active || active.key === key || loading || loadError) return;
|
|
11575
|
+
const rect = element.getBoundingClientRect();
|
|
11576
|
+
setDraft((previous) => {
|
|
11577
|
+
const from = previous.findIndex((entry) => entry.key === active.key);
|
|
11578
|
+
const to = previous.findIndex((entry) => entry.key === key);
|
|
11579
|
+
if (from < 0 || to < 0 || previous[from].fixed !== previous[to].fixed) return previous;
|
|
11580
|
+
if (from < to ? clientY < rect.top + rect.height / 2 : clientY > rect.top + rect.height / 2) return previous;
|
|
11581
|
+
const next = [...previous];
|
|
11582
|
+
const [moved] = next.splice(from, 1);
|
|
11583
|
+
next.splice(to, 0, moved);
|
|
11584
|
+
return orderColumnSettings(next);
|
|
11585
|
+
});
|
|
11564
11586
|
}
|
|
11565
11587
|
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
|
|
11566
11588
|
if (!next) onClose();
|
|
11567
11589
|
}, footer: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
|
|
11568
11590
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
|
|
11569
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
|
|
11591
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "primary", disabled: loading || loadError, onClick: () => onApply(draft), children: "\u5E94\u7528" })
|
|
11570
11592
|
] }), children: [
|
|
11571
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.
|
|
11572
|
-
|
|
11573
|
-
|
|
11574
|
-
|
|
11575
|
-
|
|
11576
|
-
|
|
11577
|
-
|
|
11578
|
-
"\
|
|
11579
|
-
|
|
11580
|
-
|
|
11581
|
-
|
|
11582
|
-
|
|
11583
|
-
|
|
11584
|
-
|
|
11585
|
-
|
|
11586
|
-
|
|
11587
|
-
|
|
11588
|
-
|
|
11589
|
-
|
|
11590
|
-
|
|
11591
|
-
|
|
11592
|
-
|
|
11593
|
-
|
|
11594
|
-
|
|
11595
|
-
|
|
11596
|
-
|
|
11597
|
-
|
|
11598
|
-
|
|
11599
|
-
|
|
11600
|
-
|
|
11593
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { role: "status", children: "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E\u2026" }) : null,
|
|
11594
|
+
loadError ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("p", { role: "alert", children: [
|
|
11595
|
+
"\u8BFB\u53D6\u5217\u914D\u7F6E\u5931\u8D25\u3002",
|
|
11596
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
|
|
11597
|
+
] }) : null,
|
|
11598
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("fieldset", { disabled: loading || loadError, style: { border: 0, padding: 0, margin: 0, minWidth: 0 }, "aria-busy": loading, children: [
|
|
11599
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "sia-table-settings__all", children: [
|
|
11600
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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 }))) }),
|
|
11601
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { children: [
|
|
11602
|
+
"\u5168\u9009\uFF08",
|
|
11603
|
+
visibleCount,
|
|
11604
|
+
"/",
|
|
11605
|
+
draft.length,
|
|
11606
|
+
"\uFF09"
|
|
11607
|
+
] })
|
|
11608
|
+
] }),
|
|
11609
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table-settings__list", onDragOver: (event) => {
|
|
11610
|
+
if (drag.current) event.preventDefault();
|
|
11611
|
+
}, onDrop: (event) => {
|
|
11612
|
+
event.preventDefault();
|
|
11613
|
+
if (drag.current) drag.current.dropped = true;
|
|
11614
|
+
}, children: draft.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
11615
|
+
"div",
|
|
11616
|
+
{
|
|
11617
|
+
"data-column-key": item.key,
|
|
11618
|
+
className: `sia-table-settings__item${draggingKey === item.key ? " is-dragging" : ""}`,
|
|
11619
|
+
draggable: !loading && !loadError,
|
|
11620
|
+
onDragStart: (event) => {
|
|
11621
|
+
drag.current = { key: item.key, original: draft, dropped: false };
|
|
11622
|
+
event.dataTransfer.effectAllowed = "move";
|
|
11623
|
+
event.dataTransfer.setData("text/plain", item.key);
|
|
11624
|
+
setDraggingKey(item.key);
|
|
11625
|
+
},
|
|
11626
|
+
onDragOver: (event) => {
|
|
11627
|
+
event.preventDefault();
|
|
11628
|
+
event.dataTransfer.dropEffect = "move";
|
|
11629
|
+
previewMove(item.key, event.clientY, event.currentTarget);
|
|
11630
|
+
},
|
|
11631
|
+
onDragEnd: () => {
|
|
11632
|
+
if (drag.current && !drag.current.dropped) setDraft(drag.current.original);
|
|
11633
|
+
drag.current = null;
|
|
11634
|
+
setDraggingKey(null);
|
|
11635
|
+
},
|
|
11636
|
+
children: [
|
|
11637
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "menu", size: 15 }),
|
|
11638
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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)) }),
|
|
11639
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
|
|
11640
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table-settings__actions", children: [
|
|
11641
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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" }),
|
|
11642
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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" })
|
|
11643
|
+
] })
|
|
11644
|
+
]
|
|
11645
|
+
},
|
|
11646
|
+
item.key
|
|
11647
|
+
)) })
|
|
11648
|
+
] })
|
|
11601
11649
|
] });
|
|
11602
11650
|
}
|
|
11651
|
+
var columnSettingLoadTokens = /* @__PURE__ */ new WeakMap();
|
|
11603
11652
|
function createColumnSettingPlugin(options = {}) {
|
|
11604
11653
|
const baseItems = (context) => createColumnSettingItems(context.baseColumns, options.defaultVisibleKeys);
|
|
11605
11654
|
const currentItems = (context) => context.state.items?.length ? context.state.items : baseItems(context);
|
|
11606
11655
|
const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
|
|
11607
11656
|
function apply(items, context, persist = true) {
|
|
11608
|
-
const normalized = [...items].sort((a, b) => a.order - b.order)
|
|
11657
|
+
const normalized = orderColumnSettings([...items].sort((a, b) => a.order - b.order));
|
|
11609
11658
|
context.setState((state) => ({ ...state, items: normalized, open: false }));
|
|
11610
11659
|
const columnMap = new Map(flattenTableColumns(context.baseColumns).map((column) => [column.key, column]));
|
|
11611
11660
|
options.onVisibleChange?.(normalized.filter((item) => item.visible).map((item) => columnMap.get(item.key)).filter(Boolean));
|
|
11612
11661
|
options.onOrderChange?.(normalized.map((item) => columnMap.get(item.key)).filter(Boolean));
|
|
11613
11662
|
if (persist) void save({ columns: normalized, pageSize: context.state.pageSize, version: 1 });
|
|
11614
11663
|
}
|
|
11664
|
+
function loadSettings(context, open = false) {
|
|
11665
|
+
const fallback = baseItems(context);
|
|
11666
|
+
const token = /* @__PURE__ */ Symbol("column-settings-load");
|
|
11667
|
+
columnSettingLoadTokens.set(context.setPluginState, token);
|
|
11668
|
+
let cancelled = false;
|
|
11669
|
+
const hasAdapter = Boolean(options.adapter && options.scope);
|
|
11670
|
+
context.setState((state) => ({
|
|
11671
|
+
...state,
|
|
11672
|
+
open: open || state.open,
|
|
11673
|
+
items: state.items.length ? state.items : fallback,
|
|
11674
|
+
loading: hasAdapter,
|
|
11675
|
+
loaded: !hasAdapter,
|
|
11676
|
+
loadError: false,
|
|
11677
|
+
loadToken: token
|
|
11678
|
+
}));
|
|
11679
|
+
if (hasAdapter) void Promise.resolve().then(() => options.adapter.load(options.scope)).then((snapshot) => {
|
|
11680
|
+
if (cancelled || columnSettingLoadTokens.get(context.setPluginState) !== token) return;
|
|
11681
|
+
if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
|
|
11682
|
+
context.setState((state) => state.loadToken !== token ? state : {
|
|
11683
|
+
...state,
|
|
11684
|
+
items: snapshot?.columns?.length ? snapshot.columns : fallback,
|
|
11685
|
+
pageSize: snapshot?.pageSize,
|
|
11686
|
+
loaded: true,
|
|
11687
|
+
loading: false,
|
|
11688
|
+
loadError: false
|
|
11689
|
+
});
|
|
11690
|
+
}).catch(() => {
|
|
11691
|
+
if (!cancelled) context.setState((state) => state.loadToken !== token ? state : { ...state, loading: false, loaded: true, loadError: true });
|
|
11692
|
+
});
|
|
11693
|
+
return () => {
|
|
11694
|
+
cancelled = true;
|
|
11695
|
+
};
|
|
11696
|
+
}
|
|
11615
11697
|
return {
|
|
11616
11698
|
id: "columnSetting",
|
|
11617
11699
|
order: 10,
|
|
11618
11700
|
initialState: { open: false, items: [], loaded: false },
|
|
11619
11701
|
onMount(context) {
|
|
11620
|
-
|
|
11621
|
-
context.setState((state) => ({ ...state, items: state.items.length ? state.items : fallback, loaded: !options.adapter }));
|
|
11622
|
-
if (options.adapter && options.scope) void options.adapter.load(options.scope).then((snapshot) => {
|
|
11623
|
-
const merged = snapshot?.columns?.length ? snapshot.columns : fallback;
|
|
11624
|
-
context.setState((state) => ({ ...state, items: merged, pageSize: snapshot?.pageSize, loaded: true }));
|
|
11625
|
-
if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
|
|
11626
|
-
}).catch(() => context.setState((state) => ({ ...state, items: fallback, loaded: true })));
|
|
11702
|
+
return loadSettings(context);
|
|
11627
11703
|
},
|
|
11628
11704
|
transformColumns(columns, context) {
|
|
11629
11705
|
return applyColumnSettingsToTree(columns, currentItems(context));
|
|
@@ -11659,14 +11735,26 @@ function createColumnSettingPlugin(options = {}) {
|
|
|
11659
11735
|
disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
|
|
11660
11736
|
}))
|
|
11661
11737
|
];
|
|
11662
|
-
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dropdown, { trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
|
|
11738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dropdown, { disabled: options.buttonProps?.disabled || options.buttonProps?.loading, trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
|
|
11663
11739
|
if (key === "builtin:export") void exportApi().download();
|
|
11664
|
-
else if (key === "builtin:columns") context
|
|
11740
|
+
else if (key === "builtin:columns") loadSettings(context, true);
|
|
11665
11741
|
else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
|
|
11666
|
-
} }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11742
|
+
} }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
11743
|
+
Button,
|
|
11744
|
+
{
|
|
11745
|
+
size: "small",
|
|
11746
|
+
variant: "text",
|
|
11747
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "settings", size: 16 }),
|
|
11748
|
+
"aria-label": "\u8868\u683C\u8BBE\u7F6E",
|
|
11749
|
+
...options.buttonProps,
|
|
11750
|
+
className: `sia-table__settings-button${options.buttonProps?.children == null ? " sia-table__toolbar-icon" : ""} ${options.buttonProps?.className ?? ""}`.trim()
|
|
11751
|
+
}
|
|
11752
|
+
) });
|
|
11667
11753
|
},
|
|
11668
|
-
renderOverlay: (context) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
|
|
11669
|
-
getApi: (context) => ({ open: () =>
|
|
11754
|
+
renderOverlay: (context) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ColumnSettingPanel, { open: context.state.open, loading: context.state.loading, loadError: context.state.loadError, onRetry: () => loadSettings(context, true), items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
|
|
11755
|
+
getApi: (context) => ({ open: () => {
|
|
11756
|
+
loadSettings(context, true);
|
|
11757
|
+
}, close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
|
|
11670
11758
|
};
|
|
11671
11759
|
}
|
|
11672
11760
|
function createLocalStorageTableSettingsAdapter(prefix = "sia-table") {
|
|
@@ -12364,11 +12452,12 @@ function TableInner(props, ref) {
|
|
|
12364
12452
|
let labelRendered = false;
|
|
12365
12453
|
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
|
|
12366
12454
|
const value = summary.values[column.key];
|
|
12367
|
-
const
|
|
12455
|
+
const isLabel = value === void 0 && !labelRendered && summary.label !== void 0;
|
|
12456
|
+
const content = value !== void 0 ? value : isLabel ? (labelRendered = true, summary.label) : null;
|
|
12368
12457
|
const fixed = normalizeFixed(column.fixed);
|
|
12369
12458
|
const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
|
|
12370
12459
|
const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
|
|
12371
|
-
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
|
|
12460
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${isLabel ? " sia-table__summary-cell--label" : ""}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: isLabel ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sia-table__summary-label", title: typeof content === "string" ? content : void 0, children: content }) : content }, column.key);
|
|
12372
12461
|
}) }, summary.key);
|
|
12373
12462
|
}
|
|
12374
12463
|
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
package/dist/index.css
CHANGED
|
@@ -4443,6 +4443,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
|
|
|
4443
4443
|
transition: none;
|
|
4444
4444
|
}
|
|
4445
4445
|
}
|
|
4446
|
+
.sia-table-settings__item.is-dragging {
|
|
4447
|
+
border-color: var(--sia-color-primary);
|
|
4448
|
+
background: var(--sia-color-primary-light);
|
|
4449
|
+
opacity: .65;
|
|
4450
|
+
outline: 1px dashed var(--sia-color-primary);
|
|
4451
|
+
}
|
|
4452
|
+
.sia-table .sia-table__summary-cell--label {
|
|
4453
|
+
padding-inline: 4px;
|
|
4454
|
+
}
|
|
4455
|
+
.sia-table__summary-label {
|
|
4456
|
+
display: block;
|
|
4457
|
+
min-width: 0;
|
|
4458
|
+
overflow: hidden;
|
|
4459
|
+
white-space: nowrap;
|
|
4460
|
+
text-overflow: ellipsis;
|
|
4461
|
+
}
|
|
4446
4462
|
|
|
4447
4463
|
/* src/components-extra.css */
|
|
4448
4464
|
.sia-flex {
|
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes } from 'react';
|
|
3
|
-
import { O as OverlayContainer, a as OverlayApiHandle } from './core-
|
|
4
|
-
export {
|
|
3
|
+
import { O as OverlayContainer, a as OverlayApiHandle, B as ButtonProps } from './core-y0w5PBO2.cjs';
|
|
4
|
+
export { b as Badge, c as BadgeProps, d as BadgeRibbonProps, e as BadgeStatus, f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, j as ButtonSize, k as ButtonVariant, C as Calendar, l as CalendarProps, m as Card, n as CardAccent, o as CardProps, p as Carousel, q as CarouselProps, r as CarouselRef, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, D as Dropdown, w as DropdownButtonProps, x as DropdownMenuProps, y as DropdownOpenSource, z as DropdownPlacement, A as DropdownProps, E as DropdownTrigger, F as FILLED_ICON_NAMES, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, M as FloatingPlacement, N as FloatingTrigger, P as ICON_NAMES, Q as Icon, R as IconName, S as IconProps, T as IconVariant, U as Image, V as ImagePreview, W as ImagePreviewConfig, X as ImagePreviewProps, Y as ImageProps, Z as Input, _ as InputProps, $ as Menu, a0 as MenuClickInfo, a1 as MenuItem, a2 as MenuMode, a3 as MenuProps, a4 as MenuTheme, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, ae as NotificationConfig, af as NotificationPlacement, ag as NotificationType, ah as Popconfirm, ai as PopconfirmProps, aj as Popover, ak as PopoverProps, al as Progress, am as ProgressProps, an as ProgressStatus, ao as Rate, ap as RateProps, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, au as Spin, av as SpinProps, aw as StepItem, ax as StepStatus, ay as Steps, az as StepsProps, aA as TabItem, aB as Tabs, aC as TabsContextMenuClickInfo, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aL as Timeline, aM as TimelineItem, aN as TimelineProps, aO as Tooltip, aP as TooltipProps, aQ as Tour, aR as TourProps, aS as TourStep, aT as Tree, aU as TreeDropPosition, aV as TreeKey, aW as TreeNode, aX as TreeProps, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, b8 as Watermark, b9 as WatermarkFont, ba as WatermarkProps, bb as message, bc as notification } from './core-y0w5PBO2.cjs';
|
|
5
5
|
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.cjs';
|
|
6
6
|
export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-l-xgB959.cjs';
|
|
7
7
|
export { RichTextContent, RichTextContentFormat, RichTextContentProps, RichTextEditor, RichTextEditorProps, RichTextImagePasteHandler, RichTextToolbar } from './rich-text-editor.cjs';
|
|
@@ -1189,6 +1189,8 @@ interface TableResizeApi {
|
|
|
1189
1189
|
}
|
|
1190
1190
|
declare function createResizePlugin<T extends Record<string, unknown>>(options?: TableResizePluginOptions): TablePlugin<T, ResizeState, TableResizeApi>;
|
|
1191
1191
|
interface TableColumnSettingPluginOptions<T> {
|
|
1192
|
+
/** 设置按钮的完整 Button 属性；className 合并，disabled/loading 同时禁用菜单触发。 */
|
|
1193
|
+
buttonProps?: ButtonProps;
|
|
1192
1194
|
/** 追加到设置下拉菜单中的业务操作。 */
|
|
1193
1195
|
menuItems?: readonly TableToolbarItem<T>[];
|
|
1194
1196
|
/** 是否显示设置菜单中的导出操作，默认 true。 */
|
|
@@ -1207,6 +1209,9 @@ interface ColumnSettingState {
|
|
|
1207
1209
|
open: boolean;
|
|
1208
1210
|
items: readonly TableColumnSettingItem[];
|
|
1209
1211
|
loaded: boolean;
|
|
1212
|
+
loading?: boolean;
|
|
1213
|
+
loadError?: boolean;
|
|
1214
|
+
loadToken?: symbol;
|
|
1210
1215
|
pageSize?: number;
|
|
1211
1216
|
}
|
|
1212
1217
|
interface TableColumnSettingApi {
|
|
@@ -1350,4 +1355,4 @@ interface InputSelectProps {
|
|
|
1350
1355
|
}
|
|
1351
1356
|
declare const InputSelect: react.ForwardRefExoticComponent<InputSelectProps & react.RefAttributes<HTMLInputElement>>;
|
|
1352
1357
|
|
|
1353
|
-
export { Alert, type AlertProps, type AlertStatus, type AnyTablePlugin, Cascader, type CascaderFieldNames, type CascaderOption, type CascaderProps, type CascaderValue, Checkbox, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps, type CheckboxValue, Col, type ColProps, type ColSize, ColorPicker, type ColorPickerMode, type ColorPickerPreset, type ColorPickerProps, ControlSize, ControlStatus, DEFAULT_PAGE_SIZE_OPTIONS, Divider, type DividerProps, Drawer, type DrawerOpenConfig, type DrawerPlacement, type DrawerProps, type DrawerPush, type DrawerPushConfig, Editor, type EditorCommand, type EditorCompletionContext, type EditorCompletionItem, type EditorCompletionItemKind, type EditorCompletionProvider, type EditorContextMenuItem, type EditorHandle, type EditorKeyDownEvent, type EditorLanguage, type EditorMarker, type EditorProps, type EditorRange, type EditorSelectionChange, type EditorTheme, type FlatTreeNode, type FlatTreeOptions, Flex, type FlexProps, FloatingScrollbarProvider, type FloatingScrollbarProviderProps, Form, type FormErrorField, type FormInstance, type FormItemProps, type FormListField, type FormListOperation, type FormListProps, type FormProps, type FormRule, type FormValues, type GridBreakpoint, InputNumber, type InputNumberProps, InputPlaceholderMode, InputSelect, type InputSelectProps, type LayoutGap, Markdown, type MarkdownProps, type NamePath, OverlayApiHandle, Pagination, type PaginationProps, Radio, type RadioGroupProps, type RadioOption, type RadioProps, type RadioValue, Row, type RowProps, SIA_THEME, type SelectionOption, SelectionPanel, type SelectionPanelProps, type SelectionValue, type SiaThemeMode, Slider, type SliderMark, type SliderProps, type SliderValue, Space, type SpaceCompactProps, type SpaceProps, Splitter, type SplitterPanelProps, type SplitterProps, Switch, type SwitchProps, type SwitchVariant, Table, type TableAlign, type TableCellAddress, type TableCellRange, type TableCellRenderInfo, type TableCellSelectionApi, type TableCellSelectionPluginOptions, type TableColumn, type TableColumnSettingApi, type TableColumnSettingItem, type TableColumnSettingPluginOptions, type TableColumnTransformPluginOptions, type TableEditableApi, type TableEditableCellConfig, type TableEditableCellType, type TableEditablePluginOptions, type TableExportApi, type TableExportPluginOptions, type TableExportScope, type TableFilterApi, type TableFilterPluginOptions, type TableFilterValues, type TableFixed, type TableHighlightPluginOptions, type TableHighlightValue, type TableIndexPluginOptions, type TableKey, type TableMergeStickyConfig, type TablePageParams, type TablePaginationApi, type TablePaginationPluginOptions, type TablePlugin, type TablePluginCellProps, type TablePluginContext, type TablePluginEvent, type TableProps, type TableRef, type TableResizeApi, type TableResizePluginOptions, type TableRow, type TableRowSpanPluginOptions, type TableSelectedCell, type TableSelectionApi, type TableSelectionMode, type TableSelectionPluginOptions, type TableSettingsAdapter, type TableSettingsSnapshot, type TableSize, type TableSortApi, type TableSortInfo, type TableSortPluginOptions, type TableSummaryPluginOptions, type TableSummaryRow, type TableToolbarItem, type TableToolbarPluginOptions, type TableTreeApi, type TableTreePluginOptions, TextArea, type TextAreaProps, ThemeSwitch, type ThemeSwitchProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, ToolPanel, type ToolPanelItem, type ToolPanelPlacement, type ToolPanelProps, TreeSelect, type TreeSelectNode, type TreeSelectProps, type TreeSelectValue, Treemap, type TreemapNode, type TreemapNodeClickInfo, type TreemapNodeKind, type TreemapProps, type WindowAction, type WindowActionHandler, type WindowControlAction, type WindowControlLabels, WindowControls, type WindowControlsProps, WindowFrame, type WindowFrameProps, WindowTitleBar, type WindowTitleBarActionsAlign, type WindowTitleBarProps, applySiaTheme, buildFlatTree, createCellSelectionPlugin, createColumnSettingPlugin, createColumnTransformPlugin, createEditablePlugin, createExportPlugin, createFilterPlugin, createHighlightPlugin, createIndexPlugin, createLocalStorageTableSettingsAdapter, createPaginationPlugin, createResizePlugin, createRowSpanPlugin, createSelectionPlugin, createSortPlugin, createSummaryPlugin, createToolbarPlugin, createTreePlugin, useForm };
|
|
1358
|
+
export { Alert, type AlertProps, type AlertStatus, type AnyTablePlugin, ButtonProps, Cascader, type CascaderFieldNames, type CascaderOption, type CascaderProps, type CascaderValue, Checkbox, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps, type CheckboxValue, Col, type ColProps, type ColSize, ColorPicker, type ColorPickerMode, type ColorPickerPreset, type ColorPickerProps, ControlSize, ControlStatus, DEFAULT_PAGE_SIZE_OPTIONS, Divider, type DividerProps, Drawer, type DrawerOpenConfig, type DrawerPlacement, type DrawerProps, type DrawerPush, type DrawerPushConfig, Editor, type EditorCommand, type EditorCompletionContext, type EditorCompletionItem, type EditorCompletionItemKind, type EditorCompletionProvider, type EditorContextMenuItem, type EditorHandle, type EditorKeyDownEvent, type EditorLanguage, type EditorMarker, type EditorProps, type EditorRange, type EditorSelectionChange, type EditorTheme, type FlatTreeNode, type FlatTreeOptions, Flex, type FlexProps, FloatingScrollbarProvider, type FloatingScrollbarProviderProps, Form, type FormErrorField, type FormInstance, type FormItemProps, type FormListField, type FormListOperation, type FormListProps, type FormProps, type FormRule, type FormValues, type GridBreakpoint, InputNumber, type InputNumberProps, InputPlaceholderMode, InputSelect, type InputSelectProps, type LayoutGap, Markdown, type MarkdownProps, type NamePath, OverlayApiHandle, Pagination, type PaginationProps, Radio, type RadioGroupProps, type RadioOption, type RadioProps, type RadioValue, Row, type RowProps, SIA_THEME, type SelectionOption, SelectionPanel, type SelectionPanelProps, type SelectionValue, type SiaThemeMode, Slider, type SliderMark, type SliderProps, type SliderValue, Space, type SpaceCompactProps, type SpaceProps, Splitter, type SplitterPanelProps, type SplitterProps, Switch, type SwitchProps, type SwitchVariant, Table, type TableAlign, type TableCellAddress, type TableCellRange, type TableCellRenderInfo, type TableCellSelectionApi, type TableCellSelectionPluginOptions, type TableColumn, type TableColumnSettingApi, type TableColumnSettingItem, type TableColumnSettingPluginOptions, type TableColumnTransformPluginOptions, type TableEditableApi, type TableEditableCellConfig, type TableEditableCellType, type TableEditablePluginOptions, type TableExportApi, type TableExportPluginOptions, type TableExportScope, type TableFilterApi, type TableFilterPluginOptions, type TableFilterValues, type TableFixed, type TableHighlightPluginOptions, type TableHighlightValue, type TableIndexPluginOptions, type TableKey, type TableMergeStickyConfig, type TablePageParams, type TablePaginationApi, type TablePaginationPluginOptions, type TablePlugin, type TablePluginCellProps, type TablePluginContext, type TablePluginEvent, type TableProps, type TableRef, type TableResizeApi, type TableResizePluginOptions, type TableRow, type TableRowSpanPluginOptions, type TableSelectedCell, type TableSelectionApi, type TableSelectionMode, type TableSelectionPluginOptions, type TableSettingsAdapter, type TableSettingsSnapshot, type TableSize, type TableSortApi, type TableSortInfo, type TableSortPluginOptions, type TableSummaryPluginOptions, type TableSummaryRow, type TableToolbarItem, type TableToolbarPluginOptions, type TableTreeApi, type TableTreePluginOptions, TextArea, type TextAreaProps, ThemeSwitch, type ThemeSwitchProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, ToolPanel, type ToolPanelItem, type ToolPanelPlacement, type ToolPanelProps, TreeSelect, type TreeSelectNode, type TreeSelectProps, type TreeSelectValue, Treemap, type TreemapNode, type TreemapNodeClickInfo, type TreemapNodeKind, type TreemapProps, type WindowAction, type WindowActionHandler, type WindowControlAction, type WindowControlLabels, WindowControls, type WindowControlsProps, WindowFrame, type WindowFrameProps, WindowTitleBar, type WindowTitleBarActionsAlign, type WindowTitleBarProps, applySiaTheme, buildFlatTree, createCellSelectionPlugin, createColumnSettingPlugin, createColumnTransformPlugin, createEditablePlugin, createExportPlugin, createFilterPlugin, createHighlightPlugin, createIndexPlugin, createLocalStorageTableSettingsAdapter, createPaginationPlugin, createResizePlugin, createRowSpanPlugin, createSelectionPlugin, createSortPlugin, createSummaryPlugin, createToolbarPlugin, createTreePlugin, useForm };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes } from 'react';
|
|
3
|
-
import { O as OverlayContainer, a as OverlayApiHandle } from './core-
|
|
4
|
-
export {
|
|
3
|
+
import { O as OverlayContainer, a as OverlayApiHandle, B as ButtonProps } from './core-VmiEI1Jp.js';
|
|
4
|
+
export { b as Badge, c as BadgeProps, d as BadgeRibbonProps, e as BadgeStatus, f as Breadcrumb, g as BreadcrumbItem, h as BreadcrumbProps, i as Button, j as ButtonSize, k as ButtonVariant, C as Calendar, l as CalendarProps, m as Card, n as CardAccent, o as CardProps, p as Carousel, q as CarouselProps, r as CarouselRef, s as Collapse, t as CollapseItem, u as CollapseKey, v as CollapseProps, D as Dropdown, w as DropdownButtonProps, x as DropdownMenuProps, y as DropdownOpenSource, z as DropdownPlacement, A as DropdownProps, E as DropdownTrigger, F as FILLED_ICON_NAMES, G as FilledIconName, H as FloatButton, I as FloatButtonBackTopProps, J as FloatButtonGroupProps, K as FloatButtonProps, L as FloatButtonShape, M as FloatingPlacement, N as FloatingTrigger, P as ICON_NAMES, Q as Icon, R as IconName, S as IconProps, T as IconVariant, U as Image, V as ImagePreview, W as ImagePreviewConfig, X as ImagePreviewProps, Y as ImageProps, Z as Input, _ as InputProps, $ as Menu, a0 as MenuClickInfo, a1 as MenuItem, a2 as MenuMode, a3 as MenuProps, a4 as MenuTheme, a5 as MessageConfig, a6 as MessageHandle, a7 as MessageKey, a8 as MessageType, a9 as Modal, aa as ModalActionResult, ab as ModalOpenConfig, ac as ModalProps, ad as ModalType, ae as NotificationConfig, af as NotificationPlacement, ag as NotificationType, ah as Popconfirm, ai as PopconfirmProps, aj as Popover, ak as PopoverProps, al as Progress, am as ProgressProps, an as ProgressStatus, ao as Rate, ap as RateProps, aq as Segmented, ar as SegmentedOption, as as SegmentedProps, at as SegmentedValue, au as Spin, av as SpinProps, aw as StepItem, ax as StepStatus, ay as Steps, az as StepsProps, aA as TabItem, aB as Tabs, aC as TabsContextMenuClickInfo, aD as TabsOrientation, aE as TabsPosition, aF as TabsProps, aG as TabsType, aH as Tag, aI as TagProps, aJ as TagStatus, aK as TagVariant, aL as Timeline, aM as TimelineItem, aN as TimelineProps, aO as Tooltip, aP as TooltipProps, aQ as Tour, aR as TourProps, aS as TourStep, aT as Tree, aU as TreeDropPosition, aV as TreeKey, aW as TreeNode, aX as TreeProps, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, b8 as Watermark, b9 as WatermarkFont, ba as WatermarkProps, bb as message, bc as notification } from './core-VmiEI1Jp.js';
|
|
5
5
|
import { I as InputPlaceholderMode, C as ControlSize, a as ControlStatus } from './shared-DAYZvZVu.js';
|
|
6
6
|
export { D as DatePicker, a as DatePickerDisabledInfo, b as DatePickerPreset, c as DatePickerProps, d as DatePickerShowTime, e as DatePickerType, f as DatePickerValue, g as DateRangePickerPreset, h as DateRangePickerProps, S as SelectDateRange, i as SelectDateRangeProps, j as SelectDateRangeValue } from './select-date-range-D-JMfpwD.js';
|
|
7
7
|
export { RichTextContent, RichTextContentFormat, RichTextContentProps, RichTextEditor, RichTextEditorProps, RichTextImagePasteHandler, RichTextToolbar } from './rich-text-editor.js';
|
|
@@ -1189,6 +1189,8 @@ interface TableResizeApi {
|
|
|
1189
1189
|
}
|
|
1190
1190
|
declare function createResizePlugin<T extends Record<string, unknown>>(options?: TableResizePluginOptions): TablePlugin<T, ResizeState, TableResizeApi>;
|
|
1191
1191
|
interface TableColumnSettingPluginOptions<T> {
|
|
1192
|
+
/** 设置按钮的完整 Button 属性；className 合并，disabled/loading 同时禁用菜单触发。 */
|
|
1193
|
+
buttonProps?: ButtonProps;
|
|
1192
1194
|
/** 追加到设置下拉菜单中的业务操作。 */
|
|
1193
1195
|
menuItems?: readonly TableToolbarItem<T>[];
|
|
1194
1196
|
/** 是否显示设置菜单中的导出操作，默认 true。 */
|
|
@@ -1207,6 +1209,9 @@ interface ColumnSettingState {
|
|
|
1207
1209
|
open: boolean;
|
|
1208
1210
|
items: readonly TableColumnSettingItem[];
|
|
1209
1211
|
loaded: boolean;
|
|
1212
|
+
loading?: boolean;
|
|
1213
|
+
loadError?: boolean;
|
|
1214
|
+
loadToken?: symbol;
|
|
1210
1215
|
pageSize?: number;
|
|
1211
1216
|
}
|
|
1212
1217
|
interface TableColumnSettingApi {
|
|
@@ -1350,4 +1355,4 @@ interface InputSelectProps {
|
|
|
1350
1355
|
}
|
|
1351
1356
|
declare const InputSelect: react.ForwardRefExoticComponent<InputSelectProps & react.RefAttributes<HTMLInputElement>>;
|
|
1352
1357
|
|
|
1353
|
-
export { Alert, type AlertProps, type AlertStatus, type AnyTablePlugin, Cascader, type CascaderFieldNames, type CascaderOption, type CascaderProps, type CascaderValue, Checkbox, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps, type CheckboxValue, Col, type ColProps, type ColSize, ColorPicker, type ColorPickerMode, type ColorPickerPreset, type ColorPickerProps, ControlSize, ControlStatus, DEFAULT_PAGE_SIZE_OPTIONS, Divider, type DividerProps, Drawer, type DrawerOpenConfig, type DrawerPlacement, type DrawerProps, type DrawerPush, type DrawerPushConfig, Editor, type EditorCommand, type EditorCompletionContext, type EditorCompletionItem, type EditorCompletionItemKind, type EditorCompletionProvider, type EditorContextMenuItem, type EditorHandle, type EditorKeyDownEvent, type EditorLanguage, type EditorMarker, type EditorProps, type EditorRange, type EditorSelectionChange, type EditorTheme, type FlatTreeNode, type FlatTreeOptions, Flex, type FlexProps, FloatingScrollbarProvider, type FloatingScrollbarProviderProps, Form, type FormErrorField, type FormInstance, type FormItemProps, type FormListField, type FormListOperation, type FormListProps, type FormProps, type FormRule, type FormValues, type GridBreakpoint, InputNumber, type InputNumberProps, InputPlaceholderMode, InputSelect, type InputSelectProps, type LayoutGap, Markdown, type MarkdownProps, type NamePath, OverlayApiHandle, Pagination, type PaginationProps, Radio, type RadioGroupProps, type RadioOption, type RadioProps, type RadioValue, Row, type RowProps, SIA_THEME, type SelectionOption, SelectionPanel, type SelectionPanelProps, type SelectionValue, type SiaThemeMode, Slider, type SliderMark, type SliderProps, type SliderValue, Space, type SpaceCompactProps, type SpaceProps, Splitter, type SplitterPanelProps, type SplitterProps, Switch, type SwitchProps, type SwitchVariant, Table, type TableAlign, type TableCellAddress, type TableCellRange, type TableCellRenderInfo, type TableCellSelectionApi, type TableCellSelectionPluginOptions, type TableColumn, type TableColumnSettingApi, type TableColumnSettingItem, type TableColumnSettingPluginOptions, type TableColumnTransformPluginOptions, type TableEditableApi, type TableEditableCellConfig, type TableEditableCellType, type TableEditablePluginOptions, type TableExportApi, type TableExportPluginOptions, type TableExportScope, type TableFilterApi, type TableFilterPluginOptions, type TableFilterValues, type TableFixed, type TableHighlightPluginOptions, type TableHighlightValue, type TableIndexPluginOptions, type TableKey, type TableMergeStickyConfig, type TablePageParams, type TablePaginationApi, type TablePaginationPluginOptions, type TablePlugin, type TablePluginCellProps, type TablePluginContext, type TablePluginEvent, type TableProps, type TableRef, type TableResizeApi, type TableResizePluginOptions, type TableRow, type TableRowSpanPluginOptions, type TableSelectedCell, type TableSelectionApi, type TableSelectionMode, type TableSelectionPluginOptions, type TableSettingsAdapter, type TableSettingsSnapshot, type TableSize, type TableSortApi, type TableSortInfo, type TableSortPluginOptions, type TableSummaryPluginOptions, type TableSummaryRow, type TableToolbarItem, type TableToolbarPluginOptions, type TableTreeApi, type TableTreePluginOptions, TextArea, type TextAreaProps, ThemeSwitch, type ThemeSwitchProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, ToolPanel, type ToolPanelItem, type ToolPanelPlacement, type ToolPanelProps, TreeSelect, type TreeSelectNode, type TreeSelectProps, type TreeSelectValue, Treemap, type TreemapNode, type TreemapNodeClickInfo, type TreemapNodeKind, type TreemapProps, type WindowAction, type WindowActionHandler, type WindowControlAction, type WindowControlLabels, WindowControls, type WindowControlsProps, WindowFrame, type WindowFrameProps, WindowTitleBar, type WindowTitleBarActionsAlign, type WindowTitleBarProps, applySiaTheme, buildFlatTree, createCellSelectionPlugin, createColumnSettingPlugin, createColumnTransformPlugin, createEditablePlugin, createExportPlugin, createFilterPlugin, createHighlightPlugin, createIndexPlugin, createLocalStorageTableSettingsAdapter, createPaginationPlugin, createResizePlugin, createRowSpanPlugin, createSelectionPlugin, createSortPlugin, createSummaryPlugin, createToolbarPlugin, createTreePlugin, useForm };
|
|
1358
|
+
export { Alert, type AlertProps, type AlertStatus, type AnyTablePlugin, ButtonProps, Cascader, type CascaderFieldNames, type CascaderOption, type CascaderProps, type CascaderValue, Checkbox, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps, type CheckboxValue, Col, type ColProps, type ColSize, ColorPicker, type ColorPickerMode, type ColorPickerPreset, type ColorPickerProps, ControlSize, ControlStatus, DEFAULT_PAGE_SIZE_OPTIONS, Divider, type DividerProps, Drawer, type DrawerOpenConfig, type DrawerPlacement, type DrawerProps, type DrawerPush, type DrawerPushConfig, Editor, type EditorCommand, type EditorCompletionContext, type EditorCompletionItem, type EditorCompletionItemKind, type EditorCompletionProvider, type EditorContextMenuItem, type EditorHandle, type EditorKeyDownEvent, type EditorLanguage, type EditorMarker, type EditorProps, type EditorRange, type EditorSelectionChange, type EditorTheme, type FlatTreeNode, type FlatTreeOptions, Flex, type FlexProps, FloatingScrollbarProvider, type FloatingScrollbarProviderProps, Form, type FormErrorField, type FormInstance, type FormItemProps, type FormListField, type FormListOperation, type FormListProps, type FormProps, type FormRule, type FormValues, type GridBreakpoint, InputNumber, type InputNumberProps, InputPlaceholderMode, InputSelect, type InputSelectProps, type LayoutGap, Markdown, type MarkdownProps, type NamePath, OverlayApiHandle, Pagination, type PaginationProps, Radio, type RadioGroupProps, type RadioOption, type RadioProps, type RadioValue, Row, type RowProps, SIA_THEME, type SelectionOption, SelectionPanel, type SelectionPanelProps, type SelectionValue, type SiaThemeMode, Slider, type SliderMark, type SliderProps, type SliderValue, Space, type SpaceCompactProps, type SpaceProps, Splitter, type SplitterPanelProps, type SplitterProps, Switch, type SwitchProps, type SwitchVariant, Table, type TableAlign, type TableCellAddress, type TableCellRange, type TableCellRenderInfo, type TableCellSelectionApi, type TableCellSelectionPluginOptions, type TableColumn, type TableColumnSettingApi, type TableColumnSettingItem, type TableColumnSettingPluginOptions, type TableColumnTransformPluginOptions, type TableEditableApi, type TableEditableCellConfig, type TableEditableCellType, type TableEditablePluginOptions, type TableExportApi, type TableExportPluginOptions, type TableExportScope, type TableFilterApi, type TableFilterPluginOptions, type TableFilterValues, type TableFixed, type TableHighlightPluginOptions, type TableHighlightValue, type TableIndexPluginOptions, type TableKey, type TableMergeStickyConfig, type TablePageParams, type TablePaginationApi, type TablePaginationPluginOptions, type TablePlugin, type TablePluginCellProps, type TablePluginContext, type TablePluginEvent, type TableProps, type TableRef, type TableResizeApi, type TableResizePluginOptions, type TableRow, type TableRowSpanPluginOptions, type TableSelectedCell, type TableSelectionApi, type TableSelectionMode, type TableSelectionPluginOptions, type TableSettingsAdapter, type TableSettingsSnapshot, type TableSize, type TableSortApi, type TableSortInfo, type TableSortPluginOptions, type TableSummaryPluginOptions, type TableSummaryRow, type TableToolbarItem, type TableToolbarPluginOptions, type TableTreeApi, type TableTreePluginOptions, TextArea, type TextAreaProps, ThemeSwitch, type ThemeSwitchProps, TimePicker, type TimePickerProps, type TimeRangePickerProps, ToolPanel, type ToolPanelItem, type ToolPanelPlacement, type ToolPanelProps, TreeSelect, type TreeSelectNode, type TreeSelectProps, type TreeSelectValue, Treemap, type TreemapNode, type TreemapNodeClickInfo, type TreemapNodeKind, type TreemapProps, type WindowAction, type WindowActionHandler, type WindowControlAction, type WindowControlLabels, WindowControls, type WindowControlsProps, WindowFrame, type WindowFrameProps, WindowTitleBar, type WindowTitleBarActionsAlign, type WindowTitleBarProps, applySiaTheme, buildFlatTree, createCellSelectionPlugin, createColumnSettingPlugin, createColumnTransformPlugin, createEditablePlugin, createExportPlugin, createFilterPlugin, createHighlightPlugin, createIndexPlugin, createLocalStorageTableSettingsAdapter, createPaginationPlugin, createResizePlugin, createRowSpanPlugin, createSelectionPlugin, createSortPlugin, createSummaryPlugin, createToolbarPlugin, createTreePlugin, useForm };
|
package/dist/index.js
CHANGED
|
@@ -5786,87 +5786,163 @@ function applyColumnSettingsToTree(columns, items) {
|
|
|
5786
5786
|
}).sort((left, right) => left.order - right.order);
|
|
5787
5787
|
return walk(columns).map((entry) => entry.column);
|
|
5788
5788
|
}
|
|
5789
|
-
function
|
|
5789
|
+
function orderColumnSettings(items) {
|
|
5790
|
+
const rank = (item) => item.fixed === "left" ? 0 : item.fixed === "right" ? 2 : 1;
|
|
5791
|
+
return [...items].sort((a, b) => rank(a) - rank(b)).map((item, order) => ({ ...item, order }));
|
|
5792
|
+
}
|
|
5793
|
+
function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry, onClose, onApply }) {
|
|
5790
5794
|
const [draft, setDraft] = useState16(items);
|
|
5791
|
-
const
|
|
5795
|
+
const drag = useRef14(null);
|
|
5796
|
+
const [draggingKey, setDraggingKey] = useState16(null);
|
|
5792
5797
|
useEffect12(() => {
|
|
5793
|
-
if (open) setDraft(items);
|
|
5798
|
+
if (open) setDraft(orderColumnSettings(items));
|
|
5799
|
+
drag.current = null;
|
|
5800
|
+
setDraggingKey(null);
|
|
5794
5801
|
}, [items, open]);
|
|
5795
5802
|
const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
|
|
5796
5803
|
const visibleCount = draft.filter((item) => item.visible).length;
|
|
5797
|
-
function move(index, offset) {
|
|
5798
|
-
const target = index + offset;
|
|
5799
|
-
if (target < 0 || target >= draft.length) return;
|
|
5800
|
-
const next = [...draft];
|
|
5801
|
-
const [item] = next.splice(index, 1);
|
|
5802
|
-
next.splice(target, 0, item);
|
|
5803
|
-
setDraft(next.map((entry, order) => ({ ...entry, order })));
|
|
5804
|
-
}
|
|
5805
5804
|
function setFixed(key, fixed) {
|
|
5806
|
-
setDraft((previous) =>
|
|
5805
|
+
setDraft((previous) => {
|
|
5806
|
+
const item = previous.find((entry) => entry.key === key);
|
|
5807
|
+
if (!item) return previous;
|
|
5808
|
+
const next = previous.filter((entry) => entry.key !== key);
|
|
5809
|
+
const updated = { ...item, fixed };
|
|
5810
|
+
const target = fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : fixed === "right" ? next.findIndex((entry) => entry.fixed === "right") : item.fixed === "left" ? next.filter((entry) => entry.fixed === "left").length : next.findIndex((entry) => entry.fixed === "right");
|
|
5811
|
+
next.splice(target < 0 ? next.length : target, 0, updated);
|
|
5812
|
+
return orderColumnSettings(next);
|
|
5813
|
+
});
|
|
5814
|
+
}
|
|
5815
|
+
function previewMove(key, clientY, element) {
|
|
5816
|
+
const active = drag.current;
|
|
5817
|
+
if (!active || active.key === key || loading || loadError) return;
|
|
5818
|
+
const rect = element.getBoundingClientRect();
|
|
5819
|
+
setDraft((previous) => {
|
|
5820
|
+
const from = previous.findIndex((entry) => entry.key === active.key);
|
|
5821
|
+
const to = previous.findIndex((entry) => entry.key === key);
|
|
5822
|
+
if (from < 0 || to < 0 || previous[from].fixed !== previous[to].fixed) return previous;
|
|
5823
|
+
if (from < to ? clientY < rect.top + rect.height / 2 : clientY > rect.top + rect.height / 2) return previous;
|
|
5824
|
+
const next = [...previous];
|
|
5825
|
+
const [moved] = next.splice(from, 1);
|
|
5826
|
+
next.splice(to, 0, moved);
|
|
5827
|
+
return orderColumnSettings(next);
|
|
5828
|
+
});
|
|
5807
5829
|
}
|
|
5808
5830
|
return /* @__PURE__ */ jsxs19(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
|
|
5809
5831
|
if (!next) onClose();
|
|
5810
5832
|
}, footer: /* @__PURE__ */ jsxs19(Fragment6, { children: [
|
|
5811
5833
|
/* @__PURE__ */ jsx20(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
|
|
5812
|
-
/* @__PURE__ */ jsx20(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
|
|
5834
|
+
/* @__PURE__ */ jsx20(Button, { variant: "primary", disabled: loading || loadError, onClick: () => onApply(draft), children: "\u5E94\u7528" })
|
|
5813
5835
|
] }), children: [
|
|
5814
|
-
/* @__PURE__ */
|
|
5815
|
-
|
|
5816
|
-
|
|
5817
|
-
|
|
5818
|
-
|
|
5819
|
-
|
|
5820
|
-
|
|
5821
|
-
"\
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
|
|
5828
|
-
|
|
5829
|
-
|
|
5830
|
-
|
|
5831
|
-
|
|
5832
|
-
|
|
5833
|
-
|
|
5834
|
-
|
|
5835
|
-
|
|
5836
|
-
|
|
5837
|
-
|
|
5838
|
-
|
|
5839
|
-
|
|
5840
|
-
|
|
5841
|
-
|
|
5842
|
-
|
|
5843
|
-
|
|
5836
|
+
loading ? /* @__PURE__ */ jsx20("p", { role: "status", children: "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E\u2026" }) : null,
|
|
5837
|
+
loadError ? /* @__PURE__ */ jsxs19("p", { role: "alert", children: [
|
|
5838
|
+
"\u8BFB\u53D6\u5217\u914D\u7F6E\u5931\u8D25\u3002",
|
|
5839
|
+
/* @__PURE__ */ jsx20(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
|
|
5840
|
+
] }) : null,
|
|
5841
|
+
/* @__PURE__ */ jsxs19("fieldset", { disabled: loading || loadError, style: { border: 0, padding: 0, margin: 0, minWidth: 0 }, "aria-busy": loading, children: [
|
|
5842
|
+
/* @__PURE__ */ jsxs19("label", { className: "sia-table-settings__all", children: [
|
|
5843
|
+
/* @__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 }))) }),
|
|
5844
|
+
/* @__PURE__ */ jsxs19("span", { children: [
|
|
5845
|
+
"\u5168\u9009\uFF08",
|
|
5846
|
+
visibleCount,
|
|
5847
|
+
"/",
|
|
5848
|
+
draft.length,
|
|
5849
|
+
"\uFF09"
|
|
5850
|
+
] })
|
|
5851
|
+
] }),
|
|
5852
|
+
/* @__PURE__ */ jsx20("div", { className: "sia-table-settings__list", onDragOver: (event) => {
|
|
5853
|
+
if (drag.current) event.preventDefault();
|
|
5854
|
+
}, onDrop: (event) => {
|
|
5855
|
+
event.preventDefault();
|
|
5856
|
+
if (drag.current) drag.current.dropped = true;
|
|
5857
|
+
}, children: draft.map((item) => /* @__PURE__ */ jsxs19(
|
|
5858
|
+
"div",
|
|
5859
|
+
{
|
|
5860
|
+
"data-column-key": item.key,
|
|
5861
|
+
className: `sia-table-settings__item${draggingKey === item.key ? " is-dragging" : ""}`,
|
|
5862
|
+
draggable: !loading && !loadError,
|
|
5863
|
+
onDragStart: (event) => {
|
|
5864
|
+
drag.current = { key: item.key, original: draft, dropped: false };
|
|
5865
|
+
event.dataTransfer.effectAllowed = "move";
|
|
5866
|
+
event.dataTransfer.setData("text/plain", item.key);
|
|
5867
|
+
setDraggingKey(item.key);
|
|
5868
|
+
},
|
|
5869
|
+
onDragOver: (event) => {
|
|
5870
|
+
event.preventDefault();
|
|
5871
|
+
event.dataTransfer.dropEffect = "move";
|
|
5872
|
+
previewMove(item.key, event.clientY, event.currentTarget);
|
|
5873
|
+
},
|
|
5874
|
+
onDragEnd: () => {
|
|
5875
|
+
if (drag.current && !drag.current.dropped) setDraft(drag.current.original);
|
|
5876
|
+
drag.current = null;
|
|
5877
|
+
setDraggingKey(null);
|
|
5878
|
+
},
|
|
5879
|
+
children: [
|
|
5880
|
+
/* @__PURE__ */ jsx20(Icon, { name: "menu", size: 15 }),
|
|
5881
|
+
/* @__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)) }),
|
|
5882
|
+
/* @__PURE__ */ jsx20("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
|
|
5883
|
+
/* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__actions", children: [
|
|
5884
|
+
/* @__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" }),
|
|
5885
|
+
/* @__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" })
|
|
5886
|
+
] })
|
|
5887
|
+
]
|
|
5888
|
+
},
|
|
5889
|
+
item.key
|
|
5890
|
+
)) })
|
|
5891
|
+
] })
|
|
5844
5892
|
] });
|
|
5845
5893
|
}
|
|
5894
|
+
var columnSettingLoadTokens = /* @__PURE__ */ new WeakMap();
|
|
5846
5895
|
function createColumnSettingPlugin(options = {}) {
|
|
5847
5896
|
const baseItems = (context) => createColumnSettingItems(context.baseColumns, options.defaultVisibleKeys);
|
|
5848
5897
|
const currentItems = (context) => context.state.items?.length ? context.state.items : baseItems(context);
|
|
5849
5898
|
const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
|
|
5850
5899
|
function apply(items, context, persist = true) {
|
|
5851
|
-
const normalized = [...items].sort((a, b) => a.order - b.order)
|
|
5900
|
+
const normalized = orderColumnSettings([...items].sort((a, b) => a.order - b.order));
|
|
5852
5901
|
context.setState((state) => ({ ...state, items: normalized, open: false }));
|
|
5853
5902
|
const columnMap = new Map(flattenTableColumns(context.baseColumns).map((column) => [column.key, column]));
|
|
5854
5903
|
options.onVisibleChange?.(normalized.filter((item) => item.visible).map((item) => columnMap.get(item.key)).filter(Boolean));
|
|
5855
5904
|
options.onOrderChange?.(normalized.map((item) => columnMap.get(item.key)).filter(Boolean));
|
|
5856
5905
|
if (persist) void save({ columns: normalized, pageSize: context.state.pageSize, version: 1 });
|
|
5857
5906
|
}
|
|
5907
|
+
function loadSettings(context, open = false) {
|
|
5908
|
+
const fallback = baseItems(context);
|
|
5909
|
+
const token = /* @__PURE__ */ Symbol("column-settings-load");
|
|
5910
|
+
columnSettingLoadTokens.set(context.setPluginState, token);
|
|
5911
|
+
let cancelled = false;
|
|
5912
|
+
const hasAdapter = Boolean(options.adapter && options.scope);
|
|
5913
|
+
context.setState((state) => ({
|
|
5914
|
+
...state,
|
|
5915
|
+
open: open || state.open,
|
|
5916
|
+
items: state.items.length ? state.items : fallback,
|
|
5917
|
+
loading: hasAdapter,
|
|
5918
|
+
loaded: !hasAdapter,
|
|
5919
|
+
loadError: false,
|
|
5920
|
+
loadToken: token
|
|
5921
|
+
}));
|
|
5922
|
+
if (hasAdapter) void Promise.resolve().then(() => options.adapter.load(options.scope)).then((snapshot) => {
|
|
5923
|
+
if (cancelled || columnSettingLoadTokens.get(context.setPluginState) !== token) return;
|
|
5924
|
+
if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
|
|
5925
|
+
context.setState((state) => state.loadToken !== token ? state : {
|
|
5926
|
+
...state,
|
|
5927
|
+
items: snapshot?.columns?.length ? snapshot.columns : fallback,
|
|
5928
|
+
pageSize: snapshot?.pageSize,
|
|
5929
|
+
loaded: true,
|
|
5930
|
+
loading: false,
|
|
5931
|
+
loadError: false
|
|
5932
|
+
});
|
|
5933
|
+
}).catch(() => {
|
|
5934
|
+
if (!cancelled) context.setState((state) => state.loadToken !== token ? state : { ...state, loading: false, loaded: true, loadError: true });
|
|
5935
|
+
});
|
|
5936
|
+
return () => {
|
|
5937
|
+
cancelled = true;
|
|
5938
|
+
};
|
|
5939
|
+
}
|
|
5858
5940
|
return {
|
|
5859
5941
|
id: "columnSetting",
|
|
5860
5942
|
order: 10,
|
|
5861
5943
|
initialState: { open: false, items: [], loaded: false },
|
|
5862
5944
|
onMount(context) {
|
|
5863
|
-
|
|
5864
|
-
context.setState((state) => ({ ...state, items: state.items.length ? state.items : fallback, loaded: !options.adapter }));
|
|
5865
|
-
if (options.adapter && options.scope) void options.adapter.load(options.scope).then((snapshot) => {
|
|
5866
|
-
const merged = snapshot?.columns?.length ? snapshot.columns : fallback;
|
|
5867
|
-
context.setState((state) => ({ ...state, items: merged, pageSize: snapshot?.pageSize, loaded: true }));
|
|
5868
|
-
if (snapshot?.pageSize) context.setPluginState("pagination", (state) => ({ ...state, pageSize: snapshot.pageSize }));
|
|
5869
|
-
}).catch(() => context.setState((state) => ({ ...state, items: fallback, loaded: true })));
|
|
5945
|
+
return loadSettings(context);
|
|
5870
5946
|
},
|
|
5871
5947
|
transformColumns(columns, context) {
|
|
5872
5948
|
return applyColumnSettingsToTree(columns, currentItems(context));
|
|
@@ -5902,14 +5978,26 @@ function createColumnSettingPlugin(options = {}) {
|
|
|
5902
5978
|
disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
|
|
5903
5979
|
}))
|
|
5904
5980
|
];
|
|
5905
|
-
return /* @__PURE__ */ jsx20(Dropdown, { trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
|
|
5981
|
+
return /* @__PURE__ */ jsx20(Dropdown, { disabled: options.buttonProps?.disabled || options.buttonProps?.loading, trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
|
|
5906
5982
|
if (key === "builtin:export") void exportApi().download();
|
|
5907
|
-
else if (key === "builtin:columns") context
|
|
5983
|
+
else if (key === "builtin:columns") loadSettings(context, true);
|
|
5908
5984
|
else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
|
|
5909
|
-
} }, children: /* @__PURE__ */ jsx20(
|
|
5985
|
+
} }, children: /* @__PURE__ */ jsx20(
|
|
5986
|
+
Button,
|
|
5987
|
+
{
|
|
5988
|
+
size: "small",
|
|
5989
|
+
variant: "text",
|
|
5990
|
+
icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }),
|
|
5991
|
+
"aria-label": "\u8868\u683C\u8BBE\u7F6E",
|
|
5992
|
+
...options.buttonProps,
|
|
5993
|
+
className: `sia-table__settings-button${options.buttonProps?.children == null ? " sia-table__toolbar-icon" : ""} ${options.buttonProps?.className ?? ""}`.trim()
|
|
5994
|
+
}
|
|
5995
|
+
) });
|
|
5910
5996
|
},
|
|
5911
|
-
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) }),
|
|
5912
|
-
getApi: (context) => ({ open: () =>
|
|
5997
|
+
renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, loading: context.state.loading, loadError: context.state.loadError, onRetry: () => loadSettings(context, true), items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
|
|
5998
|
+
getApi: (context) => ({ open: () => {
|
|
5999
|
+
loadSettings(context, true);
|
|
6000
|
+
}, close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
|
|
5913
6001
|
};
|
|
5914
6002
|
}
|
|
5915
6003
|
function createLocalStorageTableSettingsAdapter(prefix = "sia-table") {
|
|
@@ -6607,11 +6695,12 @@ function TableInner(props, ref) {
|
|
|
6607
6695
|
let labelRendered = false;
|
|
6608
6696
|
return /* @__PURE__ */ jsx21("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
|
|
6609
6697
|
const value = summary.values[column.key];
|
|
6610
|
-
const
|
|
6698
|
+
const isLabel = value === void 0 && !labelRendered && summary.label !== void 0;
|
|
6699
|
+
const content = value !== void 0 ? value : isLabel ? (labelRendered = true, summary.label) : null;
|
|
6611
6700
|
const fixed = normalizeFixed(column.fixed);
|
|
6612
6701
|
const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
|
|
6613
6702
|
const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
|
|
6614
|
-
return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
|
|
6703
|
+
return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${isLabel ? " sia-table__summary-cell--label" : ""}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: isLabel ? /* @__PURE__ */ jsx21("span", { className: "sia-table__summary-label", title: typeof content === "string" ? content : void 0, children: content }) : content }, column.key);
|
|
6615
6704
|
}) }, summary.key);
|
|
6616
6705
|
}
|
|
6617
6706
|
return /* @__PURE__ */ jsxs20(
|