@sia.soul/sia-react-ui 0.1.10 → 0.1.11
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/{chunk-SGJLZN23.js → chunk-BUMS62NO.js} +2 -1
- package/dist/{chunk-6HP6IIT4.js → chunk-MOOMDRAN.js} +134 -83
- package/dist/{chunk-T2X6WK6Z.js → chunk-RLTG3IK7.js} +1 -1
- package/dist/{core-Dwc_30PN.d.cts → core-D3ZPxJ7a.d.cts} +1 -1
- package/dist/{core-ByQQ3hq2.d.ts → core-EyinLic7.d.ts} +1 -1
- package/dist/core.cjs +121 -69
- package/dist/core.css +222 -9
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +2 -2
- package/dist/index.cjs +211 -86
- package/dist/index.css +222 -9
- package/dist/index.d.cts +16 -5
- package/dist/index.d.ts +16 -5
- package/dist/index.js +173 -100
- package/dist/select-date-range.cjs +2 -1
- package/dist/select-date-range.js +2 -2
- package/package.json +1 -1
|
@@ -1092,6 +1092,7 @@ var Select = forwardRef3(function Select2({
|
|
|
1092
1092
|
optionHeight = showValue ? 54 : 34,
|
|
1093
1093
|
disabled,
|
|
1094
1094
|
className = "",
|
|
1095
|
+
style,
|
|
1095
1096
|
id,
|
|
1096
1097
|
notFoundContent = "\u6682\u65E0\u6570\u636E",
|
|
1097
1098
|
onKeyDown,
|
|
@@ -1322,7 +1323,7 @@ var Select = forwardRef3(function Select2({
|
|
|
1322
1323
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
1323
1324
|
}
|
|
1324
1325
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
1325
|
-
return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
|
|
1326
|
+
return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
|
|
1326
1327
|
/* @__PURE__ */ jsxs6(
|
|
1327
1328
|
"button",
|
|
1328
1329
|
{
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
Popover,
|
|
6
6
|
Tooltip,
|
|
7
7
|
useOverlayLifecycle
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-BUMS62NO.js";
|
|
9
9
|
import {
|
|
10
10
|
Dropdown,
|
|
11
11
|
Icon
|
|
@@ -110,7 +110,7 @@ function Tag({
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
// src/components/Tabs.tsx
|
|
113
|
-
import { useId, useMemo, useState as useState2 } from "react";
|
|
113
|
+
import { useId, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
|
|
114
114
|
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
115
115
|
function Tabs({
|
|
116
116
|
items,
|
|
@@ -140,6 +140,38 @@ function Tabs({
|
|
|
140
140
|
const enabledItems = useMemo(() => items.filter((item) => !item.disabled), [items]);
|
|
141
141
|
const resolvedPosition = tabPosition ?? (orientation === "vertical" ? "left" : "top");
|
|
142
142
|
const resolvedOrientation = resolvedPosition === "left" || resolvedPosition === "right" ? "vertical" : "horizontal";
|
|
143
|
+
const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
|
|
144
|
+
const listRef = useRef(null);
|
|
145
|
+
const indicatorRef = useRef(null);
|
|
146
|
+
useLayoutEffect(() => {
|
|
147
|
+
if (!sliding) return;
|
|
148
|
+
const list = listRef.current;
|
|
149
|
+
const indicator = indicatorRef.current;
|
|
150
|
+
if (!list || !indicator) return;
|
|
151
|
+
function updateIndicator() {
|
|
152
|
+
if (!list || !indicator) return;
|
|
153
|
+
const active = list.querySelector('[role="tab"][aria-selected="true"]');
|
|
154
|
+
if (!active) {
|
|
155
|
+
indicator.style.visibility = "hidden";
|
|
156
|
+
return;
|
|
157
|
+
}
|
|
158
|
+
const listRect = list.getBoundingClientRect();
|
|
159
|
+
const rect = active.getBoundingClientRect();
|
|
160
|
+
indicator.style.transform = `translate(${rect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${rect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
|
|
161
|
+
indicator.style.width = `${rect.width}px`;
|
|
162
|
+
indicator.style.height = `${rect.height}px`;
|
|
163
|
+
indicator.style.visibility = "visible";
|
|
164
|
+
if (!indicator.dataset.ready) {
|
|
165
|
+
indicator.getBoundingClientRect();
|
|
166
|
+
indicator.dataset.ready = "true";
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
updateIndicator();
|
|
170
|
+
const observer = new ResizeObserver(updateIndicator);
|
|
171
|
+
observer.observe(list);
|
|
172
|
+
list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
|
|
173
|
+
return () => observer.disconnect();
|
|
174
|
+
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
|
|
143
175
|
function selectTab(key) {
|
|
144
176
|
if (key === selectedKey) return;
|
|
145
177
|
if (activeKey === void 0) setInternalActiveKey(key);
|
|
@@ -165,7 +197,7 @@ function Tabs({
|
|
|
165
197
|
return /* @__PURE__ */ jsxs3(
|
|
166
198
|
"div",
|
|
167
199
|
{
|
|
168
|
-
className: `sia-tabs sia-tabs--${type} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
|
|
200
|
+
className: `sia-tabs sia-tabs--${type}${type === "underline" ? " sia-tabs--line" : ""} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
|
|
169
201
|
...props,
|
|
170
202
|
children: [
|
|
171
203
|
/* @__PURE__ */ jsxs3("div", { className: "sia-tabs__header", children: [
|
|
@@ -173,77 +205,96 @@ function Tabs({
|
|
|
173
205
|
tabBarTitle,
|
|
174
206
|
type === "tech-line" ? /* @__PURE__ */ jsx3("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
|
|
175
207
|
] }) : null,
|
|
176
|
-
/* @__PURE__ */
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
"
|
|
208
|
+
/* @__PURE__ */ jsxs3("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
209
|
+
sliding ? /* @__PURE__ */ jsx3("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
210
|
+
/* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
211
|
+
/* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
212
|
+
/* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
213
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
214
|
+
] }) }),
|
|
215
|
+
/* @__PURE__ */ jsx3(
|
|
216
|
+
"path",
|
|
182
217
|
{
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
"
|
|
188
|
-
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
189
|
-
tabIndex: selected ? 0 : -1,
|
|
190
|
-
disabled: item.disabled,
|
|
191
|
-
onClick: () => selectTab(item.key),
|
|
192
|
-
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
193
|
-
children: [
|
|
194
|
-
type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
195
|
-
/* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
196
|
-
/* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
197
|
-
/* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
198
|
-
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
199
|
-
] }) }),
|
|
200
|
-
/* @__PURE__ */ jsx3(
|
|
201
|
-
"path",
|
|
202
|
-
{
|
|
203
|
-
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
204
|
-
fill: `url(#${baseId}-tab-fill-${item.key})`,
|
|
205
|
-
stroke: "currentColor",
|
|
206
|
-
strokeWidth: "1.5",
|
|
207
|
-
vectorEffect: "non-scaling-stroke"
|
|
208
|
-
}
|
|
209
|
-
)
|
|
210
|
-
] }) : null,
|
|
211
|
-
item.icon ? /* @__PURE__ */ jsx3("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
212
|
-
/* @__PURE__ */ jsx3("span", { children: item.label })
|
|
213
|
-
]
|
|
218
|
+
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
219
|
+
fill: `url(#${baseId}-tab-fill-indicator)`,
|
|
220
|
+
stroke: "currentColor",
|
|
221
|
+
strokeWidth: "1.5",
|
|
222
|
+
vectorEffect: "non-scaling-stroke"
|
|
214
223
|
}
|
|
215
|
-
)
|
|
216
|
-
|
|
217
|
-
|
|
224
|
+
)
|
|
225
|
+
] }) : null }, type) : null,
|
|
226
|
+
items.map((item) => {
|
|
227
|
+
const selected = item.key === selectedKey;
|
|
228
|
+
const canClose = item.closable ?? closable;
|
|
229
|
+
const tabNode = /* @__PURE__ */ jsxs3("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
|
|
230
|
+
/* @__PURE__ */ jsxs3(
|
|
231
|
+
"button",
|
|
232
|
+
{
|
|
233
|
+
id: `${baseId}-tab-${item.key}`,
|
|
234
|
+
type: "button",
|
|
235
|
+
className: "sia-tabs__tab",
|
|
236
|
+
role: "tab",
|
|
237
|
+
"aria-selected": selected,
|
|
238
|
+
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
239
|
+
tabIndex: selected ? 0 : -1,
|
|
240
|
+
disabled: item.disabled,
|
|
241
|
+
onClick: () => selectTab(item.key),
|
|
242
|
+
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
243
|
+
children: [
|
|
244
|
+
type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
245
|
+
/* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
246
|
+
/* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
247
|
+
/* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
248
|
+
/* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
249
|
+
] }) }),
|
|
250
|
+
/* @__PURE__ */ jsx3(
|
|
251
|
+
"path",
|
|
252
|
+
{
|
|
253
|
+
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
254
|
+
fill: `url(#${baseId}-tab-fill-${item.key})`,
|
|
255
|
+
stroke: "currentColor",
|
|
256
|
+
strokeWidth: "1.5",
|
|
257
|
+
vectorEffect: "non-scaling-stroke"
|
|
258
|
+
}
|
|
259
|
+
)
|
|
260
|
+
] }) : null,
|
|
261
|
+
item.icon ? /* @__PURE__ */ jsx3("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
262
|
+
/* @__PURE__ */ jsx3("span", { children: item.label })
|
|
263
|
+
]
|
|
264
|
+
}
|
|
265
|
+
),
|
|
266
|
+
canClose ? /* @__PURE__ */ jsx3(
|
|
267
|
+
"button",
|
|
268
|
+
{
|
|
269
|
+
type: "button",
|
|
270
|
+
className: "sia-tabs__close",
|
|
271
|
+
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
272
|
+
disabled: item.disabled,
|
|
273
|
+
onClick: () => onEdit?.(item.key, "remove"),
|
|
274
|
+
children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 12 })
|
|
275
|
+
}
|
|
276
|
+
) : null
|
|
277
|
+
] }, item.key);
|
|
278
|
+
const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
|
|
279
|
+
if (!contextMenuItems?.length) return tabNode;
|
|
280
|
+
return /* @__PURE__ */ jsx3(
|
|
281
|
+
Dropdown,
|
|
218
282
|
{
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
if (!contextMenuItems?.length) return tabNode;
|
|
230
|
-
return /* @__PURE__ */ jsx3(
|
|
231
|
-
Dropdown,
|
|
232
|
-
{
|
|
233
|
-
className: "sia-tabs__tab-context-trigger",
|
|
234
|
-
popupClassName: "sia-tabs__tab-context-menu",
|
|
235
|
-
trigger: ["contextMenu"],
|
|
236
|
-
tabIndex: -1,
|
|
237
|
-
menu: {
|
|
238
|
-
items: contextMenuItems,
|
|
239
|
-
selectable: false,
|
|
240
|
-
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
283
|
+
className: "sia-tabs__tab-context-trigger",
|
|
284
|
+
popupClassName: "sia-tabs__tab-context-menu",
|
|
285
|
+
trigger: ["contextMenu"],
|
|
286
|
+
tabIndex: -1,
|
|
287
|
+
menu: {
|
|
288
|
+
items: contextMenuItems,
|
|
289
|
+
selectable: false,
|
|
290
|
+
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
291
|
+
},
|
|
292
|
+
children: tabNode
|
|
241
293
|
},
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
}) }),
|
|
294
|
+
item.key
|
|
295
|
+
);
|
|
296
|
+
})
|
|
297
|
+
] }),
|
|
247
298
|
tabBarExtraContent ? /* @__PURE__ */ jsx3("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
|
|
248
299
|
] }),
|
|
249
300
|
hasPanels ? /* @__PURE__ */ jsx3("div", { className: "sia-tabs__panels", children: items.map((item) => {
|
|
@@ -526,7 +577,7 @@ function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, c
|
|
|
526
577
|
}
|
|
527
578
|
|
|
528
579
|
// src/components/DataDisplay.tsx
|
|
529
|
-
import { Children, useEffect as useEffect2, useMemo as useMemo3, useRef as
|
|
580
|
+
import { Children, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
|
|
530
581
|
import { createPortal as createPortal2 } from "react-dom";
|
|
531
582
|
import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
532
583
|
function Rate({ value, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
|
|
@@ -740,7 +791,7 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
|
|
|
740
791
|
}) });
|
|
741
792
|
}
|
|
742
793
|
function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
743
|
-
const previewRef =
|
|
794
|
+
const previewRef = useRef3(null);
|
|
744
795
|
useOverlayLifecycle(open, previewRef, () => onOpenChange(false));
|
|
745
796
|
if (!open || !src || typeof document === "undefined") return null;
|
|
746
797
|
return createPortal2(/* @__PURE__ */ jsxs5("div", { ref: previewRef, className: "sia-image-preview", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", tabIndex: -1, onClick: () => onOpenChange(false), children: [
|
|
@@ -780,7 +831,7 @@ function Image({ fallback, placeholder, preview = true, rootClassName = "", clas
|
|
|
780
831
|
}
|
|
781
832
|
|
|
782
833
|
// src/components/Upload.tsx
|
|
783
|
-
import { useId as useId2, useRef as
|
|
834
|
+
import { useId as useId2, useRef as useRef4 } from "react";
|
|
784
835
|
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
785
836
|
var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
|
|
786
837
|
function UploadRoot({
|
|
@@ -803,8 +854,8 @@ function UploadRoot({
|
|
|
803
854
|
onDrop,
|
|
804
855
|
...props
|
|
805
856
|
}) {
|
|
806
|
-
const inputRef =
|
|
807
|
-
const filesRef =
|
|
857
|
+
const inputRef = useRef4(null);
|
|
858
|
+
const filesRef = useRef4(fileList ?? defaultFileList);
|
|
808
859
|
const id = useId2();
|
|
809
860
|
const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
|
|
810
861
|
filesRef.current = files;
|
|
@@ -1028,7 +1079,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
|
|
|
1028
1079
|
}
|
|
1029
1080
|
|
|
1030
1081
|
// src/components/Typography.tsx
|
|
1031
|
-
import { useEffect as useEffect3, useLayoutEffect, useRef as
|
|
1082
|
+
import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
|
|
1032
1083
|
import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1033
1084
|
function TypographyContent({
|
|
1034
1085
|
as: Tag2 = "span",
|
|
@@ -1048,9 +1099,9 @@ function TypographyContent({
|
|
|
1048
1099
|
className = "",
|
|
1049
1100
|
...props
|
|
1050
1101
|
}) {
|
|
1051
|
-
const contentRef =
|
|
1052
|
-
const editRef =
|
|
1053
|
-
const timer =
|
|
1102
|
+
const contentRef = useRef5(null);
|
|
1103
|
+
const editRef = useRef5(null);
|
|
1104
|
+
const timer = useRef5();
|
|
1054
1105
|
const [localText, setLocalText] = useState5();
|
|
1055
1106
|
const [draft, setDraft] = useState5("");
|
|
1056
1107
|
const [editing, setEditing] = useState5(false);
|
|
@@ -1067,7 +1118,7 @@ function TypographyContent({
|
|
|
1067
1118
|
setLocalText(void 0);
|
|
1068
1119
|
}, [children]);
|
|
1069
1120
|
useEffect3(() => () => clearTimeout(timer.current), []);
|
|
1070
|
-
|
|
1121
|
+
useLayoutEffect2(() => {
|
|
1071
1122
|
const element = contentRef.current;
|
|
1072
1123
|
if (!element || !ellipsis || editing || expanded) return;
|
|
1073
1124
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -1176,7 +1227,7 @@ function TypographyRoot({ className = "", ...props }) {
|
|
|
1176
1227
|
var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
|
|
1177
1228
|
|
|
1178
1229
|
// src/components/FloatButton.tsx
|
|
1179
|
-
import { createContext, forwardRef, useContext, useEffect as useEffect4, useId as useId3, useRef as
|
|
1230
|
+
import { createContext, forwardRef, useContext, useEffect as useEffect4, useId as useId3, useRef as useRef6, useState as useState6 } from "react";
|
|
1180
1231
|
import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1181
1232
|
var GroupShape = createContext(void 0);
|
|
1182
1233
|
var FloatButtonRoot = forwardRef(function FloatButton({
|
|
@@ -1230,8 +1281,8 @@ function FloatButtonGroup({
|
|
|
1230
1281
|
...props
|
|
1231
1282
|
}) {
|
|
1232
1283
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
1233
|
-
const rootRef =
|
|
1234
|
-
const triggerRef =
|
|
1284
|
+
const rootRef = useRef6(null);
|
|
1285
|
+
const triggerRef = useRef6(null);
|
|
1235
1286
|
const id = useId3();
|
|
1236
1287
|
useEffect4(() => {
|
|
1237
1288
|
if (!trigger || !visible) return;
|
|
@@ -401,7 +401,7 @@ interface TabItem {
|
|
|
401
401
|
icon?: ReactNode;
|
|
402
402
|
closable?: boolean;
|
|
403
403
|
}
|
|
404
|
-
type TabsType = "line" | "card" | "pill" | "tech" | "tech-line";
|
|
404
|
+
type TabsType = "line" | "card" | "pill" | "capsule" | "underline" | "tech" | "tech-line";
|
|
405
405
|
type TabsOrientation = "horizontal" | "vertical";
|
|
406
406
|
type TabsPosition = "top" | "right" | "bottom" | "left";
|
|
407
407
|
type TabsContextMenuClickInfo = MenuClickInfo & {
|
|
@@ -401,7 +401,7 @@ interface TabItem {
|
|
|
401
401
|
icon?: ReactNode;
|
|
402
402
|
closable?: boolean;
|
|
403
403
|
}
|
|
404
|
-
type TabsType = "line" | "card" | "pill" | "tech" | "tech-line";
|
|
404
|
+
type TabsType = "line" | "card" | "pill" | "capsule" | "underline" | "tech" | "tech-line";
|
|
405
405
|
type TabsOrientation = "horizontal" | "vertical";
|
|
406
406
|
type TabsPosition = "top" | "right" | "bottom" | "left";
|
|
407
407
|
type TabsContextMenuClickInfo = MenuClickInfo & {
|
package/dist/core.cjs
CHANGED
|
@@ -1621,6 +1621,38 @@ function Tabs({
|
|
|
1621
1621
|
const enabledItems = (0, import_react8.useMemo)(() => items.filter((item) => !item.disabled), [items]);
|
|
1622
1622
|
const resolvedPosition = tabPosition ?? (orientation === "vertical" ? "left" : "top");
|
|
1623
1623
|
const resolvedOrientation = resolvedPosition === "left" || resolvedPosition === "right" ? "vertical" : "horizontal";
|
|
1624
|
+
const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
|
|
1625
|
+
const listRef = (0, import_react8.useRef)(null);
|
|
1626
|
+
const indicatorRef = (0, import_react8.useRef)(null);
|
|
1627
|
+
(0, import_react8.useLayoutEffect)(() => {
|
|
1628
|
+
if (!sliding) return;
|
|
1629
|
+
const list = listRef.current;
|
|
1630
|
+
const indicator = indicatorRef.current;
|
|
1631
|
+
if (!list || !indicator) return;
|
|
1632
|
+
function updateIndicator() {
|
|
1633
|
+
if (!list || !indicator) return;
|
|
1634
|
+
const active = list.querySelector('[role="tab"][aria-selected="true"]');
|
|
1635
|
+
if (!active) {
|
|
1636
|
+
indicator.style.visibility = "hidden";
|
|
1637
|
+
return;
|
|
1638
|
+
}
|
|
1639
|
+
const listRect = list.getBoundingClientRect();
|
|
1640
|
+
const rect = active.getBoundingClientRect();
|
|
1641
|
+
indicator.style.transform = `translate(${rect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${rect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
|
|
1642
|
+
indicator.style.width = `${rect.width}px`;
|
|
1643
|
+
indicator.style.height = `${rect.height}px`;
|
|
1644
|
+
indicator.style.visibility = "visible";
|
|
1645
|
+
if (!indicator.dataset.ready) {
|
|
1646
|
+
indicator.getBoundingClientRect();
|
|
1647
|
+
indicator.dataset.ready = "true";
|
|
1648
|
+
}
|
|
1649
|
+
}
|
|
1650
|
+
updateIndicator();
|
|
1651
|
+
const observer = new ResizeObserver(updateIndicator);
|
|
1652
|
+
observer.observe(list);
|
|
1653
|
+
list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
|
|
1654
|
+
return () => observer.disconnect();
|
|
1655
|
+
}, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
|
|
1624
1656
|
function selectTab(key) {
|
|
1625
1657
|
if (key === selectedKey) return;
|
|
1626
1658
|
if (activeKey === void 0) setInternalActiveKey(key);
|
|
@@ -1646,7 +1678,7 @@ function Tabs({
|
|
|
1646
1678
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1647
1679
|
"div",
|
|
1648
1680
|
{
|
|
1649
|
-
className: `sia-tabs sia-tabs--${type} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
|
|
1681
|
+
className: `sia-tabs sia-tabs--${type}${type === "underline" ? " sia-tabs--line" : ""} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
|
|
1650
1682
|
...props,
|
|
1651
1683
|
children: [
|
|
1652
1684
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "sia-tabs__header", children: [
|
|
@@ -1654,77 +1686,96 @@ function Tabs({
|
|
|
1654
1686
|
tabBarTitle,
|
|
1655
1687
|
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
|
|
1656
1688
|
] }) : null,
|
|
1657
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
"
|
|
1689
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
|
|
1690
|
+
sliding ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
1691
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
1692
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
1693
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
1694
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
1695
|
+
] }) }),
|
|
1696
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1697
|
+
"path",
|
|
1663
1698
|
{
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
"
|
|
1669
|
-
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
1670
|
-
tabIndex: selected ? 0 : -1,
|
|
1671
|
-
disabled: item.disabled,
|
|
1672
|
-
onClick: () => selectTab(item.key),
|
|
1673
|
-
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
1674
|
-
children: [
|
|
1675
|
-
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
1676
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
1677
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
1678
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
1679
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
1680
|
-
] }) }),
|
|
1681
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1682
|
-
"path",
|
|
1683
|
-
{
|
|
1684
|
-
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
1685
|
-
fill: `url(#${baseId}-tab-fill-${item.key})`,
|
|
1686
|
-
stroke: "currentColor",
|
|
1687
|
-
strokeWidth: "1.5",
|
|
1688
|
-
vectorEffect: "non-scaling-stroke"
|
|
1689
|
-
}
|
|
1690
|
-
)
|
|
1691
|
-
] }) : null,
|
|
1692
|
-
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
1693
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label })
|
|
1694
|
-
]
|
|
1699
|
+
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
1700
|
+
fill: `url(#${baseId}-tab-fill-indicator)`,
|
|
1701
|
+
stroke: "currentColor",
|
|
1702
|
+
strokeWidth: "1.5",
|
|
1703
|
+
vectorEffect: "non-scaling-stroke"
|
|
1695
1704
|
}
|
|
1696
|
-
)
|
|
1697
|
-
|
|
1698
|
-
|
|
1705
|
+
)
|
|
1706
|
+
] }) : null }, type) : null,
|
|
1707
|
+
items.map((item) => {
|
|
1708
|
+
const selected = item.key === selectedKey;
|
|
1709
|
+
const canClose = item.closable ?? closable;
|
|
1710
|
+
const tabNode = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
|
|
1711
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1712
|
+
"button",
|
|
1713
|
+
{
|
|
1714
|
+
id: `${baseId}-tab-${item.key}`,
|
|
1715
|
+
type: "button",
|
|
1716
|
+
className: "sia-tabs__tab",
|
|
1717
|
+
role: "tab",
|
|
1718
|
+
"aria-selected": selected,
|
|
1719
|
+
"aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
|
|
1720
|
+
tabIndex: selected ? 0 : -1,
|
|
1721
|
+
disabled: item.disabled,
|
|
1722
|
+
onClick: () => selectTab(item.key),
|
|
1723
|
+
onKeyDown: (event) => handleKeyDown(event, item.key),
|
|
1724
|
+
children: [
|
|
1725
|
+
type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
|
|
1727
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
|
|
1728
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
|
|
1729
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
|
|
1730
|
+
] }) }),
|
|
1731
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1732
|
+
"path",
|
|
1733
|
+
{
|
|
1734
|
+
d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
|
|
1735
|
+
fill: `url(#${baseId}-tab-fill-${item.key})`,
|
|
1736
|
+
stroke: "currentColor",
|
|
1737
|
+
strokeWidth: "1.5",
|
|
1738
|
+
vectorEffect: "non-scaling-stroke"
|
|
1739
|
+
}
|
|
1740
|
+
)
|
|
1741
|
+
] }) : null,
|
|
1742
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label })
|
|
1744
|
+
]
|
|
1745
|
+
}
|
|
1746
|
+
),
|
|
1747
|
+
canClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1748
|
+
"button",
|
|
1749
|
+
{
|
|
1750
|
+
type: "button",
|
|
1751
|
+
className: "sia-tabs__close",
|
|
1752
|
+
"aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
|
|
1753
|
+
disabled: item.disabled,
|
|
1754
|
+
onClick: () => onEdit?.(item.key, "remove"),
|
|
1755
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "close", size: 12 })
|
|
1756
|
+
}
|
|
1757
|
+
) : null
|
|
1758
|
+
] }, item.key);
|
|
1759
|
+
const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
|
|
1760
|
+
if (!contextMenuItems?.length) return tabNode;
|
|
1761
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1762
|
+
Dropdown,
|
|
1699
1763
|
{
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
if (!contextMenuItems?.length) return tabNode;
|
|
1711
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1712
|
-
Dropdown,
|
|
1713
|
-
{
|
|
1714
|
-
className: "sia-tabs__tab-context-trigger",
|
|
1715
|
-
popupClassName: "sia-tabs__tab-context-menu",
|
|
1716
|
-
trigger: ["contextMenu"],
|
|
1717
|
-
tabIndex: -1,
|
|
1718
|
-
menu: {
|
|
1719
|
-
items: contextMenuItems,
|
|
1720
|
-
selectable: false,
|
|
1721
|
-
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
1764
|
+
className: "sia-tabs__tab-context-trigger",
|
|
1765
|
+
popupClassName: "sia-tabs__tab-context-menu",
|
|
1766
|
+
trigger: ["contextMenu"],
|
|
1767
|
+
tabIndex: -1,
|
|
1768
|
+
menu: {
|
|
1769
|
+
items: contextMenuItems,
|
|
1770
|
+
selectable: false,
|
|
1771
|
+
onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
|
|
1772
|
+
},
|
|
1773
|
+
children: tabNode
|
|
1722
1774
|
},
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
}) }),
|
|
1775
|
+
item.key
|
|
1776
|
+
);
|
|
1777
|
+
})
|
|
1778
|
+
] }),
|
|
1728
1779
|
tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
|
|
1729
1780
|
] }),
|
|
1730
1781
|
hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sia-tabs__panels", children: items.map((item) => {
|
|
@@ -2813,6 +2864,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
|
|
|
2813
2864
|
optionHeight = showValue ? 54 : 34,
|
|
2814
2865
|
disabled,
|
|
2815
2866
|
className = "",
|
|
2867
|
+
style,
|
|
2816
2868
|
id,
|
|
2817
2869
|
notFoundContent = "\u6682\u65E0\u6570\u636E",
|
|
2818
2870
|
onKeyDown,
|
|
@@ -3043,7 +3095,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
|
|
|
3043
3095
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
3044
3096
|
}
|
|
3045
3097
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
3046
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
|
|
3098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
|
|
3047
3099
|
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
3048
3100
|
"button",
|
|
3049
3101
|
{
|