@sia.soul/sia-react-ui 0.1.76 → 0.1.78
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/chart.js +2 -3
- package/dist/{chunk-Q4FDV6KP.js → chunk-BDS42FR3.js} +2 -4
- package/dist/{chunk-JNZXYBGM.js → chunk-GODBVCIQ.js} +2 -2
- package/dist/chunk-JZWTTSOZ.js +131 -0
- package/dist/{chunk-QDZXP2UO.js → chunk-NK2FZWKM.js} +8 -10
- package/dist/{chunk-TKCXP6RZ.js → chunk-WXERMWTW.js} +113 -436
- package/dist/{chunk-YMOOL62S.js → chunk-XHLIIDD2.js} +407 -21
- package/dist/{chunk-TG7ZYXA7.js → chunk-Y4Y2NVBM.js} +35 -12
- package/dist/{core-CBLT4Vfl.d.ts → core-0ml74Q-C.d.ts} +7 -0
- package/dist/{core-Bx07vzrr.d.cts → core-vGTHkzIa.d.cts} +7 -0
- package/dist/core.cjs +336 -275
- package/dist/core.css +19 -0
- package/dist/core.d.cts +1 -1
- package/dist/core.d.ts +1 -1
- package/dist/core.js +5 -6
- package/dist/index.cjs +1038 -952
- package/dist/index.css +19 -0
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +13 -15
- package/dist/rich-text-editor.cjs +522 -74
- package/dist/rich-text-editor.js +3 -3
- package/dist/{select-date-range-DN4eBuVx.d.cts → select-date-range-CRWxqHFp.d.cts} +2 -2
- package/dist/{select-date-range-YrK9kuKW.d.ts → select-date-range-rtYL9egr.d.ts} +2 -2
- package/dist/select-date-range.cjs +338 -188
- package/dist/select-date-range.d.cts +1 -1
- package/dist/select-date-range.d.ts +1 -1
- package/dist/select-date-range.js +4 -4
- package/package.json +1 -1
- package/dist/chunk-IKAMZNCK.js +0 -65
- package/dist/chunk-SMCYEPBL.js +0 -73
package/dist/index.cjs
CHANGED
|
@@ -1973,7 +1973,7 @@ function Alert({
|
|
|
1973
1973
|
}
|
|
1974
1974
|
|
|
1975
1975
|
// src/components/Pagination.tsx
|
|
1976
|
-
var
|
|
1976
|
+
var import_react21 = require("react");
|
|
1977
1977
|
|
|
1978
1978
|
// src/components/FloatingPlaceholder.tsx
|
|
1979
1979
|
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
@@ -1987,7 +1987,7 @@ function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
|
|
|
1987
1987
|
}
|
|
1988
1988
|
|
|
1989
1989
|
// src/components/Select.tsx
|
|
1990
|
-
var
|
|
1990
|
+
var import_react20 = require("react");
|
|
1991
1991
|
|
|
1992
1992
|
// src/components/Modal.tsx
|
|
1993
1993
|
var import_react11 = require("react");
|
|
@@ -2311,9 +2311,75 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
2311
2311
|
});
|
|
2312
2312
|
|
|
2313
2313
|
// src/components/Input.tsx
|
|
2314
|
+
var import_react13 = require("react");
|
|
2315
|
+
|
|
2316
|
+
// src/components/TextArea.tsx
|
|
2314
2317
|
var import_react12 = require("react");
|
|
2315
2318
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2316
|
-
var
|
|
2319
|
+
var TextArea = (0, import_react12.forwardRef)(function TextArea2({
|
|
2320
|
+
label,
|
|
2321
|
+
hint,
|
|
2322
|
+
status = "default",
|
|
2323
|
+
size: sizeProp,
|
|
2324
|
+
showCount = false,
|
|
2325
|
+
placeholder,
|
|
2326
|
+
placeholderMode,
|
|
2327
|
+
className = "",
|
|
2328
|
+
id,
|
|
2329
|
+
disabled,
|
|
2330
|
+
value,
|
|
2331
|
+
defaultValue,
|
|
2332
|
+
maxLength,
|
|
2333
|
+
onChange,
|
|
2334
|
+
...props
|
|
2335
|
+
}, ref) {
|
|
2336
|
+
const size = useControlSize(sizeProp);
|
|
2337
|
+
const fallbackId = (0, import_react12.useId)();
|
|
2338
|
+
const textAreaId = id ?? fallbackId;
|
|
2339
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react12.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2340
|
+
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2341
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
2342
|
+
const hintId = `${textAreaId}-hint`;
|
|
2343
|
+
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
2344
|
+
function handleChange(event) {
|
|
2345
|
+
setUncontrolledValue(event.target.value);
|
|
2346
|
+
onChange?.(event);
|
|
2347
|
+
}
|
|
2348
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
2349
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2350
|
+
"textarea",
|
|
2351
|
+
{
|
|
2352
|
+
...withTitleTooltip(props),
|
|
2353
|
+
ref,
|
|
2354
|
+
id: textAreaId,
|
|
2355
|
+
className: "sia-textarea",
|
|
2356
|
+
disabled,
|
|
2357
|
+
value,
|
|
2358
|
+
defaultValue,
|
|
2359
|
+
maxLength,
|
|
2360
|
+
placeholder,
|
|
2361
|
+
"aria-describedby": describedBy,
|
|
2362
|
+
"aria-invalid": status === "error" || void 0,
|
|
2363
|
+
onChange: handleChange
|
|
2364
|
+
}
|
|
2365
|
+
),
|
|
2366
|
+
floating.label,
|
|
2367
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
2368
|
+
currentText.length,
|
|
2369
|
+
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2370
|
+
] }) : null
|
|
2371
|
+
] });
|
|
2372
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
2373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
2374
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
2375
|
+
control,
|
|
2376
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
2377
|
+
] });
|
|
2378
|
+
});
|
|
2379
|
+
|
|
2380
|
+
// src/components/Input.tsx
|
|
2381
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2382
|
+
var Input = (0, import_react13.forwardRef)(function Input2({
|
|
2317
2383
|
label,
|
|
2318
2384
|
hint,
|
|
2319
2385
|
status = "default",
|
|
@@ -2332,15 +2398,18 @@ var Input = (0, import_react12.forwardRef)(function Input2({
|
|
|
2332
2398
|
defaultValue,
|
|
2333
2399
|
maxLength,
|
|
2334
2400
|
onChange,
|
|
2401
|
+
expandable = false,
|
|
2335
2402
|
...props
|
|
2336
2403
|
}, forwardedRef) {
|
|
2337
2404
|
const size = useControlSize(sizeProp);
|
|
2338
|
-
const fallbackId = (0,
|
|
2405
|
+
const fallbackId = (0, import_react13.useId)();
|
|
2339
2406
|
const inputId = id ?? fallbackId;
|
|
2340
|
-
const localRef = (0,
|
|
2341
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
2407
|
+
const localRef = (0, import_react13.useRef)(null);
|
|
2408
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react13.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2342
2409
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2343
2410
|
const hasValue = currentText.length > 0;
|
|
2411
|
+
const [expanded, setExpanded] = (0, import_react13.useState)(false);
|
|
2412
|
+
const [expandedDraft, setExpandedDraft] = (0, import_react13.useState)("");
|
|
2344
2413
|
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
2345
2414
|
const hintId = `${inputId}-hint`;
|
|
2346
2415
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
@@ -2376,7 +2445,7 @@ var Input = (0, import_react12.forwardRef)(function Input2({
|
|
|
2376
2445
|
event.preventDefault();
|
|
2377
2446
|
localRef.current?.focus({ preventScroll: true });
|
|
2378
2447
|
}
|
|
2379
|
-
const input = /* @__PURE__ */ (0,
|
|
2448
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2380
2449
|
"input",
|
|
2381
2450
|
{
|
|
2382
2451
|
...withTitleTooltip(props),
|
|
@@ -2393,39 +2462,97 @@ var Input = (0, import_react12.forwardRef)(function Input2({
|
|
|
2393
2462
|
onChange: handleChange
|
|
2394
2463
|
}
|
|
2395
2464
|
);
|
|
2396
|
-
const control = /* @__PURE__ */ (0,
|
|
2397
|
-
prefix ? /* @__PURE__ */ (0,
|
|
2398
|
-
floatingPlaceholder ? /* @__PURE__ */ (0,
|
|
2465
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { onMouseDown: handleControlMouseDown, className: `sia-input-control sia-input-control--${size} sia-input-control--${status}${floatingPlaceholder ? " sia-input-control--floating" : ""}${floatingPlaceholder && hasValue ? " is-filled" : ""}${disabled ? " is-disabled" : ""}`, children: [
|
|
2466
|
+
prefix ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-input-control__affix", children: prefix }) : null,
|
|
2467
|
+
floatingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "sia-input-control__input-wrap", children: [
|
|
2399
2468
|
input,
|
|
2400
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
|
|
2401
2470
|
] }) : input,
|
|
2402
|
-
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0,
|
|
2403
|
-
suffix ? /* @__PURE__ */ (0,
|
|
2404
|
-
|
|
2471
|
+
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
2472
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-input-control__affix", children: suffix }) : null,
|
|
2473
|
+
expandable && !disabled && !props.readOnly && (!props.type || props.type === "text") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2474
|
+
"button",
|
|
2475
|
+
{
|
|
2476
|
+
type: "button",
|
|
2477
|
+
className: "sia-input-control__expand",
|
|
2478
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91",
|
|
2479
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
2480
|
+
onClick: () => {
|
|
2481
|
+
if (localRef.current?.matches(":disabled")) return;
|
|
2482
|
+
setExpandedDraft(currentText);
|
|
2483
|
+
setExpanded(true);
|
|
2484
|
+
},
|
|
2485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "expand", size: 15 })
|
|
2486
|
+
}
|
|
2487
|
+
) : null,
|
|
2488
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
2405
2489
|
currentText.length,
|
|
2406
2490
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2407
2491
|
] }) : null
|
|
2408
2492
|
] });
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2493
|
+
const editor = expandable ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2494
|
+
Modal2,
|
|
2495
|
+
{
|
|
2496
|
+
open: expanded,
|
|
2497
|
+
title: "\u5C55\u5F00\u7F16\u8F91",
|
|
2498
|
+
okText: "\u786E\u5B9A",
|
|
2499
|
+
cancelText: "\u53D6\u6D88",
|
|
2500
|
+
onCancel: () => setExpanded(false),
|
|
2501
|
+
afterOpenChange: (open) => {
|
|
2502
|
+
if (!open) setExpandedDraft("");
|
|
2503
|
+
},
|
|
2504
|
+
onOk: () => {
|
|
2505
|
+
const target = localRef.current;
|
|
2506
|
+
if (!target || target.matches(":disabled") || props.readOnly) return false;
|
|
2507
|
+
const normalized = expandedDraft.replace(/\r\n|[\r\n]/g, " ");
|
|
2508
|
+
const next = maxLength !== void 0 && maxLength >= 0 ? normalized.slice(0, maxLength) : normalized;
|
|
2509
|
+
Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(target, next);
|
|
2510
|
+
target.dispatchEvent(new Event("input", { bubbles: true }));
|
|
2511
|
+
setUncontrolledValue(next);
|
|
2512
|
+
setExpanded(false);
|
|
2513
|
+
},
|
|
2514
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2515
|
+
TextArea,
|
|
2516
|
+
{
|
|
2517
|
+
"aria-label": "\u5C55\u5F00\u7F16\u8F91\u5185\u5BB9",
|
|
2518
|
+
value: expandedDraft,
|
|
2519
|
+
onChange: (event) => setExpandedDraft(event.target.value),
|
|
2520
|
+
maxLength,
|
|
2521
|
+
showCount,
|
|
2522
|
+
placeholder,
|
|
2523
|
+
rows: 8,
|
|
2524
|
+
disabled,
|
|
2525
|
+
readOnly: props.readOnly
|
|
2526
|
+
}
|
|
2527
|
+
)
|
|
2528
|
+
}
|
|
2529
|
+
) : null;
|
|
2530
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
2531
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `sia-field ${className}`.trim(), children: control }),
|
|
2532
|
+
editor
|
|
2533
|
+
] });
|
|
2534
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
|
|
2535
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
2536
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
|
|
2537
|
+
control,
|
|
2538
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
2539
|
+
] }),
|
|
2540
|
+
editor
|
|
2414
2541
|
] });
|
|
2415
2542
|
});
|
|
2416
2543
|
|
|
2417
2544
|
// src/components/Checkbox.tsx
|
|
2418
|
-
var
|
|
2419
|
-
var
|
|
2420
|
-
var CheckboxGroupContext = (0,
|
|
2421
|
-
var CheckboxRoot = (0,
|
|
2545
|
+
var import_react14 = require("react");
|
|
2546
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2547
|
+
var CheckboxGroupContext = (0, import_react14.createContext)(null);
|
|
2548
|
+
var CheckboxRoot = (0, import_react14.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
|
|
2422
2549
|
const size = useControlSize(sizeProp);
|
|
2423
|
-
const group = (0,
|
|
2424
|
-
const localRef = (0,
|
|
2425
|
-
const fallbackId = (0,
|
|
2550
|
+
const group = (0, import_react14.useContext)(CheckboxGroupContext);
|
|
2551
|
+
const localRef = (0, import_react14.useRef)(null);
|
|
2552
|
+
const fallbackId = (0, import_react14.useId)();
|
|
2426
2553
|
const grouped = group !== null && value !== void 0;
|
|
2427
2554
|
const currentChecked = grouped ? group.values.includes(value) : checked;
|
|
2428
|
-
(0,
|
|
2555
|
+
(0, import_react14.useEffect)(() => {
|
|
2429
2556
|
if (localRef.current) localRef.current.indeterminate = indeterminate;
|
|
2430
2557
|
}, [indeterminate]);
|
|
2431
2558
|
function setRef(node) {
|
|
@@ -2433,8 +2560,8 @@ var CheckboxRoot = (0, import_react13.forwardRef)(function Checkbox({ value, siz
|
|
|
2433
2560
|
if (typeof forwardedRef === "function") forwardedRef(node);
|
|
2434
2561
|
else if (forwardedRef) forwardedRef.current = node;
|
|
2435
2562
|
}
|
|
2436
|
-
return /* @__PURE__ */ (0,
|
|
2437
|
-
/* @__PURE__ */ (0,
|
|
2563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: `sia-checkbox sia-checkbox--${size}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
2564
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2438
2565
|
"input",
|
|
2439
2566
|
{
|
|
2440
2567
|
...withTitleTooltip(props),
|
|
@@ -2453,8 +2580,8 @@ var CheckboxRoot = (0, import_react13.forwardRef)(function Checkbox({ value, siz
|
|
|
2453
2580
|
}
|
|
2454
2581
|
}
|
|
2455
2582
|
),
|
|
2456
|
-
/* @__PURE__ */ (0,
|
|
2457
|
-
children !== void 0 ? /* @__PURE__ */ (0,
|
|
2583
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-checkbox__control", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", {}) }),
|
|
2584
|
+
children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sia-checkbox__label", children }) : null
|
|
2458
2585
|
] });
|
|
2459
2586
|
});
|
|
2460
2587
|
function CheckboxGroup({
|
|
@@ -2478,7 +2605,7 @@ function CheckboxGroup({
|
|
|
2478
2605
|
gap: gap === void 0 ? void 0 : typeof gap === "number" ? Math.max(0, gap) : `${Math.max(0, gap[0])}px ${Math.max(0, gap[1])}px`
|
|
2479
2606
|
};
|
|
2480
2607
|
const [values, setValues] = useControllableState({ value, defaultValue, onChange });
|
|
2481
|
-
const context = (0,
|
|
2608
|
+
const context = (0, import_react14.useMemo)(() => ({
|
|
2482
2609
|
values,
|
|
2483
2610
|
disabled,
|
|
2484
2611
|
name,
|
|
@@ -2487,10 +2614,10 @@ function CheckboxGroup({
|
|
|
2487
2614
|
setValues(next);
|
|
2488
2615
|
}
|
|
2489
2616
|
}), [disabled, name, setValues, values]);
|
|
2490
|
-
return /* @__PURE__ */ (0,
|
|
2617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `sia-checkbox-group${gridColumns ? " sia-checkbox-group--grid" : direction === "vertical" ? " sia-checkbox-group--vertical" : ""} ${className}`.trim(), style: layoutStyle, role: "group", children: [
|
|
2491
2618
|
options?.map((option) => {
|
|
2492
2619
|
const normalized = typeof option === "object" ? option : { label: String(option), value: option };
|
|
2493
|
-
return /* @__PURE__ */ (0,
|
|
2620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
|
|
2494
2621
|
}),
|
|
2495
2622
|
children
|
|
2496
2623
|
] }) }) });
|
|
@@ -2501,7 +2628,7 @@ var Checkbox2 = Object.assign(CheckboxRoot, {
|
|
|
2501
2628
|
});
|
|
2502
2629
|
|
|
2503
2630
|
// src/components/SelectionPanel.tsx
|
|
2504
|
-
var
|
|
2631
|
+
var import_react18 = require("react");
|
|
2505
2632
|
|
|
2506
2633
|
// src/components/treeCheckState.ts
|
|
2507
2634
|
function affectedKeys(node) {
|
|
@@ -2559,18 +2686,18 @@ function toggleTreeCheck(nodes, keys, node, strictly = false) {
|
|
|
2559
2686
|
}
|
|
2560
2687
|
|
|
2561
2688
|
// src/components/FloatingDisplay.tsx
|
|
2562
|
-
var
|
|
2689
|
+
var import_react17 = require("react");
|
|
2563
2690
|
var import_react_dom3 = require("react-dom");
|
|
2564
2691
|
|
|
2565
2692
|
// src/components/FloatingScrollbarProvider.tsx
|
|
2566
|
-
var
|
|
2693
|
+
var import_react16 = require("react");
|
|
2567
2694
|
|
|
2568
2695
|
// src/components/useScrollbarProximity.ts
|
|
2569
|
-
var
|
|
2696
|
+
var import_react15 = require("react");
|
|
2570
2697
|
var users = 0;
|
|
2571
2698
|
var cleanup;
|
|
2572
2699
|
function useScrollbarProximity() {
|
|
2573
|
-
(0,
|
|
2700
|
+
(0, import_react15.useEffect)(() => {
|
|
2574
2701
|
if (users++ === 0) {
|
|
2575
2702
|
let frame = 0;
|
|
2576
2703
|
let x = -Infinity;
|
|
@@ -2691,7 +2818,7 @@ function createTrack(axis) {
|
|
|
2691
2818
|
}
|
|
2692
2819
|
function FloatingScrollbarProvider({ disabled = false, targetRef }) {
|
|
2693
2820
|
useScrollbarProximity();
|
|
2694
|
-
(0,
|
|
2821
|
+
(0, import_react16.useEffect)(() => {
|
|
2695
2822
|
if (disabled) return;
|
|
2696
2823
|
const layer = document.createElement("div");
|
|
2697
2824
|
layer.className = "sia-floating-scrollbar-layer";
|
|
@@ -2951,7 +3078,7 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
|
|
|
2951
3078
|
}
|
|
2952
3079
|
|
|
2953
3080
|
// src/components/FloatingDisplay.tsx
|
|
2954
|
-
var
|
|
3081
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2955
3082
|
var FLOATING_GAP = 9;
|
|
2956
3083
|
var FLOATING_VIEWPORT_PADDING = 8;
|
|
2957
3084
|
var FLOATING_ARROW_EDGE_OFFSET = 16;
|
|
@@ -3036,23 +3163,23 @@ function Floating({
|
|
|
3036
3163
|
role = "tooltip",
|
|
3037
3164
|
onOpenChange
|
|
3038
3165
|
}) {
|
|
3039
|
-
const rootRef = (0,
|
|
3040
|
-
const triggerElementRef = (0,
|
|
3041
|
-
const overlayRef = (0,
|
|
3042
|
-
const enterTimer = (0,
|
|
3043
|
-
const leaveTimer = (0,
|
|
3044
|
-
const contentId = (0,
|
|
3166
|
+
const rootRef = (0, import_react17.useRef)(null);
|
|
3167
|
+
const triggerElementRef = (0, import_react17.useRef)(null);
|
|
3168
|
+
const overlayRef = (0, import_react17.useRef)(null);
|
|
3169
|
+
const enterTimer = (0, import_react17.useRef)();
|
|
3170
|
+
const leaveTimer = (0, import_react17.useRef)();
|
|
3171
|
+
const contentId = (0, import_react17.useId)();
|
|
3045
3172
|
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
3046
3173
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
3047
|
-
const [position, setPosition] = (0,
|
|
3048
|
-
const [portalContainer, setPortalContainer] = (0,
|
|
3049
|
-
(0,
|
|
3174
|
+
const [position, setPosition] = (0, import_react17.useState)();
|
|
3175
|
+
const [portalContainer, setPortalContainer] = (0, import_react17.useState)(null);
|
|
3176
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3050
3177
|
if (!visible) return;
|
|
3051
3178
|
setPortalContainer(rootRef.current?.closest(".sia-modal-root, .sia-drawer-root") ?? document.body);
|
|
3052
3179
|
});
|
|
3053
|
-
const setVisibleRef = (0,
|
|
3180
|
+
const setVisibleRef = (0, import_react17.useRef)(setVisible);
|
|
3054
3181
|
setVisibleRef.current = setVisible;
|
|
3055
|
-
const closeSelfRef = (0,
|
|
3182
|
+
const closeSelfRef = (0, import_react17.useRef)();
|
|
3056
3183
|
if (!closeSelfRef.current) closeSelfRef.current = () => setVisibleRef.current(false);
|
|
3057
3184
|
const exclusiveTooltip = role === "tooltip" && triggers.includes("hover");
|
|
3058
3185
|
function openNow() {
|
|
@@ -3080,7 +3207,7 @@ function Floating({
|
|
|
3080
3207
|
if (delay <= 0) closeNow();
|
|
3081
3208
|
else leaveTimer.current = window.setTimeout(closeNow, delay * 1e3);
|
|
3082
3209
|
}
|
|
3083
|
-
(0,
|
|
3210
|
+
(0, import_react17.useEffect)(() => {
|
|
3084
3211
|
if (!visible || !triggers.includes("click")) return;
|
|
3085
3212
|
const close = (event) => {
|
|
3086
3213
|
const target = event.target;
|
|
@@ -3089,7 +3216,7 @@ function Floating({
|
|
|
3089
3216
|
document.addEventListener("pointerdown", close);
|
|
3090
3217
|
return () => document.removeEventListener("pointerdown", close);
|
|
3091
3218
|
}, [triggers.join("|"), visible]);
|
|
3092
|
-
(0,
|
|
3219
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3093
3220
|
if (!visible) {
|
|
3094
3221
|
setPosition(void 0);
|
|
3095
3222
|
return;
|
|
@@ -3127,11 +3254,11 @@ function Floating({
|
|
|
3127
3254
|
observer.disconnect();
|
|
3128
3255
|
};
|
|
3129
3256
|
}, [children, content, placement, visible, portalContainer, autoAdjustOverflow, typeof arrow === "object" && arrow.pointAtCenter]);
|
|
3130
|
-
(0,
|
|
3257
|
+
(0, import_react17.useEffect)(() => () => {
|
|
3131
3258
|
clearTimers();
|
|
3132
3259
|
if (activeTooltipClose === closeSelfRef.current) activeTooltipClose = void 0;
|
|
3133
3260
|
}, []);
|
|
3134
|
-
const child = (0,
|
|
3261
|
+
const child = (0, import_react17.cloneElement)(children, {
|
|
3135
3262
|
...triggers.includes("hover") ? { onMouseEnter: (event) => {
|
|
3136
3263
|
triggerElementRef.current = event.currentTarget;
|
|
3137
3264
|
children.props.onMouseEnter?.(event);
|
|
@@ -3157,7 +3284,7 @@ function Floating({
|
|
|
3157
3284
|
"aria-describedby": visible ? contentId : void 0
|
|
3158
3285
|
});
|
|
3159
3286
|
const overlay = visible && content !== null && content !== void 0 && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
3160
|
-
/* @__PURE__ */ (0,
|
|
3287
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3161
3288
|
"span",
|
|
3162
3289
|
{
|
|
3163
3290
|
ref: overlayRef,
|
|
@@ -3177,35 +3304,35 @@ function Floating({
|
|
|
3177
3304
|
onMouseLeave: triggers.includes("hover") ? () => hide(mouseLeaveDelay) : void 0,
|
|
3178
3305
|
children: [
|
|
3179
3306
|
content,
|
|
3180
|
-
arrow ? /* @__PURE__ */ (0,
|
|
3307
|
+
arrow ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-floating__arrow" }) : null
|
|
3181
3308
|
]
|
|
3182
3309
|
}
|
|
3183
3310
|
),
|
|
3184
3311
|
portalContainer ?? document.body
|
|
3185
3312
|
) : null;
|
|
3186
|
-
return /* @__PURE__ */ (0,
|
|
3187
|
-
/* @__PURE__ */ (0,
|
|
3313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
3314
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { ref: rootRef, className: `sia-floating ${className}`.trim(), children: child }),
|
|
3188
3315
|
overlay
|
|
3189
3316
|
] });
|
|
3190
3317
|
}
|
|
3191
3318
|
function Tooltip(props) {
|
|
3192
|
-
return /* @__PURE__ */ (0,
|
|
3319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Floating, { ...props, content: props.title });
|
|
3193
3320
|
}
|
|
3194
3321
|
function Popover({ title, content, trigger = "click", overlayClassName = "", ...props }) {
|
|
3195
|
-
return /* @__PURE__ */ (0,
|
|
3196
|
-
title ? /* @__PURE__ */ (0,
|
|
3197
|
-
/* @__PURE__ */ (0,
|
|
3322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Floating, { ...props, trigger, role: "dialog", overlayClassName: `sia-popover ${overlayClassName}`.trim(), content: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
|
|
3323
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "sia-popover__title", children: title }) : null,
|
|
3324
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-popover__content", children: content })
|
|
3198
3325
|
] }) });
|
|
3199
3326
|
}
|
|
3200
3327
|
function Timeline({ items = [], mode = "left", pending = false, pendingDot, reverse = false, className = "", ...props }) {
|
|
3201
|
-
const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ (0,
|
|
3328
|
+
const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "loader", className: "sia-spin-icon" }) }] : []];
|
|
3202
3329
|
if (reverse) values.reverse();
|
|
3203
|
-
return /* @__PURE__ */ (0,
|
|
3330
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...withTitleTooltip(props), children: values.map((item, index) => {
|
|
3204
3331
|
const position = item.position ?? (mode === "alternate" ? index % 2 ? "right" : "left" : mode);
|
|
3205
|
-
return /* @__PURE__ */ (0,
|
|
3206
|
-
item.label ? /* @__PURE__ */ (0,
|
|
3207
|
-
/* @__PURE__ */ (0,
|
|
3208
|
-
/* @__PURE__ */ (0,
|
|
3332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: `sia-timeline__item sia-timeline__item--${position}`, children: [
|
|
3333
|
+
item.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-timeline__label", children: item.label }) : null,
|
|
3334
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-timeline__rail", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-timeline__dot", style: { color: item.color && !["blue", "red", "green", "gray"].includes(item.color) ? item.color : void 0 }, "data-color": item.color ?? "blue", children: item.dot }) }),
|
|
3335
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-timeline__content", children: item.children })
|
|
3209
3336
|
] }, index);
|
|
3210
3337
|
}) });
|
|
3211
3338
|
}
|
|
@@ -3258,20 +3385,20 @@ function Tree({
|
|
|
3258
3385
|
className = "",
|
|
3259
3386
|
...props
|
|
3260
3387
|
}) {
|
|
3261
|
-
const scrollRef = (0,
|
|
3388
|
+
const scrollRef = (0, import_react17.useRef)(null);
|
|
3262
3389
|
const [selected, setSelected] = useControllableState({ value: selectedKeys, defaultValue: defaultSelectedKeys });
|
|
3263
3390
|
const [expanded, setExpanded] = useControllableState({ value: expandedKeys, defaultValue: defaultExpandAll ? collectKeys(treeData, true) : defaultExpandedKeys });
|
|
3264
3391
|
const [checked, setChecked] = useControllableState({ value: checkedKeys, defaultValue: defaultCheckedKeys });
|
|
3265
|
-
const [loading, setLoading] = (0,
|
|
3266
|
-
const controlledLoading = (0,
|
|
3267
|
-
const selectedKeySet = (0,
|
|
3268
|
-
const expandedKeySet = (0,
|
|
3269
|
-
const flatNodes = (0,
|
|
3392
|
+
const [loading, setLoading] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
|
|
3393
|
+
const controlledLoading = (0, import_react17.useMemo)(() => new Set(loadingKeys), [loadingKeys]);
|
|
3394
|
+
const selectedKeySet = (0, import_react17.useMemo)(() => new Set(selected), [selected]);
|
|
3395
|
+
const expandedKeySet = (0, import_react17.useMemo)(() => new Set(expanded), [expanded]);
|
|
3396
|
+
const flatNodes = (0, import_react17.useMemo)(() => flattenVisibleTree(treeData, expandedKeySet), [expandedKeySet, treeData]);
|
|
3270
3397
|
const normalizedVirtualThreshold = Math.max(1, Math.floor(virtualThreshold));
|
|
3271
3398
|
const normalizedVirtualItemHeight = Math.max(1, virtualItemHeight ?? stickyRowHeight);
|
|
3272
3399
|
const wantsVirtualScroll = virtual && flatNodes.length >= normalizedVirtualThreshold;
|
|
3273
|
-
const [virtualViewport, setVirtualViewport] = (0,
|
|
3274
|
-
(0,
|
|
3400
|
+
const [virtualViewport, setVirtualViewport] = (0, import_react17.useState)({ height: 0, scrollTop: 0, ownsScroll: true });
|
|
3401
|
+
(0, import_react17.useLayoutEffect)(() => {
|
|
3275
3402
|
if (!wantsVirtualScroll) return void 0;
|
|
3276
3403
|
const element = scrollRef.current;
|
|
3277
3404
|
if (!element) return void 0;
|
|
@@ -3297,7 +3424,7 @@ function Tree({
|
|
|
3297
3424
|
};
|
|
3298
3425
|
}, [className, props.style, wantsVirtualScroll]);
|
|
3299
3426
|
const virtualEnabled = wantsVirtualScroll && virtualViewport.ownsScroll;
|
|
3300
|
-
const virtualWindow = (0,
|
|
3427
|
+
const virtualWindow = (0, import_react17.useMemo)(() => {
|
|
3301
3428
|
if (!virtualEnabled) return { start: 0, end: flatNodes.length };
|
|
3302
3429
|
const overscan = 8;
|
|
3303
3430
|
const viewportHeight = virtualViewport.height || normalizedVirtualItemHeight * 12;
|
|
@@ -3306,13 +3433,13 @@ function Tree({
|
|
|
3306
3433
|
const end = Math.min(flatNodes.length, Math.ceil((virtualViewport.scrollTop + viewportHeight) / normalizedVirtualItemHeight) + overscan);
|
|
3307
3434
|
return { start, end };
|
|
3308
3435
|
}, [flatNodes.length, normalizedVirtualItemHeight, virtualEnabled, virtualViewport.height, virtualViewport.scrollTop]);
|
|
3309
|
-
const flatNodeByKey = (0,
|
|
3310
|
-
const virtualStickyNodes = (0,
|
|
3436
|
+
const flatNodeByKey = (0, import_react17.useMemo)(() => new Map(flatNodes.map((item) => [item.node.key, item])), [flatNodes]);
|
|
3437
|
+
const virtualStickyNodes = (0, import_react17.useMemo)(() => {
|
|
3311
3438
|
if (!virtualEnabled || !stickyAncestors || !flatNodes.length) return [];
|
|
3312
3439
|
const anchorIndex = Math.min(flatNodes.length - 1, Math.max(0, Math.floor(virtualViewport.scrollTop / normalizedVirtualItemHeight)));
|
|
3313
3440
|
return flatNodes[anchorIndex].ancestorKeys.map((key) => flatNodeByKey.get(key)).filter((item) => Boolean(item));
|
|
3314
3441
|
}, [flatNodeByKey, flatNodes, normalizedVirtualItemHeight, stickyAncestors, virtualEnabled, virtualViewport.scrollTop]);
|
|
3315
|
-
const selectedAncestorKeys = (0,
|
|
3442
|
+
const selectedAncestorKeys = (0, import_react17.useMemo)(() => {
|
|
3316
3443
|
const ancestors = /* @__PURE__ */ new Set();
|
|
3317
3444
|
const visit = (nodes, parentKeys) => {
|
|
3318
3445
|
nodes.forEach((node) => {
|
|
@@ -3323,10 +3450,10 @@ function Tree({
|
|
|
3323
3450
|
visit(treeData, []);
|
|
3324
3451
|
return ancestors;
|
|
3325
3452
|
}, [selectedKeySet, treeData]);
|
|
3326
|
-
const dragNodeRef = (0,
|
|
3327
|
-
const pointerDragRef = (0,
|
|
3328
|
-
const suppressClickRef = (0,
|
|
3329
|
-
const [dragOver, setDragOver] = (0,
|
|
3453
|
+
const dragNodeRef = (0, import_react17.useRef)();
|
|
3454
|
+
const pointerDragRef = (0, import_react17.useRef)();
|
|
3455
|
+
const suppressClickRef = (0, import_react17.useRef)(false);
|
|
3456
|
+
const [dragOver, setDragOver] = (0, import_react17.useState)();
|
|
3330
3457
|
const normalizedSwitcherWidth = Math.max(0, switcherWidth);
|
|
3331
3458
|
async function toggleExpand(node) {
|
|
3332
3459
|
const nextExpanded = !expanded.includes(node.key);
|
|
@@ -3346,7 +3473,7 @@ function Tree({
|
|
|
3346
3473
|
setExpanded(next);
|
|
3347
3474
|
onExpand?.([...next], { expanded: nextExpanded, node });
|
|
3348
3475
|
}
|
|
3349
|
-
const checkState = (0,
|
|
3476
|
+
const checkState = (0, import_react17.useMemo)(() => getTreeCheckState(treeData, checked, checkStrictly), [treeData, checked, checkStrictly]);
|
|
3350
3477
|
function check(node) {
|
|
3351
3478
|
const next = toggleTreeCheck(treeData, checked, node, checkStrictly);
|
|
3352
3479
|
setChecked([...next.checked]);
|
|
@@ -3444,7 +3571,7 @@ function Tree({
|
|
|
3444
3571
|
const dropPosition = dragOver?.key === node.key ? dragOver.position : void 0;
|
|
3445
3572
|
const virtualNodeClassName = options.stickySlot !== void 0 ? " sia-tree__virtual-sticky-node" : options.virtualTop !== void 0 ? " sia-tree__virtual-node" : "";
|
|
3446
3573
|
const virtualNodeStyle = options.stickySlot !== void 0 ? { top: options.stickySlot * normalizedVirtualItemHeight, height: normalizedVirtualItemHeight } : options.virtualTop !== void 0 ? { transform: `translateY(${options.virtualTop}px)`, height: normalizedVirtualItemHeight } : void 0;
|
|
3447
|
-
return /* @__PURE__ */ (0,
|
|
3574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3448
3575
|
"div",
|
|
3449
3576
|
{
|
|
3450
3577
|
className: `sia-tree__node${virtualNodeClassName}${isSelected ? " is-selected" : ""}${isSelectedAncestor ? " is-selected-ancestor" : ""}${dropPosition ? ` is-drag-over-${dropPosition}` : ""}${node.disabled ? " is-disabled" : ""}${unloaded ? " is-unloaded" : ""}`,
|
|
@@ -3456,8 +3583,8 @@ function Tree({
|
|
|
3456
3583
|
"aria-posinset": options.positionInSet,
|
|
3457
3584
|
"aria-setsize": options.setSize,
|
|
3458
3585
|
children: [
|
|
3459
|
-
virtualizedNode && showLine && depth > 0 ? /* @__PURE__ */ (0,
|
|
3460
|
-
/* @__PURE__ */ (0,
|
|
3586
|
+
virtualizedNode && showLine && depth > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__virtual-guides", "aria-hidden": "true", children: Array.from({ length: depth }, (_, guideDepth) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__virtual-guide", style: { insetInlineStart: (guideDepth + 1) * Math.max(0, indentSize) } }, guideDepth)) }) : null,
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3461
3588
|
"div",
|
|
3462
3589
|
{
|
|
3463
3590
|
...withTitleTooltip(rowProps),
|
|
@@ -3479,15 +3606,15 @@ function Tree({
|
|
|
3479
3606
|
if (hasChildren) void toggleExpand(node);
|
|
3480
3607
|
},
|
|
3481
3608
|
children: (() => {
|
|
3482
|
-
const content = /* @__PURE__ */ (0,
|
|
3483
|
-
hasChildren ? /* @__PURE__ */ (0,
|
|
3609
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "sia-tree__context-content", children: [
|
|
3610
|
+
hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, disabled: node.disabled, onClick: (event) => {
|
|
3484
3611
|
event.stopPropagation();
|
|
3485
3612
|
void toggleExpand(node);
|
|
3486
|
-
}, children: nodeLoading ? /* @__PURE__ */ (0,
|
|
3487
|
-
checkable || node.checkable ? /* @__PURE__ */ (0,
|
|
3488
|
-
node.prefix ? /* @__PURE__ */ (0,
|
|
3489
|
-
showIcon ? /* @__PURE__ */ (0,
|
|
3490
|
-
/* @__PURE__ */ (0,
|
|
3613
|
+
}, children: nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "loader", className: "sia-spin-icon", size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: open ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__switcher", "aria-label": open ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", "aria-expanded": open, style: { width: normalizedSwitcherWidth, flexBasis: normalizedSwitcherWidth }, "aria-hidden": "true" }),
|
|
3614
|
+
checkable || node.checkable ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Checkbox2, { checked: isChecked, indeterminate: isHalfChecked, disabled: node.disabled || node.disableCheckbox, onChange: () => check(node) }) }) : null,
|
|
3615
|
+
node.prefix ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__prefix", onClick: (event) => event.stopPropagation(), children: node.prefix }) : null,
|
|
3616
|
+
showIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__icon", children: node.icon ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: hasChildren ? "folder" : "file", size: 15 }) }) : null,
|
|
3617
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3491
3618
|
"button",
|
|
3492
3619
|
{
|
|
3493
3620
|
type: "button",
|
|
@@ -3500,10 +3627,10 @@ function Tree({
|
|
|
3500
3627
|
children: node.title
|
|
3501
3628
|
}
|
|
3502
3629
|
),
|
|
3503
|
-
nodeLoading ? /* @__PURE__ */ (0,
|
|
3504
|
-
node.extra ? /* @__PURE__ */ (0,
|
|
3630
|
+
nodeLoading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__loading-text", role: "status", children: node.loadingText ?? "\u6B63\u5728\u52A0\u8F7D\u2026" }) : null,
|
|
3631
|
+
node.extra ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-tree__extra", onClick: (event) => event.stopPropagation(), children: node.extra }) : null
|
|
3505
3632
|
] });
|
|
3506
|
-
return node.contextMenu ? /* @__PURE__ */ (0,
|
|
3633
|
+
return node.contextMenu ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3507
3634
|
Dropdown,
|
|
3508
3635
|
{
|
|
3509
3636
|
className: "sia-tree__context-trigger",
|
|
@@ -3527,12 +3654,12 @@ function Tree({
|
|
|
3527
3654
|
return nodes.map((node, siblingIndex) => renderNode(node, depth, {
|
|
3528
3655
|
positionInSet: siblingIndex + 1,
|
|
3529
3656
|
setSize: nodes.length,
|
|
3530
|
-
children: expandedKeySet.has(node.key) && node.children?.length ? /* @__PURE__ */ (0,
|
|
3657
|
+
children: expandedKeySet.has(node.key) && node.children?.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sia-tree__children", role: "group", children: render(node.children, depth + 1) }) : null
|
|
3531
3658
|
}));
|
|
3532
3659
|
}
|
|
3533
3660
|
const stickyVirtualKeySet = new Set(virtualStickyNodes.map((item) => item.node.key));
|
|
3534
|
-
const virtualContent = virtualEnabled ? /* @__PURE__ */ (0,
|
|
3535
|
-
virtualStickyNodes.length ? /* @__PURE__ */ (0,
|
|
3661
|
+
const virtualContent = virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "sia-tree__virtual-space", style: { height: flatNodes.length * normalizedVirtualItemHeight }, children: [
|
|
3662
|
+
virtualStickyNodes.length ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sia-tree__virtual-sticky-layer", children: virtualStickyNodes.map((item, stickySlot) => renderNode(item.node, item.depth, {
|
|
3536
3663
|
reactKey: `sticky-${String(item.node.key)}`,
|
|
3537
3664
|
stickySlot,
|
|
3538
3665
|
positionInSet: item.positionInSet,
|
|
@@ -3545,14 +3672,14 @@ function Tree({
|
|
|
3545
3672
|
setSize: item.setSize
|
|
3546
3673
|
}))
|
|
3547
3674
|
] }) : render(treeData);
|
|
3548
|
-
return /* @__PURE__ */ (0,
|
|
3675
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: scrollRef, className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""}${virtualEnabled ? " sia-tree--virtual" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, "data-sia-tree-virtualized": virtualEnabled || void 0, ...withTitleTooltip(props), children: [
|
|
3549
3676
|
virtualContent,
|
|
3550
|
-
/* @__PURE__ */ (0,
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FloatingScrollbarProvider, { targetRef: scrollRef })
|
|
3551
3678
|
] });
|
|
3552
3679
|
}
|
|
3553
3680
|
|
|
3554
3681
|
// src/components/SelectionPanel.tsx
|
|
3555
|
-
var
|
|
3682
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
3556
3683
|
function SelectionPanel({
|
|
3557
3684
|
options,
|
|
3558
3685
|
value,
|
|
@@ -3573,26 +3700,26 @@ function SelectionPanel({
|
|
|
3573
3700
|
maxHeight = 250,
|
|
3574
3701
|
autoFocusSearch = false
|
|
3575
3702
|
}) {
|
|
3576
|
-
const [localSearch, setLocalSearch] = (0,
|
|
3703
|
+
const [localSearch, setLocalSearch] = (0, import_react18.useState)("");
|
|
3577
3704
|
const search = searchValue ?? localSearch;
|
|
3578
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3579
|
-
const [active, setActive] = (0,
|
|
3580
|
-
const [keyboardActive, setKeyboardActive] = (0,
|
|
3581
|
-
const [deselectedHover, setDeselectedHover] = (0,
|
|
3582
|
-
const listRef = (0,
|
|
3583
|
-
const id = (0,
|
|
3584
|
-
const selected = (0,
|
|
3705
|
+
const [scrollTop, setScrollTop] = (0, import_react18.useState)(0);
|
|
3706
|
+
const [active, setActive] = (0, import_react18.useState)();
|
|
3707
|
+
const [keyboardActive, setKeyboardActive] = (0, import_react18.useState)(false);
|
|
3708
|
+
const [deselectedHover, setDeselectedHover] = (0, import_react18.useState)();
|
|
3709
|
+
const listRef = (0, import_react18.useRef)(null);
|
|
3710
|
+
const id = (0, import_react18.useId)();
|
|
3711
|
+
const selected = (0, import_react18.useMemo)(() => new Set(value), [value]);
|
|
3585
3712
|
const count = Math.max(1, Math.floor(columns));
|
|
3586
|
-
const allOptions = (0,
|
|
3713
|
+
const allOptions = (0, import_react18.useMemo)(() => {
|
|
3587
3714
|
if (!includeUnknownValues) return [...options];
|
|
3588
3715
|
const known = new Set(options.filter((option) => option.optionType !== "divider").map((option) => option.value));
|
|
3589
3716
|
return [...value.filter((item) => !known.has(item)).map((item) => ({ value: item, label: String(item), group: "\u81EA\u5B9A\u4E49\u503C" })), ...options];
|
|
3590
3717
|
}, [options, value, includeUnknownValues]);
|
|
3591
|
-
const filtered = (0,
|
|
3718
|
+
const filtered = (0, import_react18.useMemo)(
|
|
3592
3719
|
() => allOptions.filter((option) => (!selectedOnly || selected.has(option.value)) && (!search || option.optionType !== "divider" && [option.label, option.value].some((text) => String(text ?? "").toLowerCase().includes(search.toLowerCase())))),
|
|
3593
3720
|
[allOptions, selectedOnly, selected, search]
|
|
3594
3721
|
);
|
|
3595
|
-
const rows = (0,
|
|
3722
|
+
const rows = (0, import_react18.useMemo)(() => {
|
|
3596
3723
|
const groups = /* @__PURE__ */ new Map();
|
|
3597
3724
|
filtered.forEach((option) => {
|
|
3598
3725
|
const items = groups.get(option.group) ?? [];
|
|
@@ -3618,7 +3745,7 @@ function SelectionPanel({
|
|
|
3618
3745
|
const virtual = filtered.length > 100;
|
|
3619
3746
|
const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
|
|
3620
3747
|
const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
|
|
3621
|
-
(0,
|
|
3748
|
+
(0, import_react18.useEffect)(() => {
|
|
3622
3749
|
setScrollTop(0);
|
|
3623
3750
|
if (listRef.current) listRef.current.scrollTop = 0;
|
|
3624
3751
|
setActive(void 0);
|
|
@@ -3641,9 +3768,9 @@ function SelectionPanel({
|
|
|
3641
3768
|
const add = enabled.filter((option) => operation === "all" || !selected.has(option.value)).map((option) => option.value);
|
|
3642
3769
|
onChange([...retained, ...add]);
|
|
3643
3770
|
}
|
|
3644
|
-
return /* @__PURE__ */ (0,
|
|
3645
|
-
/* @__PURE__ */ (0,
|
|
3646
|
-
showSearch && /* @__PURE__ */ (0,
|
|
3771
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-selection-panel", children: [
|
|
3772
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
3773
|
+
showSearch && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3647
3774
|
Input,
|
|
3648
3775
|
{
|
|
3649
3776
|
"aria-label": "\u641C\u7D22\u9009\u9879",
|
|
@@ -3657,17 +3784,17 @@ function SelectionPanel({
|
|
|
3657
3784
|
}
|
|
3658
3785
|
}
|
|
3659
3786
|
),
|
|
3660
|
-
multiple && showActions && /* @__PURE__ */ (0,
|
|
3661
|
-
/* @__PURE__ */ (0,
|
|
3662
|
-
/* @__PURE__ */ (0,
|
|
3663
|
-
/* @__PURE__ */ (0,
|
|
3664
|
-
/* @__PURE__ */ (0,
|
|
3787
|
+
multiple && showActions && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-selection-panel__actions", children: [
|
|
3788
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
|
|
3789
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
|
|
3790
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
|
|
3791
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { children: [
|
|
3665
3792
|
"\u5DF2\u9009 ",
|
|
3666
3793
|
value.length,
|
|
3667
3794
|
" \u9879"
|
|
3668
3795
|
] })
|
|
3669
3796
|
] }),
|
|
3670
|
-
/* @__PURE__ */ (0,
|
|
3797
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3671
3798
|
"div",
|
|
3672
3799
|
{
|
|
3673
3800
|
ref: listRef,
|
|
@@ -3704,12 +3831,12 @@ function SelectionPanel({
|
|
|
3704
3831
|
toggle(enabled[index], true);
|
|
3705
3832
|
}
|
|
3706
3833
|
},
|
|
3707
|
-
children: loading ? /* @__PURE__ */ (0,
|
|
3834
|
+
children: loading ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3708
3835
|
"div",
|
|
3709
3836
|
{
|
|
3710
3837
|
className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
|
|
3711
3838
|
style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
|
|
3712
|
-
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0,
|
|
3839
|
+
children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3713
3840
|
"div",
|
|
3714
3841
|
{
|
|
3715
3842
|
role: "option",
|
|
@@ -3725,12 +3852,12 @@ function SelectionPanel({
|
|
|
3725
3852
|
onClick: (event) => {
|
|
3726
3853
|
if (!event.target.closest(".sia-checkbox")) toggle(option);
|
|
3727
3854
|
},
|
|
3728
|
-
children: multiple ? /* @__PURE__ */ (0,
|
|
3729
|
-
/* @__PURE__ */ (0,
|
|
3730
|
-
showValue && /* @__PURE__ */ (0,
|
|
3731
|
-
] }) }) : /* @__PURE__ */ (0,
|
|
3732
|
-
/* @__PURE__ */ (0,
|
|
3733
|
-
showValue && /* @__PURE__ */ (0,
|
|
3855
|
+
children: multiple ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Checkbox2, { checked: selected.has(option.value), disabled: disabled || loading || option.disabled, tabIndex: -1, onChange: () => toggle(option), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3856
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3857
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("small", { children: String(option.value) })
|
|
3858
|
+
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "sia-selection-panel__text", children: [
|
|
3859
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-selection-panel__label", children: showValue || displayField === "label" ? option.label : String(option.value) }),
|
|
3860
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("small", { children: String(option.value) })
|
|
3734
3861
|
] })
|
|
3735
3862
|
}
|
|
3736
3863
|
) }, `${typeof option.value}-${option.value}`))
|
|
@@ -3743,14 +3870,14 @@ function SelectionPanel({
|
|
|
3743
3870
|
}
|
|
3744
3871
|
|
|
3745
3872
|
// src/components/OverflowTags.tsx
|
|
3746
|
-
var
|
|
3747
|
-
var
|
|
3873
|
+
var import_react19 = require("react");
|
|
3874
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3748
3875
|
function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
|
|
3749
|
-
const rootRef = (0,
|
|
3750
|
-
const measureRef = (0,
|
|
3876
|
+
const rootRef = (0, import_react19.useRef)(null);
|
|
3877
|
+
const measureRef = (0, import_react19.useRef)(null);
|
|
3751
3878
|
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
|
|
3752
|
-
const [visibleCount, setVisibleCount] = (0,
|
|
3753
|
-
(0,
|
|
3879
|
+
const [visibleCount, setVisibleCount] = (0, import_react19.useState)(0);
|
|
3880
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
3754
3881
|
const root = rootRef.current;
|
|
3755
3882
|
const measure = measureRef.current;
|
|
3756
3883
|
if (!root || !measure) return;
|
|
@@ -3773,15 +3900,15 @@ function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName
|
|
|
3773
3900
|
return () => observer.disconnect();
|
|
3774
3901
|
}, [items, limit]);
|
|
3775
3902
|
const count = Math.min(visibleCount, limit);
|
|
3776
|
-
return /* @__PURE__ */ (0,
|
|
3777
|
-
items.slice(0, count).map((item) => /* @__PURE__ */ (0,
|
|
3778
|
-
items.length > count ? /* @__PURE__ */ (0,
|
|
3903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
|
|
3904
|
+
items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3905
|
+
items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
|
|
3779
3906
|
"+",
|
|
3780
3907
|
items.length - count
|
|
3781
3908
|
] }) : null,
|
|
3782
|
-
/* @__PURE__ */ (0,
|
|
3783
|
-
items.slice(0, limit).map((item) => /* @__PURE__ */ (0,
|
|
3784
|
-
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0,
|
|
3909
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
|
|
3910
|
+
items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
3911
|
+
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
|
|
3785
3912
|
"+",
|
|
3786
3913
|
items.length - index
|
|
3787
3914
|
] }, `rest-${index}`))
|
|
@@ -3790,12 +3917,12 @@ function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName
|
|
|
3790
3917
|
}
|
|
3791
3918
|
|
|
3792
3919
|
// src/components/Select.tsx
|
|
3793
|
-
var
|
|
3920
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3794
3921
|
function defaultFilterOption(query, option) {
|
|
3795
3922
|
const keyword = query.toLowerCase();
|
|
3796
3923
|
return [option.label, option.value].some((value) => String(value).toLowerCase().includes(keyword));
|
|
3797
3924
|
}
|
|
3798
|
-
var Select = (0,
|
|
3925
|
+
var Select = (0, import_react20.forwardRef)(function Select2({
|
|
3799
3926
|
options,
|
|
3800
3927
|
mode = "single",
|
|
3801
3928
|
popupMode: popupModeProp,
|
|
@@ -3834,27 +3961,27 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
3834
3961
|
}, forwardedRef) {
|
|
3835
3962
|
const showSearch = showSearchProp ?? options.length > 15;
|
|
3836
3963
|
const size = useControlSize(sizeProp);
|
|
3837
|
-
const fallbackId = (0,
|
|
3964
|
+
const fallbackId = (0, import_react20.useId)();
|
|
3838
3965
|
const selectId = id ?? fallbackId;
|
|
3839
3966
|
const listboxId = `${selectId}-listbox`;
|
|
3840
|
-
const rootRef = (0,
|
|
3841
|
-
const popupRef = (0,
|
|
3842
|
-
const searchRef = (0,
|
|
3843
|
-
const listRef = (0,
|
|
3844
|
-
const [open, setOpen] = (0,
|
|
3967
|
+
const rootRef = (0, import_react20.useRef)(null);
|
|
3968
|
+
const popupRef = (0, import_react20.useRef)(null);
|
|
3969
|
+
const searchRef = (0, import_react20.useRef)(null);
|
|
3970
|
+
const listRef = (0, import_react20.useRef)(null);
|
|
3971
|
+
const [open, setOpen] = (0, import_react20.useState)(false);
|
|
3845
3972
|
const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
|
|
3846
|
-
const [openedMode, setOpenedMode] = (0,
|
|
3973
|
+
const [openedMode, setOpenedMode] = (0, import_react20.useState)(automaticMode);
|
|
3847
3974
|
const popupMode = open ? openedMode : automaticMode;
|
|
3848
|
-
const [modalValues, setModalValues] = (0,
|
|
3849
|
-
const [modalSubmitting, setModalSubmitting] = (0,
|
|
3850
|
-
const modalSubmitLock = (0,
|
|
3851
|
-
const [selectedOnly, setSelectedOnly] = (0,
|
|
3852
|
-
const [query, setQuery] = (0,
|
|
3853
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
3854
|
-
const [scrollTop, setScrollTop] = (0,
|
|
3855
|
-
const [dropdownFontSize, setDropdownFontSize] = (0,
|
|
3856
|
-
const pendingSelectedScroll = (0,
|
|
3857
|
-
const deferredQuery = (0,
|
|
3975
|
+
const [modalValues, setModalValues] = (0, import_react20.useState)([]);
|
|
3976
|
+
const [modalSubmitting, setModalSubmitting] = (0, import_react20.useState)(false);
|
|
3977
|
+
const modalSubmitLock = (0, import_react20.useRef)(false);
|
|
3978
|
+
const [selectedOnly, setSelectedOnly] = (0, import_react20.useState)(false);
|
|
3979
|
+
const [query, setQuery] = (0, import_react20.useState)("");
|
|
3980
|
+
const [activeIndex, setActiveIndex] = (0, import_react20.useState)(-1);
|
|
3981
|
+
const [scrollTop, setScrollTop] = (0, import_react20.useState)(0);
|
|
3982
|
+
const [dropdownFontSize, setDropdownFontSize] = (0, import_react20.useState)();
|
|
3983
|
+
const pendingSelectedScroll = (0, import_react20.useRef)(false);
|
|
3984
|
+
const deferredQuery = (0, import_react20.useDeferredValue)(query.trim());
|
|
3858
3985
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
3859
3986
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
3860
3987
|
value,
|
|
@@ -3869,20 +3996,20 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
3869
3996
|
}
|
|
3870
3997
|
}
|
|
3871
3998
|
});
|
|
3872
|
-
const selectedValues = (0,
|
|
3999
|
+
const selectedValues = (0, import_react20.useMemo)(() => {
|
|
3873
4000
|
if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
|
|
3874
4001
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
3875
4002
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
3876
4003
|
}, [currentValue, mode, options]);
|
|
3877
|
-
const selectedValueSet = (0,
|
|
3878
|
-
const availableOptions = (0,
|
|
4004
|
+
const selectedValueSet = (0, import_react20.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
4005
|
+
const availableOptions = (0, import_react20.useMemo)(() => {
|
|
3879
4006
|
if (!allowInput) return options;
|
|
3880
4007
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
3881
4008
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
3882
4009
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
3883
4010
|
}, [allowInput, options, selectedValues]);
|
|
3884
|
-
const selectedOptions = (0,
|
|
3885
|
-
const filteredOptions = (0,
|
|
4011
|
+
const selectedOptions = (0, import_react20.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
|
|
4012
|
+
const filteredOptions = (0, import_react20.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
|
|
3886
4013
|
const inputValue = query.trim();
|
|
3887
4014
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
3888
4015
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -3896,7 +4023,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
3896
4023
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
3897
4024
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
3898
4025
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
3899
|
-
(0,
|
|
4026
|
+
(0, import_react20.useEffect)(() => {
|
|
3900
4027
|
if (!open || popupMode === "modal") return void 0;
|
|
3901
4028
|
function closeFromOutside(event) {
|
|
3902
4029
|
const target = event.target;
|
|
@@ -3905,13 +4032,13 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
3905
4032
|
document.addEventListener("mousedown", closeFromOutside);
|
|
3906
4033
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
3907
4034
|
}, [open, popupMode]);
|
|
3908
|
-
(0,
|
|
4035
|
+
(0, import_react20.useEffect)(() => {
|
|
3909
4036
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
3910
4037
|
}, [allowInput, open, showSearch]);
|
|
3911
|
-
(0,
|
|
4038
|
+
(0, import_react20.useEffect)(() => {
|
|
3912
4039
|
if (disabled || loading) closeDropdown();
|
|
3913
4040
|
}, [disabled, loading]);
|
|
3914
|
-
(0,
|
|
4041
|
+
(0, import_react20.useEffect)(() => {
|
|
3915
4042
|
if (!open || popupMode !== "dropdown" || !pendingSelectedScroll.current || query) return;
|
|
3916
4043
|
const index = filteredOptions.findIndex((option) => selectedValueSet.has(option.value));
|
|
3917
4044
|
if (index < 0) return;
|
|
@@ -3926,7 +4053,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
3926
4053
|
});
|
|
3927
4054
|
return () => cancelAnimationFrame(frame);
|
|
3928
4055
|
}, [open, popupMode, filteredOptions, selectedValueSet, virtualEnabled, optionHeight, query]);
|
|
3929
|
-
(0,
|
|
4056
|
+
(0, import_react20.useLayoutEffect)(() => {
|
|
3930
4057
|
if (!open || popupMode !== "dropdown") return;
|
|
3931
4058
|
const trigger = rootRef.current?.querySelector(".sia-select__trigger");
|
|
3932
4059
|
if (trigger) setDropdownFontSize(getComputedStyle(trigger).fontSize);
|
|
@@ -4077,7 +4204,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4077
4204
|
function renderOption(option, renderedIndex) {
|
|
4078
4205
|
const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
|
|
4079
4206
|
const selected = selectedValueSet.has(option.value);
|
|
4080
|
-
return /* @__PURE__ */ (0,
|
|
4207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
4081
4208
|
"div",
|
|
4082
4209
|
{
|
|
4083
4210
|
id: `${listboxId}-${optionIndex}`,
|
|
@@ -4090,11 +4217,11 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4090
4217
|
onMouseDown: (event) => event.preventDefault(),
|
|
4091
4218
|
onClick: () => selectOption(option),
|
|
4092
4219
|
children: [
|
|
4093
|
-
/* @__PURE__ */ (0,
|
|
4094
|
-
/* @__PURE__ */ (0,
|
|
4095
|
-
showValue ? /* @__PURE__ */ (0,
|
|
4220
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "sia-select__option-content", children: [
|
|
4221
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sia-select__option-label", children: option.label }),
|
|
4222
|
+
showValue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("small", { className: "sia-select__option-value", children: String(option.value) }) : null
|
|
4096
4223
|
] }),
|
|
4097
|
-
selected ? /* @__PURE__ */ (0,
|
|
4224
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "check", size: 15 }) : null
|
|
4098
4225
|
]
|
|
4099
4226
|
},
|
|
4100
4227
|
`${typeof option.value}-${option.value}`
|
|
@@ -4108,8 +4235,8 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4108
4235
|
setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
|
|
4109
4236
|
}
|
|
4110
4237
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
4111
|
-
return /* @__PURE__ */ (0,
|
|
4112
|
-
/* @__PURE__ */ (0,
|
|
4238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.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: [
|
|
4239
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
4113
4240
|
"button",
|
|
4114
4241
|
{
|
|
4115
4242
|
...withTitleTooltip(props),
|
|
@@ -4127,29 +4254,29 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4127
4254
|
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
4128
4255
|
onKeyDown: handleTriggerKeyDown,
|
|
4129
4256
|
children: [
|
|
4130
|
-
multiple && hasValue ? /* @__PURE__ */ (0,
|
|
4131
|
-
loading ? /* @__PURE__ */ (0,
|
|
4257
|
+
multiple && hasValue ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OverflowTags, { className: "sia-select__tags", tagClassName: "sia-select__tag", restClassName: "sia-select__tag--rest", maxCount: maxTagCount, items: selectedOptions.map((option) => ({ key: `${typeof option.value}-${option.value}`, label: option.label })) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
|
|
4258
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
|
|
4132
4259
|
floating.label,
|
|
4133
|
-
/* @__PURE__ */ (0,
|
|
4260
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
4134
4261
|
]
|
|
4135
4262
|
}
|
|
4136
4263
|
),
|
|
4137
|
-
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0,
|
|
4138
|
-
/* @__PURE__ */ (0,
|
|
4139
|
-
/* @__PURE__ */ (0,
|
|
4140
|
-
showSearch || allowInput ? /* @__PURE__ */ (0,
|
|
4141
|
-
/* @__PURE__ */ (0,
|
|
4142
|
-
/* @__PURE__ */ (0,
|
|
4264
|
+
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
4265
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && popupMode === "dropdown", style: { fontSize: dropdownFontSize }, className: `sia-select__dropdown${filteredOptions.length === 0 && !canSubmitInput ? " sia-select__dropdown--empty" : ""}`, children: [
|
|
4266
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FloatingScrollbarProvider, { targetRef: listRef }),
|
|
4267
|
+
showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "sia-select__search", children: [
|
|
4268
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "search", size: 15 }),
|
|
4269
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
|
|
4143
4270
|
] }) : null,
|
|
4144
|
-
canSubmitInput ? /* @__PURE__ */ (0,
|
|
4145
|
-
/* @__PURE__ */ (0,
|
|
4146
|
-
/* @__PURE__ */ (0,
|
|
4271
|
+
canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
|
|
4272
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "plus", size: 14 }),
|
|
4273
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
|
|
4147
4274
|
"\u4F7F\u7528\u201C",
|
|
4148
4275
|
inputValue,
|
|
4149
4276
|
"\u201D"
|
|
4150
4277
|
] })
|
|
4151
4278
|
] }) : null,
|
|
4152
|
-
/* @__PURE__ */ (0,
|
|
4279
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4153
4280
|
"div",
|
|
4154
4281
|
{
|
|
4155
4282
|
ref: listRef,
|
|
@@ -4160,23 +4287,23 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4160
4287
|
"aria-multiselectable": multiple || void 0,
|
|
4161
4288
|
style: { maxHeight: listHeight },
|
|
4162
4289
|
onScroll: handleListScroll,
|
|
4163
|
-
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0,
|
|
4290
|
+
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sia-select__virtual-space", style: { height: filteredOptions.length * optionHeight }, children: renderedOptions.map(renderOption) }) : renderedOptions.map(renderOption) : canSubmitInput ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sia-select__empty", children: notFoundContent })
|
|
4164
4291
|
}
|
|
4165
4292
|
),
|
|
4166
|
-
showActions ? /* @__PURE__ */ (0,
|
|
4167
|
-
/* @__PURE__ */ (0,
|
|
4293
|
+
showActions ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-select__actions", children: [
|
|
4294
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
|
|
4168
4295
|
"\u5171 ",
|
|
4169
4296
|
filteredOptions.length,
|
|
4170
4297
|
" \u6761"
|
|
4171
4298
|
] }),
|
|
4172
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
4173
|
-
/* @__PURE__ */ (0,
|
|
4174
|
-
/* @__PURE__ */ (0,
|
|
4299
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
4300
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "link", size: "small", disabled: allFilteredSelected || !enabledFilteredOptions.length, onClick: selectAllFiltered, children: "\u5168\u9009" }),
|
|
4301
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "link", size: "small", disabled: !enabledFilteredOptions.length, onClick: invertFiltered, children: "\u53CD\u9009" })
|
|
4175
4302
|
] }) : null,
|
|
4176
|
-
multiple || allowClear ? /* @__PURE__ */ (0,
|
|
4303
|
+
multiple || allowClear ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u7A7A" }) : null
|
|
4177
4304
|
] }) : null
|
|
4178
4305
|
] }),
|
|
4179
|
-
popupMode === "modal" ? /* @__PURE__ */ (0,
|
|
4306
|
+
popupMode === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4180
4307
|
Modal2,
|
|
4181
4308
|
{
|
|
4182
4309
|
className: "sia-select-modal",
|
|
@@ -4188,30 +4315,30 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4188
4315
|
if (!next) closeDropdown();
|
|
4189
4316
|
},
|
|
4190
4317
|
onCancel: closeDropdown,
|
|
4191
|
-
footer: /* @__PURE__ */ (0,
|
|
4192
|
-
/* @__PURE__ */ (0,
|
|
4193
|
-
/* @__PURE__ */ (0,
|
|
4194
|
-
/* @__PURE__ */ (0,
|
|
4195
|
-
/* @__PURE__ */ (0,
|
|
4318
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-select-modal__footer", children: [
|
|
4319
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { children: modalConfig?.footerExtra }),
|
|
4320
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
|
|
4321
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { disabled: modalSubmitting, onClick: closeDropdown, children: "\u53D6\u6D88" }),
|
|
4322
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "primary", loading: modalSubmitting, disabled: disabled || loading, onClick: confirmModalSelection, children: "\u786E\u5B9A" })
|
|
4196
4323
|
] })
|
|
4197
4324
|
] }),
|
|
4198
|
-
children: open ? /* @__PURE__ */ (0,
|
|
4199
|
-
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0,
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4201
|
-
/* @__PURE__ */ (0,
|
|
4202
|
-
/* @__PURE__ */ (0,
|
|
4203
|
-
/* @__PURE__ */ (0,
|
|
4325
|
+
children: open ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
4326
|
+
modalConfig?.headerExtra != null && modalConfig.headerExtra !== false ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sia-select-modal__header-extra", children: modalConfig.headerExtra }) : null,
|
|
4327
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-select-modal__heading", children: [
|
|
4328
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
|
|
4329
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { role: "tab", "aria-selected": !selectedOnly, variant: "link", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
|
|
4330
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button, { role: "tab", "aria-selected": selectedOnly, variant: "link", onClick: () => setSelectedOnly(true), children: [
|
|
4204
4331
|
"\u5DF2\u9009\u9879(",
|
|
4205
4332
|
modalValues.length,
|
|
4206
4333
|
")"
|
|
4207
4334
|
] })
|
|
4208
4335
|
] }),
|
|
4209
|
-
/* @__PURE__ */ (0,
|
|
4336
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4210
4337
|
Input,
|
|
4211
4338
|
{
|
|
4212
4339
|
"aria-label": searchPlaceholder,
|
|
4213
4340
|
placeholder: searchPlaceholder,
|
|
4214
|
-
prefix: /* @__PURE__ */ (0,
|
|
4341
|
+
prefix: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "search", size: 14 }),
|
|
4215
4342
|
value: query,
|
|
4216
4343
|
allowClear: true,
|
|
4217
4344
|
onChange: (event) => {
|
|
@@ -4221,8 +4348,8 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4221
4348
|
}
|
|
4222
4349
|
)
|
|
4223
4350
|
] }),
|
|
4224
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
4225
|
-
/* @__PURE__ */ (0,
|
|
4351
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-select-modal__actions", children: [
|
|
4352
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4226
4353
|
Checkbox2,
|
|
4227
4354
|
{
|
|
4228
4355
|
checked: modalEnabled.length > 0 && modalEnabled.every((option) => modalValues.includes(option.value)),
|
|
@@ -4232,10 +4359,10 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4232
4359
|
children: "\u5168\u9009"
|
|
4233
4360
|
}
|
|
4234
4361
|
),
|
|
4235
|
-
/* @__PURE__ */ (0,
|
|
4236
|
-
/* @__PURE__ */ (0,
|
|
4362
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "link", size: "small", disabled: !modalEnabled.length, onClick: () => modalBatch("invert"), children: "\u53CD\u9009" }),
|
|
4363
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "link", size: "small", danger: true, disabled: !modalValues.length, onClick: () => setModalValues([]), children: "\u6E05\u7A7A" })
|
|
4237
4364
|
] }) : null,
|
|
4238
|
-
allowInput && canSubmitInput ? /* @__PURE__ */ (0,
|
|
4365
|
+
allowInput && canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Button, { variant: "link", onClick: () => {
|
|
4239
4366
|
setModalValues(multiple ? [.../* @__PURE__ */ new Set([...modalValues, inputValue])] : [inputValue]);
|
|
4240
4367
|
setQuery("");
|
|
4241
4368
|
}, children: [
|
|
@@ -4243,7 +4370,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4243
4370
|
inputValue,
|
|
4244
4371
|
"\u201D"
|
|
4245
4372
|
] }) : null,
|
|
4246
|
-
/* @__PURE__ */ (0,
|
|
4373
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
4247
4374
|
SelectionPanel,
|
|
4248
4375
|
{
|
|
4249
4376
|
options: modalFiltered,
|
|
@@ -4267,7 +4394,7 @@ var Select = (0, import_react19.forwardRef)(function Select2({
|
|
|
4267
4394
|
});
|
|
4268
4395
|
|
|
4269
4396
|
// src/components/Pagination.tsx
|
|
4270
|
-
var
|
|
4397
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
4271
4398
|
var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200, 500, 1e3, 2e3, 5e3];
|
|
4272
4399
|
function Pagination({
|
|
4273
4400
|
size: sizeProp,
|
|
@@ -4292,7 +4419,7 @@ function Pagination({
|
|
|
4292
4419
|
const controlSize = useControlSize(sizeProp);
|
|
4293
4420
|
const [size, setSize] = useControllableState({ value: pageSize, defaultValue: Math.max(1, defaultPageSize) });
|
|
4294
4421
|
const [page, setPage] = useControllableState({ value: current, defaultValue: Math.max(1, defaultCurrent) });
|
|
4295
|
-
const [internalRefreshing, setInternalRefreshing] = (0,
|
|
4422
|
+
const [internalRefreshing, setInternalRefreshing] = (0, import_react21.useState)(false);
|
|
4296
4423
|
const safeTotal = Math.max(0, total);
|
|
4297
4424
|
const totalPages = Math.max(1, Math.ceil(safeTotal / size));
|
|
4298
4425
|
const safePage = Math.max(1, Math.min(page, totalPages));
|
|
@@ -4322,15 +4449,15 @@ function Pagination({
|
|
|
4322
4449
|
if (refreshing === void 0) setInternalRefreshing(false);
|
|
4323
4450
|
}
|
|
4324
4451
|
}
|
|
4325
|
-
return /* @__PURE__ */ (0,
|
|
4326
|
-
/* @__PURE__ */ (0,
|
|
4452
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("nav", { className: `sia-pagination sia-pagination--${controlSize} ${className}`.trim(), "aria-label": "\u5206\u9875", ...withTitleTooltip(props), children: [
|
|
4453
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "sia-pagination__current-count", "aria-live": "polite", children: [
|
|
4327
4454
|
"\u5F53\u524D\u9875 ",
|
|
4328
4455
|
pageCount,
|
|
4329
4456
|
" \u6761"
|
|
4330
4457
|
] }),
|
|
4331
|
-
showSizeChanger ? /* @__PURE__ */ (0,
|
|
4332
|
-
/* @__PURE__ */ (0,
|
|
4333
|
-
/* @__PURE__ */ (0,
|
|
4458
|
+
showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-pagination__size", children: [
|
|
4459
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "\u6BCF\u9875\u663E\u793A" }),
|
|
4460
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
4334
4461
|
Select,
|
|
4335
4462
|
{
|
|
4336
4463
|
className: "sia-pagination__size-select",
|
|
@@ -4346,7 +4473,7 @@ function Pagination({
|
|
|
4346
4473
|
}
|
|
4347
4474
|
)
|
|
4348
4475
|
] }) : null,
|
|
4349
|
-
showTotal ? typeof showTotal === "function" ? /* @__PURE__ */ (0,
|
|
4476
|
+
showTotal ? typeof showTotal === "function" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-pagination__total", children: showTotal(safeTotal, range) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
4350
4477
|
Button,
|
|
4351
4478
|
{
|
|
4352
4479
|
variant: "text",
|
|
@@ -4356,31 +4483,31 @@ function Pagination({
|
|
|
4356
4483
|
title: onRefreshTotal ? "\u70B9\u51FB\u5237\u65B0\u603B\u8BB0\u5F55\u6570" : void 0,
|
|
4357
4484
|
onClick: () => void refreshTotal(),
|
|
4358
4485
|
children: [
|
|
4359
|
-
loading ? /* @__PURE__ */ (0,
|
|
4486
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "loader", size: 13, spin: true }) : null,
|
|
4360
4487
|
"\u5171 ",
|
|
4361
4488
|
safeTotal,
|
|
4362
4489
|
" \u6761",
|
|
4363
|
-
onRefreshTotal && !loading ? /* @__PURE__ */ (0,
|
|
4490
|
+
onRefreshTotal && !loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "refresh", size: 13 }) : null
|
|
4364
4491
|
]
|
|
4365
4492
|
}
|
|
4366
4493
|
) : null,
|
|
4367
|
-
/* @__PURE__ */ (0,
|
|
4368
|
-
/* @__PURE__ */ (0,
|
|
4369
|
-
/* @__PURE__ */ (0,
|
|
4370
|
-
/* @__PURE__ */ (0,
|
|
4494
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "sia-pagination__buttons", children: [
|
|
4495
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u7B2C\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(1), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "double-left", size: 15 }) }),
|
|
4496
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0A\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(safePage - 1), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "chevron-left", size: 15 }) }),
|
|
4497
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { "aria-live": "polite", children: [
|
|
4371
4498
|
safePage,
|
|
4372
4499
|
" / ",
|
|
4373
4500
|
totalPages
|
|
4374
4501
|
] }),
|
|
4375
|
-
/* @__PURE__ */ (0,
|
|
4376
|
-
/* @__PURE__ */ (0,
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0B\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(safePage + 1), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "chevron-right", size: 15 }) }),
|
|
4503
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u6700\u540E\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(totalPages), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "double-right", size: 15 }) })
|
|
4377
4504
|
] })
|
|
4378
4505
|
] });
|
|
4379
4506
|
}
|
|
4380
4507
|
|
|
4381
4508
|
// src/components/Cascader.tsx
|
|
4382
|
-
var
|
|
4383
|
-
var
|
|
4509
|
+
var import_react22 = require("react");
|
|
4510
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
4384
4511
|
function optionValue(option, fields) {
|
|
4385
4512
|
return option[fields.value];
|
|
4386
4513
|
}
|
|
@@ -4435,22 +4562,22 @@ function Cascader({
|
|
|
4435
4562
|
...props
|
|
4436
4563
|
}) {
|
|
4437
4564
|
const size = useControlSize(sizeProp);
|
|
4438
|
-
const fields = (0,
|
|
4439
|
-
const rootRef = (0,
|
|
4440
|
-
const popupRef = (0,
|
|
4565
|
+
const fields = (0, import_react22.useMemo)(() => ({ label: fieldNames?.label ?? "label", value: fieldNames?.value ?? "value", children: fieldNames?.children ?? "children" }), [fieldNames]);
|
|
4566
|
+
const rootRef = (0, import_react22.useRef)(null);
|
|
4567
|
+
const popupRef = (0, import_react22.useRef)(null);
|
|
4441
4568
|
const [current, setCurrent] = useControllableState({
|
|
4442
4569
|
value,
|
|
4443
4570
|
defaultValue: defaultValue ?? (multiple ? [] : void 0)
|
|
4444
4571
|
});
|
|
4445
|
-
const [open, setOpen] = (0,
|
|
4446
|
-
const [active, setActive] = (0,
|
|
4447
|
-
const [search, setSearch] = (0,
|
|
4448
|
-
const [loadingKey, setLoadingKey] = (0,
|
|
4572
|
+
const [open, setOpen] = (0, import_react22.useState)(false);
|
|
4573
|
+
const [active, setActive] = (0, import_react22.useState)([]);
|
|
4574
|
+
const [search, setSearch] = (0, import_react22.useState)("");
|
|
4575
|
+
const [loadingKey, setLoadingKey] = (0, import_react22.useState)("");
|
|
4449
4576
|
const selectedPaths = multiple ? Array.isArray(current) ? current : [] : current?.length && !Array.isArray(current[0]) ? [current] : [];
|
|
4450
4577
|
const selectedKeys = new Set(selectedPaths.map(pathKey));
|
|
4451
4578
|
const selectedPathSignature = selectedPaths.map(pathKey).join("");
|
|
4452
|
-
const searchPaths = (0,
|
|
4453
|
-
(0,
|
|
4579
|
+
const searchPaths = (0, import_react22.useMemo)(() => search ? leafPaths(options, fields).filter((path) => path.some((option) => String(optionLabel(option, fields)).toLowerCase().includes(search.toLowerCase()))) : [], [fields, options, search]);
|
|
4580
|
+
(0, import_react22.useEffect)(() => {
|
|
4454
4581
|
if (!open) return;
|
|
4455
4582
|
const close = (event) => {
|
|
4456
4583
|
const target = event.target;
|
|
@@ -4459,13 +4586,13 @@ function Cascader({
|
|
|
4459
4586
|
document.addEventListener("pointerdown", close);
|
|
4460
4587
|
return () => document.removeEventListener("pointerdown", close);
|
|
4461
4588
|
}, [open]);
|
|
4462
|
-
(0,
|
|
4589
|
+
(0, import_react22.useEffect)(() => {
|
|
4463
4590
|
if (selectedPaths.length) return;
|
|
4464
4591
|
setActive([]);
|
|
4465
4592
|
setSearch("");
|
|
4466
4593
|
setLoadingKey("");
|
|
4467
4594
|
}, [selectedPaths.length]);
|
|
4468
|
-
(0,
|
|
4595
|
+
(0, import_react22.useEffect)(() => {
|
|
4469
4596
|
if (!open || !selectedPaths.length) return;
|
|
4470
4597
|
setActive(findPath(options, selectedPaths[0], fields));
|
|
4471
4598
|
}, [fields, open, options, selectedPathSignature]);
|
|
@@ -4523,26 +4650,26 @@ function Cascader({
|
|
|
4523
4650
|
if (children?.length) columns.push(children);
|
|
4524
4651
|
});
|
|
4525
4652
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedPaths.length > 0, active: open });
|
|
4526
|
-
return /* @__PURE__ */ (0,
|
|
4527
|
-
/* @__PURE__ */ (0,
|
|
4528
|
-
/* @__PURE__ */ (0,
|
|
4529
|
-
allowClear && selectedPaths.length && !disabled ? /* @__PURE__ */ (0,
|
|
4653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: rootRef, className: `sia-cascader sia-cascader--${size}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
4654
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", className: `sia-cascader__trigger${floating.className}`, disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
|
|
4655
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-cascader__value", children: display ? multiple && Array.isArray(display) ? display.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-cascader__tag", children: label }, pathKey(selectedPaths[index] ?? []))) : display : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-cascader__placeholder", children: placeholder }) }),
|
|
4656
|
+
allowClear && selectedPaths.length && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-cascader__clear", role: "button", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
|
|
4530
4657
|
event.stopPropagation();
|
|
4531
4658
|
clearSelection();
|
|
4532
|
-
}, children: /* @__PURE__ */ (0,
|
|
4659
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
4533
4660
|
floating.label,
|
|
4534
|
-
/* @__PURE__ */ (0,
|
|
4661
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
|
|
4535
4662
|
] }),
|
|
4536
|
-
/* @__PURE__ */ (0,
|
|
4537
|
-
showSearch ? /* @__PURE__ */ (0,
|
|
4538
|
-
/* @__PURE__ */ (0,
|
|
4539
|
-
/* @__PURE__ */ (0,
|
|
4663
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-cascader__popup", children: [
|
|
4664
|
+
showSearch ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "sia-cascader__search", children: [
|
|
4665
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "search", size: 15 }),
|
|
4666
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { autoFocus: true, value: search, placeholder: "\u641C\u7D22\u9009\u9879", onChange: (event) => setSearch(event.currentTarget.value) })
|
|
4540
4667
|
] }) : null,
|
|
4541
|
-
search ? /* @__PURE__ */ (0,
|
|
4668
|
+
search ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "sia-cascader__results", children: [
|
|
4542
4669
|
searchPaths.map((path) => {
|
|
4543
4670
|
const values = path.map((item) => optionValue(item, fields));
|
|
4544
4671
|
const checked = selectedKeys.has(pathKey(values));
|
|
4545
|
-
return /* @__PURE__ */ (0,
|
|
4672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("button", { type: "button", onClick: () => {
|
|
4546
4673
|
setActive(path);
|
|
4547
4674
|
if (multiple) emit(checked ? selectedPaths.filter((item) => pathKey(item) !== pathKey(values)) : [...selectedPaths, values]);
|
|
4548
4675
|
else {
|
|
@@ -4550,19 +4677,19 @@ function Cascader({
|
|
|
4550
4677
|
setOpen(false);
|
|
4551
4678
|
}
|
|
4552
4679
|
}, children: [
|
|
4553
|
-
multiple ? /* @__PURE__ */ (0,
|
|
4554
|
-
/* @__PURE__ */ (0,
|
|
4680
|
+
multiple ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox2, { checked, tabIndex: -1 }) : null,
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: path.map((item) => optionLabel(item, fields)).join(" / ") })
|
|
4555
4682
|
] }, pathKey(values));
|
|
4556
4683
|
}),
|
|
4557
|
-
!searchPaths.length ? /* @__PURE__ */ (0,
|
|
4558
|
-
] }) : /* @__PURE__ */ (0,
|
|
4684
|
+
!searchPaths.length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sia-cascader__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : null
|
|
4685
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sia-cascader__menus", children: columns.map((column, depth) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "sia-cascader__menu", role: "listbox", children: column.map((option) => {
|
|
4559
4686
|
const nextPath = [...active.slice(0, depth), option];
|
|
4560
4687
|
const values = nextPath.map((item) => optionValue(item, fields));
|
|
4561
4688
|
const children = optionChildren(option, fields);
|
|
4562
4689
|
const selected = active[depth] === option;
|
|
4563
4690
|
const checked = selectedKeys.has(pathKey(values));
|
|
4564
4691
|
const loading = loadingKey === pathKey(values);
|
|
4565
|
-
return /* @__PURE__ */ (0,
|
|
4692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
4566
4693
|
"button",
|
|
4567
4694
|
{
|
|
4568
4695
|
type: "button",
|
|
@@ -4573,9 +4700,9 @@ function Cascader({
|
|
|
4573
4700
|
onMouseEnter: expandTrigger === "hover" ? () => void activate(option, depth) : void 0,
|
|
4574
4701
|
onClick: () => void activate(option, depth),
|
|
4575
4702
|
children: [
|
|
4576
|
-
multiple && !children?.length ? /* @__PURE__ */ (0,
|
|
4577
|
-
/* @__PURE__ */ (0,
|
|
4578
|
-
loading ? /* @__PURE__ */ (0,
|
|
4703
|
+
multiple && !children?.length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox2, { checked, tabIndex: -1 }) : null,
|
|
4704
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: optionLabel(option, fields) }),
|
|
4705
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "loader", className: "sia-spin-icon", size: 14 }) : children?.length || option.isLeaf === false ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-right", size: 13 }) : null
|
|
4579
4706
|
]
|
|
4580
4707
|
},
|
|
4581
4708
|
optionValue(option, fields)
|
|
@@ -4586,25 +4713,25 @@ function Cascader({
|
|
|
4586
4713
|
}
|
|
4587
4714
|
|
|
4588
4715
|
// src/components/DataDisplay.tsx
|
|
4589
|
-
var
|
|
4716
|
+
var import_react23 = require("react");
|
|
4590
4717
|
var import_react_dom4 = require("react-dom");
|
|
4591
|
-
var
|
|
4718
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
4592
4719
|
function Rate({ value, size: sizeProp, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
|
|
4593
4720
|
const size = useControlSize(sizeProp);
|
|
4594
4721
|
const [current, setCurrent] = useControllableState({ value, defaultValue, onChange });
|
|
4595
|
-
const [hover, setHover] = (0,
|
|
4722
|
+
const [hover, setHover] = (0, import_react23.useState)(0);
|
|
4596
4723
|
const shown = hover || current;
|
|
4597
4724
|
function choose(next) {
|
|
4598
4725
|
setCurrent(allowClear && next === current ? 0 : next);
|
|
4599
4726
|
}
|
|
4600
|
-
return /* @__PURE__ */ (0,
|
|
4727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `sia-rate sia-rate--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", "aria-label": "\u8BC4\u5206", onMouseLeave: () => {
|
|
4601
4728
|
setHover(0);
|
|
4602
4729
|
onHoverChange?.(0);
|
|
4603
4730
|
}, ...withTitleTooltip(props), children: Array.from({ length: count }, (_, index) => {
|
|
4604
4731
|
const whole = index + 1;
|
|
4605
4732
|
const fill = Math.max(0, Math.min(1, shown - index));
|
|
4606
|
-
const content = typeof character === "function" ? character(index) : character ?? /* @__PURE__ */ (0,
|
|
4607
|
-
return /* @__PURE__ */ (0,
|
|
4733
|
+
const content = typeof character === "function" ? character(index) : character ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "star", variant: "filled" });
|
|
4734
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-rate__item", ...withTitleTooltip({ title: tooltips?.[index] }), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", disabled, role: "radio", "aria-checked": current === whole, "aria-label": `${whole} \u661F`, onMouseMove: (event) => {
|
|
4608
4735
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
4609
4736
|
const next = allowHalf && event.clientX - rect.left < rect.width / 2 ? whole - 0.5 : whole;
|
|
4610
4737
|
setHover(next);
|
|
@@ -4622,30 +4749,30 @@ function Rate({ value, size: sizeProp, defaultValue = 0, count = 5, allowHalf =
|
|
|
4622
4749
|
setCurrent(Math.max(0, current - (allowHalf ? 0.5 : 1)));
|
|
4623
4750
|
}
|
|
4624
4751
|
}, children: [
|
|
4625
|
-
/* @__PURE__ */ (0,
|
|
4626
|
-
/* @__PURE__ */ (0,
|
|
4752
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-rate__base", children: content }),
|
|
4753
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-rate__fill", style: { width: `${fill * 100}%` }, children: content })
|
|
4627
4754
|
] }) }, whole);
|
|
4628
4755
|
}) });
|
|
4629
4756
|
}
|
|
4630
4757
|
function BadgeRibbon({ text, color, placement = "end", className = "", children, ...props }) {
|
|
4631
|
-
return /* @__PURE__ */ (0,
|
|
4758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `sia-ribbon-wrap ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
4632
4759
|
children,
|
|
4633
|
-
/* @__PURE__ */ (0,
|
|
4760
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `sia-ribbon sia-ribbon--${placement}`, style: { backgroundColor: color }, children: text })
|
|
4634
4761
|
] });
|
|
4635
4762
|
}
|
|
4636
4763
|
function Badge({ count, showZero = false, overflowCount = 99, dot = false, status, text, color, offset = [0, 0], size = "default", className = "", children, style, ...props }) {
|
|
4637
4764
|
const numeric = typeof count === "number";
|
|
4638
4765
|
const hidden = !dot && !status && (count === void 0 || count === null || count === 0 && !showZero);
|
|
4639
4766
|
const display = numeric && count > overflowCount ? `${overflowCount}+` : count;
|
|
4640
|
-
const badge = !hidden ? /* @__PURE__ */ (0,
|
|
4641
|
-
if (status && !children) return /* @__PURE__ */ (0,
|
|
4767
|
+
const badge = !hidden ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("sup", { className: `sia-badge__count${dot || status ? " sia-badge__dot" : ""}${status ? ` sia-badge__dot--${status}` : ""} sia-badge__count--${size}`, style: { backgroundColor: color, transform: `translate(calc(50% + ${offset[0]}px), calc(-50% + ${offset[1]}px))` }, children: dot || status ? null : display }) : null;
|
|
4768
|
+
if (status && !children) return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-badge sia-badge--status ${className}`.trim(), style, ...withTitleTooltip(props), children: [
|
|
4642
4769
|
badge,
|
|
4643
|
-
text ? /* @__PURE__ */ (0,
|
|
4770
|
+
text ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-badge__text", children: text }) : null
|
|
4644
4771
|
] });
|
|
4645
|
-
return /* @__PURE__ */ (0,
|
|
4772
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-badge ${className}`.trim(), style, ...withTitleTooltip(props), children: [
|
|
4646
4773
|
children,
|
|
4647
4774
|
badge,
|
|
4648
|
-
text && !status ? /* @__PURE__ */ (0,
|
|
4775
|
+
text && !status ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-badge__text", children: text }) : null
|
|
4649
4776
|
] });
|
|
4650
4777
|
}
|
|
4651
4778
|
Badge.Ribbon = BadgeRibbon;
|
|
@@ -4663,18 +4790,18 @@ var WEEK = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"
|
|
|
4663
4790
|
var MONTHS = ["\u4E00\u6708", "\u4E8C\u6708", "\u4E09\u6708", "\u56DB\u6708", "\u4E94\u6708", "\u516D\u6708", "\u4E03\u6708", "\u516B\u6708", "\u4E5D\u6708", "\u5341\u6708", "\u5341\u4E00\u6708", "\u5341\u4E8C\u6708"];
|
|
4664
4791
|
function Calendar({ value, defaultValue, mode = "month", fullscreen = true, validRange, disabledDate, dateCellRender, fullCellRender, headerRender, onChange, onSelect, onPanelChange, className = "", ...props }) {
|
|
4665
4792
|
const [selected, setSelected] = useControllableState({ value, defaultValue: defaultValue ?? formatDate(/* @__PURE__ */ new Date()), onChange });
|
|
4666
|
-
const [panelMode, setPanelMode] = (0,
|
|
4667
|
-
const [panel, setPanel] = (0,
|
|
4793
|
+
const [panelMode, setPanelMode] = (0, import_react23.useState)(mode);
|
|
4794
|
+
const [panel, setPanel] = (0, import_react23.useState)(() => {
|
|
4668
4795
|
const date = parseDate(value ?? defaultValue);
|
|
4669
4796
|
return new Date(date.getFullYear(), date.getMonth(), 1);
|
|
4670
4797
|
});
|
|
4671
|
-
(0,
|
|
4798
|
+
(0, import_react23.useEffect)(() => {
|
|
4672
4799
|
if (value) {
|
|
4673
4800
|
const date = parseDate(value);
|
|
4674
4801
|
setPanel(new Date(date.getFullYear(), date.getMonth(), 1));
|
|
4675
4802
|
}
|
|
4676
4803
|
}, [value]);
|
|
4677
|
-
const grid = (0,
|
|
4804
|
+
const grid = (0, import_react23.useMemo)(() => {
|
|
4678
4805
|
const first = new Date(panel.getFullYear(), panel.getMonth(), 1);
|
|
4679
4806
|
const mondayIndex = (first.getDay() + 6) % 7;
|
|
4680
4807
|
return Array.from({ length: 42 }, (_, index) => new Date(panel.getFullYear(), panel.getMonth(), index - mondayIndex + 1));
|
|
@@ -4688,34 +4815,34 @@ function Calendar({ value, defaultValue, mode = "month", fullscreen = true, vali
|
|
|
4688
4815
|
onPanelChange?.(formatDate(panel), next);
|
|
4689
4816
|
}
|
|
4690
4817
|
const headerConfig = { value: formatDate(panel), mode: panelMode, onChange: (next) => setPanelValue(parseDate(next)), onTypeChange: setMode };
|
|
4691
|
-
return /* @__PURE__ */ (0,
|
|
4692
|
-
/* @__PURE__ */ (0,
|
|
4693
|
-
/* @__PURE__ */ (0,
|
|
4694
|
-
/* @__PURE__ */ (0,
|
|
4818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `sia-calendar${fullscreen ? " sia-calendar--fullscreen" : " sia-calendar--mini"} ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
4819
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-calendar__header", children: headerRender ? headerRender(headerConfig) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
4820
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "\u4E0A\u4E00\u9875", onClick: () => setPanelValue(new Date(panel.getFullYear() - (panelMode === "year" ? 1 : 0), panel.getMonth() - (panelMode === "month" ? 1 : 0), 1)), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "chevron-left" }) }),
|
|
4821
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("strong", { children: [
|
|
4695
4822
|
panel.getFullYear(),
|
|
4696
4823
|
" \u5E74",
|
|
4697
4824
|
panelMode === "month" ? ` ${panel.getMonth() + 1} \u6708` : ""
|
|
4698
4825
|
] }),
|
|
4699
|
-
/* @__PURE__ */ (0,
|
|
4700
|
-
/* @__PURE__ */ (0,
|
|
4701
|
-
/* @__PURE__ */ (0,
|
|
4826
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "sia-calendar__modes", children: [
|
|
4827
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: panelMode === "month" ? "is-active" : "", onClick: () => setMode("month"), children: "\u6708" }),
|
|
4828
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: panelMode === "year" ? "is-active" : "", onClick: () => setMode("year"), children: "\u5E74" })
|
|
4702
4829
|
] }),
|
|
4703
|
-
/* @__PURE__ */ (0,
|
|
4830
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", "aria-label": "\u4E0B\u4E00\u9875", onClick: () => setPanelValue(new Date(panel.getFullYear() + (panelMode === "year" ? 1 : 0), panel.getMonth() + (panelMode === "month" ? 1 : 0), 1)), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "chevron-right" }) })
|
|
4704
4831
|
] }) }),
|
|
4705
|
-
panelMode === "year" ? /* @__PURE__ */ (0,
|
|
4832
|
+
panelMode === "year" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-calendar__months", children: MONTHS.map((month, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: panel.getMonth() === index ? "is-selected" : "", onClick: () => {
|
|
4706
4833
|
setPanelValue(new Date(panel.getFullYear(), index, 1));
|
|
4707
4834
|
setMode("month");
|
|
4708
|
-
}, children: month }, month)) }) : /* @__PURE__ */ (0,
|
|
4709
|
-
/* @__PURE__ */ (0,
|
|
4710
|
-
/* @__PURE__ */ (0,
|
|
4835
|
+
}, children: month }, month)) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
4836
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-calendar__week", children: WEEK.map((day) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: day }, day)) }),
|
|
4837
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-calendar__grid", children: grid.map((date) => {
|
|
4711
4838
|
const key = formatDate(date);
|
|
4712
4839
|
const outside = date.getMonth() !== panel.getMonth();
|
|
4713
4840
|
const disabled = Boolean(disabledDate?.(key) || validRange && (key < validRange[0] || key > validRange[1]));
|
|
4714
|
-
const origin = /* @__PURE__ */ (0,
|
|
4715
|
-
/* @__PURE__ */ (0,
|
|
4841
|
+
const origin = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
4842
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: date.getDate() }),
|
|
4716
4843
|
dateCellRender?.(key)
|
|
4717
4844
|
] });
|
|
4718
|
-
return /* @__PURE__ */ (0,
|
|
4845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { disabled, className: `${outside ? "is-outside" : ""}${selected === key ? " is-selected" : ""}${formatDate(/* @__PURE__ */ new Date()) === key ? " is-today" : ""}`, onClick: () => {
|
|
4719
4846
|
setSelected(key);
|
|
4720
4847
|
onSelect?.(key);
|
|
4721
4848
|
if (outside) setPanelValue(new Date(date.getFullYear(), date.getMonth(), 1));
|
|
@@ -4725,9 +4852,9 @@ function Calendar({ value, defaultValue, mode = "month", fullscreen = true, vali
|
|
|
4725
4852
|
] });
|
|
4726
4853
|
}
|
|
4727
4854
|
function Carousel({ autoplay = false, autoplaySpeed = 3e3, arrows = false, dots = true, effect = "scroll", infinite = true, initialSlide = 0, pauseOnHover = true, beforeChange, afterChange, className = "", children, ...props }) {
|
|
4728
|
-
const slides =
|
|
4729
|
-
const [current, setCurrent] = (0,
|
|
4730
|
-
const [paused, setPaused] = (0,
|
|
4855
|
+
const slides = import_react23.Children.toArray(children);
|
|
4856
|
+
const [current, setCurrent] = (0, import_react23.useState)(Math.min(initialSlide, Math.max(0, slides.length - 1)));
|
|
4857
|
+
const [paused, setPaused] = (0, import_react23.useState)(false);
|
|
4731
4858
|
function go(next) {
|
|
4732
4859
|
if (!slides.length) return;
|
|
4733
4860
|
const resolved = infinite ? (next + slides.length) % slides.length : Math.max(0, Math.min(slides.length - 1, next));
|
|
@@ -4736,18 +4863,18 @@ function Carousel({ autoplay = false, autoplaySpeed = 3e3, arrows = false, dots
|
|
|
4736
4863
|
setCurrent(resolved);
|
|
4737
4864
|
afterChange?.(resolved);
|
|
4738
4865
|
}
|
|
4739
|
-
(0,
|
|
4866
|
+
(0, import_react23.useEffect)(() => {
|
|
4740
4867
|
if (!autoplay || paused || slides.length < 2) return;
|
|
4741
4868
|
const timer = window.setInterval(() => go(current + 1), autoplaySpeed);
|
|
4742
4869
|
return () => window.clearInterval(timer);
|
|
4743
4870
|
}, [autoplay, autoplaySpeed, current, paused, slides.length]);
|
|
4744
|
-
return /* @__PURE__ */ (0,
|
|
4745
|
-
/* @__PURE__ */ (0,
|
|
4746
|
-
arrows ? /* @__PURE__ */ (0,
|
|
4747
|
-
/* @__PURE__ */ (0,
|
|
4748
|
-
/* @__PURE__ */ (0,
|
|
4871
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `sia-carousel sia-carousel--${effect} ${className}`.trim(), onMouseEnter: pauseOnHover ? () => setPaused(true) : void 0, onMouseLeave: pauseOnHover ? () => setPaused(false) : void 0, ...withTitleTooltip(props), children: [
|
|
4872
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-carousel__viewport", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-carousel__track", style: effect === "scroll" ? { transform: `translateX(-${current * 100}%)` } : void 0, children: slides.map((slide, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `sia-carousel__slide${index === current ? " is-active" : ""}`, "aria-hidden": index !== current, children: slide }, index)) }) }),
|
|
4873
|
+
arrows ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
4874
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "sia-carousel__arrow sia-carousel__arrow--prev", disabled: !infinite && current === 0, "aria-label": "\u4E0A\u4E00\u5F20", onClick: () => go(current - 1), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "chevron-left" }) }),
|
|
4875
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "sia-carousel__arrow sia-carousel__arrow--next", disabled: !infinite && current === slides.length - 1, "aria-label": "\u4E0B\u4E00\u5F20", onClick: () => go(current + 1), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "chevron-right" }) })
|
|
4749
4876
|
] }) : null,
|
|
4750
|
-
dots ? /* @__PURE__ */ (0,
|
|
4877
|
+
dots ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `sia-carousel__dots${typeof dots === "object" && dots.className ? ` ${dots.className}` : ""}`, children: slides.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { "aria-label": `\u5207\u6362\u5230\u7B2C ${index + 1} \u5F20`, "aria-current": index === current, onClick: () => go(index), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", {}) }, index)) }) : null
|
|
4751
4878
|
] });
|
|
4752
4879
|
}
|
|
4753
4880
|
function CollapsePanel({
|
|
@@ -4756,8 +4883,8 @@ function CollapsePanel({
|
|
|
4756
4883
|
destroyInactivePanel = false,
|
|
4757
4884
|
children
|
|
4758
4885
|
}) {
|
|
4759
|
-
const [keepChildren, setKeepChildren] = (0,
|
|
4760
|
-
(0,
|
|
4886
|
+
const [keepChildren, setKeepChildren] = (0, import_react23.useState)(open || forceRender || !destroyInactivePanel);
|
|
4887
|
+
(0, import_react23.useEffect)(() => {
|
|
4761
4888
|
if (open || forceRender || !destroyInactivePanel) {
|
|
4762
4889
|
setKeepChildren(true);
|
|
4763
4890
|
return void 0;
|
|
@@ -4766,12 +4893,12 @@ function CollapsePanel({
|
|
|
4766
4893
|
return () => window.clearTimeout(timer);
|
|
4767
4894
|
}, [destroyInactivePanel, forceRender, open]);
|
|
4768
4895
|
const renderChildren = open || forceRender || !destroyInactivePanel || keepChildren;
|
|
4769
|
-
return /* @__PURE__ */ (0,
|
|
4896
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-collapse__panel", "aria-hidden": !open, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-collapse__panel-motion", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "sia-collapse__panel-body", children: renderChildren ? children : null }) }) });
|
|
4770
4897
|
}
|
|
4771
4898
|
function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false, bordered = true, ghost = false, destroyInactivePanel = false, expandIconPosition = "start", onChange, className = "", ...props }) {
|
|
4772
4899
|
const normalize = (key) => Array.isArray(key) ? [...key] : key === void 0 ? [] : [key];
|
|
4773
4900
|
const controlled = activeKey !== void 0;
|
|
4774
|
-
const [internal, setInternal] = (0,
|
|
4901
|
+
const [internal, setInternal] = (0, import_react23.useState)(normalize(defaultActiveKey));
|
|
4775
4902
|
const openKeys = controlled ? normalize(activeKey) : internal;
|
|
4776
4903
|
function toggle(item) {
|
|
4777
4904
|
if (item.disabled || item.collapsible === "disabled") return;
|
|
@@ -4781,36 +4908,36 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
|
|
|
4781
4908
|
onChange?.(accordion ? next[0] ?? "" : next);
|
|
4782
4909
|
}
|
|
4783
4910
|
const borderClassName = !bordered || ghost ? "sia-collapse--borderless" : "sia-collapse--bordered";
|
|
4784
|
-
return /* @__PURE__ */ (0,
|
|
4911
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `sia-collapse ${borderClassName}${ghost ? " sia-collapse--ghost" : ""} sia-collapse--icon-${expandIconPosition} ${className}`.trim(), ...withTitleTooltip(props), children: items.map((item) => {
|
|
4785
4912
|
const open = openKeys.includes(item.key);
|
|
4786
|
-
const arrow = item.showArrow === false ? null : /* @__PURE__ */ (0,
|
|
4787
|
-
return /* @__PURE__ */ (0,
|
|
4788
|
-
/* @__PURE__ */ (0,
|
|
4913
|
+
const arrow = item.showArrow === false ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "sia-collapse__arrow", "aria-label": open ? "\u6536\u8D77" : "\u5C55\u5F00", onClick: item.collapsible === "icon" ? () => toggle(item) : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "chevron-right", size: 14 }) });
|
|
4914
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: `sia-collapse__item${open ? " is-open" : ""}${item.disabled ? " is-disabled" : ""} ${item.className ?? ""}`.trim(), children: [
|
|
4915
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("header", { className: "sia-collapse__header", role: "button", tabIndex: item.disabled ? -1 : 0, "aria-expanded": open, onClick: item.collapsible === "icon" ? void 0 : () => toggle(item), onKeyDown: (event) => {
|
|
4789
4916
|
if (event.key === "Enter" || event.key === " ") {
|
|
4790
4917
|
event.preventDefault();
|
|
4791
4918
|
toggle(item);
|
|
4792
4919
|
}
|
|
4793
4920
|
}, children: [
|
|
4794
4921
|
expandIconPosition === "start" ? arrow : null,
|
|
4795
|
-
/* @__PURE__ */ (0,
|
|
4796
|
-
item.extra ? /* @__PURE__ */ (0,
|
|
4922
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-collapse__label", children: item.label }),
|
|
4923
|
+
item.extra ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-collapse__extra", onClick: (event) => event.stopPropagation(), children: item.extra }) : null,
|
|
4797
4924
|
expandIconPosition === "end" ? arrow : null
|
|
4798
4925
|
] }),
|
|
4799
|
-
/* @__PURE__ */ (0,
|
|
4926
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CollapsePanel, { open, forceRender: item.forceRender, destroyInactivePanel, children: item.children })
|
|
4800
4927
|
] }, item.key);
|
|
4801
4928
|
}) });
|
|
4802
4929
|
}
|
|
4803
4930
|
function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
4804
|
-
const previewRef = (0,
|
|
4805
|
-
const stageRef = (0,
|
|
4806
|
-
const [natural, setNatural] = (0,
|
|
4807
|
-
const [area, setArea] = (0,
|
|
4808
|
-
const [zoom, setZoom] = (0,
|
|
4809
|
-
const [rotation, setRotation] = (0,
|
|
4810
|
-
const [flip, setFlip] = (0,
|
|
4811
|
-
const [pan, setPan] = (0,
|
|
4812
|
-
const [failed, setFailed] = (0,
|
|
4813
|
-
const drag = (0,
|
|
4931
|
+
const previewRef = (0, import_react23.useRef)(null);
|
|
4932
|
+
const stageRef = (0, import_react23.useRef)(null);
|
|
4933
|
+
const [natural, setNatural] = (0, import_react23.useState)({ src: "", width: 0, height: 0 });
|
|
4934
|
+
const [area, setArea] = (0, import_react23.useState)({ width: 0, height: 0 });
|
|
4935
|
+
const [zoom, setZoom] = (0, import_react23.useState)(1);
|
|
4936
|
+
const [rotation, setRotation] = (0, import_react23.useState)(0);
|
|
4937
|
+
const [flip, setFlip] = (0, import_react23.useState)({ x: 1, y: 1 });
|
|
4938
|
+
const [pan, setPan] = (0, import_react23.useState)({ x: 0, y: 0 });
|
|
4939
|
+
const [failed, setFailed] = (0, import_react23.useState)(false);
|
|
4940
|
+
const drag = (0, import_react23.useRef)();
|
|
4814
4941
|
useOverlayLifecycle(open, previewRef, () => onOpenChange(false));
|
|
4815
4942
|
const reset = () => {
|
|
4816
4943
|
setZoom(1);
|
|
@@ -4819,11 +4946,11 @@ function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
|
4819
4946
|
setPan({ x: 0, y: 0 });
|
|
4820
4947
|
drag.current = void 0;
|
|
4821
4948
|
};
|
|
4822
|
-
(0,
|
|
4949
|
+
(0, import_react23.useEffect)(() => {
|
|
4823
4950
|
reset();
|
|
4824
4951
|
setFailed(false);
|
|
4825
4952
|
}, [open, src]);
|
|
4826
|
-
(0,
|
|
4953
|
+
(0, import_react23.useEffect)(() => {
|
|
4827
4954
|
const stage = stageRef.current;
|
|
4828
4955
|
if (!open || !stage) return;
|
|
4829
4956
|
const measure = () => {
|
|
@@ -4840,12 +4967,12 @@ function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
|
4840
4967
|
const fit = ready ? Math.min(1, area.width / (sideways ? natural.height : natural.width), area.height / (sideways ? natural.width : natural.height)) : 0;
|
|
4841
4968
|
const changeZoom = (factor) => setZoom((value) => Math.max(0.25, Math.min(8, value * factor)));
|
|
4842
4969
|
if (!open || !src || typeof document === "undefined") return null;
|
|
4843
|
-
return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0,
|
|
4844
|
-
/* @__PURE__ */ (0,
|
|
4970
|
+
return (0, import_react_dom4.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: previewRef, className: "sia-image-preview", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", tabIndex: -1, onClick: () => onOpenChange(false), children: [
|
|
4971
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", className: "sia-image-preview__close", "aria-label": "\u5173\u95ED\u9884\u89C8", onClick: (event) => {
|
|
4845
4972
|
event.stopPropagation();
|
|
4846
4973
|
onOpenChange(false);
|
|
4847
|
-
}, children: /* @__PURE__ */ (0,
|
|
4848
|
-
/* @__PURE__ */ (0,
|
|
4974
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "close" }) }),
|
|
4975
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: stageRef, className: "sia-image-preview__stage", children: failed ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-image-preview__error", children: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25" }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
4849
4976
|
"img",
|
|
4850
4977
|
{
|
|
4851
4978
|
src,
|
|
@@ -4878,31 +5005,31 @@ function ImagePreview({ open, src, alt = "", onOpenChange }) {
|
|
|
4878
5005
|
},
|
|
4879
5006
|
src
|
|
4880
5007
|
) }),
|
|
4881
|
-
/* @__PURE__ */ (0,
|
|
4882
|
-
/* @__PURE__ */ (0,
|
|
4883
|
-
/* @__PURE__ */ (0,
|
|
4884
|
-
/* @__PURE__ */ (0,
|
|
5008
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "sia-image-preview__toolbar", role: "toolbar", "aria-label": "\u56FE\u7247\u64CD\u4F5C", onClick: (event) => event.stopPropagation(), children: [
|
|
5009
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u6C34\u5E73\u7FFB\u8F6C", "aria-label": "\u6C34\u5E73\u7FFB\u8F6C", disabled: !ready, onClick: () => setFlip((value) => ({ ...value, x: -value.x })), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "flip-horizontal", size: 20 }) }),
|
|
5010
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u5782\u76F4\u7FFB\u8F6C", "aria-label": "\u5782\u76F4\u7FFB\u8F6C", disabled: !ready, onClick: () => setFlip((value) => ({ ...value, y: -value.y })), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "flip-vertical", size: 20 }) }),
|
|
5011
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u5411\u5DE6\u65CB\u8F6C", "aria-label": "\u5411\u5DE6\u65CB\u8F6C", disabled: !ready, onClick: () => {
|
|
4885
5012
|
setRotation((value) => value - 90);
|
|
4886
5013
|
setPan({ x: 0, y: 0 });
|
|
4887
|
-
}, children: /* @__PURE__ */ (0,
|
|
4888
|
-
/* @__PURE__ */ (0,
|
|
5014
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "rotate-left", size: 20 }) }),
|
|
5015
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u5411\u53F3\u65CB\u8F6C", "aria-label": "\u5411\u53F3\u65CB\u8F6C", disabled: !ready, onClick: () => {
|
|
4889
5016
|
setRotation((value) => value + 90);
|
|
4890
5017
|
setPan({ x: 0, y: 0 });
|
|
4891
|
-
}, children: /* @__PURE__ */ (0,
|
|
4892
|
-
/* @__PURE__ */ (0,
|
|
4893
|
-
/* @__PURE__ */ (0,
|
|
4894
|
-
/* @__PURE__ */ (0,
|
|
4895
|
-
/* @__PURE__ */ (0,
|
|
5018
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "rotate-right", size: 20 }) }),
|
|
5019
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u7F29\u5C0F", "aria-label": "\u7F29\u5C0F", disabled: !ready || zoom <= 0.25, onClick: () => changeZoom(1 / 1.25), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "zoom-out", size: 20 }) }),
|
|
5020
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("output", { className: "sia-image-preview__scale", "aria-label": "\u5F53\u524D\u7F29\u653E\u6BD4\u4F8B", "aria-live": "polite", children: ready ? `${Math.round(fit * zoom * 100)}%` : "\u2014" }),
|
|
5021
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u653E\u5927", "aria-label": "\u653E\u5927", disabled: !ready || zoom >= 8, onClick: () => changeZoom(1.25), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "zoom-in", size: 20 }) }),
|
|
5022
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "text", title: "\u9002\u5E94\u7A97\u53E3", "aria-label": "\u9002\u5E94\u7A97\u53E3", disabled: !ready, onClick: reset, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "refresh", size: 20 }) })
|
|
4896
5023
|
] })
|
|
4897
5024
|
] }), document.body);
|
|
4898
5025
|
}
|
|
4899
5026
|
function Image2({ fallback, placeholder, preview = true, rootClassName = "", className = "", src, alt = "", onError, style, ...props }) {
|
|
4900
5027
|
const config = typeof preview === "object" ? preview : {};
|
|
4901
5028
|
const controlled = typeof preview === "object" && preview.open !== void 0;
|
|
4902
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
5029
|
+
const [internalOpen, setInternalOpen] = (0, import_react23.useState)(false);
|
|
4903
5030
|
const open = controlled ? config.open : internalOpen;
|
|
4904
|
-
const [loaded, setLoaded] = (0,
|
|
4905
|
-
const [failed, setFailed] = (0,
|
|
5031
|
+
const [loaded, setLoaded] = (0, import_react23.useState)(false);
|
|
5032
|
+
const [failed, setFailed] = (0, import_react23.useState)(false);
|
|
4906
5033
|
const displaySrc = failed && fallback ? fallback : src;
|
|
4907
5034
|
const radius = typeof style?.borderRadius === "number" ? `${style.borderRadius}px` : style?.borderRadius;
|
|
4908
5035
|
const rootStyle = {
|
|
@@ -4913,25 +5040,25 @@ function Image2({ fallback, placeholder, preview = true, rootClassName = "", cla
|
|
|
4913
5040
|
if (!controlled) setInternalOpen(next);
|
|
4914
5041
|
config.onOpenChange?.(next);
|
|
4915
5042
|
}
|
|
4916
|
-
return /* @__PURE__ */ (0,
|
|
4917
|
-
!loaded && placeholder ? /* @__PURE__ */ (0,
|
|
4918
|
-
/* @__PURE__ */ (0,
|
|
5043
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-image ${rootClassName}`.trim(), style: rootStyle, children: [
|
|
5044
|
+
!loaded && placeholder ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sia-image__placeholder", children: placeholder }) : null,
|
|
5045
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { ...withTitleTooltip(props), src: displaySrc, alt, className, onLoad: () => setLoaded(true), onError: (event) => {
|
|
4919
5046
|
if (!failed && fallback) setFailed(true);
|
|
4920
5047
|
onError?.(event);
|
|
4921
5048
|
} }),
|
|
4922
|
-
preview ? /* @__PURE__ */ (0,
|
|
4923
|
-
/* @__PURE__ */ (0,
|
|
5049
|
+
preview ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: "sia-image__mask", "aria-label": "\u9884\u89C8\u56FE\u7247", onClick: () => setOpen(true), children: config.mask ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
5050
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { name: "eye" }),
|
|
4924
5051
|
"\u9884\u89C8"
|
|
4925
5052
|
] }) }) : null,
|
|
4926
|
-
/* @__PURE__ */ (0,
|
|
5053
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ImagePreview, { open, src: config.src ?? displaySrc, alt, onOpenChange: setOpen })
|
|
4927
5054
|
] });
|
|
4928
5055
|
}
|
|
4929
5056
|
|
|
4930
5057
|
// src/components/Feedback.tsx
|
|
4931
|
-
var
|
|
5058
|
+
var import_react24 = require("react");
|
|
4932
5059
|
var import_react_dom5 = require("react-dom");
|
|
4933
5060
|
var import_client3 = require("react-dom/client");
|
|
4934
|
-
var
|
|
5061
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
4935
5062
|
function Popconfirm({
|
|
4936
5063
|
children,
|
|
4937
5064
|
title,
|
|
@@ -4946,7 +5073,7 @@ function Popconfirm({
|
|
|
4946
5073
|
defaultOpen = false,
|
|
4947
5074
|
disabled = false,
|
|
4948
5075
|
showCancel = true,
|
|
4949
|
-
icon = /* @__PURE__ */ (0,
|
|
5076
|
+
icon = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "question", variant: "filled" }),
|
|
4950
5077
|
onConfirm,
|
|
4951
5078
|
onConfirmError,
|
|
4952
5079
|
onCancel,
|
|
@@ -4956,9 +5083,9 @@ function Popconfirm({
|
|
|
4956
5083
|
skipConfirm = false
|
|
4957
5084
|
}) {
|
|
4958
5085
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
4959
|
-
const [loading, setLoading] = (0,
|
|
4960
|
-
const pendingRef = (0,
|
|
4961
|
-
const requestRef = (0,
|
|
5086
|
+
const [loading, setLoading] = (0, import_react24.useState)(false);
|
|
5087
|
+
const pendingRef = (0, import_react24.useRef)(false);
|
|
5088
|
+
const requestRef = (0, import_react24.useRef)(0);
|
|
4962
5089
|
function changeVisible(next) {
|
|
4963
5090
|
if (!next) {
|
|
4964
5091
|
requestRef.current++;
|
|
@@ -4967,7 +5094,7 @@ function Popconfirm({
|
|
|
4967
5094
|
}
|
|
4968
5095
|
setVisible(next);
|
|
4969
5096
|
}
|
|
4970
|
-
(0,
|
|
5097
|
+
(0, import_react24.useEffect)(() => {
|
|
4971
5098
|
if (!visible) {
|
|
4972
5099
|
requestRef.current++;
|
|
4973
5100
|
pendingRef.current = false;
|
|
@@ -4995,32 +5122,32 @@ function Popconfirm({
|
|
|
4995
5122
|
}
|
|
4996
5123
|
}
|
|
4997
5124
|
}
|
|
4998
|
-
const content = /* @__PURE__ */ (0,
|
|
4999
|
-
/* @__PURE__ */ (0,
|
|
5000
|
-
/* @__PURE__ */ (0,
|
|
5001
|
-
/* @__PURE__ */ (0,
|
|
5002
|
-
/* @__PURE__ */ (0,
|
|
5003
|
-
description ? /* @__PURE__ */ (0,
|
|
5125
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-popconfirm", children: [
|
|
5126
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-popconfirm__message", children: [
|
|
5127
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: icon }),
|
|
5128
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
5129
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: title }),
|
|
5130
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: description }) : null
|
|
5004
5131
|
] })
|
|
5005
5132
|
] }),
|
|
5006
|
-
/* @__PURE__ */ (0,
|
|
5007
|
-
showCancel ? /* @__PURE__ */ (0,
|
|
5133
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-popconfirm__actions", children: [
|
|
5134
|
+
showCancel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", ...cancelButtonProps, onClick: (event) => {
|
|
5008
5135
|
cancelButtonProps?.onClick?.(event);
|
|
5009
5136
|
if (event.defaultPrevented) return;
|
|
5010
5137
|
onCancel?.(event);
|
|
5011
5138
|
changeVisible(false);
|
|
5012
5139
|
}, children: cancelText }) : null,
|
|
5013
|
-
/* @__PURE__ */ (0,
|
|
5140
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", variant: "primary", ...okButtonProps, loading: loading || okButtonProps?.loading, onClick: (event) => {
|
|
5014
5141
|
okButtonProps?.onClick?.(event);
|
|
5015
5142
|
if (!event.defaultPrevented) void confirm(event);
|
|
5016
5143
|
}, children: okText })
|
|
5017
5144
|
] })
|
|
5018
5145
|
] });
|
|
5019
|
-
const target = skipConfirm ? (0,
|
|
5146
|
+
const target = skipConfirm ? (0, import_react24.cloneElement)(children, { onClick: (event) => {
|
|
5020
5147
|
children.props.onClick?.(event);
|
|
5021
5148
|
if (!event.defaultPrevented) void confirm(event);
|
|
5022
5149
|
} }) : children;
|
|
5023
|
-
return /* @__PURE__ */ (0,
|
|
5150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Popover, { content, placement, arrow, autoAdjustOverflow, trigger: disabled || skipConfirm ? [] : trigger, open: visible && !skipConfirm && !disabled, onOpenChange: changeVisible, children: target });
|
|
5024
5151
|
}
|
|
5025
5152
|
function Progress({
|
|
5026
5153
|
percent: percent2 = 0,
|
|
@@ -5043,31 +5170,31 @@ function Progress({
|
|
|
5043
5170
|
const resolved = status ?? (safe >= 100 ? "success" : "normal");
|
|
5044
5171
|
const color = typeof strokeColor === "string" ? strokeColor : void 0;
|
|
5045
5172
|
const background = typeof strokeColor === "object" ? `linear-gradient(90deg, ${strokeColor.from}, ${strokeColor.to})` : color;
|
|
5046
|
-
const label = format?.(safe, success?.percent) ?? (resolved === "exception" ? /* @__PURE__ */ (0,
|
|
5173
|
+
const label = format?.(safe, success?.percent) ?? (resolved === "exception" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "close" }) : resolved === "success" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "check" }) : `${safe}%`);
|
|
5047
5174
|
if (type !== "line") {
|
|
5048
5175
|
const radius = 46;
|
|
5049
5176
|
const circumference = 2 * Math.PI * radius;
|
|
5050
5177
|
const dash = circumference * (safe / 100);
|
|
5051
|
-
return /* @__PURE__ */ (0,
|
|
5052
|
-
/* @__PURE__ */ (0,
|
|
5053
|
-
/* @__PURE__ */ (0,
|
|
5054
|
-
/* @__PURE__ */ (0,
|
|
5178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-progress sia-progress--${type} sia-progress--${resolved} ${className}`.trim(), style: { width, height: width, ...style }, ...withTitleTooltip(props), children: [
|
|
5179
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("svg", { viewBox: "0 0 100 100", role: "progressbar", "aria-valuenow": safe, children: [
|
|
5180
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { className: "sia-progress__trail", cx: "50", cy: "50", r: radius, style: { stroke: trailColor } }),
|
|
5181
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { className: "sia-progress__circle", cx: "50", cy: "50", r: radius, style: { stroke: color, strokeDasharray: type === "dashboard" ? `${circumference * 0.75} ${circumference * 0.25}` : circumference, strokeDashoffset: (type === "dashboard" ? circumference * 0.75 : circumference) - dash * (type === "dashboard" ? 0.75 : 1), strokeWidth } })
|
|
5055
5182
|
] }),
|
|
5056
|
-
showInfo ? /* @__PURE__ */ (0,
|
|
5183
|
+
showInfo ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-progress__text", children: label }) : null
|
|
5057
5184
|
] });
|
|
5058
5185
|
}
|
|
5059
5186
|
const height = Array.isArray(size) ? size[1] : typeof size === "number" ? size : size === "small" ? 6 : strokeWidth;
|
|
5060
|
-
return /* @__PURE__ */ (0,
|
|
5061
|
-
/* @__PURE__ */ (0,
|
|
5062
|
-
/* @__PURE__ */ (0,
|
|
5063
|
-
success?.percent ? /* @__PURE__ */ (0,
|
|
5187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-progress sia-progress--line sia-progress--${resolved} ${className}`.trim(), style, ...withTitleTooltip(props), children: [
|
|
5188
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-progress__outer", style: { height, backgroundColor: trailColor }, children: steps ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-progress__steps", children: Array.from({ length: steps }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: index < Math.round(steps * safe / 100) ? "is-active" : "", style: { background: index < Math.round(steps * safe / 100) ? background : trailColor } }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
5189
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-progress__bar", style: { width: `${safe}%`, background } }),
|
|
5190
|
+
success?.percent ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-progress__success", style: { width: `${success.percent}%`, background: success.strokeColor } }) : null
|
|
5064
5191
|
] }) }),
|
|
5065
|
-
showInfo ? /* @__PURE__ */ (0,
|
|
5192
|
+
showInfo ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-progress__info", children: label }) : null
|
|
5066
5193
|
] });
|
|
5067
5194
|
}
|
|
5068
5195
|
function Spin({ spinning = true, size = "default", tip, indicator, delay = 0, fullscreen = false, className = "", children, ...props }) {
|
|
5069
|
-
const [visible, setVisible] = (0,
|
|
5070
|
-
(0,
|
|
5196
|
+
const [visible, setVisible] = (0, import_react24.useState)(delay === 0 && spinning);
|
|
5197
|
+
(0, import_react24.useEffect)(() => {
|
|
5071
5198
|
if (!spinning) {
|
|
5072
5199
|
setVisible(false);
|
|
5073
5200
|
return;
|
|
@@ -5075,27 +5202,27 @@ function Spin({ spinning = true, size = "default", tip, indicator, delay = 0, fu
|
|
|
5075
5202
|
const timer = window.setTimeout(() => setVisible(true), delay);
|
|
5076
5203
|
return () => window.clearTimeout(timer);
|
|
5077
5204
|
}, [delay, spinning]);
|
|
5078
|
-
const spinner = visible ? /* @__PURE__ */ (0,
|
|
5079
|
-
indicator ?? /* @__PURE__ */ (0,
|
|
5080
|
-
/* @__PURE__ */ (0,
|
|
5081
|
-
/* @__PURE__ */ (0,
|
|
5082
|
-
/* @__PURE__ */ (0,
|
|
5083
|
-
/* @__PURE__ */ (0,
|
|
5205
|
+
const spinner = visible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-spin sia-spin--${size}`, role: "status", "aria-live": "polite", children: [
|
|
5206
|
+
indicator ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sia-spin__indicator", children: [
|
|
5207
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", {}),
|
|
5208
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", {}),
|
|
5209
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", {}),
|
|
5210
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", {})
|
|
5084
5211
|
] }),
|
|
5085
|
-
tip ? /* @__PURE__ */ (0,
|
|
5212
|
+
tip ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-spin__tip", children: tip }) : null
|
|
5086
5213
|
] }) : null;
|
|
5087
|
-
if (fullscreen) return visible && typeof document !== "undefined" ? (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0,
|
|
5088
|
-
if (!children) return /* @__PURE__ */ (0,
|
|
5089
|
-
return /* @__PURE__ */ (0,
|
|
5214
|
+
if (fullscreen) return visible && typeof document !== "undefined" ? (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-spin-fullscreen", children: spinner }), document.body) : null;
|
|
5215
|
+
if (!children) return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `sia-spin-wrap ${className}`.trim(), ...withTitleTooltip(props), children: spinner });
|
|
5216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-spin-container${visible ? " is-spinning" : ""} ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
5090
5217
|
children,
|
|
5091
|
-
visible ? /* @__PURE__ */ (0,
|
|
5218
|
+
visible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-spin-mask", children: spinner }) : null
|
|
5092
5219
|
] });
|
|
5093
5220
|
}
|
|
5094
5221
|
function escapeXml(value) {
|
|
5095
5222
|
return value.replace(/[&<>"']/g, (char) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[char]);
|
|
5096
5223
|
}
|
|
5097
5224
|
function Watermark({ content = "Sia Web UI", image, width = 120, height = 64, rotate = -22, zIndex = 9, gap = [100, 100], offset = [0, 0], font, className = "", children, ...props }) {
|
|
5098
|
-
const background = (0,
|
|
5225
|
+
const background = (0, import_react24.useMemo)(() => {
|
|
5099
5226
|
const tileWidth = width + gap[0], tileHeight = height + gap[1];
|
|
5100
5227
|
const lines = Array.isArray(content) ? content : [content];
|
|
5101
5228
|
const family = font?.fontFamily ?? "sans-serif", size = font?.fontSize ?? 16, weight = font?.fontWeight ?? 400, color = font?.color ?? "rgba(0,0,0,.15)";
|
|
@@ -5103,9 +5230,9 @@ function Watermark({ content = "Sia Web UI", image, width = 120, height = 64, ro
|
|
|
5103
5230
|
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${tileWidth}" height="${tileHeight}"><g transform="translate(${offset[0]} ${offset[1]}) rotate(${rotate} ${width / 2} ${height / 2})">${body}</g></svg>`;
|
|
5104
5231
|
return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
|
|
5105
5232
|
}, [content, font?.color, font?.fontFamily, font?.fontSize, font?.fontWeight, gap[0], gap[1], height, image, offset[0], offset[1], rotate, width]);
|
|
5106
|
-
return /* @__PURE__ */ (0,
|
|
5233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-watermark ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
5107
5234
|
children,
|
|
5108
|
-
/* @__PURE__ */ (0,
|
|
5235
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-watermark__layer", "aria-hidden": "true", style: { zIndex, backgroundImage: background } })
|
|
5109
5236
|
] });
|
|
5110
5237
|
}
|
|
5111
5238
|
var notificationListeners = /* @__PURE__ */ new Set();
|
|
@@ -5125,25 +5252,25 @@ function closeNotification(key) {
|
|
|
5125
5252
|
entry?.onClose?.();
|
|
5126
5253
|
}
|
|
5127
5254
|
function NotificationHost() {
|
|
5128
|
-
const [entries, setEntries] = (0,
|
|
5129
|
-
(0,
|
|
5255
|
+
const [entries, setEntries] = (0, import_react24.useState)(notificationEntries);
|
|
5256
|
+
(0, import_react24.useEffect)(() => {
|
|
5130
5257
|
notificationListeners.add(setEntries);
|
|
5131
5258
|
return () => {
|
|
5132
5259
|
notificationListeners.delete(setEntries);
|
|
5133
5260
|
};
|
|
5134
5261
|
}, []);
|
|
5135
5262
|
const placements = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
|
|
5136
|
-
return /* @__PURE__ */ (0,
|
|
5137
|
-
/* @__PURE__ */ (0,
|
|
5138
|
-
/* @__PURE__ */ (0,
|
|
5139
|
-
/* @__PURE__ */ (0,
|
|
5140
|
-
item.description ? /* @__PURE__ */ (0,
|
|
5263
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: placements.map((placement) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `sia-notification sia-notification--${placement}`, children: entries.filter((item) => (item.placement ?? "topRight") === placement).map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-notification__notice sia-notification__notice--${item.type ?? "info"}`, role: item.role ?? "alert", onClick: item.onClick, children: [
|
|
5264
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-notification__icon", children: item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: item.type === "success" ? "circle-check" : item.type === "warning" ? "warning" : item.type === "error" ? "circle-close" : "info", variant: "filled" }) }),
|
|
5265
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
5266
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: item.message }),
|
|
5267
|
+
item.description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: item.description }) : null,
|
|
5141
5268
|
item.btn
|
|
5142
5269
|
] }),
|
|
5143
|
-
/* @__PURE__ */ (0,
|
|
5270
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", "aria-label": "\u5173\u95ED\u901A\u77E5", onClick: (event) => {
|
|
5144
5271
|
event.stopPropagation();
|
|
5145
5272
|
closeNotification(item.key);
|
|
5146
|
-
}, children: item.closeIcon ?? /* @__PURE__ */ (0,
|
|
5273
|
+
}, children: item.closeIcon ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "close", size: 14 }) })
|
|
5147
5274
|
] }, item.key)) }, placement)) });
|
|
5148
5275
|
}
|
|
5149
5276
|
function ensureNotificationHost() {
|
|
@@ -5151,7 +5278,7 @@ function ensureNotificationHost() {
|
|
|
5151
5278
|
notificationHost = document.createElement("div");
|
|
5152
5279
|
notificationHost.dataset.siaNotificationHost = "";
|
|
5153
5280
|
document.body.appendChild(notificationHost);
|
|
5154
|
-
(0, import_client3.createRoot)(notificationHost).render(/* @__PURE__ */ (0,
|
|
5281
|
+
(0, import_client3.createRoot)(notificationHost).render(/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(NotificationHost, {}));
|
|
5155
5282
|
}
|
|
5156
5283
|
function openNotification(config) {
|
|
5157
5284
|
if (typeof window === "undefined" || typeof document === "undefined") return { key: config.key ?? "ssr", close: () => void 0 };
|
|
@@ -5186,8 +5313,8 @@ var notification = {
|
|
|
5186
5313
|
};
|
|
5187
5314
|
function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, closable = true, disabledInteraction = false, onChange, onClose, onFinish }) {
|
|
5188
5315
|
const [index, setIndex] = useControllableState({ value: current, defaultValue: defaultCurrent, onChange });
|
|
5189
|
-
const [, force] = (0,
|
|
5190
|
-
(0,
|
|
5316
|
+
const [, force] = (0, import_react24.useState)(0);
|
|
5317
|
+
(0, import_react24.useEffect)(() => {
|
|
5191
5318
|
if (!open) return;
|
|
5192
5319
|
const update = () => force((value) => value + 1);
|
|
5193
5320
|
window.addEventListener("resize", update);
|
|
@@ -5203,23 +5330,23 @@ function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, c
|
|
|
5203
5330
|
const rect = target?.getBoundingClientRect();
|
|
5204
5331
|
const placement = step.placement ?? (rect ? "bottom" : "center");
|
|
5205
5332
|
const panelStyle = placement === "center" || !rect ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" } : placement.startsWith("bottom") ? { top: rect.bottom + 14, left: rect.left + rect.width / 2, transform: "translateX(-50%)" } : placement.startsWith("top") ? { top: rect.top - 14, left: rect.left + rect.width / 2, transform: "translate(-50%, -100%)" } : placement === "left" ? { top: rect.top + rect.height / 2, left: rect.left - 14, transform: "translate(-100%, -50%)" } : { top: rect.top + rect.height / 2, left: rect.right + 14, transform: "translateY(-50%)" };
|
|
5206
|
-
return (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0,
|
|
5207
|
-
mask && !rect ? /* @__PURE__ */ (0,
|
|
5208
|
-
rect ? /* @__PURE__ */ (0,
|
|
5209
|
-
/* @__PURE__ */ (0,
|
|
5210
|
-
closable ? /* @__PURE__ */ (0,
|
|
5333
|
+
return (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-tour", role: "dialog", "aria-modal": "true", children: [
|
|
5334
|
+
mask && !rect ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-tour__mask" }) : null,
|
|
5335
|
+
rect ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-tour__target", style: { top: rect.top - 5, left: rect.left - 5, width: rect.width + 10, height: rect.height + 10, pointerEvents: disabledInteraction ? "auto" : "none", boxShadow: mask ? "0 0 0 5px var(--sia-color-surface), 0 0 0 9999px rgb(0 0 0 / 46%)" : "0 0 0 5px var(--sia-color-surface)" } }) : null,
|
|
5336
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-tour__panel", style: panelStyle, children: [
|
|
5337
|
+
closable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "sia-tour__close", "aria-label": "\u5173\u95ED\u5F15\u5BFC", onClick: () => onClose?.(index), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "close", size: 14 }) }) : null,
|
|
5211
5338
|
step.cover,
|
|
5212
|
-
/* @__PURE__ */ (0,
|
|
5213
|
-
step.description ? /* @__PURE__ */ (0,
|
|
5214
|
-
/* @__PURE__ */ (0,
|
|
5215
|
-
/* @__PURE__ */ (0,
|
|
5339
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: step.title }),
|
|
5340
|
+
step.description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-tour__description", children: step.description }) : null,
|
|
5341
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("footer", { children: [
|
|
5342
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
|
|
5216
5343
|
index + 1,
|
|
5217
5344
|
" / ",
|
|
5218
5345
|
steps.length
|
|
5219
5346
|
] }),
|
|
5220
|
-
/* @__PURE__ */ (0,
|
|
5221
|
-
index > 0 ? /* @__PURE__ */ (0,
|
|
5222
|
-
/* @__PURE__ */ (0,
|
|
5347
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
5348
|
+
index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", ...step.prevButtonProps, onClick: () => setIndex(index - 1), children: step.prevButtonProps?.children ?? "\u4E0A\u4E00\u6B65" }) : null,
|
|
5349
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", variant: "primary", ...step.nextButtonProps, onClick: () => {
|
|
5223
5350
|
if (index >= steps.length - 1) onFinish?.();
|
|
5224
5351
|
else setIndex(index + 1);
|
|
5225
5352
|
}, children: step.nextButtonProps?.children ?? (index >= steps.length - 1 ? "\u5B8C\u6210" : "\u4E0B\u4E00\u6B65") })
|
|
@@ -5230,8 +5357,8 @@ function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, c
|
|
|
5230
5357
|
}
|
|
5231
5358
|
|
|
5232
5359
|
// src/components/Card.tsx
|
|
5233
|
-
var
|
|
5234
|
-
var
|
|
5360
|
+
var import_react25 = require("react");
|
|
5361
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
5235
5362
|
function Card({
|
|
5236
5363
|
bordered = true,
|
|
5237
5364
|
title,
|
|
@@ -5260,8 +5387,8 @@ function Card({
|
|
|
5260
5387
|
onKeyDown,
|
|
5261
5388
|
...props
|
|
5262
5389
|
}) {
|
|
5263
|
-
const [internalCollapsed, setInternalCollapsed] = (0,
|
|
5264
|
-
const [internalSelected, setInternalSelected] = (0,
|
|
5390
|
+
const [internalCollapsed, setInternalCollapsed] = (0, import_react25.useState)(defaultCollapsed);
|
|
5391
|
+
const [internalSelected, setInternalSelected] = (0, import_react25.useState)(defaultSelected);
|
|
5265
5392
|
const isSelected = selected ?? internalSelected;
|
|
5266
5393
|
function toggleSelected() {
|
|
5267
5394
|
if (!selectable || disabled) return;
|
|
@@ -5278,11 +5405,11 @@ function Card({
|
|
|
5278
5405
|
if (collapsed === void 0) setInternalCollapsed(nextCollapsed);
|
|
5279
5406
|
onCollapsedChange?.(nextCollapsed);
|
|
5280
5407
|
}
|
|
5281
|
-
const heading = /* @__PURE__ */ (0,
|
|
5282
|
-
accent || accentColor ? /* @__PURE__ */ (0,
|
|
5283
|
-
title ? /* @__PURE__ */ (0,
|
|
5408
|
+
const heading = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "sia-card__heading", children: [
|
|
5409
|
+
accent || accentColor ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: `sia-card__accent${accent ? ` sia-card__accent--${accent}` : ""}`, "aria-hidden": "true" }) : null,
|
|
5410
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "sia-card__title", children: title }) : null
|
|
5284
5411
|
] });
|
|
5285
|
-
return /* @__PURE__ */ (0,
|
|
5412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
5286
5413
|
"section",
|
|
5287
5414
|
{
|
|
5288
5415
|
className: `sia-card${!bordered ? " sia-card--borderless" : ""}${isCollapsed ? " sia-card--collapsed" : ""}${selectable ? " sia-card--selectable" : ""}${selectable && isSelected ? " sia-card--selected" : ""}${hoverActions ? " sia-card--hover-actions" : ""} ${className}`.trim(),
|
|
@@ -5306,18 +5433,18 @@ function Card({
|
|
|
5306
5433
|
}
|
|
5307
5434
|
},
|
|
5308
5435
|
children: [
|
|
5309
|
-
selectable && isSelected && showSelectedIndicator ? /* @__PURE__ */ (0,
|
|
5310
|
-
hasHeader ? /* @__PURE__ */ (0,
|
|
5311
|
-
collapsible ? /* @__PURE__ */ (0,
|
|
5436
|
+
selectable && isSelected && showSelectedIndicator ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-card__selected-corner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "check", size: 16 }) }) : null,
|
|
5437
|
+
hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("header", { className: "sia-card__header", children: [
|
|
5438
|
+
collapsible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("button", { type: "button", className: "sia-card__collapse-trigger", "aria-expanded": !isCollapsed, onClick: toggleCollapsed, children: [
|
|
5312
5439
|
heading,
|
|
5313
|
-
/* @__PURE__ */ (0,
|
|
5440
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: isCollapsed ? "chevron-down" : "chevron-up", size: 16 })
|
|
5314
5441
|
] }) : heading,
|
|
5315
|
-
extra ? /* @__PURE__ */ (0,
|
|
5442
|
+
extra ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-card__extra", children: extra }) : null
|
|
5316
5443
|
] }) : null,
|
|
5317
|
-
!isCollapsed ? /* @__PURE__ */ (0,
|
|
5318
|
-
description ? /* @__PURE__ */ (0,
|
|
5319
|
-
/* @__PURE__ */ (0,
|
|
5320
|
-
hoverActions ? /* @__PURE__ */ (0,
|
|
5444
|
+
!isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
5445
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "sia-card__description", children: description }) : null,
|
|
5446
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `sia-card__body ${bodyClassName}`.trim(), style: mergedBodyStyle, children }),
|
|
5447
|
+
hoverActions ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "sia-card__hover-actions", onClick: (event) => event.stopPropagation(), children: hoverActions }) : null
|
|
5321
5448
|
] }) : null
|
|
5322
5449
|
]
|
|
5323
5450
|
}
|
|
@@ -5325,8 +5452,8 @@ function Card({
|
|
|
5325
5452
|
}
|
|
5326
5453
|
|
|
5327
5454
|
// src/components/Layout.tsx
|
|
5328
|
-
var
|
|
5329
|
-
var
|
|
5455
|
+
var import_react26 = require("react");
|
|
5456
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
5330
5457
|
var gaps = { small: 8, medium: 12, large: 16 };
|
|
5331
5458
|
function resolveGap(gap) {
|
|
5332
5459
|
return typeof gap === "string" && gap in gaps ? gaps[gap] : gap;
|
|
@@ -5367,10 +5494,10 @@ function Flex({
|
|
|
5367
5494
|
flex,
|
|
5368
5495
|
...style
|
|
5369
5496
|
};
|
|
5370
|
-
return /* @__PURE__ */ (0,
|
|
5497
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Component, { className: `sia-flex${isVertical ? " sia-flex--vertical" : ""} ${className}`.trim(), style: mergedStyle, ...withTitleTooltip(props) });
|
|
5371
5498
|
}
|
|
5372
5499
|
function SpaceCompact({ direction = "horizontal", block = false, className = "", ...props }) {
|
|
5373
|
-
return /* @__PURE__ */ (0,
|
|
5500
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `sia-space-compact sia-space-compact--${direction}${block ? " sia-space-compact--block" : ""} ${className}`.trim(), ...withTitleTooltip(props) });
|
|
5374
5501
|
}
|
|
5375
5502
|
function SpaceRoot({
|
|
5376
5503
|
direction = "horizontal",
|
|
@@ -5384,7 +5511,7 @@ function SpaceRoot({
|
|
|
5384
5511
|
...props
|
|
5385
5512
|
}) {
|
|
5386
5513
|
const [horizontalGap, verticalGap] = Array.isArray(size) ? size : [size, size];
|
|
5387
|
-
const items =
|
|
5514
|
+
const items = import_react26.Children.toArray(children);
|
|
5388
5515
|
const mergedStyle = {
|
|
5389
5516
|
columnGap: resolveGap(horizontalGap),
|
|
5390
5517
|
rowGap: resolveGap(verticalGap),
|
|
@@ -5392,9 +5519,9 @@ function SpaceRoot({
|
|
|
5392
5519
|
alignItems: resolveAlign(align),
|
|
5393
5520
|
...style
|
|
5394
5521
|
};
|
|
5395
|
-
return /* @__PURE__ */ (0,
|
|
5522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `sia-space sia-space--${direction} ${className}`.trim(), style: mergedStyle, ...withTitleTooltip(props), children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "sia-space__item", children: [
|
|
5396
5523
|
item,
|
|
5397
|
-
split !== void 0 && index < items.length - 1 ? /* @__PURE__ */ (0,
|
|
5524
|
+
split !== void 0 && index < items.length - 1 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-space__split", children: split }) : null
|
|
5398
5525
|
] }, index)) });
|
|
5399
5526
|
}
|
|
5400
5527
|
var Space = Object.assign(SpaceRoot, {
|
|
@@ -5410,14 +5537,14 @@ function Divider({
|
|
|
5410
5537
|
className = "",
|
|
5411
5538
|
...props
|
|
5412
5539
|
}) {
|
|
5413
|
-
return /* @__PURE__ */ (0,
|
|
5540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
5414
5541
|
"div",
|
|
5415
5542
|
{
|
|
5416
5543
|
className: `sia-divider sia-divider--${orientation} sia-divider--${variant} sia-divider--text-${textAlign}${children ? " sia-divider--with-text" : ""}${plain ? " sia-divider--plain" : ""} ${className}`.trim(),
|
|
5417
5544
|
role: "separator",
|
|
5418
5545
|
"aria-orientation": orientation,
|
|
5419
5546
|
...withTitleTooltip(props),
|
|
5420
|
-
children: children ? /* @__PURE__ */ (0,
|
|
5547
|
+
children: children ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sia-divider__text", children }) : null
|
|
5421
5548
|
}
|
|
5422
5549
|
);
|
|
5423
5550
|
}
|
|
@@ -5437,7 +5564,7 @@ function Row({ gutter = 0, align, justify, wrap = true, className = "", style, .
|
|
|
5437
5564
|
flexWrap: wrap ? "wrap" : "nowrap",
|
|
5438
5565
|
...style
|
|
5439
5566
|
};
|
|
5440
|
-
return /* @__PURE__ */ (0,
|
|
5567
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `sia-row ${className}`.trim(), style: mergedStyle, ...withTitleTooltip(props) });
|
|
5441
5568
|
}
|
|
5442
5569
|
function setColVariables(style, prefix, value) {
|
|
5443
5570
|
if (value === void 0) return;
|
|
@@ -5477,12 +5604,12 @@ function Col({
|
|
|
5477
5604
|
setColVariables(mergedStyle, "lg-", lg);
|
|
5478
5605
|
setColVariables(mergedStyle, "xl-", xl);
|
|
5479
5606
|
setColVariables(mergedStyle, "xxl-", xxl);
|
|
5480
|
-
return /* @__PURE__ */ (0,
|
|
5607
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `sia-col ${className}`.trim(), style: mergedStyle, ...withTitleTooltip(props) });
|
|
5481
5608
|
}
|
|
5482
5609
|
|
|
5483
5610
|
// src/components/Splitter.tsx
|
|
5484
|
-
var
|
|
5485
|
-
var
|
|
5611
|
+
var import_react27 = require("react");
|
|
5612
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
5486
5613
|
function SplitterPanel({
|
|
5487
5614
|
defaultSize: _defaultSize,
|
|
5488
5615
|
defaultCollapsed: _defaultCollapsed,
|
|
@@ -5496,7 +5623,7 @@ function SplitterPanel({
|
|
|
5496
5623
|
className = "",
|
|
5497
5624
|
...props
|
|
5498
5625
|
}) {
|
|
5499
|
-
return /* @__PURE__ */ (0,
|
|
5626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `sia-splitter__panel ${className}`.trim(), ...withTitleTooltip(props) });
|
|
5500
5627
|
}
|
|
5501
5628
|
function normalizeExpandedSizes(panels) {
|
|
5502
5629
|
const specified = panels.map((panel) => panel.props.defaultSize);
|
|
@@ -5531,10 +5658,10 @@ function SplitterRoot({
|
|
|
5531
5658
|
children,
|
|
5532
5659
|
...props
|
|
5533
5660
|
}) {
|
|
5534
|
-
const rootRef = (0,
|
|
5535
|
-
const panels = (0,
|
|
5536
|
-
const [sizes, setSizes] = (0,
|
|
5537
|
-
const expandedSizesRef = (0,
|
|
5661
|
+
const rootRef = (0, import_react27.useRef)(null);
|
|
5662
|
+
const panels = (0, import_react27.useMemo)(() => import_react27.Children.toArray(children).filter(import_react27.isValidElement), [children]);
|
|
5663
|
+
const [sizes, setSizes] = (0, import_react27.useState)(() => normalizeSizes(panels));
|
|
5664
|
+
const expandedSizesRef = (0, import_react27.useRef)(normalizeExpandedSizes(panels));
|
|
5538
5665
|
function resizePair(index, deltaPercent, complete = false) {
|
|
5539
5666
|
setSizes((current) => {
|
|
5540
5667
|
const next = [...current];
|
|
@@ -5612,21 +5739,21 @@ function SplitterRoot({
|
|
|
5612
5739
|
onResize?.(next);
|
|
5613
5740
|
onResizeEnd?.(next);
|
|
5614
5741
|
}
|
|
5615
|
-
return /* @__PURE__ */ (0,
|
|
5742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: rootRef, className: `sia-splitter sia-splitter--${orientation} ${className}`.trim(), ...withTitleTooltip(props), children: panels.flatMap((panel, index) => {
|
|
5616
5743
|
const panelCollapsed = Boolean(panel.props.collapsible) && (sizes[index] ?? 0) <= collapsedSize(panel) + 0.01;
|
|
5617
5744
|
const collapsedContent = panel.props.collapsedContent;
|
|
5618
5745
|
const expandFromCollapsedContent = () => {
|
|
5619
5746
|
if (index === 0) togglePanel(0, "before");
|
|
5620
5747
|
else togglePanel(index - 1, "after");
|
|
5621
5748
|
};
|
|
5622
|
-
const panelNode = (0,
|
|
5749
|
+
const panelNode = (0, import_react27.cloneElement)(panel, {
|
|
5623
5750
|
style: {
|
|
5624
5751
|
...panel.props.style,
|
|
5625
5752
|
flexBasis: `${sizes[index] ?? 0}%`
|
|
5626
5753
|
},
|
|
5627
|
-
children: /* @__PURE__ */ (0,
|
|
5628
|
-
/* @__PURE__ */ (0,
|
|
5629
|
-
collapsedContent !== void 0 ? /* @__PURE__ */ (0,
|
|
5754
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
|
|
5755
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `sia-splitter__panel-content${panelCollapsed ? " is-collapsed" : ""}`, "aria-hidden": panelCollapsed, children: panel.props.children }),
|
|
5756
|
+
collapsedContent !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
5630
5757
|
"button",
|
|
5631
5758
|
{
|
|
5632
5759
|
type: "button",
|
|
@@ -5647,7 +5774,7 @@ function SplitterRoot({
|
|
|
5647
5774
|
const afterCollapsed = (sizes[index + 1] ?? 0) <= collapsedSize(panels[index + 1]) + 0.01;
|
|
5648
5775
|
const beforeUsesRail = beforeCollapsed && panels[index]?.props.collapsedContent !== void 0;
|
|
5649
5776
|
const afterUsesRail = afterCollapsed && panels[index + 1]?.props.collapsedContent !== void 0;
|
|
5650
|
-
return [panelNode, /* @__PURE__ */ (0,
|
|
5777
|
+
return [panelNode, /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
5651
5778
|
"div",
|
|
5652
5779
|
{
|
|
5653
5780
|
className: `sia-splitter__handle${beforeCollapsed && !beforeUsesRail ? " sia-splitter__handle--before-collapsed" : ""}${afterCollapsed && !afterUsesRail ? " sia-splitter__handle--after-collapsed" : ""}`,
|
|
@@ -5658,15 +5785,15 @@ function SplitterRoot({
|
|
|
5658
5785
|
onMouseDown: (event) => startResize(index, event),
|
|
5659
5786
|
onKeyDown: (event) => handleKey(index, event),
|
|
5660
5787
|
children: [
|
|
5661
|
-
beforeCollapsible && !beforeUsesRail ? /* @__PURE__ */ (0,
|
|
5788
|
+
beforeCollapsible && !beforeUsesRail ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "sia-splitter__collapse sia-splitter__collapse--before", "aria-label": beforeCollapsed ? "\u5C55\u5F00\u524D\u4E00\u4E2A\u9762\u677F" : "\u6536\u8D77\u524D\u4E00\u4E2A\u9762\u677F", onPointerDown: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => {
|
|
5662
5789
|
event.stopPropagation();
|
|
5663
5790
|
togglePanel(index, "before");
|
|
5664
|
-
}, children: /* @__PURE__ */ (0,
|
|
5665
|
-
/* @__PURE__ */ (0,
|
|
5666
|
-
afterCollapsible && !afterUsesRail ? /* @__PURE__ */ (0,
|
|
5791
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: orientation === "horizontal" ? beforeCollapsed ? "chevron-right" : "chevron-left" : beforeCollapsed ? "chevron-down" : "chevron-up", size: 11 }) }) : null,
|
|
5792
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", {}),
|
|
5793
|
+
afterCollapsible && !afterUsesRail ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "sia-splitter__collapse sia-splitter__collapse--after", "aria-label": afterCollapsed ? "\u5C55\u5F00\u540E\u4E00\u4E2A\u9762\u677F" : "\u6536\u8D77\u540E\u4E00\u4E2A\u9762\u677F", onPointerDown: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => {
|
|
5667
5794
|
event.stopPropagation();
|
|
5668
5795
|
togglePanel(index, "after");
|
|
5669
|
-
}, children: /* @__PURE__ */ (0,
|
|
5796
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: orientation === "horizontal" ? afterCollapsed ? "chevron-left" : "chevron-right" : afterCollapsed ? "chevron-up" : "chevron-down", size: 11 }) }) : null
|
|
5670
5797
|
]
|
|
5671
5798
|
},
|
|
5672
5799
|
`handle-${index}`
|
|
@@ -5679,8 +5806,8 @@ var Splitter = Object.assign(SplitterRoot, {
|
|
|
5679
5806
|
});
|
|
5680
5807
|
|
|
5681
5808
|
// src/components/ToolPanel.tsx
|
|
5682
|
-
var
|
|
5683
|
-
var
|
|
5809
|
+
var import_react28 = require("react");
|
|
5810
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
5684
5811
|
function clamp3(value, min, max) {
|
|
5685
5812
|
return Math.min(max, Math.max(min, value));
|
|
5686
5813
|
}
|
|
@@ -5705,17 +5832,17 @@ function ToolPanel({
|
|
|
5705
5832
|
children,
|
|
5706
5833
|
...props
|
|
5707
5834
|
}) {
|
|
5708
|
-
const panelId = (0,
|
|
5709
|
-
const [internalActiveKey, setInternalActiveKey] = (0,
|
|
5710
|
-
const [internalOpen, setInternalOpen] = (0,
|
|
5711
|
-
const [size, setSize] = (0,
|
|
5835
|
+
const panelId = (0, import_react28.useId)();
|
|
5836
|
+
const [internalActiveKey, setInternalActiveKey] = (0, import_react28.useState)(defaultActiveKey);
|
|
5837
|
+
const [internalOpen, setInternalOpen] = (0, import_react28.useState)(defaultOpen);
|
|
5838
|
+
const [size, setSize] = (0, import_react28.useState)(() => clamp3(defaultSize, minSize, maxSize));
|
|
5712
5839
|
const panels = items ?? [{ key: "single", title, icon, children }];
|
|
5713
5840
|
const requestedKey = activeKey ?? internalActiveKey;
|
|
5714
5841
|
const activePanel = panels.find((item) => item.key === requestedKey && !item.disabled) ?? panels.find((item) => !item.disabled);
|
|
5715
5842
|
const isOpen = (open ?? internalOpen) && Boolean(activePanel);
|
|
5716
|
-
const railRef = (0,
|
|
5717
|
-
const indicatorRef = (0,
|
|
5718
|
-
(0,
|
|
5843
|
+
const railRef = (0, import_react28.useRef)(null);
|
|
5844
|
+
const indicatorRef = (0, import_react28.useRef)(null);
|
|
5845
|
+
(0, import_react28.useLayoutEffect)(() => {
|
|
5719
5846
|
const rail2 = railRef.current;
|
|
5720
5847
|
const indicator = indicatorRef.current;
|
|
5721
5848
|
if (!rail2 || !indicator) return;
|
|
@@ -5794,12 +5921,12 @@ function ToolPanel({
|
|
|
5794
5921
|
resize(size + (placement === "left" ? direction : -direction) * 12, true);
|
|
5795
5922
|
}
|
|
5796
5923
|
const titleText = typeof activePanel?.title === "string" ? activePanel.title : "\u5DE5\u5177";
|
|
5797
|
-
const rail = /* @__PURE__ */ (0,
|
|
5798
|
-
/* @__PURE__ */ (0,
|
|
5924
|
+
const rail = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: railRef, className: "sia-tool-panel__rail", children: [
|
|
5925
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { ref: indicatorRef, className: "sia-tool-panel__indicator", "aria-hidden": "true" }),
|
|
5799
5926
|
panels.map((item, index) => {
|
|
5800
5927
|
const expanded = isOpen && item.key === activePanel?.key;
|
|
5801
5928
|
const label = typeof item.title === "string" ? item.title : "\u5DE5\u5177";
|
|
5802
|
-
return /* @__PURE__ */ (0,
|
|
5929
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
5803
5930
|
"button",
|
|
5804
5931
|
{
|
|
5805
5932
|
id: `${panelId}-activity-${index}`,
|
|
@@ -5812,15 +5939,15 @@ function ToolPanel({
|
|
|
5812
5939
|
disabled: item.disabled,
|
|
5813
5940
|
onClick: () => activatePanel(item),
|
|
5814
5941
|
children: [
|
|
5815
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
5816
|
-
/* @__PURE__ */ (0,
|
|
5942
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sia-tool-panel__activity-icon", children: item.icon }) : null,
|
|
5943
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sia-tool-panel__activity-label", children: item.title })
|
|
5817
5944
|
]
|
|
5818
5945
|
},
|
|
5819
5946
|
item.key
|
|
5820
5947
|
);
|
|
5821
5948
|
})
|
|
5822
5949
|
] });
|
|
5823
|
-
const content = /* @__PURE__ */ (0,
|
|
5950
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "sia-tool-panel__content", hidden: !isOpen, "aria-hidden": !isOpen, children: panels.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5824
5951
|
"div",
|
|
5825
5952
|
{
|
|
5826
5953
|
id: `${panelId}-content-${index}`,
|
|
@@ -5832,7 +5959,7 @@ function ToolPanel({
|
|
|
5832
5959
|
},
|
|
5833
5960
|
item.key
|
|
5834
5961
|
)) });
|
|
5835
|
-
const resizeHandle = /* @__PURE__ */ (0,
|
|
5962
|
+
const resizeHandle = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5836
5963
|
"div",
|
|
5837
5964
|
{
|
|
5838
5965
|
className: "sia-tool-panel__resize-handle",
|
|
@@ -5852,18 +5979,18 @@ function ToolPanel({
|
|
|
5852
5979
|
...style,
|
|
5853
5980
|
"--sia-tool-panel-size": `${size}px`
|
|
5854
5981
|
};
|
|
5855
|
-
return /* @__PURE__ */ (0,
|
|
5982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
5856
5983
|
"div",
|
|
5857
5984
|
{
|
|
5858
5985
|
className: `sia-tool-panel sia-tool-panel--${placement}${isOpen ? " is-open" : ""} ${className}`.trim(),
|
|
5859
5986
|
style: panelStyle,
|
|
5860
5987
|
"data-placement": placement,
|
|
5861
5988
|
...withTitleTooltip(props),
|
|
5862
|
-
children: placement === "left" ? /* @__PURE__ */ (0,
|
|
5989
|
+
children: placement === "left" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
5863
5990
|
rail,
|
|
5864
5991
|
content,
|
|
5865
5992
|
resizeHandle
|
|
5866
|
-
] }) : /* @__PURE__ */ (0,
|
|
5993
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
5867
5994
|
resizeHandle,
|
|
5868
5995
|
content,
|
|
5869
5996
|
rail
|
|
@@ -5873,7 +6000,7 @@ function ToolPanel({
|
|
|
5873
6000
|
}
|
|
5874
6001
|
|
|
5875
6002
|
// src/components/WindowFrame.tsx
|
|
5876
|
-
var
|
|
6003
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
5877
6004
|
var DEFAULT_LABELS = {
|
|
5878
6005
|
minimize: "\u6700\u5C0F\u5316",
|
|
5879
6006
|
maximize: "\u6700\u5927\u5316",
|
|
@@ -5902,7 +6029,7 @@ function WindowFrame({
|
|
|
5902
6029
|
children,
|
|
5903
6030
|
...props
|
|
5904
6031
|
}) {
|
|
5905
|
-
return /* @__PURE__ */ (0,
|
|
6032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5906
6033
|
"div",
|
|
5907
6034
|
{
|
|
5908
6035
|
className: `sia-window-frame ${className}`.trim(),
|
|
@@ -5931,7 +6058,7 @@ function WindowControls({
|
|
|
5931
6058
|
function runAction(action) {
|
|
5932
6059
|
void onAction?.(action);
|
|
5933
6060
|
}
|
|
5934
|
-
return /* @__PURE__ */ (0,
|
|
6061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
5935
6062
|
"div",
|
|
5936
6063
|
{
|
|
5937
6064
|
className: `sia-window-controls ${className}`.trim(),
|
|
@@ -5939,7 +6066,7 @@ function WindowControls({
|
|
|
5939
6066
|
"aria-label": "\u7A97\u53E3\u63A7\u5236",
|
|
5940
6067
|
...withTitleTooltip(props),
|
|
5941
6068
|
children: [
|
|
5942
|
-
showMinimize ? /* @__PURE__ */ (0,
|
|
6069
|
+
showMinimize ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5943
6070
|
"button",
|
|
5944
6071
|
{
|
|
5945
6072
|
type: "button",
|
|
@@ -5948,10 +6075,10 @@ function WindowControls({
|
|
|
5948
6075
|
...withTitleTooltip({ title: mergedLabels.minimize }),
|
|
5949
6076
|
disabled: isDisabled("minimize"),
|
|
5950
6077
|
onClick: () => runAction("minimize"),
|
|
5951
|
-
children: /* @__PURE__ */ (0,
|
|
6078
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "minus", size: 14 })
|
|
5952
6079
|
}
|
|
5953
6080
|
) : null,
|
|
5954
|
-
showMaximize ? /* @__PURE__ */ (0,
|
|
6081
|
+
showMaximize ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5955
6082
|
"button",
|
|
5956
6083
|
{
|
|
5957
6084
|
type: "button",
|
|
@@ -5960,10 +6087,10 @@ function WindowControls({
|
|
|
5960
6087
|
...withTitleTooltip({ title: maximized ? mergedLabels.restore : mergedLabels.maximize }),
|
|
5961
6088
|
disabled: isDisabled("toggle-maximize"),
|
|
5962
6089
|
onClick: () => runAction("toggle-maximize"),
|
|
5963
|
-
children: /* @__PURE__ */ (0,
|
|
6090
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: maximized ? "fullscreen-exit" : "fullscreen", size: 13 })
|
|
5964
6091
|
}
|
|
5965
6092
|
) : null,
|
|
5966
|
-
showClose ? /* @__PURE__ */ (0,
|
|
6093
|
+
showClose ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
5967
6094
|
"button",
|
|
5968
6095
|
{
|
|
5969
6096
|
type: "button",
|
|
@@ -5972,7 +6099,7 @@ function WindowControls({
|
|
|
5972
6099
|
...withTitleTooltip({ title: mergedLabels.close }),
|
|
5973
6100
|
disabled: isDisabled("close"),
|
|
5974
6101
|
onClick: () => runAction("close"),
|
|
5975
|
-
children: /* @__PURE__ */ (0,
|
|
6102
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "close", size: 14 })
|
|
5976
6103
|
}
|
|
5977
6104
|
) : null
|
|
5978
6105
|
]
|
|
@@ -6002,7 +6129,7 @@ function WindowTitleBar({
|
|
|
6002
6129
|
event.preventDefault();
|
|
6003
6130
|
void onWindowAction(event.detail > 1 ? "toggle-maximize" : "start-dragging");
|
|
6004
6131
|
}
|
|
6005
|
-
const renderedControls = controls === true ? /* @__PURE__ */ (0,
|
|
6132
|
+
const renderedControls = controls === true ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
6006
6133
|
WindowControls,
|
|
6007
6134
|
{
|
|
6008
6135
|
maximized,
|
|
@@ -6011,8 +6138,8 @@ function WindowTitleBar({
|
|
|
6011
6138
|
onAction: onWindowAction
|
|
6012
6139
|
}
|
|
6013
6140
|
) : controls || null;
|
|
6014
|
-
const renderedActions = actions ? /* @__PURE__ */ (0,
|
|
6015
|
-
return /* @__PURE__ */ (0,
|
|
6141
|
+
const renderedActions = actions ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-window-titlebar__actions", "data-sia-window-no-drag": "", children: actions }) : null;
|
|
6142
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
6016
6143
|
"header",
|
|
6017
6144
|
{
|
|
6018
6145
|
className: `sia-window-titlebar ${className}`.trim(),
|
|
@@ -6020,10 +6147,10 @@ function WindowTitleBar({
|
|
|
6020
6147
|
onMouseDown: handleMouseDown,
|
|
6021
6148
|
...withTitleTooltip(props),
|
|
6022
6149
|
children: [
|
|
6023
|
-
leading ? /* @__PURE__ */ (0,
|
|
6150
|
+
leading ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-window-titlebar__leading", children: leading }) : null,
|
|
6024
6151
|
actionsAlign === "left" ? renderedActions : null,
|
|
6025
6152
|
children,
|
|
6026
|
-
/* @__PURE__ */ (0,
|
|
6153
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sia-window-titlebar__drag-region", "aria-hidden": "true" }),
|
|
6027
6154
|
actionsAlign === "right" ? renderedActions : null,
|
|
6028
6155
|
renderedControls
|
|
6029
6156
|
]
|
|
@@ -6032,20 +6159,20 @@ function WindowTitleBar({
|
|
|
6032
6159
|
}
|
|
6033
6160
|
|
|
6034
6161
|
// src/components/Drawer.tsx
|
|
6035
|
-
var
|
|
6162
|
+
var import_react29 = require("react");
|
|
6036
6163
|
var import_client4 = require("react-dom/client");
|
|
6037
|
-
var
|
|
6164
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
6038
6165
|
var drawerHandles = /* @__PURE__ */ new Set();
|
|
6039
6166
|
var DRAWER_MOTION_DURATION = 400;
|
|
6040
6167
|
var DEFAULT_DRAWER_PUSH_DISTANCE = 180;
|
|
6041
|
-
var DrawerStackContext = (0,
|
|
6168
|
+
var DrawerStackContext = (0, import_react29.createContext)(null);
|
|
6042
6169
|
function createPushOffset(distance3, depth, negative) {
|
|
6043
6170
|
if (depth <= 0) return "0px";
|
|
6044
6171
|
if (typeof distance3 === "number") return `${(negative ? -1 : 1) * distance3 * depth}px`;
|
|
6045
6172
|
const operator = negative ? " - " : " + ";
|
|
6046
6173
|
return `calc(0px${operator}${Array.from({ length: depth }, () => distance3).join(operator)})`;
|
|
6047
6174
|
}
|
|
6048
|
-
var DrawerRoot = (0,
|
|
6175
|
+
var DrawerRoot = (0, import_react29.forwardRef)(function Drawer({
|
|
6049
6176
|
open,
|
|
6050
6177
|
title,
|
|
6051
6178
|
children,
|
|
@@ -6068,19 +6195,19 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
|
|
|
6068
6195
|
style,
|
|
6069
6196
|
...props
|
|
6070
6197
|
}, forwardedRef) {
|
|
6071
|
-
const localRef = (0,
|
|
6072
|
-
const bodyRef = (0,
|
|
6073
|
-
const titleId = (0,
|
|
6074
|
-
const drawerId = (0,
|
|
6075
|
-
const parentStack = (0,
|
|
6076
|
-
const afterOpenRef = (0,
|
|
6077
|
-
const afterCloseRef = (0,
|
|
6198
|
+
const localRef = (0, import_react29.useRef)(null);
|
|
6199
|
+
const bodyRef = (0, import_react29.useRef)(null);
|
|
6200
|
+
const titleId = (0, import_react29.useId)();
|
|
6201
|
+
const drawerId = (0, import_react29.useId)();
|
|
6202
|
+
const parentStack = (0, import_react29.useContext)(DrawerStackContext);
|
|
6203
|
+
const afterOpenRef = (0, import_react29.useRef)(afterOpen);
|
|
6204
|
+
const afterCloseRef = (0, import_react29.useRef)(afterClose);
|
|
6078
6205
|
afterOpenRef.current = afterOpen;
|
|
6079
6206
|
afterCloseRef.current = afterClose;
|
|
6080
|
-
const [rendered, setRendered] = (0,
|
|
6081
|
-
const [closing, setClosing] = (0,
|
|
6082
|
-
const [openChildIds, setOpenChildIds] = (0,
|
|
6083
|
-
const setChildOpen = (0,
|
|
6207
|
+
const [rendered, setRendered] = (0, import_react29.useState)(open);
|
|
6208
|
+
const [closing, setClosing] = (0, import_react29.useState)(false);
|
|
6209
|
+
const [openChildIds, setOpenChildIds] = (0, import_react29.useState)(() => /* @__PURE__ */ new Set());
|
|
6210
|
+
const setChildOpen = (0, import_react29.useCallback)((id, childOpen) => {
|
|
6084
6211
|
setOpenChildIds((current) => {
|
|
6085
6212
|
const hasId = current.has(id);
|
|
6086
6213
|
if (hasId === childOpen) return current;
|
|
@@ -6090,8 +6217,8 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
|
|
|
6090
6217
|
return next;
|
|
6091
6218
|
});
|
|
6092
6219
|
}, []);
|
|
6093
|
-
const stackContextValue = (0,
|
|
6094
|
-
(0,
|
|
6220
|
+
const stackContextValue = (0, import_react29.useMemo)(() => ({ setChildOpen }), [setChildOpen]);
|
|
6221
|
+
(0, import_react29.useEffect)(() => {
|
|
6095
6222
|
if (open) {
|
|
6096
6223
|
setRendered(true);
|
|
6097
6224
|
setClosing(false);
|
|
@@ -6106,12 +6233,12 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
|
|
|
6106
6233
|
}, DRAWER_MOTION_DURATION);
|
|
6107
6234
|
return () => window.clearTimeout(timer);
|
|
6108
6235
|
}, [open, rendered]);
|
|
6109
|
-
(0,
|
|
6236
|
+
(0, import_react29.useEffect)(() => {
|
|
6110
6237
|
if (!open || !rendered) return void 0;
|
|
6111
6238
|
const timer = window.setTimeout(() => afterOpenRef.current?.(), DRAWER_MOTION_DURATION);
|
|
6112
6239
|
return () => window.clearTimeout(timer);
|
|
6113
6240
|
}, [open, rendered]);
|
|
6114
|
-
(0,
|
|
6241
|
+
(0, import_react29.useEffect)(() => {
|
|
6115
6242
|
if (!parentStack) return void 0;
|
|
6116
6243
|
parentStack.setChildOpen(drawerId, open);
|
|
6117
6244
|
return () => parentStack.setChildOpen(drawerId, false);
|
|
@@ -6141,9 +6268,9 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
|
|
|
6141
6268
|
"--sia-drawer-push-x": horizontalPush ? pushOffset : "0px",
|
|
6142
6269
|
"--sia-drawer-push-y": horizontalPush ? "0px" : pushOffset
|
|
6143
6270
|
};
|
|
6144
|
-
return /* @__PURE__ */ (0,
|
|
6145
|
-
/* @__PURE__ */ (0,
|
|
6146
|
-
/* @__PURE__ */ (0,
|
|
6271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DrawerStackContext.Provider, { value: stackContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OverlayPortal, { container: getContainer, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sia-drawer-root", "data-state": closing ? "closing" : "open", style: { zIndex }, children: [
|
|
6272
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { className: "sia-drawer__mask", type: "button", "aria-label": "\u5173\u95ED\u62BD\u5C49", onClick: () => maskClosable && requestClose() }),
|
|
6273
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
6147
6274
|
"div",
|
|
6148
6275
|
{
|
|
6149
6276
|
ref: setRef,
|
|
@@ -6156,16 +6283,16 @@ var DrawerRoot = (0, import_react28.forwardRef)(function Drawer({
|
|
|
6156
6283
|
tabIndex: -1,
|
|
6157
6284
|
...withTitleTooltip(props),
|
|
6158
6285
|
children: [
|
|
6159
|
-
/* @__PURE__ */ (0,
|
|
6160
|
-
/* @__PURE__ */ (0,
|
|
6161
|
-
closable ? /* @__PURE__ */ (0,
|
|
6162
|
-
title ? /* @__PURE__ */ (0,
|
|
6286
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sia-drawer__header", children: [
|
|
6287
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "sia-drawer__heading", children: [
|
|
6288
|
+
closable ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("button", { type: "button", className: "sia-drawer__close", "aria-label": "\u5173\u95ED\u62BD\u5C49", onClick: requestClose, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "close", size: 17 }) }) : null,
|
|
6289
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { id: titleId, children: title }) : null
|
|
6163
6290
|
] }),
|
|
6164
|
-
extra ? /* @__PURE__ */ (0,
|
|
6291
|
+
extra ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sia-drawer__extra", children: extra }) : null
|
|
6165
6292
|
] }),
|
|
6166
|
-
/* @__PURE__ */ (0,
|
|
6167
|
-
/* @__PURE__ */ (0,
|
|
6168
|
-
footer ? /* @__PURE__ */ (0,
|
|
6293
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref: bodyRef, className: "sia-drawer__body", children }),
|
|
6294
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(FloatingScrollbarProvider, { targetRef: bodyRef }),
|
|
6295
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "sia-drawer__footer", children: footer }) : null
|
|
6169
6296
|
]
|
|
6170
6297
|
}
|
|
6171
6298
|
)
|
|
@@ -6198,7 +6325,7 @@ function openDrawer(config) {
|
|
|
6198
6325
|
cleanupTimer = window.setTimeout(cleanup2, DRAWER_MOTION_DURATION + 100);
|
|
6199
6326
|
}
|
|
6200
6327
|
function render() {
|
|
6201
|
-
root.render(/* @__PURE__ */ (0,
|
|
6328
|
+
root.render(/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
6202
6329
|
DrawerRoot,
|
|
6203
6330
|
{
|
|
6204
6331
|
...currentConfig,
|
|
@@ -6237,9 +6364,9 @@ var Drawer2 = Object.assign(DrawerRoot, {
|
|
|
6237
6364
|
});
|
|
6238
6365
|
|
|
6239
6366
|
// src/components/Form.tsx
|
|
6240
|
-
var
|
|
6241
|
-
var
|
|
6242
|
-
var Switch = (0,
|
|
6367
|
+
var import_react30 = require("react");
|
|
6368
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
6369
|
+
var Switch = (0, import_react30.forwardRef)(function Switch2({
|
|
6243
6370
|
label,
|
|
6244
6371
|
variant = "standard",
|
|
6245
6372
|
size: sizeProp,
|
|
@@ -6258,26 +6385,26 @@ var Switch = (0, import_react29.forwardRef)(function Switch2({
|
|
|
6258
6385
|
onCheckedChange?.(event.currentTarget.checked);
|
|
6259
6386
|
onChange?.(event);
|
|
6260
6387
|
};
|
|
6261
|
-
return /* @__PURE__ */ (0,
|
|
6262
|
-
/* @__PURE__ */ (0,
|
|
6263
|
-
/* @__PURE__ */ (0,
|
|
6388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { className: `sia-switch-wrap sia-switch-wrap--${size} ${className}`.trim(), children: [
|
|
6389
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("input", { ref, type: "checkbox", role: "switch", className: "sia-switch-input", onChange: handleChange, ...withTitleTooltip(props) }),
|
|
6390
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
6264
6391
|
"span",
|
|
6265
6392
|
{
|
|
6266
6393
|
className: `sia-switch sia-switch--${variant}${variant === "standard" && hasContent ? " sia-switch--with-content" : ""}`,
|
|
6267
6394
|
"aria-hidden": "true",
|
|
6268
6395
|
children: [
|
|
6269
|
-
/* @__PURE__ */ (0,
|
|
6270
|
-
variant === "segmented" ? /* @__PURE__ */ (0,
|
|
6271
|
-
/* @__PURE__ */ (0,
|
|
6272
|
-
/* @__PURE__ */ (0,
|
|
6273
|
-
] }) : hasContent ? /* @__PURE__ */ (0,
|
|
6274
|
-
/* @__PURE__ */ (0,
|
|
6275
|
-
/* @__PURE__ */ (0,
|
|
6396
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__thumb" }),
|
|
6397
|
+
variant === "segmented" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
6398
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__segment sia-switch__segment--unchecked", children: uncheckedVisual }),
|
|
6399
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__segment sia-switch__segment--checked", children: checkedVisual })
|
|
6400
|
+
] }) : hasContent ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "sia-switch__content", children: [
|
|
6401
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__content-item sia-switch__content-item--unchecked", children: uncheckedVisual }),
|
|
6402
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__content-item sia-switch__content-item--checked", children: checkedVisual })
|
|
6276
6403
|
] }) : null
|
|
6277
6404
|
]
|
|
6278
6405
|
}
|
|
6279
6406
|
),
|
|
6280
|
-
label ? /* @__PURE__ */ (0,
|
|
6407
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-switch__label", children: label }) : null
|
|
6281
6408
|
] });
|
|
6282
6409
|
});
|
|
6283
6410
|
function pathArray(name) {
|
|
@@ -6458,9 +6585,9 @@ var FormStore = class {
|
|
|
6458
6585
|
window.requestAnimationFrame(() => focusTarget?.focus({ preventScroll: true }));
|
|
6459
6586
|
};
|
|
6460
6587
|
};
|
|
6461
|
-
var FormContext = (0,
|
|
6588
|
+
var FormContext = (0, import_react30.createContext)(null);
|
|
6462
6589
|
function useForm(form) {
|
|
6463
|
-
const ref = (0,
|
|
6590
|
+
const ref = (0, import_react30.useRef)(form ?? new FormStore());
|
|
6464
6591
|
return [ref.current];
|
|
6465
6592
|
}
|
|
6466
6593
|
function FormRoot({
|
|
@@ -6483,9 +6610,9 @@ function FormRoot({
|
|
|
6483
6610
|
const [internalForm] = useForm(form);
|
|
6484
6611
|
const instance = internalForm;
|
|
6485
6612
|
instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
|
|
6486
|
-
const context = (0,
|
|
6487
|
-
const formRef = (0,
|
|
6488
|
-
(0,
|
|
6613
|
+
const context = (0, import_react30.useMemo)(() => instance, [instance]);
|
|
6614
|
+
const formRef = (0, import_react30.useRef)(null);
|
|
6615
|
+
(0, import_react30.useLayoutEffect)(() => {
|
|
6489
6616
|
const root = formRef.current;
|
|
6490
6617
|
if (!root) return;
|
|
6491
6618
|
let frame = 0;
|
|
@@ -6525,7 +6652,7 @@ function FormRoot({
|
|
|
6525
6652
|
if (frame) cancelAnimationFrame(frame);
|
|
6526
6653
|
};
|
|
6527
6654
|
}, []);
|
|
6528
|
-
return /* @__PURE__ */ (0,
|
|
6655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
6529
6656
|
"form",
|
|
6530
6657
|
{
|
|
6531
6658
|
ref: formRef,
|
|
@@ -6537,7 +6664,7 @@ function FormRoot({
|
|
|
6537
6664
|
event.stopPropagation();
|
|
6538
6665
|
instance.submit();
|
|
6539
6666
|
},
|
|
6540
|
-
children: /* @__PURE__ */ (0,
|
|
6667
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("fieldset", { disabled, children })
|
|
6541
6668
|
}
|
|
6542
6669
|
) }) }) });
|
|
6543
6670
|
}
|
|
@@ -6562,11 +6689,11 @@ function FormItem({
|
|
|
6562
6689
|
children,
|
|
6563
6690
|
className = ""
|
|
6564
6691
|
}) {
|
|
6565
|
-
const form = (0,
|
|
6566
|
-
const id = (0,
|
|
6567
|
-
const itemRef = (0,
|
|
6692
|
+
const form = (0, import_react30.useContext)(FormContext);
|
|
6693
|
+
const id = (0, import_react30.useId)();
|
|
6694
|
+
const itemRef = (0, import_react30.useRef)(null);
|
|
6568
6695
|
if (!form) throw new Error("Form.Item \u5FC5\u987B\u5728 Form \u5185\u4F7F\u7528");
|
|
6569
|
-
(0,
|
|
6696
|
+
(0, import_react30.useSyncExternalStore)(form.subscribe, form.getSnapshot, form.getSnapshot);
|
|
6570
6697
|
const path = name === void 0 ? void 0 : pathArray(name);
|
|
6571
6698
|
const key = path ? pathKey2(path) : "";
|
|
6572
6699
|
const ruleRequired = required ?? rules.some((rule) => rule.required);
|
|
@@ -6575,7 +6702,7 @@ function FormItem({
|
|
|
6575
6702
|
const helpContent = help ?? errors[0];
|
|
6576
6703
|
const labelId = label && !noStyle ? `${id}-label` : void 0;
|
|
6577
6704
|
const errorId = `${id}-error`;
|
|
6578
|
-
(0,
|
|
6705
|
+
(0, import_react30.useEffect)(() => {
|
|
6579
6706
|
if (!path) return void 0;
|
|
6580
6707
|
return form.registerField({
|
|
6581
6708
|
name: path,
|
|
@@ -6587,13 +6714,13 @@ function FormItem({
|
|
|
6587
6714
|
if (typeof children === "function") {
|
|
6588
6715
|
content = children(form);
|
|
6589
6716
|
} else {
|
|
6590
|
-
const childArray =
|
|
6591
|
-
const child = childArray.length === 1 && (0,
|
|
6717
|
+
const childArray = import_react30.Children.toArray(children);
|
|
6718
|
+
const child = childArray.length === 1 && (0, import_react30.isValidElement)(childArray[0]) ? childArray[0] : null;
|
|
6592
6719
|
if (child && path) {
|
|
6593
6720
|
const childProps = child.props;
|
|
6594
6721
|
const originalTrigger = childProps[trigger];
|
|
6595
6722
|
const validationEvents = Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger];
|
|
6596
|
-
content = (0,
|
|
6723
|
+
content = (0, import_react30.cloneElement)(child, {
|
|
6597
6724
|
id: childProps.id ?? id,
|
|
6598
6725
|
[valuePropName]: form.getFieldValue(path) ?? (valuePropName === "checked" ? false : ""),
|
|
6599
6726
|
[trigger]: (...args) => {
|
|
@@ -6618,21 +6745,21 @@ function FormItem({
|
|
|
6618
6745
|
content = children;
|
|
6619
6746
|
}
|
|
6620
6747
|
}
|
|
6621
|
-
if (noStyle) return /* @__PURE__ */ (0,
|
|
6622
|
-
const inputWrap = /* @__PURE__ */ (0,
|
|
6748
|
+
if (noStyle) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: content });
|
|
6749
|
+
const inputWrap = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "sia-form-item__input-wrap", children: content });
|
|
6623
6750
|
const hasError = status === "error" && Boolean(helpContent);
|
|
6624
|
-
return /* @__PURE__ */ (0,
|
|
6625
|
-
label ? /* @__PURE__ */ (0,
|
|
6626
|
-
ruleRequired ? /* @__PURE__ */ (0,
|
|
6751
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: itemRef, className: `sia-form-item${status ? ` sia-form-item--${status}` : ""} ${className}`.trim(), "data-sia-form-field": key || void 0, children: [
|
|
6752
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: labelId, className: "sia-form-item__label", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "sia-form-item__label-content", children: [
|
|
6753
|
+
ruleRequired ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sia-form-item__required-mark", "aria-hidden": "true", children: "*" }) : null,
|
|
6627
6754
|
label
|
|
6628
6755
|
] }) }) : null,
|
|
6629
|
-
/* @__PURE__ */ (0,
|
|
6630
|
-
/* @__PURE__ */ (0,
|
|
6756
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "sia-form-item__control", children: [
|
|
6757
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
6631
6758
|
Tooltip,
|
|
6632
6759
|
{
|
|
6633
|
-
title: hasError ? /* @__PURE__ */ (0,
|
|
6634
|
-
/* @__PURE__ */ (0,
|
|
6635
|
-
/* @__PURE__ */ (0,
|
|
6760
|
+
title: hasError ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { id: errorId, className: "sia-form-item__error-content", children: [
|
|
6761
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { className: "sia-form-item__error-icon", name: "circle-close", variant: "filled", size: 16, "aria-hidden": "true" }),
|
|
6762
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: helpContent })
|
|
6636
6763
|
] }) : null,
|
|
6637
6764
|
placement: "bottom-start",
|
|
6638
6765
|
trigger: [],
|
|
@@ -6643,15 +6770,15 @@ function FormItem({
|
|
|
6643
6770
|
children: inputWrap
|
|
6644
6771
|
}
|
|
6645
6772
|
),
|
|
6646
|
-
status !== "error" && helpContent ? /* @__PURE__ */ (0,
|
|
6647
|
-
extra ? /* @__PURE__ */ (0,
|
|
6773
|
+
status !== "error" && helpContent ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "sia-form-item__help", children: helpContent }) : null,
|
|
6774
|
+
extra ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "sia-form-item__extra", children: extra }) : null
|
|
6648
6775
|
] })
|
|
6649
6776
|
] });
|
|
6650
6777
|
}
|
|
6651
6778
|
function FormList({ name, children }) {
|
|
6652
|
-
const form = (0,
|
|
6779
|
+
const form = (0, import_react30.useContext)(FormContext);
|
|
6653
6780
|
if (!form) throw new Error("Form.List \u5FC5\u987B\u5728 Form \u5185\u4F7F\u7528");
|
|
6654
|
-
(0,
|
|
6781
|
+
(0, import_react30.useSyncExternalStore)(form.subscribe, form.getSnapshot, form.getSnapshot);
|
|
6655
6782
|
const current = form.getFieldValue(name);
|
|
6656
6783
|
const values = Array.isArray(current) ? current : [];
|
|
6657
6784
|
const operations = {
|
|
@@ -6674,7 +6801,7 @@ function FormList({ name, children }) {
|
|
|
6674
6801
|
return children(values.map((_, index) => ({ key: index, name: index })), operations);
|
|
6675
6802
|
}
|
|
6676
6803
|
function FormErrorList({ errors = [] }) {
|
|
6677
|
-
return errors.length ? /* @__PURE__ */ (0,
|
|
6804
|
+
return errors.length ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "sia-form-error-list", children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: error }, index)) }) : null;
|
|
6678
6805
|
}
|
|
6679
6806
|
var Form = Object.assign(FormRoot, {
|
|
6680
6807
|
/** 表单字段,负责字段值绑定、校验和标签布局。 */
|
|
@@ -6688,17 +6815,17 @@ var Form = Object.assign(FormRoot, {
|
|
|
6688
6815
|
});
|
|
6689
6816
|
|
|
6690
6817
|
// src/components/Radio.tsx
|
|
6691
|
-
var
|
|
6692
|
-
var
|
|
6693
|
-
var RadioContext = (0,
|
|
6694
|
-
var RadioRoot = (0,
|
|
6818
|
+
var import_react31 = require("react");
|
|
6819
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
6820
|
+
var RadioContext = (0, import_react31.createContext)(null);
|
|
6821
|
+
var RadioRoot = (0, import_react31.forwardRef)(function Radio({ value, size: sizeProp, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
|
|
6695
6822
|
const size = useControlSize(sizeProp);
|
|
6696
|
-
const group = (0,
|
|
6697
|
-
const fallbackId = (0,
|
|
6823
|
+
const group = (0, import_react31.useContext)(RadioContext);
|
|
6824
|
+
const fallbackId = (0, import_react31.useId)();
|
|
6698
6825
|
const grouped = group !== null;
|
|
6699
6826
|
const currentChecked = grouped ? group.value === value : checked;
|
|
6700
|
-
return /* @__PURE__ */ (0,
|
|
6701
|
-
/* @__PURE__ */ (0,
|
|
6827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("label", { className: `sia-radio sia-radio--${size}${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
6828
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
6702
6829
|
"input",
|
|
6703
6830
|
{
|
|
6704
6831
|
...withTitleTooltip(props),
|
|
@@ -6717,12 +6844,12 @@ var RadioRoot = (0, import_react30.forwardRef)(function Radio({ value, size: siz
|
|
|
6717
6844
|
}
|
|
6718
6845
|
}
|
|
6719
6846
|
),
|
|
6720
|
-
button ? null : /* @__PURE__ */ (0,
|
|
6721
|
-
children !== void 0 ? /* @__PURE__ */ (0,
|
|
6847
|
+
button ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sia-radio__control", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", {}) }),
|
|
6848
|
+
children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "sia-radio__label", children }) : null
|
|
6722
6849
|
] });
|
|
6723
6850
|
});
|
|
6724
6851
|
function RadioButton(props) {
|
|
6725
|
-
return /* @__PURE__ */ (0,
|
|
6852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioRoot, { ...props, button: true });
|
|
6726
6853
|
}
|
|
6727
6854
|
function RadioGroup({
|
|
6728
6855
|
size: sizeProp,
|
|
@@ -6738,7 +6865,7 @@ function RadioGroup({
|
|
|
6738
6865
|
onChange
|
|
6739
6866
|
}) {
|
|
6740
6867
|
const size = useControlSize(sizeProp);
|
|
6741
|
-
const fallbackName = (0,
|
|
6868
|
+
const fallbackName = (0, import_react31.useId)();
|
|
6742
6869
|
const [currentValue, setValue2] = useControllableState({
|
|
6743
6870
|
value,
|
|
6744
6871
|
defaultValue,
|
|
@@ -6746,7 +6873,7 @@ function RadioGroup({
|
|
|
6746
6873
|
if (next !== void 0) onChange?.(next);
|
|
6747
6874
|
}
|
|
6748
6875
|
});
|
|
6749
|
-
const context = (0,
|
|
6876
|
+
const context = (0, import_react31.useMemo)(() => ({
|
|
6750
6877
|
value: currentValue,
|
|
6751
6878
|
name: name ?? fallbackName,
|
|
6752
6879
|
disabled,
|
|
@@ -6754,10 +6881,10 @@ function RadioGroup({
|
|
|
6754
6881
|
setValue: setValue2
|
|
6755
6882
|
}), [buttonStyle, currentValue, disabled, fallbackName, name, setValue2]);
|
|
6756
6883
|
const Component = optionType === "button" ? RadioButton : RadioRoot;
|
|
6757
|
-
return /* @__PURE__ */ (0,
|
|
6884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadioContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: `sia-radio-group${optionType === "button" ? " sia-radio-group--button" : ""} ${className}`.trim(), role: "radiogroup", children: [
|
|
6758
6885
|
options?.map((option) => {
|
|
6759
6886
|
const normalized = typeof option === "object" ? option : { label: String(option), value: option };
|
|
6760
|
-
return /* @__PURE__ */ (0,
|
|
6887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Component, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
|
|
6761
6888
|
}),
|
|
6762
6889
|
children
|
|
6763
6890
|
] }) }) });
|
|
@@ -6770,8 +6897,8 @@ var Radio2 = Object.assign(RadioRoot, {
|
|
|
6770
6897
|
});
|
|
6771
6898
|
|
|
6772
6899
|
// src/components/Slider.tsx
|
|
6773
|
-
var
|
|
6774
|
-
var
|
|
6900
|
+
var import_react32 = require("react");
|
|
6901
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
6775
6902
|
function percent(value, min, max) {
|
|
6776
6903
|
return (value - min) / (max - min) * 100;
|
|
6777
6904
|
}
|
|
@@ -6794,7 +6921,7 @@ function Slider({
|
|
|
6794
6921
|
}) {
|
|
6795
6922
|
const fallback = defaultValue ?? (range ? [min, max] : min);
|
|
6796
6923
|
const [currentValue, setValue2] = useControllableState({ value, defaultValue: fallback, onChange });
|
|
6797
|
-
const [activeThumb, setActiveThumb] = (0,
|
|
6924
|
+
const [activeThumb, setActiveThumb] = (0, import_react32.useState)(null);
|
|
6798
6925
|
const values = Array.isArray(currentValue) ? [...currentValue] : [currentValue];
|
|
6799
6926
|
const start = range ? percent(Math.min(values[0], values[1]), min, max) : 0;
|
|
6800
6927
|
const end = percent(range ? Math.max(values[0], values[1]) : values[0], min, max);
|
|
@@ -6816,16 +6943,16 @@ function Slider({
|
|
|
6816
6943
|
onChangeComplete?.(currentValue);
|
|
6817
6944
|
setActiveThumb(null);
|
|
6818
6945
|
}
|
|
6819
|
-
return /* @__PURE__ */ (0,
|
|
6946
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
6820
6947
|
"div",
|
|
6821
6948
|
{
|
|
6822
6949
|
className: `sia-slider${range ? " sia-slider--range" : ""}${vertical ? " sia-slider--vertical" : ""}${reverse ? " sia-slider--reverse" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(),
|
|
6823
6950
|
style,
|
|
6824
6951
|
...withTitleTooltip(props),
|
|
6825
6952
|
children: [
|
|
6826
|
-
/* @__PURE__ */ (0,
|
|
6827
|
-
values.map((item, index) => /* @__PURE__ */ (0,
|
|
6828
|
-
/* @__PURE__ */ (0,
|
|
6953
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "sia-slider__rail", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sia-slider__track" }) }),
|
|
6954
|
+
values.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "sia-slider__thumb-wrap", children: [
|
|
6955
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6829
6956
|
"input",
|
|
6830
6957
|
{
|
|
6831
6958
|
className: "sia-slider__input",
|
|
@@ -6844,12 +6971,12 @@ function Slider({
|
|
|
6844
6971
|
onTouchEnd: finish
|
|
6845
6972
|
}
|
|
6846
6973
|
),
|
|
6847
|
-
tooltip?.open || activeThumb === index ? /* @__PURE__ */ (0,
|
|
6974
|
+
tooltip?.open || activeThumb === index ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6848
6975
|
"span",
|
|
6849
6976
|
{
|
|
6850
6977
|
className: "sia-slider__tooltip-anchor",
|
|
6851
6978
|
style: { "--sia-slider-value": `${percent(item, min, max)}%` },
|
|
6852
|
-
children: /* @__PURE__ */ (0,
|
|
6979
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
6853
6980
|
Tooltip,
|
|
6854
6981
|
{
|
|
6855
6982
|
title: tooltip?.formatter ? tooltip.formatter(item) : item,
|
|
@@ -6857,16 +6984,16 @@ function Slider({
|
|
|
6857
6984
|
trigger: [],
|
|
6858
6985
|
open: true,
|
|
6859
6986
|
overlayClassName: "sia-slider__tooltip",
|
|
6860
|
-
children: /* @__PURE__ */ (0,
|
|
6987
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sia-slider__tooltip-target" })
|
|
6861
6988
|
}
|
|
6862
6989
|
)
|
|
6863
6990
|
}
|
|
6864
6991
|
) : null
|
|
6865
6992
|
] }, index)),
|
|
6866
|
-
marks ? /* @__PURE__ */ (0,
|
|
6993
|
+
marks ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "sia-slider__marks", children: Object.entries(marks).map(([rawValue, mark]) => {
|
|
6867
6994
|
const numericValue = Number(rawValue);
|
|
6868
6995
|
const normalized = typeof mark === "object" && mark !== null && "label" in mark ? mark : { label: mark };
|
|
6869
|
-
return /* @__PURE__ */ (0,
|
|
6996
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
6870
6997
|
"button",
|
|
6871
6998
|
{
|
|
6872
6999
|
type: "button",
|
|
@@ -6875,7 +7002,7 @@ function Slider({
|
|
|
6875
7002
|
disabled,
|
|
6876
7003
|
onClick: () => setValue2(range ? [values[0], numericValue].sort((a, b) => a - b) : numericValue),
|
|
6877
7004
|
children: [
|
|
6878
|
-
/* @__PURE__ */ (0,
|
|
7005
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {}),
|
|
6879
7006
|
normalized.label
|
|
6880
7007
|
]
|
|
6881
7008
|
},
|
|
@@ -6888,8 +7015,8 @@ function Slider({
|
|
|
6888
7015
|
}
|
|
6889
7016
|
|
|
6890
7017
|
// src/components/ColorPicker.tsx
|
|
6891
|
-
var
|
|
6892
|
-
var
|
|
7018
|
+
var import_react33 = require("react");
|
|
7019
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
6893
7020
|
var DEFAULT_MODES = ["solid", "gradient"];
|
|
6894
7021
|
var gradientStopSeed = 0;
|
|
6895
7022
|
function clamp4(value, min, max) {
|
|
@@ -6979,12 +7106,12 @@ function ColorPicker({
|
|
|
6979
7106
|
...props
|
|
6980
7107
|
}) {
|
|
6981
7108
|
const size = useControlSize(sizeProp);
|
|
6982
|
-
const rootRef = (0,
|
|
6983
|
-
const popupRef = (0,
|
|
6984
|
-
const lastEmittedValue = (0,
|
|
7109
|
+
const rootRef = (0, import_react33.useRef)(null);
|
|
7110
|
+
const popupRef = (0, import_react33.useRef)(null);
|
|
7111
|
+
const lastEmittedValue = (0, import_react33.useRef)();
|
|
6985
7112
|
const initialGradient = parseGradient(value ?? defaultValue);
|
|
6986
7113
|
const initialSolid = initialGradient?.stops[0]?.color ?? normalizeHex(value || defaultValue);
|
|
6987
|
-
const [open, setOpen] = (0,
|
|
7114
|
+
const [open, setOpen] = (0, import_react33.useState)(false);
|
|
6988
7115
|
const [color, setColor] = useControllableState({
|
|
6989
7116
|
value,
|
|
6990
7117
|
defaultValue: initialGradient ? formatGradient(initialGradient.angle, initialGradient.stops.map((stop, index) => ({ id: index, ...stop }))) : normalizeHex(defaultValue),
|
|
@@ -6995,17 +7122,17 @@ function ColorPicker({
|
|
|
6995
7122
|
defaultValue: initialGradient ? "gradient" : defaultMode,
|
|
6996
7123
|
onChange: onModeChange
|
|
6997
7124
|
});
|
|
6998
|
-
const [solidColor, setSolidColor] = (0,
|
|
6999
|
-
const [gradientAngle, setGradientAngle] = (0,
|
|
7000
|
-
const [gradientStops, setGradientStops] = (0,
|
|
7001
|
-
const [activeStopId, setActiveStopId] = (0,
|
|
7125
|
+
const [solidColor, setSolidColor] = (0, import_react33.useState)(initialSolid);
|
|
7126
|
+
const [gradientAngle, setGradientAngle] = (0, import_react33.useState)(initialGradient?.angle ?? 90);
|
|
7127
|
+
const [gradientStops, setGradientStops] = (0, import_react33.useState)(() => initialGradient ? initialGradient.stops.map((stop) => createStop(stop.color, stop.position)) : createDefaultStops(initialSolid));
|
|
7128
|
+
const [activeStopId, setActiveStopId] = (0, import_react33.useState)(() => gradientStops[0]?.id ?? 0);
|
|
7002
7129
|
const activeStop = gradientStops.find((stop) => stop.id === activeStopId) ?? gradientStops[0];
|
|
7003
7130
|
const editingColor = currentMode === "gradient" ? activeStop?.color ?? solidColor : solidColor;
|
|
7004
7131
|
const rgba = parseHex(editingColor) ?? parseHex("#1677FF");
|
|
7005
7132
|
const hsv = rgbToHsv(rgba);
|
|
7006
|
-
const [hexDraft, setHexDraft] = (0,
|
|
7133
|
+
const [hexDraft, setHexDraft] = (0, import_react33.useState)(editingColor);
|
|
7007
7134
|
const gradientValue = formatGradient(gradientAngle, gradientStops);
|
|
7008
|
-
(0,
|
|
7135
|
+
(0, import_react33.useEffect)(() => {
|
|
7009
7136
|
if (!open) return void 0;
|
|
7010
7137
|
const close = (event) => {
|
|
7011
7138
|
const target = event.target;
|
|
@@ -7014,10 +7141,10 @@ function ColorPicker({
|
|
|
7014
7141
|
document.addEventListener("pointerdown", close);
|
|
7015
7142
|
return () => document.removeEventListener("pointerdown", close);
|
|
7016
7143
|
}, [open]);
|
|
7017
|
-
(0,
|
|
7144
|
+
(0, import_react33.useEffect)(() => {
|
|
7018
7145
|
setHexDraft(editingColor);
|
|
7019
7146
|
}, [editingColor]);
|
|
7020
|
-
(0,
|
|
7147
|
+
(0, import_react33.useEffect)(() => {
|
|
7021
7148
|
if (value === void 0 || value === lastEmittedValue.current) return;
|
|
7022
7149
|
const parsed = parseGradient(value);
|
|
7023
7150
|
if (parsed) {
|
|
@@ -7079,8 +7206,8 @@ function ColorPicker({
|
|
|
7079
7206
|
const triggerBackground = color || "transparent";
|
|
7080
7207
|
const triggerText = color || "\u65E0\u8272";
|
|
7081
7208
|
const opaqueColor = rgbaToHex({ ...rgba, a: 100 }, false);
|
|
7082
|
-
return /* @__PURE__ */ (0,
|
|
7083
|
-
/* @__PURE__ */ (0,
|
|
7209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref: rootRef, className: `sia-color-picker sia-color-picker--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...withTitleTooltip(props), children: [
|
|
7210
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
7084
7211
|
"button",
|
|
7085
7212
|
{
|
|
7086
7213
|
type: "button",
|
|
@@ -7090,19 +7217,19 @@ function ColorPicker({
|
|
|
7090
7217
|
"aria-expanded": open,
|
|
7091
7218
|
onClick: () => setOpen((current) => !current),
|
|
7092
7219
|
children: [
|
|
7093
|
-
/* @__PURE__ */ (0,
|
|
7094
|
-
showText ? /* @__PURE__ */ (0,
|
|
7095
|
-
/* @__PURE__ */ (0,
|
|
7220
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `sia-color-picker__swatch${color ? "" : " is-empty"}`, style: color ? { background: triggerBackground } : void 0 }),
|
|
7221
|
+
showText ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "sia-color-picker__trigger-text", children: typeof showText === "function" ? showText(color) : triggerText }) : null,
|
|
7222
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "chevron-down", size: 14 })
|
|
7096
7223
|
]
|
|
7097
7224
|
}
|
|
7098
7225
|
),
|
|
7099
|
-
/* @__PURE__ */ (0,
|
|
7100
|
-
/* @__PURE__ */ (0,
|
|
7101
|
-
modes.length > 1 ? /* @__PURE__ */ (0,
|
|
7102
|
-
allowClear ? /* @__PURE__ */ (0,
|
|
7226
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-color-picker__popup", role: "dialog", "aria-label": "\u989C\u8272\u9009\u62E9\u5668", children: [
|
|
7227
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-color-picker__mode-row", children: [
|
|
7228
|
+
modes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sia-color-picker__modes", role: "tablist", "aria-label": "\u989C\u8272\u6A21\u5F0F", children: modes.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", role: "tab", "aria-selected": currentMode === item, className: currentMode === item ? "is-active" : "", onClick: () => switchMode(item), children: item === "solid" ? "\u5355\u8272" : "\u6E10\u53D8\u8272" }, item)) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: currentMode === "solid" ? "\u5355\u8272" : "\u6E10\u53D8\u8272" }),
|
|
7229
|
+
allowClear ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", className: `sia-color-picker__none${color ? "" : " is-active"}`, "aria-label": "\u9009\u62E9\u65E0\u8272", ...withTitleTooltip({ title: "\u65E0\u8272" }), onClick: selectNoColor, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", {}) }) : null
|
|
7103
7230
|
] }),
|
|
7104
|
-
currentMode === "gradient" ? /* @__PURE__ */ (0,
|
|
7105
|
-
/* @__PURE__ */ (0,
|
|
7231
|
+
currentMode === "gradient" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-color-picker__gradient-editor", children: [
|
|
7232
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "sia-color-picker__gradient-preview", style: { background: gradientValue }, onPointerDown: addGradientStop, children: gradientStops.map((stop) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
7106
7233
|
"button",
|
|
7107
7234
|
{
|
|
7108
7235
|
type: "button",
|
|
@@ -7114,40 +7241,40 @@ function ColorPicker({
|
|
|
7114
7241
|
},
|
|
7115
7242
|
stop.id
|
|
7116
7243
|
)) }),
|
|
7117
|
-
/* @__PURE__ */ (0,
|
|
7118
|
-
/* @__PURE__ */ (0,
|
|
7244
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-color-picker__gradient-controls", children: [
|
|
7245
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { children: [
|
|
7119
7246
|
"\u65B9\u5411 ",
|
|
7120
|
-
/* @__PURE__ */ (0,
|
|
7247
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "number", min: 0, max: 360, value: Math.round(gradientAngle), onChange: (event) => {
|
|
7121
7248
|
const nextAngle = clamp4(Number(event.currentTarget.value), 0, 360);
|
|
7122
7249
|
setGradientAngle(nextAngle);
|
|
7123
7250
|
emit(formatGradient(nextAngle, gradientStops));
|
|
7124
7251
|
}, onBlur: () => onChangeComplete?.(formatGradient(gradientAngle, gradientStops)) }),
|
|
7125
|
-
/* @__PURE__ */ (0,
|
|
7252
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "\xB0" })
|
|
7126
7253
|
] }),
|
|
7127
|
-
/* @__PURE__ */ (0,
|
|
7254
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { children: [
|
|
7128
7255
|
"\u4F4D\u7F6E ",
|
|
7129
|
-
/* @__PURE__ */ (0,
|
|
7256
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "range", min: 0, max: 100, value: activeStop?.position ?? 0, onChange: (event) => {
|
|
7130
7257
|
if (!activeStop) return;
|
|
7131
7258
|
emitGradient(gradientStops.map((stop) => stop.id === activeStop.id ? { ...stop, position: Number(event.currentTarget.value) } : stop));
|
|
7132
7259
|
}, onPointerUp: () => onChangeComplete?.(formatGradient(gradientAngle, gradientStops)) }),
|
|
7133
|
-
/* @__PURE__ */ (0,
|
|
7260
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
7134
7261
|
Math.round(activeStop?.position ?? 0),
|
|
7135
7262
|
"%"
|
|
7136
7263
|
] })
|
|
7137
7264
|
] }),
|
|
7138
|
-
/* @__PURE__ */ (0,
|
|
7265
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { type: "button", disabled: gradientStops.length <= 2, onClick: () => {
|
|
7139
7266
|
if (!activeStop || gradientStops.length <= 2) return;
|
|
7140
7267
|
const index = gradientStops.findIndex((stop) => stop.id === activeStop.id);
|
|
7141
7268
|
const nextStops = gradientStops.filter((stop) => stop.id !== activeStop.id);
|
|
7142
7269
|
setActiveStopId(nextStops[Math.max(0, index - 1)]?.id ?? nextStops[0]?.id ?? 0);
|
|
7143
7270
|
emitGradient(nextStops, gradientAngle, true);
|
|
7144
7271
|
}, children: [
|
|
7145
|
-
/* @__PURE__ */ (0,
|
|
7272
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "minus", size: 14 }),
|
|
7146
7273
|
" \u5220\u9664\u8272\u6807"
|
|
7147
7274
|
] })
|
|
7148
7275
|
] })
|
|
7149
7276
|
] }) : null,
|
|
7150
|
-
/* @__PURE__ */ (0,
|
|
7277
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
7151
7278
|
"div",
|
|
7152
7279
|
{
|
|
7153
7280
|
className: "sia-color-picker__saturation",
|
|
@@ -7163,28 +7290,28 @@ function ColorPicker({
|
|
|
7163
7290
|
updateSaturation(event, true);
|
|
7164
7291
|
event.currentTarget.releasePointerCapture(event.pointerId);
|
|
7165
7292
|
},
|
|
7166
|
-
children: /* @__PURE__ */ (0,
|
|
7293
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { left: `${hsv.s}%`, top: `${100 - hsv.v}%` } })
|
|
7167
7294
|
}
|
|
7168
7295
|
),
|
|
7169
|
-
/* @__PURE__ */ (0,
|
|
7170
|
-
/* @__PURE__ */ (0,
|
|
7171
|
-
/* @__PURE__ */ (0,
|
|
7296
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "sia-color-picker__hue", children: [
|
|
7297
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "sia-color-picker__field-label", children: "\u8272\u76F8" }),
|
|
7298
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "range", min: 0, max: 360, value: Math.round(hsv.h), onChange: (event) => {
|
|
7172
7299
|
updateEditingColor(rgbaToHex(hsvToRgba(Number(event.currentTarget.value), hsv.s, hsv.v, rgba.a), showAlpha));
|
|
7173
7300
|
}, onPointerUp: () => onChangeComplete?.(currentMode === "gradient" ? gradientValue : solidColor) })
|
|
7174
7301
|
] }),
|
|
7175
|
-
showAlpha ? /* @__PURE__ */ (0,
|
|
7176
|
-
/* @__PURE__ */ (0,
|
|
7177
|
-
/* @__PURE__ */ (0,
|
|
7302
|
+
showAlpha ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "sia-color-picker__alpha", style: { "--sia-alpha-color": opaqueColor }, children: [
|
|
7303
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "sia-color-picker__field-label", children: "\u900F\u660E\u5EA6" }),
|
|
7304
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { type: "range", min: 0, max: 100, value: rgba.a, onChange: (event) => {
|
|
7178
7305
|
updateEditingColor(rgbaToHex({ ...rgba, a: Number(event.currentTarget.value) }, true));
|
|
7179
7306
|
}, onPointerUp: () => onChangeComplete?.(currentMode === "gradient" ? gradientValue : solidColor) }),
|
|
7180
|
-
/* @__PURE__ */ (0,
|
|
7307
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
|
|
7181
7308
|
rgba.a,
|
|
7182
7309
|
"%"
|
|
7183
7310
|
] })
|
|
7184
7311
|
] }) : null,
|
|
7185
|
-
/* @__PURE__ */ (0,
|
|
7186
|
-
/* @__PURE__ */ (0,
|
|
7187
|
-
/* @__PURE__ */ (0,
|
|
7312
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-color-picker__value-row", children: [
|
|
7313
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: "HEX" }),
|
|
7314
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("input", { "aria-label": "HEX", value: hexDraft, onChange: (event) => {
|
|
7188
7315
|
const next = event.currentTarget.value;
|
|
7189
7316
|
setHexDraft(next);
|
|
7190
7317
|
if (/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(next)) updateEditingColor(next);
|
|
@@ -7193,22 +7320,22 @@ function ColorPicker({
|
|
|
7193
7320
|
setHexDraft(normalized);
|
|
7194
7321
|
updateEditingColor(normalized, true);
|
|
7195
7322
|
} }),
|
|
7196
|
-
/* @__PURE__ */ (0,
|
|
7323
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `sia-color-picker__value-swatch${color ? "" : " is-empty"}`, style: color ? { background: editingColor } : void 0 })
|
|
7197
7324
|
] }),
|
|
7198
|
-
presets?.map((preset2, index) => /* @__PURE__ */ (0,
|
|
7199
|
-
preset2.label ? /* @__PURE__ */ (0,
|
|
7200
|
-
/* @__PURE__ */ (0,
|
|
7325
|
+
presets?.map((preset2, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "sia-color-picker__preset", children: [
|
|
7326
|
+
preset2.label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("strong", { children: preset2.label }) : null,
|
|
7327
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: preset2.colors.map((presetColor) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type: "button", "aria-label": `\u9009\u62E9\u989C\u8272 ${presetColor}`, style: { background: presetColor }, onClick: () => updateEditingColor(presetColor, true) }, presetColor)) })
|
|
7201
7328
|
] }, index))
|
|
7202
7329
|
] })
|
|
7203
7330
|
] });
|
|
7204
7331
|
}
|
|
7205
7332
|
|
|
7206
7333
|
// src/components/DatePicker.tsx
|
|
7207
|
-
var
|
|
7334
|
+
var import_react35 = require("react");
|
|
7208
7335
|
|
|
7209
7336
|
// src/components/DatePickerPanel.tsx
|
|
7210
|
-
var
|
|
7211
|
-
var
|
|
7337
|
+
var import_react34 = require("react");
|
|
7338
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
7212
7339
|
function pad2(value) {
|
|
7213
7340
|
return String(value).padStart(2, "0");
|
|
7214
7341
|
}
|
|
@@ -7273,9 +7400,9 @@ function CalendarMonth({
|
|
|
7273
7400
|
const end = range[1] || previewEnd || "";
|
|
7274
7401
|
const low = start && end ? start <= end ? start : end : "";
|
|
7275
7402
|
const high = start && end ? start <= end ? end : start : "";
|
|
7276
|
-
return /* @__PURE__ */ (0,
|
|
7277
|
-
/* @__PURE__ */ (0,
|
|
7278
|
-
/* @__PURE__ */ (0,
|
|
7403
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-date-panel__month", children: [
|
|
7404
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "sia-date-panel__weekdays", "aria-hidden": "true", children: WEEKDAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: day }, day)) }),
|
|
7405
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "sia-date-panel__days", children: Array.from({ length: 42 }, (_, index) => {
|
|
7279
7406
|
const date = addDays(gridStart, index);
|
|
7280
7407
|
const key = dateKey(date);
|
|
7281
7408
|
const outside = date.getMonth() !== month.getMonth();
|
|
@@ -7284,11 +7411,11 @@ function CalendarMonth({
|
|
|
7284
7411
|
const rangeStart = Boolean(start && key === start);
|
|
7285
7412
|
const rangeEnd = Boolean(range[1] && key === range[1]);
|
|
7286
7413
|
const inRange = Boolean(low && high && key >= low && key <= high);
|
|
7287
|
-
return /* @__PURE__ */ (0,
|
|
7414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7288
7415
|
"span",
|
|
7289
7416
|
{
|
|
7290
7417
|
className: `sia-date-panel__cell${outside ? " is-outside" : ""}${selected ? " is-selected" : ""}${rangeStart ? " is-range-start" : ""}${rangeEnd ? " is-range-end" : ""}${inRange ? " is-in-range" : ""}${key === today ? " is-today" : ""}`,
|
|
7291
|
-
children: /* @__PURE__ */ (0,
|
|
7418
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
7292
7419
|
"button",
|
|
7293
7420
|
{
|
|
7294
7421
|
type: "button",
|
|
@@ -7315,28 +7442,28 @@ function CalendarHeader({
|
|
|
7315
7442
|
onNextMonth,
|
|
7316
7443
|
onNextYear
|
|
7317
7444
|
}) {
|
|
7318
|
-
return /* @__PURE__ */ (0,
|
|
7319
|
-
/* @__PURE__ */ (0,
|
|
7320
|
-
onPreviousYear ? /* @__PURE__ */ (0,
|
|
7321
|
-
/* @__PURE__ */ (0,
|
|
7322
|
-
/* @__PURE__ */ (0,
|
|
7445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sia-date-panel__header", children: [
|
|
7446
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "sia-date-panel__nav", children: [
|
|
7447
|
+
onPreviousYear ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { type: "button", "aria-label": "\u4E0A\u4E00\u5E74", onClick: onPreviousYear, children: [
|
|
7448
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-left", size: 13 }),
|
|
7449
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-left", size: 13 })
|
|
7323
7450
|
] }) : null,
|
|
7324
|
-
onPreviousMonth ? /* @__PURE__ */ (0,
|
|
7451
|
+
onPreviousMonth ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", "aria-label": "\u4E0A\u4E2A\u6708", onClick: onPreviousMonth, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-left", size: 15 }) }) : null
|
|
7325
7452
|
] }),
|
|
7326
|
-
/* @__PURE__ */ (0,
|
|
7327
|
-
label ? /* @__PURE__ */ (0,
|
|
7328
|
-
/* @__PURE__ */ (0,
|
|
7453
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
|
|
7454
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("small", { children: label }) : null,
|
|
7455
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
|
|
7329
7456
|
month.getFullYear(),
|
|
7330
7457
|
"\u5E74\xA0 ",
|
|
7331
7458
|
month.getMonth() + 1,
|
|
7332
7459
|
"\u6708"
|
|
7333
7460
|
] })
|
|
7334
7461
|
] }),
|
|
7335
|
-
/* @__PURE__ */ (0,
|
|
7336
|
-
onNextMonth ? /* @__PURE__ */ (0,
|
|
7337
|
-
onNextYear ? /* @__PURE__ */ (0,
|
|
7338
|
-
/* @__PURE__ */ (0,
|
|
7339
|
-
/* @__PURE__ */ (0,
|
|
7462
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "sia-date-panel__nav", children: [
|
|
7463
|
+
onNextMonth ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", "aria-label": "\u4E0B\u4E2A\u6708", onClick: onNextMonth, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-right", size: 15 }) }) : null,
|
|
7464
|
+
onNextYear ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("button", { type: "button", "aria-label": "\u4E0B\u4E00\u5E74", onClick: onNextYear, children: [
|
|
7465
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-right", size: 13 }),
|
|
7466
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: "chevron-right", size: 13 })
|
|
7340
7467
|
] }) : null
|
|
7341
7468
|
] }),
|
|
7342
7469
|
range ? null : null
|
|
@@ -7351,12 +7478,12 @@ function TimePanel({
|
|
|
7351
7478
|
onChange
|
|
7352
7479
|
}) {
|
|
7353
7480
|
const [hour = "00", minute = "00", second = "00"] = value.split(":");
|
|
7354
|
-
const columnsRef = (0,
|
|
7355
|
-
const hourRef = (0,
|
|
7356
|
-
const minuteRef = (0,
|
|
7357
|
-
const secondRef = (0,
|
|
7481
|
+
const columnsRef = (0, import_react34.useRef)(null);
|
|
7482
|
+
const hourRef = (0, import_react34.useRef)(null);
|
|
7483
|
+
const minuteRef = (0, import_react34.useRef)(null);
|
|
7484
|
+
const secondRef = (0, import_react34.useRef)(null);
|
|
7358
7485
|
const columnRefs = [hourRef, minuteRef, secondRef];
|
|
7359
|
-
(0,
|
|
7486
|
+
(0, import_react34.useLayoutEffect)(() => {
|
|
7360
7487
|
for (const column of columnsRef.current?.children ?? []) {
|
|
7361
7488
|
const selected = column.querySelector('[aria-selected="true"]');
|
|
7362
7489
|
const first = column.firstElementChild;
|
|
@@ -7378,19 +7505,19 @@ function TimePanel({
|
|
|
7378
7505
|
values[index] = next;
|
|
7379
7506
|
onChange(values.join(":"));
|
|
7380
7507
|
}
|
|
7381
|
-
return /* @__PURE__ */ (0,
|
|
7382
|
-
/* @__PURE__ */ (0,
|
|
7508
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("aside", { className: "sia-date-panel__time", "aria-label": ariaLabel, children: [
|
|
7509
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("strong", { children: [
|
|
7383
7510
|
use12Hours ? pad2(Number(hour) % 12 || 12) : hour,
|
|
7384
7511
|
":",
|
|
7385
7512
|
minute,
|
|
7386
7513
|
showSecond ? `:${second}` : "",
|
|
7387
7514
|
use12Hours ? Number(hour) < 12 ? " AM" : " PM" : ""
|
|
7388
7515
|
] }),
|
|
7389
|
-
/* @__PURE__ */ (0,
|
|
7516
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: columnsRef, className: "sia-date-panel__time-columns", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: columnRefs[column.index], role: "listbox", "aria-label": `${ariaLabel}${column.label}`, children: Array.from({ length: column.count }, (_, index) => {
|
|
7390
7517
|
const next = pad2(index);
|
|
7391
7518
|
const candidate = [hour, minute, second];
|
|
7392
7519
|
candidate[column.index] = next;
|
|
7393
|
-
return /* @__PURE__ */ (0,
|
|
7520
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", role: "option", disabled: disabledTime?.(candidate.join(":")), "aria-selected": next === column.value, className: next === column.value ? "is-selected" : "", onKeyDown: (event) => {
|
|
7394
7521
|
if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
|
|
7395
7522
|
event.preventDefault();
|
|
7396
7523
|
const buttons = Array.from(event.currentTarget.parentElement.querySelectorAll("button:not(:disabled)"));
|
|
@@ -7399,7 +7526,7 @@ function TimePanel({
|
|
|
7399
7526
|
buttons[target]?.focus();
|
|
7400
7527
|
}, onClick: () => update(column.index, next), children: use12Hours && column.index === 0 ? `${pad2(index % 12 || 12)} ${index < 12 ? "AM" : "PM"}` : next }, next);
|
|
7401
7528
|
}) }, column.label)) }),
|
|
7402
|
-
columns.map((column) => /* @__PURE__ */ (0,
|
|
7529
|
+
columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FloatingScrollbarProvider, { targetRef: columnRefs[column.index] }, column.index))
|
|
7403
7530
|
] });
|
|
7404
7531
|
}
|
|
7405
7532
|
function DatePanelFooter({
|
|
@@ -7411,17 +7538,17 @@ function DatePanelFooter({
|
|
|
7411
7538
|
onToday,
|
|
7412
7539
|
onConfirm
|
|
7413
7540
|
}) {
|
|
7414
|
-
return /* @__PURE__ */ (0,
|
|
7415
|
-
/* @__PURE__ */ (0,
|
|
7416
|
-
showToday ? /* @__PURE__ */ (0,
|
|
7541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("footer", { className: "sia-date-panel__footer", children: [
|
|
7542
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
|
|
7543
|
+
showToday ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", onClick: onToday, children: "\u6B64\u523B" }) : null,
|
|
7417
7544
|
extra
|
|
7418
7545
|
] }),
|
|
7419
|
-
needConfirm ? /* @__PURE__ */ (0,
|
|
7546
|
+
needConfirm ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type: "button", className: "sia-date-panel__confirm", disabled: disabledConfirm, onClick: onConfirm, children: confirmText }) : null
|
|
7420
7547
|
] });
|
|
7421
7548
|
}
|
|
7422
7549
|
|
|
7423
7550
|
// src/components/DatePicker.tsx
|
|
7424
|
-
var
|
|
7551
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
7425
7552
|
function formatWeek(date) {
|
|
7426
7553
|
const target = new Date(date);
|
|
7427
7554
|
target.setHours(0, 0, 0, 0);
|
|
@@ -7497,23 +7624,23 @@ function DatePicker({
|
|
|
7497
7624
|
...props
|
|
7498
7625
|
}) {
|
|
7499
7626
|
const size = useControlSize(sizeProp);
|
|
7500
|
-
const id = (0,
|
|
7501
|
-
const rootRef = (0,
|
|
7502
|
-
const popupRef = (0,
|
|
7627
|
+
const id = (0, import_react35.useId)();
|
|
7628
|
+
const rootRef = (0, import_react35.useRef)(null);
|
|
7629
|
+
const popupRef = (0, import_react35.useRef)(null);
|
|
7503
7630
|
const initialValue = defaultValue ?? (multiple ? [] : "");
|
|
7504
7631
|
const [currentValue, setCurrentValue] = useControllableState({ value, defaultValue: initialValue, onChange });
|
|
7505
7632
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
7506
|
-
const [draftValue, setDraftValue] = (0,
|
|
7633
|
+
const [draftValue, setDraftValue] = (0, import_react35.useState)(currentValue);
|
|
7507
7634
|
const firstCurrent = Array.isArray(currentValue) ? currentValue[0] : currentValue;
|
|
7508
|
-
const [viewMonth, setViewMonth] = (0,
|
|
7509
|
-
const [draftTime, setDraftTime] = (0,
|
|
7635
|
+
const [viewMonth, setViewMonth] = (0, import_react35.useState)(() => startOfMonth(parseDate2(dayFromValue(firstCurrent)) ?? /* @__PURE__ */ new Date()));
|
|
7636
|
+
const [draftTime, setDraftTime] = (0, import_react35.useState)(() => timePart(firstCurrent, defaultTimeFrom(showTime)));
|
|
7510
7637
|
const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
|
|
7511
7638
|
const showSecond = showSecondFrom(showTime);
|
|
7512
|
-
const selectedDates = (0,
|
|
7639
|
+
const selectedDates = (0, import_react35.useMemo)(() => {
|
|
7513
7640
|
const values = Array.isArray(draftValue) ? draftValue : draftValue ? [draftValue] : [];
|
|
7514
7641
|
return values.map(dayFromValue).filter(Boolean);
|
|
7515
7642
|
}, [draftValue]);
|
|
7516
|
-
(0,
|
|
7643
|
+
(0, import_react35.useEffect)(() => {
|
|
7517
7644
|
if (!visible) return void 0;
|
|
7518
7645
|
const close = (event) => {
|
|
7519
7646
|
const target = event.target;
|
|
@@ -7538,17 +7665,17 @@ function DatePicker({
|
|
|
7538
7665
|
if (maximum && day > String(maximum).slice(0, 10)) return true;
|
|
7539
7666
|
return disabledDate?.(day, { type: "date" }) ?? false;
|
|
7540
7667
|
}
|
|
7541
|
-
function buildValue(day) {
|
|
7668
|
+
function buildValue(day, time = draftTime) {
|
|
7542
7669
|
const picked = formatPickerValue(day, picker);
|
|
7543
|
-
return showTime && picker === "date" ? withTime(picked,
|
|
7670
|
+
return showTime && picker === "date" ? withTime(picked, time, showSecond) : picked;
|
|
7544
7671
|
}
|
|
7545
|
-
function selectDate(day) {
|
|
7672
|
+
function selectDate(day, time = draftTime, ensureSelected = false) {
|
|
7546
7673
|
if (isDisabled(day)) return;
|
|
7547
|
-
const nextValue = buildValue(day);
|
|
7674
|
+
const nextValue = buildValue(day, time);
|
|
7548
7675
|
if (multiple) {
|
|
7549
7676
|
const current = Array.isArray(draftValue) ? [...draftValue] : [];
|
|
7550
7677
|
const exists = current.some((item) => dayFromValue(item) === day);
|
|
7551
|
-
const next = exists ? current.filter((item) => dayFromValue(item) !== day) : [...current, nextValue];
|
|
7678
|
+
const next = exists ? ensureSelected ? current.map((item) => dayFromValue(item) === day ? nextValue : item) : current.filter((item) => dayFromValue(item) !== day) : [...current, nextValue];
|
|
7552
7679
|
setDraftValue(next);
|
|
7553
7680
|
if (!resolvedNeedConfirm) setCurrentValue(next);
|
|
7554
7681
|
return;
|
|
@@ -7574,8 +7701,8 @@ function DatePicker({
|
|
|
7574
7701
|
const display = Array.isArray(currentValue) ? currentValue.map(formatValue2).join("\u3001") : currentValue ? formatValue2(currentValue) : "";
|
|
7575
7702
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder ?? placeholderFor(picker, showTime, multiple), filled: Boolean(display), active: visible });
|
|
7576
7703
|
const triggerLabel = props["aria-label"] ?? (typeof placeholder === "string" ? placeholder : "\u65E5\u671F\u9009\u62E9\u5668");
|
|
7577
|
-
return /* @__PURE__ */ (0,
|
|
7578
|
-
/* @__PURE__ */ (0,
|
|
7704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { ref: rootRef, className: `sia-picker${floating.className} sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
7705
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
7579
7706
|
"button",
|
|
7580
7707
|
{
|
|
7581
7708
|
type: "button",
|
|
@@ -7597,16 +7724,16 @@ function DatePicker({
|
|
|
7597
7724
|
} else if (event.key === "Escape") changeOpen(false);
|
|
7598
7725
|
},
|
|
7599
7726
|
children: [
|
|
7600
|
-
/* @__PURE__ */ (0,
|
|
7601
|
-
/* @__PURE__ */ (0,
|
|
7727
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `sia-picker__value${display ? "" : " is-placeholder"}`, children: display || placeholder || placeholderFor(picker, showTime, multiple) }),
|
|
7728
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "calendar", size: 16 }) })
|
|
7602
7729
|
]
|
|
7603
7730
|
}
|
|
7604
7731
|
),
|
|
7605
7732
|
floating.label,
|
|
7606
|
-
allowClear && display && !disabled ? /* @__PURE__ */ (0,
|
|
7607
|
-
/* @__PURE__ */ (0,
|
|
7608
|
-
/* @__PURE__ */ (0,
|
|
7609
|
-
presets?.length ? /* @__PURE__ */ (0,
|
|
7733
|
+
allowClear && display && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
7734
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel${showTime ? " sia-date-panel--with-time" : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u9009\u62E9\u9762\u677F", children: [
|
|
7735
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sia-date-panel__body", children: [
|
|
7736
|
+
presets?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("aside", { className: "sia-date-panel__presets", children: presets.map((preset2, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", onClick: () => {
|
|
7610
7737
|
const next = resolvePreset(preset2.value);
|
|
7611
7738
|
if (!next || isDisabled(dayFromValue(next))) return;
|
|
7612
7739
|
setDraftValue(next);
|
|
@@ -7615,8 +7742,8 @@ function DatePicker({
|
|
|
7615
7742
|
changeOpen(false);
|
|
7616
7743
|
}
|
|
7617
7744
|
}, children: preset2.label }, index)) }) : null,
|
|
7618
|
-
/* @__PURE__ */ (0,
|
|
7619
|
-
/* @__PURE__ */ (0,
|
|
7745
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "sia-date-panel__calendar", children: [
|
|
7746
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7620
7747
|
CalendarHeader,
|
|
7621
7748
|
{
|
|
7622
7749
|
month: viewMonth,
|
|
@@ -7626,21 +7753,29 @@ function DatePicker({
|
|
|
7626
7753
|
onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
|
|
7627
7754
|
}
|
|
7628
7755
|
),
|
|
7629
|
-
/* @__PURE__ */ (0,
|
|
7756
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CalendarMonth, { month: viewMonth, selectedDates, disabledDate: isDisabled, onSelect: selectDate })
|
|
7630
7757
|
] }),
|
|
7631
|
-
showTime ? /* @__PURE__ */ (0,
|
|
7758
|
+
showTime ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TimePanel, { value: draftTime, showSecond, onChange: (next) => {
|
|
7632
7759
|
setDraftTime(next);
|
|
7633
7760
|
if (typeof draftValue === "string" && draftValue) setDraftValue(withTime(dayFromValue(draftValue), next, showSecond));
|
|
7634
7761
|
} }) : null
|
|
7635
7762
|
] }),
|
|
7636
|
-
/* @__PURE__ */ (0,
|
|
7763
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7637
7764
|
DatePanelFooter,
|
|
7638
7765
|
{
|
|
7639
7766
|
extra: renderExtraFooter?.(),
|
|
7640
7767
|
showToday,
|
|
7641
7768
|
needConfirm: resolvedNeedConfirm,
|
|
7642
7769
|
disabledConfirm: Array.isArray(draftValue) ? draftValue.length === 0 : !draftValue,
|
|
7643
|
-
onToday: () =>
|
|
7770
|
+
onToday: () => {
|
|
7771
|
+
const now = /* @__PURE__ */ new Date();
|
|
7772
|
+
const day = dateKey(now);
|
|
7773
|
+
if (isDisabled(day)) return;
|
|
7774
|
+
const time = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad2).join(":");
|
|
7775
|
+
if (showTime) setDraftTime(time);
|
|
7776
|
+
setViewMonth(startOfMonth(now));
|
|
7777
|
+
selectDate(day, time, true);
|
|
7778
|
+
},
|
|
7644
7779
|
onConfirm: commitDraft
|
|
7645
7780
|
}
|
|
7646
7781
|
)
|
|
@@ -7679,15 +7814,15 @@ function DateRangePicker({
|
|
|
7679
7814
|
...props
|
|
7680
7815
|
}) {
|
|
7681
7816
|
const size = useControlSize(sizeProp);
|
|
7682
|
-
const id = (0,
|
|
7683
|
-
const rootRef = (0,
|
|
7684
|
-
const popupRef = (0,
|
|
7817
|
+
const id = (0, import_react35.useId)();
|
|
7818
|
+
const rootRef = (0, import_react35.useRef)(null);
|
|
7819
|
+
const popupRef = (0, import_react35.useRef)(null);
|
|
7685
7820
|
const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
|
|
7686
7821
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
7687
|
-
const [draftValue, setDraftValue] = (0,
|
|
7688
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
7689
|
-
const indicatorRef = (0,
|
|
7690
|
-
(0,
|
|
7822
|
+
const [draftValue, setDraftValue] = (0, import_react35.useState)(currentValue);
|
|
7823
|
+
const [activeIndex, setActiveIndex] = (0, import_react35.useState)(endpointDisabled[0] || currentValue[0] && !currentValue[1] ? 1 : 0);
|
|
7824
|
+
const indicatorRef = (0, import_react35.useRef)(null);
|
|
7825
|
+
(0, import_react35.useLayoutEffect)(() => {
|
|
7691
7826
|
const field = rootRef.current?.querySelector(`[data-range-endpoint="${activeIndex}"]`);
|
|
7692
7827
|
const indicator = indicatorRef.current;
|
|
7693
7828
|
if (!field || !indicator) return;
|
|
@@ -7704,22 +7839,22 @@ function DateRangePicker({
|
|
|
7704
7839
|
}
|
|
7705
7840
|
return () => observer.disconnect();
|
|
7706
7841
|
});
|
|
7707
|
-
const [confirmedIndex, setConfirmedIndex] = (0,
|
|
7708
|
-
const [presetSelected, setPresetSelected] = (0,
|
|
7709
|
-
const [hoverDate, setHoverDate] = (0,
|
|
7710
|
-
const [viewMonth, setViewMonth] = (0,
|
|
7711
|
-
const [endViewMonth, setEndViewMonth] = (0,
|
|
7842
|
+
const [confirmedIndex, setConfirmedIndex] = (0, import_react35.useState)(null);
|
|
7843
|
+
const [presetSelected, setPresetSelected] = (0, import_react35.useState)(false);
|
|
7844
|
+
const [hoverDate, setHoverDate] = (0, import_react35.useState)("");
|
|
7845
|
+
const [viewMonth, setViewMonth] = (0, import_react35.useState)(() => startOfMonth(parseDate2(dayFromValue(currentValue[0] || currentValue[1])) ?? /* @__PURE__ */ new Date()));
|
|
7846
|
+
const [endViewMonth, setEndViewMonth] = (0, import_react35.useState)(() => startOfMonth(parseDate2(dayFromValue(currentValue[1])) ?? addMonths(parseDate2(dayFromValue(currentValue[0])) ?? /* @__PURE__ */ new Date(), 1)));
|
|
7712
7847
|
const showSecond = showSecondFrom(showTime);
|
|
7713
7848
|
const defaultTime = defaultTimeFrom(showTime);
|
|
7714
7849
|
const defaultEndTime = defaultTimeFrom(showTime, 1);
|
|
7715
|
-
const [times, setTimes] = (0,
|
|
7850
|
+
const [times, setTimes] = (0, import_react35.useState)([
|
|
7716
7851
|
timePart(currentValue[0], defaultTime),
|
|
7717
7852
|
timePart(currentValue[1], defaultEndTime)
|
|
7718
7853
|
]);
|
|
7719
7854
|
const resolvedNeedConfirm = needConfirm ?? Boolean(showTime);
|
|
7720
7855
|
const rangeDates = [dayFromValue(draftValue[0]), dayFromValue(draftValue[1])];
|
|
7721
7856
|
const invalidDateTimeRange = Boolean(showTime && draftValue[0] && draftValue[1] && draftValue[0] > draftValue[1]);
|
|
7722
|
-
(0,
|
|
7857
|
+
(0, import_react35.useEffect)(() => {
|
|
7723
7858
|
if (!visible) return void 0;
|
|
7724
7859
|
const close = (event) => {
|
|
7725
7860
|
const target = event.target;
|
|
@@ -7801,10 +7936,13 @@ function DateRangePicker({
|
|
|
7801
7936
|
changeOpen(false);
|
|
7802
7937
|
}
|
|
7803
7938
|
}
|
|
7804
|
-
function selectDateTime(day, index) {
|
|
7939
|
+
function selectDateTime(day, index, time = index === 1 ? "23:59:59" : times[index]) {
|
|
7805
7940
|
if (isDisabled(day, index, true)) return;
|
|
7941
|
+
const nextTimes = [...times];
|
|
7942
|
+
nextTimes[index] = time;
|
|
7943
|
+
setTimes(nextTimes);
|
|
7806
7944
|
const nextValue = [...draftValue];
|
|
7807
|
-
nextValue[index] =
|
|
7945
|
+
nextValue[index] = withTime(day, time, showSecond);
|
|
7808
7946
|
updateDraft(nextValue);
|
|
7809
7947
|
setHoverDate("");
|
|
7810
7948
|
setActiveIndex(index);
|
|
@@ -7889,14 +8027,14 @@ function DateRangePicker({
|
|
|
7889
8027
|
const month = index === 0 ? viewMonth : endViewMonth;
|
|
7890
8028
|
const setMonth = index === 0 ? setViewMonth : setEndViewMonth;
|
|
7891
8029
|
const endpointLabel = index === 0 ? "\u5F00\u59CB" : "\u7ED3\u675F";
|
|
7892
|
-
return /* @__PURE__ */ (0,
|
|
8030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
7893
8031
|
"div",
|
|
7894
8032
|
{
|
|
7895
8033
|
className: `sia-date-panel__range-date-time-group${activeIndex === index ? " is-active" : ""}`,
|
|
7896
8034
|
"aria-label": `${endpointLabel}\u65E5\u671F\u65F6\u95F4`,
|
|
7897
8035
|
children: [
|
|
7898
|
-
/* @__PURE__ */ (0,
|
|
7899
|
-
/* @__PURE__ */ (0,
|
|
8036
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "sia-date-panel__calendar", children: [
|
|
8037
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7900
8038
|
CalendarHeader,
|
|
7901
8039
|
{
|
|
7902
8040
|
month,
|
|
@@ -7908,7 +8046,7 @@ function DateRangePicker({
|
|
|
7908
8046
|
onNextYear: () => setMonth(addMonths(month, 12))
|
|
7909
8047
|
}
|
|
7910
8048
|
),
|
|
7911
|
-
/* @__PURE__ */ (0,
|
|
8049
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7912
8050
|
CalendarMonth,
|
|
7913
8051
|
{
|
|
7914
8052
|
month,
|
|
@@ -7918,7 +8056,7 @@ function DateRangePicker({
|
|
|
7918
8056
|
}
|
|
7919
8057
|
)
|
|
7920
8058
|
] }),
|
|
7921
|
-
/* @__PURE__ */ (0,
|
|
8059
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7922
8060
|
TimePanel,
|
|
7923
8061
|
{
|
|
7924
8062
|
value: times[index],
|
|
@@ -7936,8 +8074,8 @@ function DateRangePicker({
|
|
|
7936
8074
|
const displayValue = visible && allowEmpty.some(Boolean) ? draftValue : currentValue;
|
|
7937
8075
|
const startFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[0], filled: Boolean(displayValue[0]), active: visible });
|
|
7938
8076
|
const endFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[1], filled: Boolean(displayValue[1]), active: visible });
|
|
7939
|
-
return /* @__PURE__ */ (0,
|
|
7940
|
-
/* @__PURE__ */ (0,
|
|
8077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
8078
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
7941
8079
|
"button",
|
|
7942
8080
|
{
|
|
7943
8081
|
type: "button",
|
|
@@ -7961,27 +8099,27 @@ function DateRangePicker({
|
|
|
7961
8099
|
else changeOpen(true);
|
|
7962
8100
|
},
|
|
7963
8101
|
children: [
|
|
7964
|
-
/* @__PURE__ */ (0,
|
|
7965
|
-
/* @__PURE__ */ (0,
|
|
8102
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { "data-range-endpoint": "0", className: `sia-picker-range-control__field${startFloating.className}${visible && activeIndex === 0 ? " is-active" : ""}`, children: [
|
|
8103
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `sia-picker-range-control__value${displayValue[0] ? "" : " is-placeholder"}`, children: displayValue[0] ? formatValue2(displayValue[0]) : placeholder[0] }),
|
|
7966
8104
|
startFloating.label
|
|
7967
8105
|
] }),
|
|
7968
|
-
/* @__PURE__ */ (0,
|
|
7969
|
-
/* @__PURE__ */ (0,
|
|
7970
|
-
/* @__PURE__ */ (0,
|
|
8106
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sia-picker-range-control__separator", children: separator }),
|
|
8107
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { "data-range-endpoint": "1", className: `sia-picker-range-control__field${endFloating.className}${visible && activeIndex === 1 ? " is-active" : ""}`, children: [
|
|
8108
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `sia-picker-range-control__value${displayValue[1] ? "" : " is-placeholder"}`, children: displayValue[1] ? formatValue2(displayValue[1]) : placeholder[1] }),
|
|
7971
8109
|
endFloating.label
|
|
7972
8110
|
] }),
|
|
7973
|
-
/* @__PURE__ */ (0,
|
|
7974
|
-
/* @__PURE__ */ (0,
|
|
8111
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { ref: indicatorRef, className: "sia-picker-range-control__indicator", "aria-hidden": "true" }),
|
|
8112
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "calendar", size: 16 }) })
|
|
7975
8113
|
]
|
|
7976
8114
|
}
|
|
7977
8115
|
),
|
|
7978
|
-
allowClear && (displayValue[0] || displayValue[1]) && !disabled ? /* @__PURE__ */ (0,
|
|
7979
|
-
/* @__PURE__ */ (0,
|
|
7980
|
-
/* @__PURE__ */ (0,
|
|
7981
|
-
presets?.length ? /* @__PURE__ */ (0,
|
|
7982
|
-
showTime ? /* @__PURE__ */ (0,
|
|
7983
|
-
/* @__PURE__ */ (0,
|
|
7984
|
-
/* @__PURE__ */ (0,
|
|
8116
|
+
allowClear && (displayValue[0] || displayValue[1]) && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
8117
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? " sia-date-panel--with-time sia-date-panel--range-time-compact" : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
|
|
8118
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sia-date-panel__body", children: [
|
|
8119
|
+
presets?.length ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("aside", { className: "sia-date-panel__presets", "aria-label": "\u5FEB\u6377\u65E5\u671F\u8303\u56F4", children: presets.map((preset2, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", onClick: () => applyPreset(preset2), children: preset2.label }, index)) }) : null,
|
|
8120
|
+
showTime ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "sia-date-panel__range-date-time", children: renderDateTimeGroup(activeIndex) }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sia-date-panel__range-calendars", children: [
|
|
8121
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "sia-date-panel__calendar", children: [
|
|
8122
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7985
8123
|
CalendarHeader,
|
|
7986
8124
|
{
|
|
7987
8125
|
month: viewMonth,
|
|
@@ -7990,10 +8128,10 @@ function DateRangePicker({
|
|
|
7990
8128
|
onPreviousMonth: () => setViewMonth(addMonths(viewMonth, -1))
|
|
7991
8129
|
}
|
|
7992
8130
|
),
|
|
7993
|
-
/* @__PURE__ */ (0,
|
|
8131
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CalendarMonth, { month: viewMonth, range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
|
|
7994
8132
|
] }),
|
|
7995
|
-
/* @__PURE__ */ (0,
|
|
7996
|
-
/* @__PURE__ */ (0,
|
|
8133
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("section", { className: "sia-date-panel__calendar", children: [
|
|
8134
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
7997
8135
|
CalendarHeader,
|
|
7998
8136
|
{
|
|
7999
8137
|
month: addMonths(viewMonth, 1),
|
|
@@ -8002,25 +8140,37 @@ function DateRangePicker({
|
|
|
8002
8140
|
onNextYear: () => setViewMonth(addMonths(viewMonth, 12))
|
|
8003
8141
|
}
|
|
8004
8142
|
),
|
|
8005
|
-
/* @__PURE__ */ (0,
|
|
8143
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CalendarMonth, { month: addMonths(viewMonth, 1), range: rangeDates, previewEnd: activeIndex === 1 ? hoverDate : "", disabledDate: isDisabled, onSelect: selectDate, onHover: activeIndex === 1 ? setHoverDate : void 0 })
|
|
8006
8144
|
] })
|
|
8007
8145
|
] })
|
|
8008
8146
|
] }),
|
|
8009
|
-
/* @__PURE__ */ (0,
|
|
8147
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
8010
8148
|
DatePanelFooter,
|
|
8011
8149
|
{
|
|
8012
8150
|
showToday: showToday && !presets?.length,
|
|
8013
8151
|
needConfirm: Boolean(showTime) || resolvedNeedConfirm || allowEmpty.some(Boolean),
|
|
8014
8152
|
disabledConfirm: needsOtherConfirmation ? !draftValue[activeIndex] && !allowEmpty[activeIndex] : !isValidRange(draftValue),
|
|
8015
|
-
extra: /* @__PURE__ */ (0,
|
|
8153
|
+
extra: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
8016
8154
|
renderExtraFooter?.(),
|
|
8017
|
-
invalidDateTimeRange ? /* @__PURE__ */ (0,
|
|
8155
|
+
invalidDateTimeRange ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("small", { className: "sia-date-panel__range-error", children: "\u7ED3\u675F\u65F6\u95F4\u4E0D\u80FD\u65E9\u4E8E\u5F00\u59CB\u65F6\u95F4" }) : maxRangeDays ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("small", { children: [
|
|
8018
8156
|
"\u6700\u591A\u9009\u62E9 ",
|
|
8019
8157
|
maxRangeDays,
|
|
8020
8158
|
" \u5929"
|
|
8021
8159
|
] }) : null
|
|
8022
8160
|
] }),
|
|
8023
|
-
onToday: () =>
|
|
8161
|
+
onToday: () => {
|
|
8162
|
+
const now = /* @__PURE__ */ new Date();
|
|
8163
|
+
const day = dateKey(now);
|
|
8164
|
+
if (isDisabled(day, activeIndex, Boolean(showTime))) return;
|
|
8165
|
+
if (showTime) {
|
|
8166
|
+
const time = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad2).join(":");
|
|
8167
|
+
(activeIndex === 0 ? setViewMonth : setEndViewMonth)(startOfMonth(now));
|
|
8168
|
+
selectDateTime(day, activeIndex, time);
|
|
8169
|
+
} else {
|
|
8170
|
+
setViewMonth(startOfMonth(now));
|
|
8171
|
+
selectDate(day);
|
|
8172
|
+
}
|
|
8173
|
+
},
|
|
8024
8174
|
onConfirm: confirm
|
|
8025
8175
|
}
|
|
8026
8176
|
)
|
|
@@ -8032,7 +8182,7 @@ function DateRangePicker({
|
|
|
8032
8182
|
})(DatePicker || (DatePicker = {}));
|
|
8033
8183
|
|
|
8034
8184
|
// src/components/SelectDateRange.tsx
|
|
8035
|
-
var
|
|
8185
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
8036
8186
|
function SelectDateRange({
|
|
8037
8187
|
options,
|
|
8038
8188
|
value,
|
|
@@ -8055,8 +8205,8 @@ function SelectDateRange({
|
|
|
8055
8205
|
const size = useControlSize(sizeProp);
|
|
8056
8206
|
const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
|
|
8057
8207
|
const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
|
|
8058
|
-
return /* @__PURE__ */ (0,
|
|
8059
|
-
/* @__PURE__ */ (0,
|
|
8208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...withTitleTooltip(props), style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
|
|
8209
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
8060
8210
|
Select,
|
|
8061
8211
|
{
|
|
8062
8212
|
className: "sia-select-date-range__select",
|
|
@@ -8074,7 +8224,7 @@ function SelectDateRange({
|
|
|
8074
8224
|
}
|
|
8075
8225
|
}
|
|
8076
8226
|
),
|
|
8077
|
-
/* @__PURE__ */ (0,
|
|
8227
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
8078
8228
|
DatePicker.RangePicker,
|
|
8079
8229
|
{
|
|
8080
8230
|
className: "sia-select-date-range__picker",
|
|
@@ -8093,8 +8243,8 @@ function SelectDateRange({
|
|
|
8093
8243
|
}
|
|
8094
8244
|
|
|
8095
8245
|
// src/components/TimePicker.tsx
|
|
8096
|
-
var
|
|
8097
|
-
var
|
|
8246
|
+
var import_react36 = require("react");
|
|
8247
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
8098
8248
|
function seconds(value) {
|
|
8099
8249
|
const [h = 0, m = 0, s = 0] = value.split(":").map(Number);
|
|
8100
8250
|
return h * 3600 + m * 60 + s;
|
|
@@ -8123,14 +8273,14 @@ function TimePicker({
|
|
|
8123
8273
|
...props
|
|
8124
8274
|
}) {
|
|
8125
8275
|
const size = useControlSize(sizeProp);
|
|
8126
|
-
const id = (0,
|
|
8127
|
-
const rootRef = (0,
|
|
8128
|
-
const inputRef = (0,
|
|
8129
|
-
const popupRef = (0,
|
|
8130
|
-
const focusPanel = (0,
|
|
8276
|
+
const id = (0, import_react36.useId)();
|
|
8277
|
+
const rootRef = (0, import_react36.useRef)(null);
|
|
8278
|
+
const inputRef = (0, import_react36.useRef)(null);
|
|
8279
|
+
const popupRef = (0, import_react36.useRef)(null);
|
|
8280
|
+
const focusPanel = (0, import_react36.useRef)(false);
|
|
8131
8281
|
const [currentValue, setValue2] = useControllableState({ value, defaultValue, onChange });
|
|
8132
|
-
const [open, setOpen] = (0,
|
|
8133
|
-
const [draft, setDraft] = (0,
|
|
8282
|
+
const [open, setOpen] = (0, import_react36.useState)(false);
|
|
8283
|
+
const [draft, setDraft] = (0, import_react36.useState)("00:00:00");
|
|
8134
8284
|
const normalize = (time) => showSecond ? (time + ":00").slice(0, 8) : time.slice(0, 5);
|
|
8135
8285
|
const unavailable = (time) => {
|
|
8136
8286
|
const normalized = normalize(time);
|
|
@@ -8148,7 +8298,7 @@ function TimePicker({
|
|
|
8148
8298
|
setOpen(next);
|
|
8149
8299
|
onOpenChange?.(next);
|
|
8150
8300
|
}
|
|
8151
|
-
(0,
|
|
8301
|
+
(0, import_react36.useEffect)(() => {
|
|
8152
8302
|
if (!open) return;
|
|
8153
8303
|
if (focusPanel.current) {
|
|
8154
8304
|
popupRef.current?.querySelector('[aria-selected="true"]')?.focus();
|
|
@@ -8173,8 +8323,8 @@ function TimePicker({
|
|
|
8173
8323
|
inputRef.current?.focus();
|
|
8174
8324
|
}
|
|
8175
8325
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: Boolean(display), active: open });
|
|
8176
|
-
return /* @__PURE__ */ (0,
|
|
8177
|
-
/* @__PURE__ */ (0,
|
|
8326
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { ref: rootRef, style, className: `sia-picker sia-time-picker${floating.className} sia-picker--${size} sia-picker--${status}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
8327
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
8178
8328
|
"input",
|
|
8179
8329
|
{
|
|
8180
8330
|
...withTitleTooltip(props),
|
|
@@ -8211,12 +8361,12 @@ function TimePicker({
|
|
|
8211
8361
|
}
|
|
8212
8362
|
),
|
|
8213
8363
|
floating.label,
|
|
8214
|
-
allowClear && currentValue && !disabled && !readOnly ? /* @__PURE__ */ (0,
|
|
8364
|
+
allowClear && currentValue && !disabled && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65F6\u95F4", onMouseDown: (event) => event.preventDefault(), onClick: () => {
|
|
8215
8365
|
setValue2("");
|
|
8216
8366
|
changeOpen(false);
|
|
8217
|
-
}, children: /* @__PURE__ */ (0,
|
|
8218
|
-
/* @__PURE__ */ (0,
|
|
8219
|
-
/* @__PURE__ */ (0,
|
|
8367
|
+
}, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
8368
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: "clock", size: 16 }) }),
|
|
8369
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
8220
8370
|
PopupPortal,
|
|
8221
8371
|
{
|
|
8222
8372
|
ref: popupRef,
|
|
@@ -8234,14 +8384,14 @@ function TimePicker({
|
|
|
8234
8384
|
}
|
|
8235
8385
|
},
|
|
8236
8386
|
children: [
|
|
8237
|
-
/* @__PURE__ */ (0,
|
|
8238
|
-
unavailable(draft) ? /* @__PURE__ */ (0,
|
|
8239
|
-
/* @__PURE__ */ (0,
|
|
8240
|
-
/* @__PURE__ */ (0,
|
|
8387
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TimePanel, { value: draft, showSecond, use12Hours, onChange: setDraft }),
|
|
8388
|
+
unavailable(draft) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "sia-time-panel__error", role: "status", children: "\u8BE5\u65F6\u95F4\u4E0D\u53EF\u9009" }) : null,
|
|
8389
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("footer", { className: "sia-time-panel__footer", children: [
|
|
8390
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "text", size: "small", onClick: () => {
|
|
8241
8391
|
const now = /* @__PURE__ */ new Date();
|
|
8242
8392
|
setDraft([now.getHours(), now.getMinutes(), showSecond ? now.getSeconds() : 0].map((part) => String(part).padStart(2, "0")).join(":"));
|
|
8243
8393
|
}, children: "\u6B64\u523B" }),
|
|
8244
|
-
/* @__PURE__ */ (0,
|
|
8394
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "primary", size: "small", disabled: unavailable(draft), onClick: confirm, children: "\u786E\u5B9A" })
|
|
8245
8395
|
] })
|
|
8246
8396
|
]
|
|
8247
8397
|
}
|
|
@@ -8256,10 +8406,10 @@ function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F0
|
|
|
8256
8406
|
pair[index] = next;
|
|
8257
8407
|
setValue2(pair);
|
|
8258
8408
|
}
|
|
8259
|
-
return /* @__PURE__ */ (0,
|
|
8260
|
-
/* @__PURE__ */ (0,
|
|
8261
|
-
/* @__PURE__ */ (0,
|
|
8262
|
-
/* @__PURE__ */ (0,
|
|
8409
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { style, className: `sia-time-range sia-picker--${size} sia-picker--${props.status ?? "default"}${props.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
|
|
8410
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TimePicker, { ...props, "aria-label": props["aria-label"] ? props["aria-label"] + "\u5F00\u59CB\u65F6\u95F4" : "\u5F00\u59CB\u65F6\u95F4", value: currentValue[0], placeholder: placeholder[0], max: currentValue[1] && (!props.max || seconds(currentValue[1]) < seconds(String(props.max))) ? currentValue[1] : props.max, onChange: (next) => update(0, next) }),
|
|
8411
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "sia-time-range__separator", children: separator }),
|
|
8412
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TimePicker, { ...props, id: props.id ? props.id + "-end" : void 0, "aria-label": props["aria-label"] ? props["aria-label"] + "\u7ED3\u675F\u65F6\u95F4" : "\u7ED3\u675F\u65F6\u95F4", value: currentValue[1], placeholder: placeholder[1], min: currentValue[0] && (!props.min || seconds(currentValue[0]) > seconds(String(props.min))) ? currentValue[0] : props.min, onChange: (next) => update(1, next) })
|
|
8263
8413
|
] });
|
|
8264
8414
|
}
|
|
8265
8415
|
((TimePicker2) => {
|
|
@@ -8267,8 +8417,8 @@ function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F0
|
|
|
8267
8417
|
})(TimePicker || (TimePicker = {}));
|
|
8268
8418
|
|
|
8269
8419
|
// src/components/TreeSelect.tsx
|
|
8270
|
-
var
|
|
8271
|
-
var
|
|
8420
|
+
var import_react37 = require("react");
|
|
8421
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
8272
8422
|
function flattenTree(nodes, expanded, search, filter, depth = 0, parents = [], ancestorMatched = false) {
|
|
8273
8423
|
const result = [];
|
|
8274
8424
|
for (const node of nodes) {
|
|
@@ -8330,9 +8480,9 @@ function TreeSelect({
|
|
|
8330
8480
|
...props
|
|
8331
8481
|
}) {
|
|
8332
8482
|
const size = useControlSize(sizeProp);
|
|
8333
|
-
const rootRef = (0,
|
|
8334
|
-
const popupRef = (0,
|
|
8335
|
-
const nodeIndex = (0,
|
|
8483
|
+
const rootRef = (0, import_react37.useRef)(null);
|
|
8484
|
+
const popupRef = (0, import_react37.useRef)(null);
|
|
8485
|
+
const nodeIndex = (0, import_react37.useMemo)(() => {
|
|
8336
8486
|
const index = /* @__PURE__ */ new Map();
|
|
8337
8487
|
const visit = (nodes) => nodes.forEach((node) => {
|
|
8338
8488
|
index.set(node.value, node);
|
|
@@ -8351,7 +8501,7 @@ function TreeSelect({
|
|
|
8351
8501
|
});
|
|
8352
8502
|
const [open, setOpen] = useControllableState({ value: controlledOpen, defaultValue: defaultOpen, onChange: onDropdownVisibleChange });
|
|
8353
8503
|
const [search, setSearch] = useControllableState({ value: searchValue, defaultValue: "", onChange: onSearch });
|
|
8354
|
-
const [expanded, setExpanded] = (0,
|
|
8504
|
+
const [expanded, setExpanded] = (0, import_react37.useState)(() => {
|
|
8355
8505
|
if (!treeDefaultExpandAll) return new Set(treeDefaultExpandedKeys);
|
|
8356
8506
|
const values = [];
|
|
8357
8507
|
const collect = (nodes) => nodes.forEach((node) => {
|
|
@@ -8367,7 +8517,7 @@ function TreeSelect({
|
|
|
8367
8517
|
const expandedSet = treeExpandedKeys ? new Set(treeExpandedKeys) : expanded;
|
|
8368
8518
|
const selectedNodes = resolveNodes(selectedValues);
|
|
8369
8519
|
const visibleNodes = flattenTree(treeData, expandedSet, search, filterTreeNode);
|
|
8370
|
-
(0,
|
|
8520
|
+
(0, import_react37.useEffect)(() => {
|
|
8371
8521
|
if (!open || treeExpandedKeys) return;
|
|
8372
8522
|
const keys = new Set(expanded);
|
|
8373
8523
|
const walk = (nodes, parents) => nodes.forEach((node) => {
|
|
@@ -8427,7 +8577,7 @@ function TreeSelect({
|
|
|
8427
8577
|
setCurrentValue(multi ? [] : void 0);
|
|
8428
8578
|
onClear?.();
|
|
8429
8579
|
}
|
|
8430
|
-
(0,
|
|
8580
|
+
(0, import_react37.useEffect)(() => {
|
|
8431
8581
|
if (!open) return void 0;
|
|
8432
8582
|
const close = (event) => {
|
|
8433
8583
|
const target = event.target;
|
|
@@ -8479,7 +8629,7 @@ function TreeSelect({
|
|
|
8479
8629
|
}
|
|
8480
8630
|
}
|
|
8481
8631
|
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedNodes.length > 0, active: open });
|
|
8482
|
-
return /* @__PURE__ */ (0,
|
|
8632
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
8483
8633
|
"div",
|
|
8484
8634
|
{
|
|
8485
8635
|
ref: rootRef,
|
|
@@ -8493,8 +8643,8 @@ function TreeSelect({
|
|
|
8493
8643
|
}
|
|
8494
8644
|
},
|
|
8495
8645
|
children: [
|
|
8496
|
-
renderTrigger ? renderTrigger({ open, toggle: () => changeOpen(!open), clear }) : /* @__PURE__ */ (0,
|
|
8497
|
-
/* @__PURE__ */ (0,
|
|
8646
|
+
renderTrigger ? renderTrigger({ open, toggle: () => changeOpen(!open), clear }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
|
|
8647
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
8498
8648
|
"button",
|
|
8499
8649
|
{
|
|
8500
8650
|
type: "button",
|
|
@@ -8512,24 +8662,24 @@ function TreeSelect({
|
|
|
8512
8662
|
if (event.key === "Escape") changeOpen(false);
|
|
8513
8663
|
},
|
|
8514
8664
|
children: [
|
|
8515
|
-
/* @__PURE__ */ (0,
|
|
8665
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OverflowTags, { tagClassName: "sia-tree-select__tag", maxCount: maxTagCount, items: selectedNodes.map((node) => ({ key: node.value, label: node.title })) }) : selectedNodes[0]?.title : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
|
|
8516
8666
|
floating.label,
|
|
8517
|
-
/* @__PURE__ */ (0,
|
|
8667
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
|
|
8518
8668
|
]
|
|
8519
8669
|
}
|
|
8520
8670
|
),
|
|
8521
|
-
allowClear && selectedValues.length > 0 && !disabled ? /* @__PURE__ */ (0,
|
|
8671
|
+
allowClear && selectedValues.length > 0 && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "sia-tree-select__clear", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: clear, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null
|
|
8522
8672
|
] }),
|
|
8523
|
-
/* @__PURE__ */ (0,
|
|
8524
|
-
showSearch ? /* @__PURE__ */ (0,
|
|
8525
|
-
/* @__PURE__ */ (0,
|
|
8526
|
-
/* @__PURE__ */ (0,
|
|
8673
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled, className: `sia-tree-select__dropdown ${popupClassName}`, style: popupStyle, children: [
|
|
8674
|
+
showSearch ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "sia-tree-select__search", children: [
|
|
8675
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "search", size: 15 }),
|
|
8676
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("input", { "aria-label": searchPlaceholder, autoFocus: true, value: search, placeholder: searchPlaceholder, onChange: (event) => setSearch(event.currentTarget.value) })
|
|
8527
8677
|
] }) : null,
|
|
8528
|
-
/* @__PURE__ */ (0,
|
|
8678
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "sia-tree-select__tree", role: "tree", "aria-multiselectable": multi || void 0, style: { maxHeight: listHeight }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { role: "status", className: "sia-tree-select__empty", children: "\u52A0\u8F7D\u4E2D\u2026" }) : visibleNodes.length ? visibleNodes.map((node) => {
|
|
8529
8679
|
const hasChildren = Boolean(node.children?.length);
|
|
8530
8680
|
const selected = checked.has(node.value);
|
|
8531
8681
|
const partial = cascade && !selected && affected(node).some((value2) => checked.has(value2));
|
|
8532
|
-
return /* @__PURE__ */ (0,
|
|
8682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
8533
8683
|
"div",
|
|
8534
8684
|
{
|
|
8535
8685
|
className: `sia-tree-select__node${selected ? " is-selected" : ""}${node.disabled ? " is-disabled" : ""}`,
|
|
@@ -8541,14 +8691,14 @@ function TreeSelect({
|
|
|
8541
8691
|
"aria-expanded": hasChildren ? !!search || expandedSet.has(node.key ?? node.value) : void 0,
|
|
8542
8692
|
"aria-checked": treeCheckable ? partial ? "mixed" : selected : void 0,
|
|
8543
8693
|
children: [
|
|
8544
|
-
hasChildren ? /* @__PURE__ */ (0,
|
|
8545
|
-
treeCheckable && node.checkable !== false ? /* @__PURE__ */ (0,
|
|
8546
|
-
/* @__PURE__ */ (0,
|
|
8694
|
+
hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "sia-tree-select__expand", "aria-label": expandedSet.has(node.key ?? node.value) ? "\u6536\u8D77\u8282\u70B9" : "\u5C55\u5F00\u8282\u70B9", disabled: node.disabled, onClick: () => toggleNode(node), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: expandedSet.has(node.key ?? node.value) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "sia-tree-select__indent" }),
|
|
8695
|
+
treeCheckable && node.checkable !== false ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Checkbox2, { "aria-label": typeof node.title === "string" ? node.title : void 0, checked: selected, indeterminate: partial, disabled: node.disabled || node.disableCheckbox, onChange: () => select(node) }) : null,
|
|
8696
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", className: "sia-tree-select__title", disabled: node.disabled, onClick: () => select(node), children: node.title })
|
|
8547
8697
|
]
|
|
8548
8698
|
},
|
|
8549
8699
|
node.key ?? node.value
|
|
8550
8700
|
);
|
|
8551
|
-
}) : /* @__PURE__ */ (0,
|
|
8701
|
+
}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "sia-tree-select__empty", children: "\u6682\u65E0\u5339\u914D\u8282\u70B9" }) }),
|
|
8552
8702
|
dropdownFooter
|
|
8553
8703
|
] })
|
|
8554
8704
|
]
|
|
@@ -8586,7 +8736,7 @@ function buildFlatTree(items, options = {}) {
|
|
|
8586
8736
|
}
|
|
8587
8737
|
|
|
8588
8738
|
// src/components/Upload.tsx
|
|
8589
|
-
var
|
|
8739
|
+
var import_react38 = require("react");
|
|
8590
8740
|
|
|
8591
8741
|
// src/components/uploadFiles.ts
|
|
8592
8742
|
function acceptsUploadFile(file, accept) {
|
|
@@ -8718,7 +8868,7 @@ function isUploadImage(file, accept) {
|
|
|
8718
8868
|
|
|
8719
8869
|
// src/components/Message.tsx
|
|
8720
8870
|
var import_client5 = require("react-dom/client");
|
|
8721
|
-
var
|
|
8871
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
8722
8872
|
var messageSeed = 0;
|
|
8723
8873
|
var messageRoot = null;
|
|
8724
8874
|
var messageContainer = null;
|
|
@@ -8727,11 +8877,11 @@ var defaultDuration = 3;
|
|
|
8727
8877
|
var maxCount = 5;
|
|
8728
8878
|
var messageTimers = /* @__PURE__ */ new Map();
|
|
8729
8879
|
var messageIcons = {
|
|
8730
|
-
info: /* @__PURE__ */ (0,
|
|
8731
|
-
success: /* @__PURE__ */ (0,
|
|
8732
|
-
warning: /* @__PURE__ */ (0,
|
|
8733
|
-
error: /* @__PURE__ */ (0,
|
|
8734
|
-
loading: /* @__PURE__ */ (0,
|
|
8880
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "info", size: 18 }),
|
|
8881
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "circle-check", size: 18 }),
|
|
8882
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "warning", size: 18 }),
|
|
8883
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "circle-close", size: 18 }),
|
|
8884
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "loader", size: 18, spin: true })
|
|
8735
8885
|
};
|
|
8736
8886
|
function ensureMessageRoot() {
|
|
8737
8887
|
if (typeof document === "undefined") return false;
|
|
@@ -8745,10 +8895,10 @@ function ensureMessageRoot() {
|
|
|
8745
8895
|
}
|
|
8746
8896
|
function renderMessages() {
|
|
8747
8897
|
if (!ensureMessageRoot()) return;
|
|
8748
|
-
messageRoot.render(/* @__PURE__ */ (0,
|
|
8749
|
-
/* @__PURE__ */ (0,
|
|
8750
|
-
/* @__PURE__ */ (0,
|
|
8751
|
-
item.closable ? /* @__PURE__ */ (0,
|
|
8898
|
+
messageRoot.render(/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "sia-message-list", "aria-live": "polite", children: messageItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: `sia-message sia-message--${item.type}`, role: item.type === "loading" ? "status" : "alert", children: [
|
|
8899
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "sia-message__icon", "aria-hidden": "true", children: messageIcons[item.type] }),
|
|
8900
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "sia-message__content", children: item.content }),
|
|
8901
|
+
item.closable ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", className: "sia-message__close", "aria-label": "\u5173\u95ED\u63D0\u793A", onClick: () => closeMessage(item.key), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon, { name: "close", size: 14 }) }) : null
|
|
8752
8902
|
] }, item.key)) }));
|
|
8753
8903
|
}
|
|
8754
8904
|
function closeMessage(key) {
|
|
@@ -8822,11 +8972,11 @@ var message = {
|
|
|
8822
8972
|
};
|
|
8823
8973
|
|
|
8824
8974
|
// src/components/Upload.tsx
|
|
8825
|
-
var
|
|
8975
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
8826
8976
|
var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
|
|
8827
8977
|
function useThumbnail(file, accept) {
|
|
8828
|
-
const [local, setLocal] = (0,
|
|
8829
|
-
(0,
|
|
8978
|
+
const [local, setLocal] = (0, import_react38.useState)();
|
|
8979
|
+
(0, import_react38.useEffect)(() => {
|
|
8830
8980
|
if (!file?.thumbUrl && file?.originFileObj?.type.startsWith("image/")) {
|
|
8831
8981
|
const url = URL.createObjectURL(file.originFileObj);
|
|
8832
8982
|
setLocal(url);
|
|
@@ -8838,9 +8988,9 @@ function useThumbnail(file, accept) {
|
|
|
8838
8988
|
}
|
|
8839
8989
|
function UploadItem({ file, files, props, actions }) {
|
|
8840
8990
|
const source = useThumbnail(file, props.accept);
|
|
8841
|
-
const [failed, setFailed] = (0,
|
|
8842
|
-
const [downloading, setDownloading] = (0,
|
|
8843
|
-
const downloadingRef = (0,
|
|
8991
|
+
const [failed, setFailed] = (0, import_react38.useState)(false);
|
|
8992
|
+
const [downloading, setDownloading] = (0, import_react38.useState)(false);
|
|
8993
|
+
const downloadingRef = (0, import_react38.useRef)(false);
|
|
8844
8994
|
const canPreview = !!(source || file.url || file.originFileObj || props.onPreview);
|
|
8845
8995
|
const canDownload = !!(file.url || file.originFileObj || props.downloadRequest);
|
|
8846
8996
|
async function download() {
|
|
@@ -8856,29 +9006,29 @@ function UploadItem({ file, files, props, actions }) {
|
|
|
8856
9006
|
setDownloading(false);
|
|
8857
9007
|
}
|
|
8858
9008
|
}
|
|
8859
|
-
(0,
|
|
8860
|
-
const node = /* @__PURE__ */ (0,
|
|
8861
|
-
props.listType !== "text" ? /* @__PURE__ */ (0,
|
|
8862
|
-
/* @__PURE__ */ (0,
|
|
8863
|
-
/* @__PURE__ */ (0,
|
|
8864
|
-
/* @__PURE__ */ (0,
|
|
8865
|
-
/* @__PURE__ */ (0,
|
|
8866
|
-
/* @__PURE__ */ (0,
|
|
9009
|
+
(0, import_react38.useEffect)(() => setFailed(false), [source]);
|
|
9010
|
+
const node = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
|
|
9011
|
+
props.listType !== "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "text", className: "sia-upload__thumbnail", "aria-label": `\u9884\u89C8\u7F29\u7565\u56FE ${file.name}`, onClick: actions.preview, disabled: !canPreview, children: source && !failed ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: source, alt: file.name, onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: file.type?.startsWith("image/") ? "image" : "file", size: 28 }) }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__file-icon", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 24 }) }),
|
|
9012
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.relativePath || file.name }), children: file.url ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("a", { href: file.url, target: "_blank", rel: "noreferrer", children: file.name }) : file.name }),
|
|
9013
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "sia-upload__actions", children: [
|
|
9014
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "text", title: "\u9884\u89C8", "aria-label": `\u9884\u89C8 ${file.name}`, disabled: !canPreview, onClick: actions.preview, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "eye", size: 14 }) }),
|
|
9015
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "text", title: "\u4E0B\u8F7D", "aria-label": `\u4E0B\u8F7D ${file.name}`, disabled: !canDownload, loading: downloading, onClick: () => void download(), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "download", size: 14 }) }),
|
|
9016
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { variant: "text", title: "\u79FB\u9664", className: "sia-upload__remove", disabled: props.disabled, "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void actions.remove(), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "close", size: 14 }) })
|
|
8867
9017
|
] }),
|
|
8868
|
-
file.status === "uploading" && /* @__PURE__ */ (0,
|
|
8869
|
-
/* @__PURE__ */ (0,
|
|
9018
|
+
file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "sia-upload__uploading", children: [
|
|
9019
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
|
|
8870
9020
|
"\u4E0A\u4F20\u4E2D ",
|
|
8871
9021
|
Math.round(file.percent ?? 0),
|
|
8872
9022
|
"%"
|
|
8873
9023
|
] }),
|
|
8874
|
-
/* @__PURE__ */ (0,
|
|
9024
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__progress", role: "progressbar", "aria-label": `${file.name} \u4E0A\u4F20\u8FDB\u5EA6`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": file.percent ?? 0, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { width: `${file.percent ?? 0}%` } }) })
|
|
8875
9025
|
] }),
|
|
8876
|
-
file.status === "error" && /* @__PURE__ */ (0,
|
|
8877
|
-
props.listType === "text" && (file.status === void 0 || file.status === "ready" || file.status === "done") && /* @__PURE__ */ (0,
|
|
9026
|
+
file.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__error", children: "\u4E0A\u4F20\u5931\u8D25" }),
|
|
9027
|
+
props.listType === "text" && (file.status === void 0 || file.status === "ready" || file.status === "done") && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__status", children: file.status === "done" ? "\u4E0A\u4F20\u5B8C\u6210" : "\u5DF2\u9009\u62E9" })
|
|
8878
9028
|
] });
|
|
8879
|
-
return /* @__PURE__ */ (0,
|
|
9029
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: props.itemRender ? props.itemRender(node, file, files, actions) : node });
|
|
8880
9030
|
}
|
|
8881
|
-
var UploadRoot = (0,
|
|
9031
|
+
var UploadRoot = (0, import_react38.forwardRef)(function UploadRoot2({
|
|
8882
9032
|
accept,
|
|
8883
9033
|
multiple = false,
|
|
8884
9034
|
directory = false,
|
|
@@ -8917,19 +9067,19 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
8917
9067
|
const cardWidth = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.width);
|
|
8918
9068
|
const cardHeight = cardDimension(typeof cardSize === "number" ? cardSize : cardSize?.height);
|
|
8919
9069
|
const compactCard = listType === "picture-card" && (cardWidth < 88 || cardHeight < 88);
|
|
8920
|
-
const inputRef = (0,
|
|
8921
|
-
const [internalFiles, setInternalFiles] = (0,
|
|
9070
|
+
const inputRef = (0, import_react38.useRef)(null);
|
|
9071
|
+
const [internalFiles, setInternalFiles] = (0, import_react38.useState)(defaultFileList);
|
|
8922
9072
|
const files = fileList ?? internalFiles;
|
|
8923
|
-
const filesRef = (0,
|
|
9073
|
+
const filesRef = (0, import_react38.useRef)(files);
|
|
8924
9074
|
filesRef.current = files;
|
|
8925
|
-
const tasks = (0,
|
|
8926
|
-
const mounted = (0,
|
|
8927
|
-
const [dragging, setDragging] = (0,
|
|
8928
|
-
const [preview, setPreview] = (0,
|
|
9075
|
+
const tasks = (0, import_react38.useRef)(/* @__PURE__ */ new Map());
|
|
9076
|
+
const mounted = (0, import_react38.useRef)(true);
|
|
9077
|
+
const [dragging, setDragging] = (0, import_react38.useState)(false);
|
|
9078
|
+
const [preview, setPreview] = (0, import_react38.useState)();
|
|
8929
9079
|
const previewSource = useThumbnail(preview, accept);
|
|
8930
9080
|
const limit = maxCount2 === void 0 || !Number.isFinite(maxCount2) ? Infinity : Math.max(0, Math.floor(maxCount2));
|
|
8931
9081
|
const full = files.length >= limit;
|
|
8932
|
-
const current = (0,
|
|
9082
|
+
const current = (0, import_react38.useRef)({ disabled, directory, recursive });
|
|
8933
9083
|
current.current = { disabled, directory, recursive };
|
|
8934
9084
|
function cancel(uid) {
|
|
8935
9085
|
const task = tasks.current.get(uid);
|
|
@@ -8941,14 +9091,14 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
8941
9091
|
}
|
|
8942
9092
|
task?.finish();
|
|
8943
9093
|
}
|
|
8944
|
-
(0,
|
|
9094
|
+
(0, import_react38.useEffect)(() => {
|
|
8945
9095
|
mounted.current = true;
|
|
8946
9096
|
return () => {
|
|
8947
9097
|
mounted.current = false;
|
|
8948
9098
|
[...tasks.current.keys()].forEach(cancel);
|
|
8949
9099
|
};
|
|
8950
9100
|
}, []);
|
|
8951
|
-
(0,
|
|
9101
|
+
(0, import_react38.useEffect)(() => {
|
|
8952
9102
|
for (const uid of tasks.current.keys()) if (!files.some((file) => file.uid === uid)) cancel(uid);
|
|
8953
9103
|
if (preview && !files.some((file) => file.uid === preview.uid)) setPreview(void 0);
|
|
8954
9104
|
}, [files, preview]);
|
|
@@ -9054,7 +9204,7 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
9054
9204
|
} catch {
|
|
9055
9205
|
}
|
|
9056
9206
|
}
|
|
9057
|
-
(0,
|
|
9207
|
+
(0, import_react38.useImperativeHandle)(ref, () => ({
|
|
9058
9208
|
upload: async (uid) => {
|
|
9059
9209
|
await Promise.all(filesRef.current.filter((file) => (!uid || file.uid === uid) && file.status !== "done").map(start));
|
|
9060
9210
|
},
|
|
@@ -9106,16 +9256,16 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
9106
9256
|
event.preventDefault();
|
|
9107
9257
|
ingest(selected.map((file) => ({ file, path: file.name })));
|
|
9108
9258
|
}
|
|
9109
|
-
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0,
|
|
9259
|
+
const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { className: "sia-upload__choose", "aria-label": compactCard ? directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6" : void 0, disabled: disabled || full, onClick: () => {
|
|
9110
9260
|
if (!disabled && !full && onChoose?.() !== false) inputRef.current?.click();
|
|
9111
|
-
}, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0,
|
|
9112
|
-
/* @__PURE__ */ (0,
|
|
9113
|
-
/* @__PURE__ */ (0,
|
|
9114
|
-
] }) : /* @__PURE__ */ (0,
|
|
9115
|
-
/* @__PURE__ */ (0,
|
|
9261
|
+
}, children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
9262
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "plus", size: 24 }),
|
|
9263
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
|
|
9264
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
9265
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "upload", size: 16 }),
|
|
9116
9266
|
directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6"
|
|
9117
9267
|
] })) }) });
|
|
9118
|
-
return /* @__PURE__ */ (0,
|
|
9268
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
9119
9269
|
"div",
|
|
9120
9270
|
{
|
|
9121
9271
|
...withTitleTooltip(props),
|
|
@@ -9136,7 +9286,7 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
9136
9286
|
},
|
|
9137
9287
|
onDrop: (event) => void handleDrop(event),
|
|
9138
9288
|
children: [
|
|
9139
|
-
/* @__PURE__ */ (0,
|
|
9289
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9140
9290
|
"input",
|
|
9141
9291
|
{
|
|
9142
9292
|
ref: inputRef,
|
|
@@ -9153,12 +9303,12 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
9153
9303
|
}
|
|
9154
9304
|
),
|
|
9155
9305
|
listType !== "picture-card" && trigger,
|
|
9156
|
-
showUploadList && listType === "text" && files.length > 0 && /* @__PURE__ */ (0,
|
|
9306
|
+
showUploadList && listType === "text" && files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "sia-upload__list-heading", role: "status", children: [
|
|
9157
9307
|
"\u5DF2\u9009\u6587\u4EF6 ",
|
|
9158
|
-
/* @__PURE__ */ (0,
|
|
9308
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "sia-upload__count", children: files.length })
|
|
9159
9309
|
] }),
|
|
9160
|
-
/* @__PURE__ */ (0,
|
|
9161
|
-
showUploadList && files.map((file) => /* @__PURE__ */ (0,
|
|
9310
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "sia-upload__list", children: [
|
|
9311
|
+
showUploadList && files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(UploadItem, { file, files, props: { listType, disabled, itemRender, onPreview, downloadRequest, accept }, actions: {
|
|
9162
9312
|
upload: () => start(file),
|
|
9163
9313
|
abort: () => abort(file.uid),
|
|
9164
9314
|
remove: () => remove(file.uid),
|
|
@@ -9175,23 +9325,23 @@ var UploadRoot = (0, import_react37.forwardRef)(function UploadRoot2({
|
|
|
9175
9325
|
} }, file.uid)),
|
|
9176
9326
|
listType === "picture-card" && trigger
|
|
9177
9327
|
] }),
|
|
9178
|
-
/* @__PURE__ */ (0,
|
|
9328
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ImagePreview, { open: !!preview && !!(preview.url || previewSource), src: preview?.url || previewSource, alt: preview?.name, onOpenChange: (open) => {
|
|
9179
9329
|
if (!open) setPreview(void 0);
|
|
9180
9330
|
} })
|
|
9181
9331
|
]
|
|
9182
9332
|
}
|
|
9183
9333
|
);
|
|
9184
9334
|
});
|
|
9185
|
-
var UploadDragger = (0,
|
|
9186
|
-
return /* @__PURE__ */ (0,
|
|
9187
|
-
/* @__PURE__ */ (0,
|
|
9188
|
-
/* @__PURE__ */ (0,
|
|
9335
|
+
var UploadDragger = (0, import_react38.forwardRef)(function UploadDragger2({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }, ref) {
|
|
9336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(UploadRoot, { ...props, ref, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "sia-upload-dragger__content", children: [
|
|
9337
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "upload", size: 32 }),
|
|
9338
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("strong", { children: [
|
|
9189
9339
|
"\u70B9\u51FB\u6216\u62D6\u62FD",
|
|
9190
9340
|
props.directory ? "\u6587\u4EF6\u5939" : "\u6587\u4EF6",
|
|
9191
9341
|
"\u5230\u6B64\u533A\u57DF\u4E0A\u4F20"
|
|
9192
9342
|
] }),
|
|
9193
|
-
/* @__PURE__ */ (0,
|
|
9194
|
-
props.pastable && /* @__PURE__ */ (0,
|
|
9343
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: hint }),
|
|
9344
|
+
props.pastable && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u805A\u7126\u6B64\u533A\u57DF\u540E\u6309 Ctrl / \u2318 + V \u7C98\u8D34\u6587\u4EF6\u6216\u622A\u56FE" })
|
|
9195
9345
|
] }) });
|
|
9196
9346
|
});
|
|
9197
9347
|
var Upload = Object.assign(UploadRoot, {
|
|
@@ -9201,70 +9351,6 @@ var Upload = Object.assign(UploadRoot, {
|
|
|
9201
9351
|
LIST_IGNORE
|
|
9202
9352
|
});
|
|
9203
9353
|
|
|
9204
|
-
// src/components/TextArea.tsx
|
|
9205
|
-
var import_react38 = require("react");
|
|
9206
|
-
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
9207
|
-
var TextArea = (0, import_react38.forwardRef)(function TextArea2({
|
|
9208
|
-
label,
|
|
9209
|
-
hint,
|
|
9210
|
-
status = "default",
|
|
9211
|
-
size: sizeProp,
|
|
9212
|
-
showCount = false,
|
|
9213
|
-
placeholder,
|
|
9214
|
-
placeholderMode,
|
|
9215
|
-
className = "",
|
|
9216
|
-
id,
|
|
9217
|
-
disabled,
|
|
9218
|
-
value,
|
|
9219
|
-
defaultValue,
|
|
9220
|
-
maxLength,
|
|
9221
|
-
onChange,
|
|
9222
|
-
...props
|
|
9223
|
-
}, ref) {
|
|
9224
|
-
const size = useControlSize(sizeProp);
|
|
9225
|
-
const fallbackId = (0, import_react38.useId)();
|
|
9226
|
-
const textAreaId = id ?? fallbackId;
|
|
9227
|
-
const [uncontrolledValue, setUncontrolledValue] = (0, import_react38.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
9228
|
-
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
9229
|
-
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
9230
|
-
const hintId = `${textAreaId}-hint`;
|
|
9231
|
-
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
9232
|
-
function handleChange(event) {
|
|
9233
|
-
setUncontrolledValue(event.target.value);
|
|
9234
|
-
onChange?.(event);
|
|
9235
|
-
}
|
|
9236
|
-
const control = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
9237
|
-
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
9238
|
-
"textarea",
|
|
9239
|
-
{
|
|
9240
|
-
...withTitleTooltip(props),
|
|
9241
|
-
ref,
|
|
9242
|
-
id: textAreaId,
|
|
9243
|
-
className: "sia-textarea",
|
|
9244
|
-
disabled,
|
|
9245
|
-
value,
|
|
9246
|
-
defaultValue,
|
|
9247
|
-
maxLength,
|
|
9248
|
-
placeholder,
|
|
9249
|
-
"aria-describedby": describedBy,
|
|
9250
|
-
"aria-invalid": status === "error" || void 0,
|
|
9251
|
-
onChange: handleChange
|
|
9252
|
-
}
|
|
9253
|
-
),
|
|
9254
|
-
floating.label,
|
|
9255
|
-
showCount ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
9256
|
-
currentText.length,
|
|
9257
|
-
maxLength !== void 0 ? `/${maxLength}` : null
|
|
9258
|
-
] }) : null
|
|
9259
|
-
] });
|
|
9260
|
-
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
9261
|
-
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
9262
|
-
label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
9263
|
-
control,
|
|
9264
|
-
hint ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
9265
|
-
] });
|
|
9266
|
-
});
|
|
9267
|
-
|
|
9268
9354
|
// src/components/RichTextEditor.tsx
|
|
9269
9355
|
var import_react39 = require("react");
|
|
9270
9356
|
var import_dompurify = __toESM(require("dompurify"), 1);
|