dsh-plugin-core-demo 0.5.1 → 0.6.1
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/client.js +320 -269
- package/package.json +1 -1
package/dist/client.js
CHANGED
|
@@ -141,7 +141,7 @@ var MARQUEE_CSS = "/* \u8DD1\u9A6C\u706F\uFF08MarqueeText\uFF09\uFF1A\u53CC\u5C4
|
|
|
141
141
|
|
|
142
142
|
// dist/ui/picker-css.generated.js
|
|
143
143
|
var PICKER_CSS = `
|
|
144
|
-
.dshpc-picker{position:relative;display:inline-block;font-size:13px;line-height:20px}
|
|
144
|
+
.dshpc-picker{position:relative;display:inline-block;max-width:100%;font-size:13px;line-height:20px}
|
|
145
145
|
.dshpc-picker__trigger{
|
|
146
146
|
display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
|
|
147
147
|
min-width:120px;max-width:100%;height:28px;padding:0 8px;
|
|
@@ -186,6 +186,8 @@ var PICKER_CSS = `
|
|
|
186
186
|
.dshpc-picker__option:hover{background:var(--dshpc-surface-sunken)}
|
|
187
187
|
.dshpc-picker__option--active{background:var(--dshpc-open-bg);color:var(--dshpc-business)}
|
|
188
188
|
.dshpc-picker__option--disabled{color:var(--dshpc-fg-dim);cursor:not-allowed}
|
|
189
|
+
/* \u9009\u9879\u6587\u5B57\u5403\u6389\u5269\u4F59\u5BBD\u5EA6\uFF1A\u8D85\u957F\u7701\u7565\u53F7\uFF08\u914D\u5408 MarqueeText hover \u8DD1\u9A6C\u706F\uFF09\uFF0C\u4E0D\u6491\u5BBD\u83DC\u5355\u3002 */
|
|
190
|
+
.dshpc-picker__option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
189
191
|
.dshpc-picker__tick{width:12px;color:var(--dshpc-business)}
|
|
190
192
|
.dshpc-picker__empty{padding:8px;color:var(--dshpc-fg-3);text-align:center}
|
|
191
193
|
.dshpc-picker__degraded{
|
|
@@ -297,9 +299,22 @@ function groupOf(groups, value) {
|
|
|
297
299
|
return void 0;
|
|
298
300
|
return groups.find((g) => g.options.some((o) => o.value === value));
|
|
299
301
|
}
|
|
302
|
+
function resolveTriggerSizing(opts) {
|
|
303
|
+
const px = (v) => typeof v === "number" ? `${v}px` : v;
|
|
304
|
+
if (opts.width !== void 0) {
|
|
305
|
+
const w = px(opts.width);
|
|
306
|
+
return { width: w, minWidth: w, maxWidth: w };
|
|
307
|
+
}
|
|
308
|
+
const style2 = {};
|
|
309
|
+
if (opts.minWidth !== void 0)
|
|
310
|
+
style2.minWidth = px(opts.minWidth);
|
|
311
|
+
if (opts.maxWidth !== void 0)
|
|
312
|
+
style2.maxWidth = px(opts.maxWidth);
|
|
313
|
+
return style2;
|
|
314
|
+
}
|
|
300
315
|
|
|
301
316
|
// dist/ui/Picker.js
|
|
302
|
-
var
|
|
317
|
+
var import_react6 = require("react");
|
|
303
318
|
|
|
304
319
|
// node_modules/.pnpm/@floating-ui+react@0.27.20_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@floating-ui/react/dist/floating-ui.react.mjs
|
|
305
320
|
var React3 = __toESM(require("react"), 1);
|
|
@@ -3371,6 +3386,50 @@ function FieldHint(props) {
|
|
|
3371
3386
|
});
|
|
3372
3387
|
}
|
|
3373
3388
|
|
|
3389
|
+
// dist/ui/MarqueeText.js
|
|
3390
|
+
var import_react5 = require("react");
|
|
3391
|
+
function MarqueeText(props) {
|
|
3392
|
+
const outerRef = (0, import_react5.useRef)(null);
|
|
3393
|
+
const innerRef = (0, import_react5.useRef)(null);
|
|
3394
|
+
const [dist2, setDist] = (0, import_react5.useState)(0);
|
|
3395
|
+
const measure = (0, import_react5.useCallback)(() => {
|
|
3396
|
+
const outer = outerRef.current;
|
|
3397
|
+
const inner = innerRef.current;
|
|
3398
|
+
if (outer === null || inner === null)
|
|
3399
|
+
return;
|
|
3400
|
+
setDist(Math.max(0, Math.ceil(inner.scrollWidth - outer.clientWidth)));
|
|
3401
|
+
}, []);
|
|
3402
|
+
(0, import_react5.useLayoutEffect)(() => {
|
|
3403
|
+
const outer = outerRef.current;
|
|
3404
|
+
const inner = innerRef.current;
|
|
3405
|
+
if (outer === null || inner === null)
|
|
3406
|
+
return;
|
|
3407
|
+
measure();
|
|
3408
|
+
const ro = new ResizeObserver(measure);
|
|
3409
|
+
ro.observe(outer);
|
|
3410
|
+
ro.observe(inner);
|
|
3411
|
+
return () => {
|
|
3412
|
+
ro.disconnect();
|
|
3413
|
+
};
|
|
3414
|
+
}, [measure]);
|
|
3415
|
+
(0, import_react5.useEffect)(() => {
|
|
3416
|
+
measure();
|
|
3417
|
+
}, [props.text, measure]);
|
|
3418
|
+
const run = dist2 > 0;
|
|
3419
|
+
return (0, import_react5.createElement)("span", {
|
|
3420
|
+
ref: outerRef,
|
|
3421
|
+
className: (run ? "dshpc-mq dshpc-mq-run" : "dshpc-mq") + (props.className === void 0 ? "" : ` ${props.className}`),
|
|
3422
|
+
title: props.title,
|
|
3423
|
+
style: props.style
|
|
3424
|
+
}, (0, import_react5.createElement)("span", {
|
|
3425
|
+
ref: innerRef,
|
|
3426
|
+
className: "dshpc-mq-in",
|
|
3427
|
+
style: {
|
|
3428
|
+
...run ? { "--dshpc-mq-dist": `${-dist2}px`, "--dshpc-mq-dur": `${Math.max(3, Math.round(dist2 / 30))}s` } : null
|
|
3429
|
+
}
|
|
3430
|
+
}, props.text));
|
|
3431
|
+
}
|
|
3432
|
+
|
|
3374
3433
|
// dist/ui/Picker.js
|
|
3375
3434
|
function Picker(props) {
|
|
3376
3435
|
ensureControls();
|
|
@@ -3380,20 +3439,21 @@ function Picker(props) {
|
|
|
3380
3439
|
const placement = props.placement ?? "down";
|
|
3381
3440
|
const clearable = props.clearable === true;
|
|
3382
3441
|
const showLabels = props.showLabels !== false;
|
|
3383
|
-
const
|
|
3442
|
+
const triggerStyle = resolveTriggerSizing(props);
|
|
3443
|
+
const groups = (0, import_react6.useMemo)(() => toGroups(props.groups, props.options), [props.groups, props.options]);
|
|
3384
3444
|
const controlled = props.value !== void 0;
|
|
3385
|
-
const [inner, setInner] = (0,
|
|
3445
|
+
const [inner, setInner] = (0, import_react6.useState)(() => toArray(props.defaultValue));
|
|
3386
3446
|
const selected = controlled ? toArray(props.value) : inner;
|
|
3387
3447
|
const emit = (next) => {
|
|
3388
3448
|
if (!controlled)
|
|
3389
3449
|
setInner(next);
|
|
3390
3450
|
props.onChange?.(mode === "single" ? next[0] ?? "" : next);
|
|
3391
3451
|
};
|
|
3392
|
-
const [open, setOpen] = (0,
|
|
3393
|
-
const [query, setQuery] = (0,
|
|
3394
|
-
const [active, setActive2] = (0,
|
|
3395
|
-
const rootRef = (0,
|
|
3396
|
-
const searchRef = (0,
|
|
3452
|
+
const [open, setOpen] = (0, import_react6.useState)(false);
|
|
3453
|
+
const [query, setQuery] = (0, import_react6.useState)("");
|
|
3454
|
+
const [active, setActive2] = (0, import_react6.useState)(-1);
|
|
3455
|
+
const rootRef = (0, import_react6.useRef)(null);
|
|
3456
|
+
const searchRef = (0, import_react6.useRef)(null);
|
|
3397
3457
|
const { refs, floatingStyles } = useFloating2({
|
|
3398
3458
|
open,
|
|
3399
3459
|
onOpenChange: setOpen,
|
|
@@ -3416,12 +3476,12 @@ function Picker(props) {
|
|
|
3416
3476
|
whileElementsMounted: autoUpdate,
|
|
3417
3477
|
strategy: "fixed"
|
|
3418
3478
|
});
|
|
3419
|
-
const setSearchRef = (0,
|
|
3479
|
+
const setSearchRef = (0, import_react6.useCallback)((el) => {
|
|
3420
3480
|
searchRef.current = el;
|
|
3421
3481
|
if (el !== null && open)
|
|
3422
3482
|
el.focus();
|
|
3423
3483
|
}, [open]);
|
|
3424
|
-
(0,
|
|
3484
|
+
(0, import_react6.useEffect)(() => {
|
|
3425
3485
|
if (!open)
|
|
3426
3486
|
return;
|
|
3427
3487
|
const onDown = (e) => {
|
|
@@ -3436,7 +3496,7 @@ function Picker(props) {
|
|
|
3436
3496
|
document.addEventListener("mousedown", onDown);
|
|
3437
3497
|
return () => document.removeEventListener("mousedown", onDown);
|
|
3438
3498
|
}, [open]);
|
|
3439
|
-
(0,
|
|
3499
|
+
(0, import_react6.useEffect)(() => {
|
|
3440
3500
|
if (open)
|
|
3441
3501
|
return;
|
|
3442
3502
|
setQuery("");
|
|
@@ -3482,7 +3542,7 @@ function Picker(props) {
|
|
|
3482
3542
|
pick2(hit.value);
|
|
3483
3543
|
}
|
|
3484
3544
|
};
|
|
3485
|
-
const trigger = (0,
|
|
3545
|
+
const trigger = (0, import_react6.createElement)(
|
|
3486
3546
|
"button",
|
|
3487
3547
|
{
|
|
3488
3548
|
type: "button",
|
|
@@ -3490,39 +3550,40 @@ function Picker(props) {
|
|
|
3490
3550
|
"aria-expanded": open,
|
|
3491
3551
|
ref: refs.setReference,
|
|
3492
3552
|
className: `dshpc-picker__trigger dshpc-picker__trigger--${size4}${props.align === "center" ? " dshpc-picker__trigger--center" : ""}`,
|
|
3553
|
+
style: triggerStyle,
|
|
3493
3554
|
disabled: props.disabled === true,
|
|
3494
3555
|
onClick: () => {
|
|
3495
3556
|
if (props.disabled !== true)
|
|
3496
3557
|
setOpen(!open);
|
|
3497
3558
|
}
|
|
3498
3559
|
},
|
|
3499
|
-
props.icon !== void 0 && props.icon !== null ? (0,
|
|
3500
|
-
//
|
|
3501
|
-
(0,
|
|
3502
|
-
(0,
|
|
3560
|
+
props.icon !== void 0 && props.icon !== null ? (0, import_react6.createElement)("span", { className: "dshpc-picker__icon" }, props.icon) : null,
|
|
3561
|
+
// 文字吃掉剩余宽度并靠左(默认);超长时外层省略号、hover 跑马灯(MarqueeText 自带)。
|
|
3562
|
+
(0, import_react6.createElement)(MarqueeText, { text: summary, className: "dshpc-picker__label" }),
|
|
3563
|
+
(0, import_react6.createElement)(Chevron, { size: 12, className: "dshpc-picker__caret" })
|
|
3503
3564
|
);
|
|
3504
|
-
const triggerRow = props.hint === void 0 ? trigger : (0,
|
|
3505
|
-
return (0,
|
|
3565
|
+
const triggerRow = props.hint === void 0 ? trigger : (0, import_react6.createElement)("span", { className: "dshpc-fieldwrap dshpc-fieldwrap--inline" }, trigger, (0, import_react6.createElement)(FieldHint, { text: props.hint }));
|
|
3566
|
+
return (0, import_react6.createElement)("div", {
|
|
3506
3567
|
className: `dshpc-picker${props.className === void 0 ? "" : ` ${props.className}`}`,
|
|
3507
3568
|
ref: rootRef,
|
|
3508
3569
|
onKeyDown
|
|
3509
|
-
}, triggerRow, open ? (0,
|
|
3570
|
+
}, triggerRow, open ? (0, import_react6.createElement)(FloatingPortal, null, (0, import_react6.createElement)("div", {
|
|
3510
3571
|
className: "dshpc-picker__menu",
|
|
3511
3572
|
ref: refs.setFloating,
|
|
3512
3573
|
style: floatingStyles
|
|
3513
|
-
}, props.degraded === true ? (0,
|
|
3574
|
+
}, props.degraded === true ? (0, import_react6.createElement)("div", { className: "dshpc-picker__degraded" }, tt("pickerDegraded")) : null, atMax ? (0, import_react6.createElement)("div", { className: "dshpc-picker__degraded" }, tt("pickerMaxReached", { n: props.max ?? 0 })) : null, props.searchable === true ? (0, import_react6.createElement)("input", {
|
|
3514
3575
|
ref: setSearchRef,
|
|
3515
3576
|
className: "dshpc-picker__search",
|
|
3516
3577
|
placeholder: tt("pickerSearch"),
|
|
3517
3578
|
value: query,
|
|
3518
3579
|
onChange: (e) => setQuery(e.target.value)
|
|
3519
|
-
}) : null, flat.length === 0 && groups.length === 0 ? (0,
|
|
3520
|
-
clearable && mode === "single" && selected.length > 0 ? (0,
|
|
3580
|
+
}) : null, flat.length === 0 && groups.length === 0 ? (0, import_react6.createElement)("div", { className: "dshpc-picker__empty" }, tt("pickerEmpty")) : flat.length === 0 ? (0, import_react6.createElement)("div", { className: "dshpc-picker__empty" }, tt("pickerNoMatch")) : [
|
|
3581
|
+
clearable && mode === "single" && selected.length > 0 ? (0, import_react6.createElement)("div", {
|
|
3521
3582
|
key: "__clear__",
|
|
3522
3583
|
className: "dshpc-picker__option dshpc-picker__option--clear",
|
|
3523
3584
|
onClick: clear
|
|
3524
3585
|
}, tt("pickerClear")) : null,
|
|
3525
|
-
...shown.map((g) => (0,
|
|
3586
|
+
...shown.map((g) => (0, import_react6.createElement)("div", { key: g.value || "_" }, g.label === "" ? null : (0, import_react6.createElement)("div", { className: "dshpc-picker__group-label" }, g.label), g.options.map((o) => {
|
|
3526
3587
|
const blocked = o.disabled === true || atMax && !selected.includes(o.value);
|
|
3527
3588
|
const activeCls = [
|
|
3528
3589
|
"dshpc-picker__option",
|
|
@@ -3530,15 +3591,22 @@ function Picker(props) {
|
|
|
3530
3591
|
blocked ? "dshpc-picker__option--disabled" : ""
|
|
3531
3592
|
].filter((s) => s !== "").join(" ");
|
|
3532
3593
|
const idx = flat.indexOf(o);
|
|
3533
|
-
return (0,
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
|
|
3594
|
+
return (0, import_react6.createElement)(
|
|
3595
|
+
"div",
|
|
3596
|
+
{
|
|
3597
|
+
key: o.value,
|
|
3598
|
+
className: activeCls,
|
|
3599
|
+
"data-active": idx === active ? "true" : void 0,
|
|
3600
|
+
onClick: () => {
|
|
3601
|
+
if (!blocked)
|
|
3602
|
+
pick2(o.value);
|
|
3603
|
+
}
|
|
3604
|
+
},
|
|
3605
|
+
mode === "multiple" ? (0, import_react6.createElement)("span", { className: "dshpc-picker__tick" }, selected.includes(o.value) ? "\u2713" : "") : null,
|
|
3606
|
+
o.icon !== void 0 && o.icon !== null ? (0, import_react6.createElement)("span", { className: "dshpc-picker__option-icon" }, o.icon) : null,
|
|
3607
|
+
// 选项文字超长时省略号 + hover 跑马灯(与触发器同一套逻辑),不把菜单撑出横向滚动条。
|
|
3608
|
+
(0, import_react6.createElement)(MarqueeText, { text: o.label, className: "dshpc-picker__option-label" })
|
|
3609
|
+
);
|
|
3542
3610
|
})))
|
|
3543
3611
|
])) : null);
|
|
3544
3612
|
}
|
|
@@ -3549,10 +3617,10 @@ function toArray(v) {
|
|
|
3549
3617
|
}
|
|
3550
3618
|
|
|
3551
3619
|
// dist/ui/DateTimePicker.js
|
|
3552
|
-
var
|
|
3620
|
+
var import_react9 = require("react");
|
|
3553
3621
|
|
|
3554
3622
|
// dist/ui/Button.js
|
|
3555
|
-
var
|
|
3623
|
+
var import_react8 = require("react");
|
|
3556
3624
|
var SOLID_VARIANTS = ["primary", "secondary", "danger", "success", "warning", "info"];
|
|
3557
3625
|
function colorVars(variant, color) {
|
|
3558
3626
|
if (color === void 0 || color === "")
|
|
@@ -3586,13 +3654,13 @@ function Button(props) {
|
|
|
3586
3654
|
className: buttonClass(variant, size4, block2, icon2 !== void 0 && icon2 !== null && !loading, className2),
|
|
3587
3655
|
style: { ...colorVars(variant, color), ...style2 }
|
|
3588
3656
|
};
|
|
3589
|
-
return (0,
|
|
3657
|
+
return (0, import_react8.createElement)("button", attrs2, loading ? (0, import_react8.createElement)("svg", {
|
|
3590
3658
|
className: "dshpc-btn__spinner",
|
|
3591
3659
|
viewBox: "0 0 12 12",
|
|
3592
3660
|
width: 12,
|
|
3593
3661
|
height: 12,
|
|
3594
3662
|
"aria-hidden": true
|
|
3595
|
-
}, (0,
|
|
3663
|
+
}, (0, import_react8.createElement)("circle", {
|
|
3596
3664
|
cx: 6,
|
|
3597
3665
|
cy: 6,
|
|
3598
3666
|
r: 4.75,
|
|
@@ -3602,7 +3670,7 @@ function Button(props) {
|
|
|
3602
3670
|
strokeLinecap: "round",
|
|
3603
3671
|
// 周长 ≈ 29.85,画 22 的弧 + 足够长的空缺 ⇒ 一个约 270° 的开口环
|
|
3604
3672
|
strokeDasharray: "22 30"
|
|
3605
|
-
})) : icon2 !== void 0 && icon2 !== null ? (0,
|
|
3673
|
+
})) : icon2 !== void 0 && icon2 !== null ? (0, import_react8.createElement)("span", { className: "dshpc-btn__icon" }, icon2) : null, children, iconRight !== void 0 && iconRight !== null ? (0, import_react8.createElement)("span", { className: "dshpc-btn__icon-end" }, iconRight) : null);
|
|
3606
3674
|
}
|
|
3607
3675
|
function IconButton(props) {
|
|
3608
3676
|
ensureControls();
|
|
@@ -3615,7 +3683,7 @@ function IconButton(props) {
|
|
|
3615
3683
|
className: `dshpc-iconbtn dshpc-iconbtn--${variant} dshpc-iconbtn--${size4}${className2 !== void 0 && className2 !== "" ? ` ${className2}` : ""}`,
|
|
3616
3684
|
style: style2
|
|
3617
3685
|
};
|
|
3618
|
-
return (0,
|
|
3686
|
+
return (0, import_react8.createElement)("button", attrs2, icon2);
|
|
3619
3687
|
}
|
|
3620
3688
|
|
|
3621
3689
|
// dist/utils/date.js
|
|
@@ -3921,7 +3989,7 @@ function fmtParts(p, precision) {
|
|
|
3921
3989
|
return formatDateTimePrecision(formatDateTimeIso(p), precision);
|
|
3922
3990
|
}
|
|
3923
3991
|
function icon(paths, size4) {
|
|
3924
|
-
return (0,
|
|
3992
|
+
return (0, import_react9.createElement)("svg", { width: size4, height: size4, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true }, ...paths.map((d2) => (0, import_react9.createElement)("path", {
|
|
3925
3993
|
d: d2,
|
|
3926
3994
|
stroke: "currentColor",
|
|
3927
3995
|
"stroke-width": 1.5,
|
|
@@ -3939,8 +4007,8 @@ var ICON_PREV_YEAR = icon(["M9 5L5.5 8 9 11", "M12.5 5L9 8l3.5 3"], 14);
|
|
|
3939
4007
|
var ICON_PREV_MONTH = icon(["M9.5 5L6 8l3.5 3"], 14);
|
|
3940
4008
|
var ICON_NEXT_MONTH = icon(["M6.5 5L10 8l-3.5 3"], 14);
|
|
3941
4009
|
var ICON_NEXT_YEAR = icon(["M7 5l3.5 3L7 11", "M3.5 5L7 8l-3.5 3"], 14);
|
|
3942
|
-
var ICON_UP = (0,
|
|
3943
|
-
var ICON_DOWN = (0,
|
|
4010
|
+
var ICON_UP = (0, import_react9.createElement)(Chevron, { dir: "up", size: 12 });
|
|
4011
|
+
var ICON_DOWN = (0, import_react9.createElement)(Chevron, { size: 12 });
|
|
3944
4012
|
function DateTimePicker(props) {
|
|
3945
4013
|
ensureControls();
|
|
3946
4014
|
const tt = props.translate ?? t;
|
|
@@ -3951,21 +4019,21 @@ function DateTimePicker(props) {
|
|
|
3951
4019
|
const locale2 = getLocale();
|
|
3952
4020
|
const placeholder2 = props.placeholder ?? tt("dtPlaceholder");
|
|
3953
4021
|
const controlled = props.value !== void 0;
|
|
3954
|
-
const [inner, setInner] = (0,
|
|
4022
|
+
const [inner, setInner] = (0, import_react9.useState)(() => props.defaultValue ?? null);
|
|
3955
4023
|
const current3 = controlled ? props.value ?? null : inner;
|
|
3956
|
-
const [open, setOpen] = (0,
|
|
3957
|
-
const [draft, setDraft] = (0,
|
|
3958
|
-
const [views, setViews] = (0,
|
|
4024
|
+
const [open, setOpen] = (0, import_react9.useState)(false);
|
|
4025
|
+
const [draft, setDraft] = (0, import_react9.useState)(() => draftOf(current3));
|
|
4026
|
+
const [views, setViews] = (0, import_react9.useState)(() => {
|
|
3959
4027
|
const d2 = draftOf(current3);
|
|
3960
4028
|
const n = nowParts();
|
|
3961
4029
|
const monthOf = (e) => e.day === null ? { year: n.year, month: n.month } : { year: e.day.year, month: e.day.month };
|
|
3962
4030
|
return { start: monthOf(d2.start), end: monthOf(d2.end) };
|
|
3963
4031
|
});
|
|
3964
|
-
const [active, setActive2] = (0,
|
|
3965
|
-
const [focus, setFocus] = (0,
|
|
3966
|
-
const [typing, setTyping] = (0,
|
|
3967
|
-
const rootRef = (0,
|
|
3968
|
-
const gridRefs = (0,
|
|
4032
|
+
const [active, setActive2] = (0, import_react9.useState)("start");
|
|
4033
|
+
const [focus, setFocus] = (0, import_react9.useState)({ start: null, end: null });
|
|
4034
|
+
const [typing, setTyping] = (0, import_react9.useState)(null);
|
|
4035
|
+
const rootRef = (0, import_react9.useRef)(null);
|
|
4036
|
+
const gridRefs = (0, import_react9.useRef)({ start: null, end: null });
|
|
3969
4037
|
const { refs, floatingStyles } = useFloating2({
|
|
3970
4038
|
open,
|
|
3971
4039
|
onOpenChange: setOpen,
|
|
@@ -3986,12 +4054,12 @@ function DateTimePicker(props) {
|
|
|
3986
4054
|
whileElementsMounted: autoUpdate,
|
|
3987
4055
|
strategy: "fixed"
|
|
3988
4056
|
});
|
|
3989
|
-
const emit = (0,
|
|
4057
|
+
const emit = (0, import_react9.useCallback)((value) => {
|
|
3990
4058
|
if (!controlled)
|
|
3991
4059
|
setInner(value);
|
|
3992
4060
|
props.onChange?.(value);
|
|
3993
4061
|
}, [controlled, props.onChange]);
|
|
3994
|
-
const openPop = (0,
|
|
4062
|
+
const openPop = (0, import_react9.useCallback)(() => {
|
|
3995
4063
|
if (props.disabled === true)
|
|
3996
4064
|
return;
|
|
3997
4065
|
const d2 = draftOf(current3);
|
|
@@ -4004,7 +4072,7 @@ function DateTimePicker(props) {
|
|
|
4004
4072
|
setTyping(null);
|
|
4005
4073
|
setOpen(true);
|
|
4006
4074
|
}, [current3, props.disabled]);
|
|
4007
|
-
(0,
|
|
4075
|
+
(0, import_react9.useEffect)(() => {
|
|
4008
4076
|
if (!open)
|
|
4009
4077
|
return;
|
|
4010
4078
|
const onDown = (e) => {
|
|
@@ -4019,7 +4087,7 @@ function DateTimePicker(props) {
|
|
|
4019
4087
|
document.addEventListener("mousedown", onDown);
|
|
4020
4088
|
return () => document.removeEventListener("mousedown", onDown);
|
|
4021
4089
|
}, [open, refs.floating]);
|
|
4022
|
-
(0,
|
|
4090
|
+
(0, import_react9.useEffect)(() => {
|
|
4023
4091
|
if (!open)
|
|
4024
4092
|
return;
|
|
4025
4093
|
const sides2 = ["start", "end"];
|
|
@@ -4160,9 +4228,9 @@ function DateTimePicker(props) {
|
|
|
4160
4228
|
const currentDraft = draftOf(current3);
|
|
4161
4229
|
const startValue = partsOf(currentDraft.start);
|
|
4162
4230
|
const endValue = rangeMode ? partsOf(currentDraft.end) : null;
|
|
4163
|
-
const dateZone = (key, value) => (0,
|
|
4164
|
-
const calIcon = (0,
|
|
4165
|
-
const trigger = (0,
|
|
4231
|
+
const dateZone = (key, value) => (0, import_react9.createElement)("span", { key, className: `dshpc-dt__pair-date${value === null ? " dshpc-dt__pair-date--empty" : ""}` }, value === null ? placeholder2 : fmtParts(value, precision));
|
|
4232
|
+
const calIcon = (0, import_react9.createElement)("span", { className: "dshpc-dt__cal" }, ICON_CAL);
|
|
4233
|
+
const trigger = (0, import_react9.createElement)("button", {
|
|
4166
4234
|
type: "button",
|
|
4167
4235
|
"aria-label": props.ariaLabel,
|
|
4168
4236
|
"aria-expanded": open,
|
|
@@ -4170,20 +4238,20 @@ function DateTimePicker(props) {
|
|
|
4170
4238
|
disabled: props.disabled === true,
|
|
4171
4239
|
className: `dshpc-dt__trigger ${SIZE_CLASS[size4]} ${WIDTH_CLASS(rangeMode, precision)}`.trim(),
|
|
4172
4240
|
onClick: openPop
|
|
4173
|
-
}, rangeMode ? (0,
|
|
4241
|
+
}, rangeMode ? (0, import_react9.createElement)("span", { key: "group", className: "dshpc-dt__pair-group" }, dateZone("start", startValue), (0, import_react9.createElement)("span", { key: "sep", className: "dshpc-dt__pair-sep", "aria-hidden": true }, "-"), dateZone("end", endValue)) : (0, import_react9.createElement)("span", {
|
|
4174
4242
|
key: "label",
|
|
4175
4243
|
className: `dshpc-dt__trigger-label${startValue === null ? " dshpc-dt__trigger-label--empty" : ""}`
|
|
4176
4244
|
}, startValue === null ? placeholder2 : fmtParts(startValue, precision)), calIcon);
|
|
4177
|
-
const triggerRow = props.hint === void 0 ? trigger : (0,
|
|
4245
|
+
const triggerRow = props.hint === void 0 ? trigger : (0, import_react9.createElement)("span", { className: "dshpc-fieldwrap dshpc-fieldwrap--inline" }, trigger, (0, import_react9.createElement)(FieldHint, { text: props.hint }));
|
|
4178
4246
|
const endBox = (side, label) => {
|
|
4179
4247
|
const p = partsOf(draft[side]);
|
|
4180
|
-
return (0,
|
|
4248
|
+
return (0, import_react9.createElement)("button", {
|
|
4181
4249
|
key: side,
|
|
4182
4250
|
type: "button",
|
|
4183
4251
|
className: `dshpc-dt__end${active === side ? " dshpc-dt__end--active" : ""}`,
|
|
4184
4252
|
"aria-pressed": active === side,
|
|
4185
4253
|
onClick: () => setActive2(side)
|
|
4186
|
-
}, (0,
|
|
4254
|
+
}, (0, import_react9.createElement)("span", { className: "dshpc-dt__end-label" }, `${label}\uFF1A`), (0, import_react9.createElement)("span", { className: `dshpc-dt__end-value${p === null ? " dshpc-dt__end-value--empty" : ""}` }, p === null ? placeholder2 : fmtParts(p, precision)));
|
|
4187
4255
|
};
|
|
4188
4256
|
const panel = (side) => {
|
|
4189
4257
|
const view = views[side];
|
|
@@ -4191,7 +4259,7 @@ function DateTimePicker(props) {
|
|
|
4191
4259
|
const selIso = end.day === null ? null : dayIso(end.day);
|
|
4192
4260
|
const cells = buildMonthCells(view.year, view.month);
|
|
4193
4261
|
const today = nowParts();
|
|
4194
|
-
return (0,
|
|
4262
|
+
return (0, import_react9.createElement)("div", { className: "dshpc-dt__panel", key: side }, (0, import_react9.createElement)("div", { className: "dshpc-dt__nav" }, (0, import_react9.createElement)("div", { className: "dshpc-dt__nav-group" }, (0, import_react9.createElement)("button", { type: "button", className: "dshpc-dt__nav-btn", "aria-label": tt("dtPrevYear"), onClick: () => shiftMonth(side, -12) }, ICON_PREV_YEAR), (0, import_react9.createElement)("button", { type: "button", className: "dshpc-dt__nav-btn", "aria-label": tt("dtPrevMonth"), onClick: () => shiftMonth(side, -1) }, ICON_PREV_MONTH)), (0, import_react9.createElement)("span", { className: "dshpc-dt__caption" }, monthCaption(view.year, view.month, locale2)), (0, import_react9.createElement)("div", { className: "dshpc-dt__nav-group" }, (0, import_react9.createElement)("button", { type: "button", className: "dshpc-dt__nav-btn", "aria-label": tt("dtNextMonth"), onClick: () => shiftMonth(side, 1) }, ICON_NEXT_MONTH), (0, import_react9.createElement)("button", { type: "button", className: "dshpc-dt__nav-btn", "aria-label": tt("dtNextYear"), onClick: () => shiftMonth(side, 12) }, ICON_NEXT_YEAR))), (0, import_react9.createElement)("div", {
|
|
4195
4263
|
className: "dshpc-dt__grid",
|
|
4196
4264
|
role: "grid",
|
|
4197
4265
|
"aria-label": monthCaption(view.year, view.month, locale2),
|
|
@@ -4199,7 +4267,7 @@ function DateTimePicker(props) {
|
|
|
4199
4267
|
gridRefs.current[side] = el;
|
|
4200
4268
|
},
|
|
4201
4269
|
onKeyDown: (e) => onGridKeyDown(side, e)
|
|
4202
|
-
}, ...weekdayLabels(locale2).map((w) => (0,
|
|
4270
|
+
}, ...weekdayLabels(locale2).map((w) => (0, import_react9.createElement)("span", { key: `wd-${w}`, className: "dshpc-dt__wd", role: "columnheader" }, w)), ...cells.map((c2) => (0, import_react9.createElement)("button", {
|
|
4203
4271
|
key: c2.iso,
|
|
4204
4272
|
type: "button",
|
|
4205
4273
|
role: "gridcell",
|
|
@@ -4209,18 +4277,18 @@ function DateTimePicker(props) {
|
|
|
4209
4277
|
"aria-label": locale2 === "zh" ? `${String(c2.year)}\u5E74${String(c2.month)}\u6708${String(c2.day)}\u65E5` : `${weekdayLabels("en")[c2.weekday]}, ${String(c2.year)}-${String(c2.month).padStart(2, "0")}-${String(c2.day).padStart(2, "0")}`,
|
|
4210
4278
|
"aria-selected": selIso !== null && c2.iso === selIso,
|
|
4211
4279
|
onClick: () => pickDay(side, c2)
|
|
4212
|
-
}, String(c2.day)))), units.length === 0 ? null : (0,
|
|
4280
|
+
}, String(c2.day)))), units.length === 0 ? null : (0, import_react9.createElement)("div", { className: "dshpc-dt__time" }, ...units.flatMap((unit, i2) => {
|
|
4213
4281
|
const labelKey = UNIT_LABEL[unit];
|
|
4214
4282
|
const value = end.time[unit];
|
|
4215
4283
|
const shown = typing !== null && typing.side === side && typing.unit === unit ? typing.text : String(value).padStart(2, "0");
|
|
4216
4284
|
return [
|
|
4217
|
-
i2 > 0 ? (0,
|
|
4218
|
-
(0,
|
|
4285
|
+
i2 > 0 ? (0, import_react9.createElement)("span", { key: `sep-${unit}`, className: "dshpc-dt__sep" }, ":") : null,
|
|
4286
|
+
(0, import_react9.createElement)("div", { key: unit, className: "dshpc-dt__unit" }, (0, import_react9.createElement)("span", { className: "dshpc-dt__unit-label" }, tt(labelKey)), (0, import_react9.createElement)("button", {
|
|
4219
4287
|
type: "button",
|
|
4220
4288
|
className: "dshpc-dt__step-btn",
|
|
4221
4289
|
"aria-label": `${tt(labelKey)} +1`,
|
|
4222
4290
|
onClick: () => shiftUnit(side, unit, 1)
|
|
4223
|
-
}, ICON_UP), (0,
|
|
4291
|
+
}, ICON_UP), (0, import_react9.createElement)("input", {
|
|
4224
4292
|
className: "dshpc-dt__step-val",
|
|
4225
4293
|
inputMode: "numeric",
|
|
4226
4294
|
maxLength: 2,
|
|
@@ -4239,7 +4307,7 @@ function DateTimePicker(props) {
|
|
|
4239
4307
|
commitTyping(side, unit, shown);
|
|
4240
4308
|
}
|
|
4241
4309
|
}
|
|
4242
|
-
}), (0,
|
|
4310
|
+
}), (0, import_react9.createElement)("button", {
|
|
4243
4311
|
type: "button",
|
|
4244
4312
|
className: "dshpc-dt__step-btn",
|
|
4245
4313
|
"aria-label": `${tt(labelKey)} -1`,
|
|
@@ -4250,15 +4318,15 @@ function DateTimePicker(props) {
|
|
|
4250
4318
|
};
|
|
4251
4319
|
const invalidRange = rangeMode && partsOf(draft.start) !== null && partsOf(draft.end) !== null && !rangeIsValid(formatDateTimeIso(partsOf(draft.start)), formatDateTimeIso(partsOf(draft.end)));
|
|
4252
4320
|
const canCommit = rangeMode ? partsOf(draft.start) !== null && partsOf(draft.end) !== null && !invalidRange : partsOf(draft.start) !== null;
|
|
4253
|
-
const pop2 = (0,
|
|
4254
|
-
return (0,
|
|
4321
|
+
const pop2 = (0, import_react9.createElement)("div", { className: "dshpc-dt__pop", ref: refs.setFloating, style: floatingStyles, onKeyDown: onPopKeyDown }, rangeMode ? (0, import_react9.createElement)("div", { className: "dshpc-dt__ends" }, endBox("start", tt("dtStart")), endBox("end", tt("dtEnd"))) : null, (0, import_react9.createElement)("div", { className: "dshpc-dt__panels" }, panel("start"), rangeMode ? panel("end") : null), (0, import_react9.createElement)("div", { className: "dshpc-dt__foot" }, (0, import_react9.createElement)("div", { className: "dshpc-dt__foot-side" }, (0, import_react9.createElement)(Button, { variant: "ghost", size: "sm", onClick: applyNow }, precision === "day" ? tt("dtToday") : tt("dtNow")), (0, import_react9.createElement)(Button, { variant: "ghost", size: "sm", onClick: clear }, tt("dtClear"))), (0, import_react9.createElement)("div", { className: "dshpc-dt__foot-side" }, invalidRange ? (0, import_react9.createElement)("span", { className: "dshpc-dt__warn" }, tt("dtInvalidRange")) : null, (0, import_react9.createElement)(Button, { variant: "outline", size: "sm", onClick: () => setOpen(false) }, tt("cancel")), (0, import_react9.createElement)(Button, { variant: "primary", size: "sm", disabled: !canCommit, onClick: commit }, tt("confirm")))));
|
|
4322
|
+
return (0, import_react9.createElement)("div", {
|
|
4255
4323
|
className: `dshpc-dt${props.className === void 0 ? "" : ` ${props.className}`}`,
|
|
4256
4324
|
ref: rootRef
|
|
4257
|
-
}, triggerRow, open ? (0,
|
|
4325
|
+
}, triggerRow, open ? (0, import_react9.createElement)(FloatingPortal, null, pop2) : null);
|
|
4258
4326
|
}
|
|
4259
4327
|
|
|
4260
4328
|
// dist/ui/ModelPicker.js
|
|
4261
|
-
var
|
|
4329
|
+
var import_react12 = require("react");
|
|
4262
4330
|
|
|
4263
4331
|
// dist/ui/host-data.js
|
|
4264
4332
|
var ModelCatalogStore = class {
|
|
@@ -4337,12 +4405,12 @@ function connectHost(ctx, options = {}) {
|
|
|
4337
4405
|
}
|
|
4338
4406
|
|
|
4339
4407
|
// dist/ui/picker-icons.js
|
|
4340
|
-
var
|
|
4408
|
+
var import_react11 = require("react");
|
|
4341
4409
|
function glyph(path) {
|
|
4342
|
-
return (0,
|
|
4410
|
+
return (0, import_react11.createElement)("svg", { width: 14, height: 14, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true }, path);
|
|
4343
4411
|
}
|
|
4344
4412
|
function folderIcon() {
|
|
4345
|
-
return glyph((0,
|
|
4413
|
+
return glyph((0, import_react11.createElement)("path", {
|
|
4346
4414
|
d: "M2 4.5A1.5 1.5 0 0 1 3.5 3h2.6l1.2 1.5h5.2A1.5 1.5 0 0 1 14 6v5.5A1.5 1.5 0 0 1 12.5 13h-9A1.5 1.5 0 0 1 2 11.5z",
|
|
4347
4415
|
stroke: "currentColor",
|
|
4348
4416
|
"stroke-width": 1.3,
|
|
@@ -4350,7 +4418,7 @@ function folderIcon() {
|
|
|
4350
4418
|
}));
|
|
4351
4419
|
}
|
|
4352
4420
|
function sparkleIcon() {
|
|
4353
|
-
return glyph((0,
|
|
4421
|
+
return glyph((0, import_react11.createElement)("path", {
|
|
4354
4422
|
d: "M8 1.8l1.6 4.1 4.1 1.6-4.1 1.6L8 13.2 6.4 9.1 2.3 7.5l4.1-1.6z",
|
|
4355
4423
|
stroke: "currentColor",
|
|
4356
4424
|
"stroke-width": 1.2,
|
|
@@ -4366,7 +4434,7 @@ function ModelPicker(props) {
|
|
|
4366
4434
|
const variant = props.variant ?? "grouped";
|
|
4367
4435
|
const searchable = props.searchable ?? true;
|
|
4368
4436
|
const defaultOption = props.allowDefault === false ? void 0 : { value: "", label: props.defaultLabel ?? tt("modelDefault") };
|
|
4369
|
-
const catalog = (0,
|
|
4437
|
+
const catalog = (0, import_react12.useSyncExternalStore)(modelCatalog.subscribe, modelCatalog.getSnapshot);
|
|
4370
4438
|
const groups = props.groups ?? (catalog.status === "ready" ? catalog.routes.map((route) => ({
|
|
4371
4439
|
value: route.provider,
|
|
4372
4440
|
label: route.displayName,
|
|
@@ -4380,15 +4448,15 @@ function ModelPicker(props) {
|
|
|
4380
4448
|
const emitModel = (v) => {
|
|
4381
4449
|
props.onChange?.(typeof v === "string" ? v : v[0] ?? "");
|
|
4382
4450
|
};
|
|
4383
|
-
const [pickedProvider, setPickedProvider] = (0,
|
|
4451
|
+
const [pickedProvider, setPickedProvider] = (0, import_react12.useState)("");
|
|
4384
4452
|
const curGroup = groupOf(groups, value ?? "");
|
|
4385
4453
|
const provider = pickedProvider !== "" && groups.some((g) => g.value === pickedProvider) ? pickedProvider : curGroup?.value ?? "";
|
|
4386
|
-
(0,
|
|
4454
|
+
(0, import_react12.useEffect)(() => {
|
|
4387
4455
|
if (value !== void 0 && value !== "")
|
|
4388
4456
|
setPickedProvider("");
|
|
4389
4457
|
}, [value]);
|
|
4390
4458
|
if (variant === "grouped") {
|
|
4391
|
-
return (0,
|
|
4459
|
+
return (0, import_react12.createElement)(Picker, {
|
|
4392
4460
|
// 「默认模型」放最上面:空 label 的组,Picker 只渲染选项不渲染组头
|
|
4393
4461
|
groups: defaultOption === void 0 ? groups : [{ value: "", label: "", options: [defaultOption] }, ...groups],
|
|
4394
4462
|
value,
|
|
@@ -4408,7 +4476,7 @@ function ModelPicker(props) {
|
|
|
4408
4476
|
}
|
|
4409
4477
|
const group = groups.find((g) => g.value === provider);
|
|
4410
4478
|
const options = group === void 0 ? [] : flattenOptions([group]);
|
|
4411
|
-
return (0,
|
|
4479
|
+
return (0, import_react12.createElement)("div", { className: "dshpc-picker__row" }, (0, import_react12.createElement)(Picker, {
|
|
4412
4480
|
options: groups.map((g) => ({ value: g.value, label: g.label })),
|
|
4413
4481
|
value: provider === "" ? void 0 : provider,
|
|
4414
4482
|
placeholder: tt("modelProvider"),
|
|
@@ -4419,7 +4487,7 @@ function ModelPicker(props) {
|
|
|
4419
4487
|
setPickedProvider(typeof v === "string" ? v : v[0] ?? "");
|
|
4420
4488
|
props.onChange?.("");
|
|
4421
4489
|
}
|
|
4422
|
-
}), (0,
|
|
4490
|
+
}), (0, import_react12.createElement)(Picker, {
|
|
4423
4491
|
options: defaultOption === void 0 ? options : [defaultOption, ...options],
|
|
4424
4492
|
value,
|
|
4425
4493
|
defaultValue: props.defaultValue,
|
|
@@ -4438,14 +4506,14 @@ function ModelPicker(props) {
|
|
|
4438
4506
|
}
|
|
4439
4507
|
|
|
4440
4508
|
// dist/ui/WorkspacePicker.js
|
|
4441
|
-
var
|
|
4509
|
+
var import_react13 = require("react");
|
|
4442
4510
|
function WorkspacePicker(props) {
|
|
4443
4511
|
ensureControls();
|
|
4444
4512
|
const tt = props.translate ?? t;
|
|
4445
|
-
const items = (0,
|
|
4513
|
+
const items = (0, import_react13.useSyncExternalStore)(workspaceList.subscribe, workspaceList.getSnapshot);
|
|
4446
4514
|
const options = items.map((w) => ({ value: w.workspaceId, label: w.title }));
|
|
4447
4515
|
const allOption = props.allowDefault !== false && props.mode !== "multiple" ? { value: "", label: props.defaultLabel ?? tt("workspaceAll") } : void 0;
|
|
4448
|
-
return (0,
|
|
4516
|
+
return (0, import_react13.createElement)(Picker, {
|
|
4449
4517
|
options: allOption === void 0 ? options : [allOption, ...options],
|
|
4450
4518
|
value: props.value,
|
|
4451
4519
|
defaultValue: props.defaultValue,
|
|
@@ -4465,13 +4533,13 @@ function WorkspacePicker(props) {
|
|
|
4465
4533
|
}
|
|
4466
4534
|
|
|
4467
4535
|
// dist/ui/Modal.js
|
|
4468
|
-
var
|
|
4536
|
+
var import_react14 = require("react");
|
|
4469
4537
|
function Modal(props) {
|
|
4470
4538
|
ensureControls();
|
|
4471
4539
|
const tt = props.translate ?? t;
|
|
4472
4540
|
const closeOnMask = props.closeOnMask !== false;
|
|
4473
4541
|
const escClose = props.escClose !== false;
|
|
4474
|
-
(0,
|
|
4542
|
+
(0, import_react14.useEffect)(() => {
|
|
4475
4543
|
if (!escClose || props.onClose === void 0)
|
|
4476
4544
|
return;
|
|
4477
4545
|
const onKey = (e) => {
|
|
@@ -4489,13 +4557,13 @@ function Modal(props) {
|
|
|
4489
4557
|
const s = sizeStyle[props.size ?? "md"];
|
|
4490
4558
|
const showClose = props.closable !== false && props.onClose !== void 0;
|
|
4491
4559
|
const showHeader = props.hideHeader !== true && (props.icon !== void 0 || props.title !== void 0 || props.subtitle !== void 0 || props.headerExtra !== void 0 || props.headerActions !== void 0 || showClose);
|
|
4492
|
-
return (0,
|
|
4560
|
+
return (0, import_react14.createElement)("div", {
|
|
4493
4561
|
className: "dshpc-modal-mask",
|
|
4494
4562
|
onClick: () => {
|
|
4495
4563
|
if (closeOnMask)
|
|
4496
4564
|
props.onClose?.();
|
|
4497
4565
|
}
|
|
4498
|
-
}, (0,
|
|
4566
|
+
}, (0, import_react14.createElement)(
|
|
4499
4567
|
"div",
|
|
4500
4568
|
{
|
|
4501
4569
|
className: `dshpc-modal${props.size ? ` dshpc-modal--${props.size}` : ""}`,
|
|
@@ -4507,14 +4575,14 @@ function Modal(props) {
|
|
|
4507
4575
|
},
|
|
4508
4576
|
onClick: (e) => e.stopPropagation()
|
|
4509
4577
|
},
|
|
4510
|
-
showHeader ? (0,
|
|
4578
|
+
showHeader ? (0, import_react14.createElement)("div", { className: "dshpc-modal__head" }, (0, import_react14.createElement)(
|
|
4511
4579
|
"div",
|
|
4512
4580
|
{ className: "dshpc-modal__heading" },
|
|
4513
|
-
props.icon === void 0 ? null : (0,
|
|
4581
|
+
props.icon === void 0 ? null : (0, import_react14.createElement)("span", { className: "dshpc-modal__lead" }, props.icon),
|
|
4514
4582
|
// 标题组:第一行 = 标题 + 右侧小块(徽标**紧跟标题**,不跨两行居中),
|
|
4515
4583
|
// 第二行 = 副标题(会话 id 这类标识)。
|
|
4516
|
-
(0,
|
|
4517
|
-
), (0,
|
|
4584
|
+
(0, import_react14.createElement)("div", { className: "dshpc-modal__titlegroup" }, (0, import_react14.createElement)("div", { className: "dshpc-modal__titlerow" }, (0, import_react14.createElement)("div", { className: "dshpc-modal__title" }, props.title ?? ""), props.headerExtra === void 0 ? null : (0, import_react14.createElement)("div", { className: "dshpc-modal__extra" }, props.headerExtra)), props.subtitle === void 0 ? null : (0, import_react14.createElement)("div", { className: "dshpc-modal__sid" }, props.subtitle))
|
|
4585
|
+
), (0, import_react14.createElement)("div", { className: "dshpc-modal__spacer" }), props.headerActions === void 0 ? null : (0, import_react14.createElement)("div", { className: "dshpc-modal__actions" }, props.headerActions), showClose ? (0, import_react14.createElement)("button", {
|
|
4518
4586
|
type: "button",
|
|
4519
4587
|
className: "dshpc-modal__close",
|
|
4520
4588
|
"aria-label": tt("modalClose"),
|
|
@@ -4522,13 +4590,13 @@ function Modal(props) {
|
|
|
4522
4590
|
}, "\u2715") : null) : null,
|
|
4523
4591
|
// body 是**唯一滚动容器**:内距归它、滚动条归它、滚动条贴面板右缘;
|
|
4524
4592
|
// 内容只管按流排,不许自己定高、不许自己再开滚动条(用户 2026-10-22 定的口径)。
|
|
4525
|
-
(0,
|
|
4526
|
-
props.footer === void 0 ? null : (0,
|
|
4593
|
+
(0, import_react14.createElement)("div", { className: "dshpc-modal__body" }, props.children ?? null),
|
|
4594
|
+
props.footer === void 0 ? null : (0, import_react14.createElement)("div", { className: "dshpc-modal__foot" }, props.footer)
|
|
4527
4595
|
));
|
|
4528
4596
|
}
|
|
4529
4597
|
|
|
4530
4598
|
// dist/ui/AlertModal.js
|
|
4531
|
-
var
|
|
4599
|
+
var import_react15 = require("react");
|
|
4532
4600
|
var SEVERITY_GLYPH = {
|
|
4533
4601
|
info: "\u24D8",
|
|
4534
4602
|
success: "\u2713",
|
|
@@ -4538,37 +4606,37 @@ var SEVERITY_GLYPH = {
|
|
|
4538
4606
|
function AlertModal(props) {
|
|
4539
4607
|
const tt = props.translate ?? t;
|
|
4540
4608
|
const severity = props.severity ?? "info";
|
|
4541
|
-
return (0,
|
|
4542
|
-
icon: (0,
|
|
4609
|
+
return (0, import_react15.createElement)(Modal, {
|
|
4610
|
+
icon: (0, import_react15.createElement)("span", { className: `dshpc-alert-sev dshpc-alert-sev--${severity}` }, SEVERITY_GLYPH[severity]),
|
|
4543
4611
|
title: props.title,
|
|
4544
4612
|
size: props.size ?? "sm",
|
|
4545
4613
|
hideHeader: props.title === void 0,
|
|
4546
4614
|
closable: false,
|
|
4547
4615
|
closeOnMask: props.closeOnMask,
|
|
4548
4616
|
onClose: props.onConfirm,
|
|
4549
|
-
footer: (0,
|
|
4617
|
+
footer: (0, import_react15.createElement)(Button, { variant: "primary", onClick: () => props.onConfirm?.() }, props.confirmText ?? tt("dialogOk"))
|
|
4550
4618
|
}, props.message ?? null);
|
|
4551
4619
|
}
|
|
4552
4620
|
|
|
4553
4621
|
// dist/ui/ConfirmModal.js
|
|
4554
|
-
var
|
|
4622
|
+
var import_react16 = require("react");
|
|
4555
4623
|
function ConfirmModal(props) {
|
|
4556
4624
|
const tt = props.translate ?? t;
|
|
4557
4625
|
const tone = props.tone ?? "primary";
|
|
4558
4626
|
const confirmVariant = tone === "danger" ? "danger" : tone === "warning" ? "warning" : "primary";
|
|
4559
|
-
return (0,
|
|
4627
|
+
return (0, import_react16.createElement)(Modal, {
|
|
4560
4628
|
title: props.title,
|
|
4561
4629
|
size: props.size ?? "sm",
|
|
4562
4630
|
hideHeader: props.title === void 0,
|
|
4563
4631
|
closable: false,
|
|
4564
4632
|
closeOnMask: props.closeOnMask,
|
|
4565
4633
|
onClose: props.onCancel,
|
|
4566
|
-
footer: (0,
|
|
4634
|
+
footer: (0, import_react16.createElement)("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, (0, import_react16.createElement)(Button, { variant: "outline", onClick: () => props.onCancel?.() }, props.cancelText ?? tt("cancel")), (0, import_react16.createElement)(Button, { variant: confirmVariant, onClick: () => props.onConfirm?.() }, props.confirmText ?? tt("confirm")))
|
|
4567
4635
|
}, props.message ?? null);
|
|
4568
4636
|
}
|
|
4569
4637
|
|
|
4570
4638
|
// dist/ui/modal-host.js
|
|
4571
|
-
var
|
|
4639
|
+
var import_react17 = require("react");
|
|
4572
4640
|
var import_client = require("react-dom/client");
|
|
4573
4641
|
var hostRoot = null;
|
|
4574
4642
|
var hostContainer = null;
|
|
@@ -4597,7 +4665,7 @@ function flush() {
|
|
|
4597
4665
|
hostContainer = null;
|
|
4598
4666
|
return;
|
|
4599
4667
|
}
|
|
4600
|
-
root.render((0,
|
|
4668
|
+
root.render((0, import_react17.createElement)(import_react17.Fragment, null, entries.map((e) => e.node)));
|
|
4601
4669
|
}
|
|
4602
4670
|
function dismiss(id3) {
|
|
4603
4671
|
entries = entries.filter((e) => e.id !== id3);
|
|
@@ -4630,7 +4698,7 @@ function confirmModal(opts) {
|
|
|
4630
4698
|
};
|
|
4631
4699
|
entries.push({
|
|
4632
4700
|
id: id3,
|
|
4633
|
-
node: (0,
|
|
4701
|
+
node: (0, import_react17.createElement)(ConfirmModal, { ...core, onConfirm: () => close(true), onCancel: () => close(false) })
|
|
4634
4702
|
});
|
|
4635
4703
|
flush();
|
|
4636
4704
|
});
|
|
@@ -4654,13 +4722,13 @@ function alertModal(opts) {
|
|
|
4654
4722
|
dismiss(id3);
|
|
4655
4723
|
resolve();
|
|
4656
4724
|
};
|
|
4657
|
-
entries.push({ id: id3, node: (0,
|
|
4725
|
+
entries.push({ id: id3, node: (0, import_react17.createElement)(AlertModal, { ...core, onConfirm: close }) });
|
|
4658
4726
|
flush();
|
|
4659
4727
|
});
|
|
4660
4728
|
}
|
|
4661
4729
|
|
|
4662
4730
|
// dist/ui/Card.js
|
|
4663
|
-
var
|
|
4731
|
+
var import_react18 = require("react");
|
|
4664
4732
|
var CARD_ACCENTS = ["business", "success", "warning", "danger", "neutral"];
|
|
4665
4733
|
function CardShell(kind, props) {
|
|
4666
4734
|
ensureControls();
|
|
@@ -4674,13 +4742,13 @@ function CardShell(kind, props) {
|
|
|
4674
4742
|
props.className ?? ""
|
|
4675
4743
|
].filter((s) => s !== "").join(" ");
|
|
4676
4744
|
const style2 = isPreset ? props.style : { ...props.style, ["--card-accent"]: accent };
|
|
4677
|
-
return (0,
|
|
4745
|
+
return (0, import_react18.createElement)("div", { className: classes, style: style2 }, (0, import_react18.createElement)(
|
|
4678
4746
|
"div",
|
|
4679
4747
|
{ className: "dshpc-card__head" },
|
|
4680
4748
|
// 色条是头部第一个子元素:strip 外观 = 绝对定位 4px 通高贴左缘;bordered 外观 = 行内 6px 圆角短条(高度跟随内容,最小一行,左移 3px)。
|
|
4681
|
-
(0,
|
|
4682
|
-
(0,
|
|
4683
|
-
props.action === void 0 && props.onToggle === void 0 ? null : (0,
|
|
4749
|
+
(0, import_react18.createElement)("span", { className: "dshpc-card__bar", "aria-hidden": true }),
|
|
4750
|
+
(0, import_react18.createElement)("div", { className: "dshpc-card__main" }, props.children ?? null),
|
|
4751
|
+
props.action === void 0 && props.onToggle === void 0 ? null : (0, import_react18.createElement)("div", { className: "dshpc-card__side" }, props.action ?? null, props.onToggle === void 0 ? null : (0, import_react18.createElement)(
|
|
4684
4752
|
"button",
|
|
4685
4753
|
{
|
|
4686
4754
|
type: "button",
|
|
@@ -4690,9 +4758,9 @@ function CardShell(kind, props) {
|
|
|
4690
4758
|
onClick: props.onToggle
|
|
4691
4759
|
},
|
|
4692
4760
|
// 箭头走全站唯一的 Chevron(不再写 ▾ 字形);旋转由外层 .is-open 承担,动画不变。
|
|
4693
|
-
(0,
|
|
4761
|
+
(0, import_react18.createElement)("span", { className: props.expanded === true ? "dshpc-card__caret is-open" : "dshpc-card__caret" }, (0, import_react18.createElement)(Chevron, { size: 12 }))
|
|
4694
4762
|
))
|
|
4695
|
-
), props.panel === void 0 || props.expanded !== true ? null : (0,
|
|
4763
|
+
), props.panel === void 0 || props.expanded !== true ? null : (0, import_react18.createElement)("div", { className: "dshpc-card__panel" }, props.panel));
|
|
4696
4764
|
}
|
|
4697
4765
|
function Card(props) {
|
|
4698
4766
|
return CardShell("bordered", props);
|
|
@@ -4702,13 +4770,13 @@ function StripCard(props) {
|
|
|
4702
4770
|
}
|
|
4703
4771
|
|
|
4704
4772
|
// dist/ui/Chip.js
|
|
4705
|
-
var
|
|
4773
|
+
var import_react19 = require("react");
|
|
4706
4774
|
function Chip(props) {
|
|
4707
4775
|
ensureControls();
|
|
4708
4776
|
const clickable = props.onClick !== void 0;
|
|
4709
4777
|
const tone = props.tone ?? "neutral";
|
|
4710
4778
|
const size4 = props.size ?? "sm";
|
|
4711
|
-
return (0,
|
|
4779
|
+
return (0, import_react19.createElement)(clickable ? "button" : "span", {
|
|
4712
4780
|
type: clickable ? "button" : void 0,
|
|
4713
4781
|
className: `dshpc-chip${tone !== "neutral" ? ` dshpc-chip--${tone}` : ""}${size4 !== "sm" ? ` dshpc-chip--${size4}` : ""}${clickable ? " dshpc-chip--clickable" : ""}${props.className === void 0 ? "" : ` ${props.className}`}`,
|
|
4714
4782
|
onClick: props.onClick
|
|
@@ -4716,11 +4784,11 @@ function Chip(props) {
|
|
|
4716
4784
|
}
|
|
4717
4785
|
|
|
4718
4786
|
// dist/ui/Toast.js
|
|
4719
|
-
var
|
|
4787
|
+
var import_react21 = require("react");
|
|
4720
4788
|
var import_client2 = require("react-dom/client");
|
|
4721
4789
|
|
|
4722
4790
|
// node_modules/.pnpm/sonner@2.0.8_@types+react@18.3.31_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/sonner/dist/index.mjs
|
|
4723
|
-
var
|
|
4791
|
+
var import_react20 = __toESM(require("react"), 1);
|
|
4724
4792
|
var import_react_dom3 = __toESM(require("react-dom"), 1);
|
|
4725
4793
|
function __insertCSS(code3) {
|
|
4726
4794
|
if (!code3 || typeof document == "undefined") return;
|
|
@@ -4746,68 +4814,68 @@ var getAsset = (type3) => {
|
|
|
4746
4814
|
};
|
|
4747
4815
|
var bars = Array(12).fill(0);
|
|
4748
4816
|
var Loader = ({ visible, className: className2 }) => {
|
|
4749
|
-
return /* @__PURE__ */
|
|
4817
|
+
return /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
4750
4818
|
className: [
|
|
4751
4819
|
"sonner-loading-wrapper",
|
|
4752
4820
|
className2
|
|
4753
4821
|
].filter(Boolean).join(" "),
|
|
4754
4822
|
"data-visible": visible
|
|
4755
|
-
}, /* @__PURE__ */
|
|
4823
|
+
}, /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
4756
4824
|
className: "sonner-spinner"
|
|
4757
|
-
}, bars.map((_, i2) => /* @__PURE__ */
|
|
4825
|
+
}, bars.map((_, i2) => /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
4758
4826
|
className: "sonner-loading-bar",
|
|
4759
4827
|
key: `spinner-bar-${i2}`
|
|
4760
4828
|
}))));
|
|
4761
4829
|
};
|
|
4762
|
-
var SuccessIcon = /* @__PURE__ */
|
|
4830
|
+
var SuccessIcon = /* @__PURE__ */ import_react20.default.createElement("svg", {
|
|
4763
4831
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4764
4832
|
viewBox: "0 0 20 20",
|
|
4765
4833
|
fill: "currentColor",
|
|
4766
4834
|
height: "20",
|
|
4767
4835
|
width: "20",
|
|
4768
4836
|
"aria-hidden": "true"
|
|
4769
|
-
}, /* @__PURE__ */
|
|
4837
|
+
}, /* @__PURE__ */ import_react20.default.createElement("path", {
|
|
4770
4838
|
fillRule: "evenodd",
|
|
4771
4839
|
d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",
|
|
4772
4840
|
clipRule: "evenodd"
|
|
4773
4841
|
}));
|
|
4774
|
-
var WarningIcon = /* @__PURE__ */
|
|
4842
|
+
var WarningIcon = /* @__PURE__ */ import_react20.default.createElement("svg", {
|
|
4775
4843
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4776
4844
|
viewBox: "0 0 24 24",
|
|
4777
4845
|
fill: "currentColor",
|
|
4778
4846
|
height: "20",
|
|
4779
4847
|
width: "20",
|
|
4780
4848
|
"aria-hidden": "true"
|
|
4781
|
-
}, /* @__PURE__ */
|
|
4849
|
+
}, /* @__PURE__ */ import_react20.default.createElement("path", {
|
|
4782
4850
|
fillRule: "evenodd",
|
|
4783
4851
|
d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
|
|
4784
4852
|
clipRule: "evenodd"
|
|
4785
4853
|
}));
|
|
4786
|
-
var InfoIcon = /* @__PURE__ */
|
|
4854
|
+
var InfoIcon = /* @__PURE__ */ import_react20.default.createElement("svg", {
|
|
4787
4855
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4788
4856
|
viewBox: "0 0 20 20",
|
|
4789
4857
|
fill: "currentColor",
|
|
4790
4858
|
height: "20",
|
|
4791
4859
|
width: "20",
|
|
4792
4860
|
"aria-hidden": "true"
|
|
4793
|
-
}, /* @__PURE__ */
|
|
4861
|
+
}, /* @__PURE__ */ import_react20.default.createElement("path", {
|
|
4794
4862
|
fillRule: "evenodd",
|
|
4795
4863
|
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z",
|
|
4796
4864
|
clipRule: "evenodd"
|
|
4797
4865
|
}));
|
|
4798
|
-
var ErrorIcon = /* @__PURE__ */
|
|
4866
|
+
var ErrorIcon = /* @__PURE__ */ import_react20.default.createElement("svg", {
|
|
4799
4867
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4800
4868
|
viewBox: "0 0 20 20",
|
|
4801
4869
|
fill: "currentColor",
|
|
4802
4870
|
height: "20",
|
|
4803
4871
|
width: "20",
|
|
4804
4872
|
"aria-hidden": "true"
|
|
4805
|
-
}, /* @__PURE__ */
|
|
4873
|
+
}, /* @__PURE__ */ import_react20.default.createElement("path", {
|
|
4806
4874
|
fillRule: "evenodd",
|
|
4807
4875
|
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
|
|
4808
4876
|
clipRule: "evenodd"
|
|
4809
4877
|
}));
|
|
4810
|
-
var CloseIcon = /* @__PURE__ */
|
|
4878
|
+
var CloseIcon = /* @__PURE__ */ import_react20.default.createElement("svg", {
|
|
4811
4879
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4812
4880
|
width: "12",
|
|
4813
4881
|
height: "12",
|
|
@@ -4818,20 +4886,20 @@ var CloseIcon = /* @__PURE__ */ import_react19.default.createElement("svg", {
|
|
|
4818
4886
|
strokeLinecap: "round",
|
|
4819
4887
|
strokeLinejoin: "round",
|
|
4820
4888
|
"aria-hidden": "true"
|
|
4821
|
-
}, /* @__PURE__ */
|
|
4889
|
+
}, /* @__PURE__ */ import_react20.default.createElement("line", {
|
|
4822
4890
|
x1: "18",
|
|
4823
4891
|
y1: "6",
|
|
4824
4892
|
x2: "6",
|
|
4825
4893
|
y2: "18"
|
|
4826
|
-
}), /* @__PURE__ */
|
|
4894
|
+
}), /* @__PURE__ */ import_react20.default.createElement("line", {
|
|
4827
4895
|
x1: "6",
|
|
4828
4896
|
y1: "6",
|
|
4829
4897
|
x2: "18",
|
|
4830
4898
|
y2: "18"
|
|
4831
4899
|
}));
|
|
4832
4900
|
var useIsDocumentHidden = () => {
|
|
4833
|
-
const [isDocumentHidden, setIsDocumentHidden] =
|
|
4834
|
-
|
|
4901
|
+
const [isDocumentHidden, setIsDocumentHidden] = import_react20.default.useState(document.hidden);
|
|
4902
|
+
import_react20.default.useEffect(() => {
|
|
4835
4903
|
const callback = () => {
|
|
4836
4904
|
setIsDocumentHidden(document.hidden);
|
|
4837
4905
|
};
|
|
@@ -5015,7 +5083,7 @@ var Observer = class {
|
|
|
5015
5083
|
"resolve",
|
|
5016
5084
|
response
|
|
5017
5085
|
];
|
|
5018
|
-
const isReactElementResponse =
|
|
5086
|
+
const isReactElementResponse = import_react20.default.isValidElement(response);
|
|
5019
5087
|
if (isReactElementResponse) {
|
|
5020
5088
|
shouldDismiss = false;
|
|
5021
5089
|
this.create({
|
|
@@ -5027,7 +5095,7 @@ var Observer = class {
|
|
|
5027
5095
|
shouldDismiss = false;
|
|
5028
5096
|
const promiseData = typeof data2.error === "function" ? await data2.error(`HTTP error! status: ${response.status}`) : data2.error;
|
|
5029
5097
|
const description = typeof data2.description === "function" ? await data2.description(`HTTP error! status: ${response.status}`) : data2.description;
|
|
5030
|
-
const isExtendedResult = typeof promiseData === "object" && !
|
|
5098
|
+
const isExtendedResult = typeof promiseData === "object" && !import_react20.default.isValidElement(promiseData);
|
|
5031
5099
|
const toastSettings = isExtendedResult ? promiseData : {
|
|
5032
5100
|
message: promiseData
|
|
5033
5101
|
};
|
|
@@ -5041,7 +5109,7 @@ var Observer = class {
|
|
|
5041
5109
|
shouldDismiss = false;
|
|
5042
5110
|
const promiseData = typeof data2.error === "function" ? await data2.error(response) : data2.error;
|
|
5043
5111
|
const description = typeof data2.description === "function" ? await data2.description(response) : data2.description;
|
|
5044
|
-
const isExtendedResult = typeof promiseData === "object" && !
|
|
5112
|
+
const isExtendedResult = typeof promiseData === "object" && !import_react20.default.isValidElement(promiseData);
|
|
5045
5113
|
const toastSettings = isExtendedResult ? promiseData : {
|
|
5046
5114
|
message: promiseData
|
|
5047
5115
|
};
|
|
@@ -5055,7 +5123,7 @@ var Observer = class {
|
|
|
5055
5123
|
shouldDismiss = false;
|
|
5056
5124
|
const promiseData = typeof data2.success === "function" ? await data2.success(response) : data2.success;
|
|
5057
5125
|
const description = typeof data2.description === "function" ? await data2.description(response) : data2.description;
|
|
5058
|
-
const isExtendedResult = typeof promiseData === "object" && !
|
|
5126
|
+
const isExtendedResult = typeof promiseData === "object" && !import_react20.default.isValidElement(promiseData);
|
|
5059
5127
|
const toastSettings = isExtendedResult ? promiseData : {
|
|
5060
5128
|
message: promiseData
|
|
5061
5129
|
};
|
|
@@ -5075,7 +5143,7 @@ var Observer = class {
|
|
|
5075
5143
|
shouldDismiss = false;
|
|
5076
5144
|
const promiseData = typeof data2.error === "function" ? await data2.error(error) : data2.error;
|
|
5077
5145
|
const description = typeof data2.description === "function" ? await data2.description(error) : data2.description;
|
|
5078
|
-
const isExtendedResult = typeof promiseData === "object" && !
|
|
5146
|
+
const isExtendedResult = typeof promiseData === "object" && !import_react20.default.isValidElement(promiseData);
|
|
5079
5147
|
const toastSettings = isExtendedResult ? promiseData : {
|
|
5080
5148
|
message: promiseData
|
|
5081
5149
|
};
|
|
@@ -5176,18 +5244,18 @@ function getDefaultSwipeDirections(position) {
|
|
|
5176
5244
|
var Toast = (props) => {
|
|
5177
5245
|
var _toast_classNames, _toast_classNames1, _toast_classNames2, _toast_classNames3, _toast_classNames4, _toast_classNames5, _toast_classNames6, _toast_classNames7, _toast_classNames8;
|
|
5178
5246
|
const { invert: ToasterInvert, toast: toast2, unstyled, interacting, setHeights, visibleToasts, heights, index: index3, toasts, expanded, removeToast, defaultRichColors, closeButton: closeButtonFromToaster, style: style2, cancelButtonStyle, actionButtonStyle, className: className2 = "", descriptionClassName = "", duration: durationFromToaster, position, gap, expandByDefault, classNames, icons, closeButtonAriaLabel = "Close toast" } = props;
|
|
5179
|
-
const [swipeDirection, setSwipeDirection] =
|
|
5180
|
-
const [swipeOutDirection, setSwipeOutDirection] =
|
|
5181
|
-
const [mounted, setMounted] =
|
|
5182
|
-
const [removed, setRemoved] =
|
|
5183
|
-
const [swiping, setSwiping] =
|
|
5184
|
-
const [swipeOut, setSwipeOut] =
|
|
5185
|
-
const [isSwiped, setIsSwiped] =
|
|
5186
|
-
const [offsetBeforeRemove, setOffsetBeforeRemove] =
|
|
5187
|
-
const [initialHeight, setInitialHeight] =
|
|
5188
|
-
const remainingTime =
|
|
5189
|
-
const dragStartTime =
|
|
5190
|
-
const toastRef =
|
|
5247
|
+
const [swipeDirection, setSwipeDirection] = import_react20.default.useState(null);
|
|
5248
|
+
const [swipeOutDirection, setSwipeOutDirection] = import_react20.default.useState(null);
|
|
5249
|
+
const [mounted, setMounted] = import_react20.default.useState(false);
|
|
5250
|
+
const [removed, setRemoved] = import_react20.default.useState(false);
|
|
5251
|
+
const [swiping, setSwiping] = import_react20.default.useState(false);
|
|
5252
|
+
const [swipeOut, setSwipeOut] = import_react20.default.useState(false);
|
|
5253
|
+
const [isSwiped, setIsSwiped] = import_react20.default.useState(false);
|
|
5254
|
+
const [offsetBeforeRemove, setOffsetBeforeRemove] = import_react20.default.useState(0);
|
|
5255
|
+
const [initialHeight, setInitialHeight] = import_react20.default.useState(0);
|
|
5256
|
+
const remainingTime = import_react20.default.useRef(toast2.duration || durationFromToaster || TOAST_LIFETIME);
|
|
5257
|
+
const dragStartTime = import_react20.default.useRef(null);
|
|
5258
|
+
const toastRef = import_react20.default.useRef(null);
|
|
5191
5259
|
const isFront = index3 === 0;
|
|
5192
5260
|
const isVisible = index3 + 1 <= visibleToasts;
|
|
5193
5261
|
const toastType = toast2.type;
|
|
@@ -5195,27 +5263,27 @@ var Toast = (props) => {
|
|
|
5195
5263
|
const dismissible = toast2.dismissible !== false;
|
|
5196
5264
|
const toastClassname = toast2.className || "";
|
|
5197
5265
|
const toastDescriptionClassname = toast2.descriptionClassName || "";
|
|
5198
|
-
const heightIndex =
|
|
5266
|
+
const heightIndex = import_react20.default.useMemo(() => heights.findIndex((height) => height.toastId === toast2.id) || 0, [
|
|
5199
5267
|
heights,
|
|
5200
5268
|
toast2.id
|
|
5201
5269
|
]);
|
|
5202
|
-
const closeButton =
|
|
5270
|
+
const closeButton = import_react20.default.useMemo(() => {
|
|
5203
5271
|
var _toast_closeButton;
|
|
5204
5272
|
return (_toast_closeButton = toast2.closeButton) != null ? _toast_closeButton : closeButtonFromToaster;
|
|
5205
5273
|
}, [
|
|
5206
5274
|
toast2.closeButton,
|
|
5207
5275
|
closeButtonFromToaster
|
|
5208
5276
|
]);
|
|
5209
|
-
const duration =
|
|
5277
|
+
const duration = import_react20.default.useMemo(() => toast2.duration || durationFromToaster || TOAST_LIFETIME, [
|
|
5210
5278
|
toast2.duration,
|
|
5211
5279
|
durationFromToaster
|
|
5212
5280
|
]);
|
|
5213
|
-
const closeTimerStartTimeRef =
|
|
5214
|
-
const offset4 =
|
|
5215
|
-
const lastCloseTimerStartTimeRef =
|
|
5216
|
-
const pointerStartRef =
|
|
5281
|
+
const closeTimerStartTimeRef = import_react20.default.useRef(0);
|
|
5282
|
+
const offset4 = import_react20.default.useRef(0);
|
|
5283
|
+
const lastCloseTimerStartTimeRef = import_react20.default.useRef(0);
|
|
5284
|
+
const pointerStartRef = import_react20.default.useRef(null);
|
|
5217
5285
|
const [y, x] = position.split("-");
|
|
5218
|
-
const toastsHeightBefore =
|
|
5286
|
+
const toastsHeightBefore = import_react20.default.useMemo(() => {
|
|
5219
5287
|
return heights.reduce((prev, curr, reducerIndex) => {
|
|
5220
5288
|
if (reducerIndex >= heightIndex) {
|
|
5221
5289
|
return prev;
|
|
@@ -5227,7 +5295,7 @@ var Toast = (props) => {
|
|
|
5227
5295
|
heightIndex
|
|
5228
5296
|
]);
|
|
5229
5297
|
const isDocumentHidden = useIsDocumentHidden();
|
|
5230
|
-
const swipeDirections =
|
|
5298
|
+
const swipeDirections = import_react20.default.useMemo(() => {
|
|
5231
5299
|
var _props_swipeDirections;
|
|
5232
5300
|
return (_props_swipeDirections = props.swipeDirections) != null ? _props_swipeDirections : getDefaultSwipeDirections(position);
|
|
5233
5301
|
}, [
|
|
@@ -5236,19 +5304,19 @@ var Toast = (props) => {
|
|
|
5236
5304
|
]);
|
|
5237
5305
|
const invert = toast2.invert || ToasterInvert;
|
|
5238
5306
|
const disabled = toastType === "loading";
|
|
5239
|
-
offset4.current =
|
|
5307
|
+
offset4.current = import_react20.default.useMemo(() => heightIndex * gap + toastsHeightBefore, [
|
|
5240
5308
|
heightIndex,
|
|
5241
5309
|
toastsHeightBefore
|
|
5242
5310
|
]);
|
|
5243
|
-
|
|
5311
|
+
import_react20.default.useEffect(() => {
|
|
5244
5312
|
remainingTime.current = duration;
|
|
5245
5313
|
}, [
|
|
5246
5314
|
duration
|
|
5247
5315
|
]);
|
|
5248
|
-
|
|
5316
|
+
import_react20.default.useEffect(() => {
|
|
5249
5317
|
setMounted(true);
|
|
5250
5318
|
}, []);
|
|
5251
|
-
|
|
5319
|
+
import_react20.default.useEffect(() => {
|
|
5252
5320
|
const toastNode = toastRef.current;
|
|
5253
5321
|
if (toastNode) {
|
|
5254
5322
|
const height = toastNode.getBoundingClientRect().height;
|
|
@@ -5267,7 +5335,7 @@ var Toast = (props) => {
|
|
|
5267
5335
|
setHeights,
|
|
5268
5336
|
toast2.id
|
|
5269
5337
|
]);
|
|
5270
|
-
|
|
5338
|
+
import_react20.default.useLayoutEffect(() => {
|
|
5271
5339
|
if (!mounted) return;
|
|
5272
5340
|
const toastNode = toastRef.current;
|
|
5273
5341
|
const originalHeight = toastNode.style.height;
|
|
@@ -5303,7 +5371,7 @@ var Toast = (props) => {
|
|
|
5303
5371
|
toast2.action,
|
|
5304
5372
|
toast2.cancel
|
|
5305
5373
|
]);
|
|
5306
|
-
const deleteToast =
|
|
5374
|
+
const deleteToast = import_react20.default.useCallback(() => {
|
|
5307
5375
|
setRemoved(true);
|
|
5308
5376
|
setOffsetBeforeRemove(offset4.current);
|
|
5309
5377
|
setHeights((h60) => h60.filter((height) => height.toastId !== toast2.id));
|
|
@@ -5316,7 +5384,7 @@ var Toast = (props) => {
|
|
|
5316
5384
|
setHeights,
|
|
5317
5385
|
offset4
|
|
5318
5386
|
]);
|
|
5319
|
-
|
|
5387
|
+
import_react20.default.useEffect(() => {
|
|
5320
5388
|
if (toast2.promise && toastType === "loading" || toast2.duration === Infinity || toast2.type === "loading") return;
|
|
5321
5389
|
let timeoutId;
|
|
5322
5390
|
const pauseTimer = () => {
|
|
@@ -5348,7 +5416,7 @@ var Toast = (props) => {
|
|
|
5348
5416
|
isDocumentHidden,
|
|
5349
5417
|
deleteToast
|
|
5350
5418
|
]);
|
|
5351
|
-
|
|
5419
|
+
import_react20.default.useEffect(() => {
|
|
5352
5420
|
if (toast2.delete) {
|
|
5353
5421
|
deleteToast();
|
|
5354
5422
|
toast2.onDismiss == null ? void 0 : toast2.onDismiss.call(toast2, toast2);
|
|
@@ -5361,19 +5429,19 @@ var Toast = (props) => {
|
|
|
5361
5429
|
var _toast_classNames9;
|
|
5362
5430
|
if (icons == null ? void 0 : icons.loading) {
|
|
5363
5431
|
var _toast_classNames12;
|
|
5364
|
-
return /* @__PURE__ */
|
|
5432
|
+
return /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
5365
5433
|
className: cn(classNames == null ? void 0 : classNames.loader, toast2 == null ? void 0 : (_toast_classNames12 = toast2.classNames) == null ? void 0 : _toast_classNames12.loader, "sonner-loader"),
|
|
5366
5434
|
"data-visible": toastType === "loading"
|
|
5367
5435
|
}, icons.loading);
|
|
5368
5436
|
}
|
|
5369
|
-
return /* @__PURE__ */
|
|
5437
|
+
return /* @__PURE__ */ import_react20.default.createElement(Loader, {
|
|
5370
5438
|
className: cn(classNames == null ? void 0 : classNames.loader, toast2 == null ? void 0 : (_toast_classNames9 = toast2.classNames) == null ? void 0 : _toast_classNames9.loader),
|
|
5371
5439
|
visible: toastType === "loading"
|
|
5372
5440
|
});
|
|
5373
5441
|
}
|
|
5374
5442
|
const icon2 = toast2.icon || (icons == null ? void 0 : icons[toastType]) || getAsset(toastType);
|
|
5375
5443
|
var _toast_richColors, _icons_close;
|
|
5376
|
-
return /* @__PURE__ */
|
|
5444
|
+
return /* @__PURE__ */ import_react20.default.createElement("li", {
|
|
5377
5445
|
tabIndex: 0,
|
|
5378
5446
|
ref: toastRef,
|
|
5379
5447
|
className: cn(className2, toastClassname, classNames == null ? void 0 : classNames.toast, toast2 == null ? void 0 : (_toast_classNames = toast2.classNames) == null ? void 0 : _toast_classNames.toast, classNames == null ? void 0 : classNames[toastTypeKey], toast2 == null ? void 0 : (_toast_classNames1 = toast2.classNames) == null ? void 0 : _toast_classNames1[toastTypeKey]),
|
|
@@ -5497,7 +5565,7 @@ var Toast = (props) => {
|
|
|
5497
5565
|
(_toastRef_current = toastRef.current) == null ? void 0 : _toastRef_current.style.setProperty("--swipe-amount-x", `${swipeAmount.x}px`);
|
|
5498
5566
|
(_toastRef_current1 = toastRef.current) == null ? void 0 : _toastRef_current1.style.setProperty("--swipe-amount-y", `${swipeAmount.y}px`);
|
|
5499
5567
|
}
|
|
5500
|
-
}, closeButton && !toast2.jsx && toastType !== "loading" ? /* @__PURE__ */
|
|
5568
|
+
}, closeButton && !toast2.jsx && toastType !== "loading" ? /* @__PURE__ */ import_react20.default.createElement("button", {
|
|
5501
5569
|
"aria-label": closeButtonAriaLabel,
|
|
5502
5570
|
"data-disabled": disabled,
|
|
5503
5571
|
"data-close-button": true,
|
|
@@ -5507,19 +5575,19 @@ var Toast = (props) => {
|
|
|
5507
5575
|
toast2.onDismiss == null ? void 0 : toast2.onDismiss.call(toast2, toast2);
|
|
5508
5576
|
},
|
|
5509
5577
|
className: cn(classNames == null ? void 0 : classNames.closeButton, toast2 == null ? void 0 : (_toast_classNames2 = toast2.classNames) == null ? void 0 : _toast_classNames2.closeButton)
|
|
5510
|
-
}, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast2.icon || toast2.promise) && toast2.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast2.icon) ? /* @__PURE__ */
|
|
5578
|
+
}, (_icons_close = icons == null ? void 0 : icons.close) != null ? _icons_close : CloseIcon) : null, (toastType || toast2.icon || toast2.promise) && toast2.icon !== null && ((icons == null ? void 0 : icons[toastType]) !== null || toast2.icon) ? /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
5511
5579
|
"data-icon": "",
|
|
5512
5580
|
className: cn(classNames == null ? void 0 : classNames.icon, toast2 == null ? void 0 : (_toast_classNames3 = toast2.classNames) == null ? void 0 : _toast_classNames3.icon)
|
|
5513
|
-
}, toastType === "loading" ? toast2.icon || getLoadingIcon() : toast2.promise ? getLoadingIcon() : null, toastType !== "loading" ? icon2 : null) : null, /* @__PURE__ */
|
|
5581
|
+
}, toastType === "loading" ? toast2.icon || getLoadingIcon() : toast2.promise ? getLoadingIcon() : null, toastType !== "loading" ? icon2 : null) : null, /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
5514
5582
|
"data-content": "",
|
|
5515
5583
|
className: cn(classNames == null ? void 0 : classNames.content, toast2 == null ? void 0 : (_toast_classNames4 = toast2.classNames) == null ? void 0 : _toast_classNames4.content)
|
|
5516
|
-
}, /* @__PURE__ */
|
|
5584
|
+
}, /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
5517
5585
|
"data-title": "",
|
|
5518
5586
|
className: cn(classNames == null ? void 0 : classNames.title, toast2 == null ? void 0 : (_toast_classNames5 = toast2.classNames) == null ? void 0 : _toast_classNames5.title)
|
|
5519
|
-
}, toast2.jsx ? toast2.jsx : typeof toast2.title === "function" ? toast2.title() : toast2.title), toast2.description ? /* @__PURE__ */
|
|
5587
|
+
}, toast2.jsx ? toast2.jsx : typeof toast2.title === "function" ? toast2.title() : toast2.title), toast2.description ? /* @__PURE__ */ import_react20.default.createElement("div", {
|
|
5520
5588
|
"data-description": "",
|
|
5521
5589
|
className: cn(descriptionClassName, toastDescriptionClassname, classNames == null ? void 0 : classNames.description, toast2 == null ? void 0 : (_toast_classNames6 = toast2.classNames) == null ? void 0 : _toast_classNames6.description)
|
|
5522
|
-
}, typeof toast2.description === "function" ? toast2.description() : toast2.description) : null), /* @__PURE__ */
|
|
5590
|
+
}, typeof toast2.description === "function" ? toast2.description() : toast2.description) : null), /* @__PURE__ */ import_react20.default.isValidElement(toast2.cancel) ? toast2.cancel : toast2.cancel && isAction(toast2.cancel) ? /* @__PURE__ */ import_react20.default.createElement("button", {
|
|
5523
5591
|
"data-button": true,
|
|
5524
5592
|
"data-cancel": true,
|
|
5525
5593
|
style: toast2.cancelButtonStyle || cancelButtonStyle,
|
|
@@ -5530,7 +5598,7 @@ var Toast = (props) => {
|
|
|
5530
5598
|
deleteToast();
|
|
5531
5599
|
},
|
|
5532
5600
|
className: cn(classNames == null ? void 0 : classNames.cancelButton, toast2 == null ? void 0 : (_toast_classNames7 = toast2.classNames) == null ? void 0 : _toast_classNames7.cancelButton)
|
|
5533
|
-
}, toast2.cancel.label) : null, /* @__PURE__ */
|
|
5601
|
+
}, toast2.cancel.label) : null, /* @__PURE__ */ import_react20.default.isValidElement(toast2.action) ? toast2.action : toast2.action && isAction(toast2.action) ? /* @__PURE__ */ import_react20.default.createElement("button", {
|
|
5534
5602
|
"data-button": true,
|
|
5535
5603
|
"data-action": true,
|
|
5536
5604
|
style: toast2.actionButtonStyle || actionButtonStyle,
|
|
@@ -5592,13 +5660,13 @@ function assignOffset(defaultOffset, mobileOffset) {
|
|
|
5592
5660
|
});
|
|
5593
5661
|
return styles;
|
|
5594
5662
|
}
|
|
5595
|
-
var Toaster = /* @__PURE__ */
|
|
5663
|
+
var Toaster = /* @__PURE__ */ import_react20.default.forwardRef(function Toaster2(props, ref) {
|
|
5596
5664
|
const { id: id3, invert, position = "bottom-right", hotkey = [
|
|
5597
5665
|
"altKey",
|
|
5598
5666
|
"KeyT"
|
|
5599
5667
|
], expand, closeButton, className: className2, offset: offset4, mobileOffset, theme: theme2 = "light", richColors, duration, style: style2, visibleToasts = VISIBLE_TOASTS_AMOUNT, toastOptions, dir = getDocumentDirection(), gap = GAP, icons, customAriaLabel, containerAriaLabel = "Notifications" } = props;
|
|
5600
|
-
const [toasts, setToasts] =
|
|
5601
|
-
const filteredToasts =
|
|
5668
|
+
const [toasts, setToasts] = import_react20.default.useState([]);
|
|
5669
|
+
const filteredToasts = import_react20.default.useMemo(() => {
|
|
5602
5670
|
if (id3) {
|
|
5603
5671
|
return toasts.filter((toast2) => toast2.toasterId === id3);
|
|
5604
5672
|
}
|
|
@@ -5607,7 +5675,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5607
5675
|
toasts,
|
|
5608
5676
|
id3
|
|
5609
5677
|
]);
|
|
5610
|
-
const possiblePositions =
|
|
5678
|
+
const possiblePositions = import_react20.default.useMemo(() => {
|
|
5611
5679
|
return Array.from(new Set([
|
|
5612
5680
|
position
|
|
5613
5681
|
].concat(filteredToasts.filter((toast2) => toast2.position).map((toast2) => toast2.position))));
|
|
@@ -5615,15 +5683,15 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5615
5683
|
filteredToasts,
|
|
5616
5684
|
position
|
|
5617
5685
|
]);
|
|
5618
|
-
const [heights, setHeights] =
|
|
5619
|
-
const [expanded, setExpanded] =
|
|
5620
|
-
const [interacting, setInteracting] =
|
|
5621
|
-
const [actualTheme, setActualTheme] =
|
|
5622
|
-
const listRef =
|
|
5686
|
+
const [heights, setHeights] = import_react20.default.useState([]);
|
|
5687
|
+
const [expanded, setExpanded] = import_react20.default.useState(false);
|
|
5688
|
+
const [interacting, setInteracting] = import_react20.default.useState(false);
|
|
5689
|
+
const [actualTheme, setActualTheme] = import_react20.default.useState(theme2 !== "system" ? theme2 : typeof window !== "undefined" ? window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light");
|
|
5690
|
+
const listRef = import_react20.default.useRef(null);
|
|
5623
5691
|
const hotkeyLabel = hotkey.join("+").replace(/Key/g, "").replace(/Digit/g, "");
|
|
5624
|
-
const lastFocusedElementRef =
|
|
5625
|
-
const isFocusWithinRef =
|
|
5626
|
-
const removeToast =
|
|
5692
|
+
const lastFocusedElementRef = import_react20.default.useRef(null);
|
|
5693
|
+
const isFocusWithinRef = import_react20.default.useRef(false);
|
|
5694
|
+
const removeToast = import_react20.default.useCallback((toastToRemove) => {
|
|
5627
5695
|
setToasts((toasts2) => {
|
|
5628
5696
|
var _toasts_find;
|
|
5629
5697
|
if (!((_toasts_find = toasts2.find((toast2) => toast2.id === toastToRemove.id)) == null ? void 0 : _toasts_find.delete)) {
|
|
@@ -5632,7 +5700,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5632
5700
|
return toasts2.filter(({ id: id4 }) => id4 !== toastToRemove.id);
|
|
5633
5701
|
});
|
|
5634
5702
|
}, []);
|
|
5635
|
-
|
|
5703
|
+
import_react20.default.useEffect(() => {
|
|
5636
5704
|
return ToastState.subscribe((toast2) => {
|
|
5637
5705
|
if (toast2.dismiss) {
|
|
5638
5706
|
requestAnimationFrame(() => {
|
|
@@ -5666,7 +5734,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5666
5734
|
});
|
|
5667
5735
|
});
|
|
5668
5736
|
}, []);
|
|
5669
|
-
|
|
5737
|
+
import_react20.default.useEffect(() => {
|
|
5670
5738
|
if (theme2 !== "system") {
|
|
5671
5739
|
setActualTheme(theme2);
|
|
5672
5740
|
return;
|
|
@@ -5704,14 +5772,14 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5704
5772
|
}, [
|
|
5705
5773
|
theme2
|
|
5706
5774
|
]);
|
|
5707
|
-
|
|
5775
|
+
import_react20.default.useEffect(() => {
|
|
5708
5776
|
if (toasts.length <= 1) {
|
|
5709
5777
|
setExpanded(false);
|
|
5710
5778
|
}
|
|
5711
5779
|
}, [
|
|
5712
5780
|
toasts
|
|
5713
5781
|
]);
|
|
5714
|
-
|
|
5782
|
+
import_react20.default.useEffect(() => {
|
|
5715
5783
|
const handleKeyDown = (event) => {
|
|
5716
5784
|
var _listRef_current;
|
|
5717
5785
|
const isHotkeyPressed = hotkey.length > 0 && hotkey.every((key) => event[key] || event.code === key);
|
|
@@ -5729,7 +5797,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5729
5797
|
}, [
|
|
5730
5798
|
hotkey
|
|
5731
5799
|
]);
|
|
5732
|
-
|
|
5800
|
+
import_react20.default.useEffect(() => {
|
|
5733
5801
|
if (listRef.current) {
|
|
5734
5802
|
return () => {
|
|
5735
5803
|
if (lastFocusedElementRef.current) {
|
|
@@ -5746,7 +5814,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5746
5814
|
]);
|
|
5747
5815
|
return (
|
|
5748
5816
|
// Remove item from normal navigation flow, only available via hotkey
|
|
5749
|
-
/* @__PURE__ */
|
|
5817
|
+
/* @__PURE__ */ import_react20.default.createElement("section", {
|
|
5750
5818
|
ref,
|
|
5751
5819
|
"aria-label": customAriaLabel != null ? customAriaLabel : `${containerAriaLabel} ${hotkeyLabel}`,
|
|
5752
5820
|
tabIndex: -1,
|
|
@@ -5759,7 +5827,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5759
5827
|
var _heights_;
|
|
5760
5828
|
const [y, x] = position2.split("-");
|
|
5761
5829
|
if (!filteredToasts.length) return null;
|
|
5762
|
-
return /* @__PURE__ */
|
|
5830
|
+
return /* @__PURE__ */ import_react20.default.createElement("ol", {
|
|
5763
5831
|
key: position2,
|
|
5764
5832
|
dir: dir === "auto" ? getDocumentDirection() : dir,
|
|
5765
5833
|
tabIndex: -1,
|
|
@@ -5811,7 +5879,7 @@ var Toaster = /* @__PURE__ */ import_react19.default.forwardRef(function Toaster
|
|
|
5811
5879
|
onPointerUp: () => setInteracting(false)
|
|
5812
5880
|
}, filteredToasts.filter((toast2) => !toast2.position && index3 === 0 || toast2.position === position2).map((toast2, index4) => {
|
|
5813
5881
|
var _toastOptions_duration, _toastOptions_closeButton;
|
|
5814
|
-
return /* @__PURE__ */
|
|
5882
|
+
return /* @__PURE__ */ import_react20.default.createElement(Toast, {
|
|
5815
5883
|
key: toast2.id,
|
|
5816
5884
|
icons,
|
|
5817
5885
|
index: index4,
|
|
@@ -5879,7 +5947,7 @@ function createToasterHost() {
|
|
|
5879
5947
|
function renderToaster() {
|
|
5880
5948
|
if (root === null)
|
|
5881
5949
|
return;
|
|
5882
|
-
root.render((0,
|
|
5950
|
+
root.render((0, import_react21.createElement)(Toaster, {
|
|
5883
5951
|
theme: currentTheme(),
|
|
5884
5952
|
position,
|
|
5885
5953
|
// richColors:success=绿整条 / error=红整条 / warning=黄整条(Sonner 自带);
|
|
@@ -5945,7 +6013,7 @@ function createToasterHost() {
|
|
|
5945
6013
|
const palette = notifyPalette(payload.variant, currentTheme());
|
|
5946
6014
|
const duration = payload.durationMs;
|
|
5947
6015
|
const actions = payload.actions;
|
|
5948
|
-
const id3 = toast.custom(() => (0,
|
|
6016
|
+
const id3 = toast.custom(() => (0, import_react21.createElement)("div", {
|
|
5949
6017
|
style: {
|
|
5950
6018
|
display: "flex",
|
|
5951
6019
|
alignItems: "center",
|
|
@@ -5961,7 +6029,7 @@ function createToasterHost() {
|
|
|
5961
6029
|
fontSize: "14px",
|
|
5962
6030
|
lineHeight: "20px"
|
|
5963
6031
|
}
|
|
5964
|
-
}, (0,
|
|
6032
|
+
}, (0, import_react21.createElement)("span", {
|
|
5965
6033
|
style: {
|
|
5966
6034
|
flexShrink: 0,
|
|
5967
6035
|
width: "20px",
|
|
@@ -5974,7 +6042,7 @@ function createToasterHost() {
|
|
|
5974
6042
|
fontSize: "13px",
|
|
5975
6043
|
fontWeight: 700
|
|
5976
6044
|
}
|
|
5977
|
-
}, palette.glyph), (0,
|
|
6045
|
+
}, palette.glyph), (0, import_react21.createElement)("div", { style: { flex: 1, minWidth: 0 } }, (0, import_react21.createElement)("div", { style: { fontWeight: 600 } }, payload.message), payload.description !== void 0 ? (0, import_react21.createElement)("div", { style: { opacity: 0.9, fontSize: "13px", marginTop: "2px" } }, payload.description) : null), actions !== void 0 && actions.length > 0 ? (0, import_react21.createElement)("div", { style: { display: "flex", gap: "8px", flexShrink: 0 } }, ...actions.slice(0, 2).map((a) => (0, import_react21.createElement)(Button, {
|
|
5978
6046
|
variant: a.variant ?? "outline",
|
|
5979
6047
|
size: "md",
|
|
5980
6048
|
onClick: () => {
|
|
@@ -6048,7 +6116,7 @@ function notify(message, opts) {
|
|
|
6048
6116
|
}
|
|
6049
6117
|
|
|
6050
6118
|
// dist/ui/Segmented.js
|
|
6051
|
-
var
|
|
6119
|
+
var import_react22 = require("react");
|
|
6052
6120
|
function Segmented(props) {
|
|
6053
6121
|
ensureControls();
|
|
6054
6122
|
ensureControls();
|
|
@@ -6057,9 +6125,9 @@ function Segmented(props) {
|
|
|
6057
6125
|
const value = props.value;
|
|
6058
6126
|
const onChange = props.onChange;
|
|
6059
6127
|
const sliding = !multiple && props.items.length > 1;
|
|
6060
|
-
const rootRef = (0,
|
|
6061
|
-
const [thumb, setThumb] = (0,
|
|
6062
|
-
const measure = (0,
|
|
6128
|
+
const rootRef = (0, import_react22.useRef)(null);
|
|
6129
|
+
const [thumb, setThumb] = (0, import_react22.useState)(null);
|
|
6130
|
+
const measure = (0, import_react22.useCallback)(() => {
|
|
6063
6131
|
const sel = rootRef.current?.querySelector('.dshpc-seg__item[aria-pressed="true"]');
|
|
6064
6132
|
if (sel === void 0 || sel === null) {
|
|
6065
6133
|
setThumb(null);
|
|
@@ -6068,7 +6136,7 @@ function Segmented(props) {
|
|
|
6068
6136
|
const next = { left: sel.offsetLeft, top: sel.offsetTop, width: sel.offsetWidth, height: sel.offsetHeight };
|
|
6069
6137
|
setThumb((cur2) => cur2 !== null && cur2.left === next.left && cur2.top === next.top && cur2.width === next.width && cur2.height === next.height ? cur2 : next);
|
|
6070
6138
|
}, []);
|
|
6071
|
-
(0,
|
|
6139
|
+
(0, import_react22.useLayoutEffect)(() => {
|
|
6072
6140
|
if (!sliding) {
|
|
6073
6141
|
setThumb(null);
|
|
6074
6142
|
return;
|
|
@@ -6082,7 +6150,7 @@ function Segmented(props) {
|
|
|
6082
6150
|
return () => ro.disconnect();
|
|
6083
6151
|
}, [sliding, measure, value, size4, props.items, props.bordered, props.block]);
|
|
6084
6152
|
const renderer2 = getTooltipRenderer();
|
|
6085
|
-
return (0,
|
|
6153
|
+
return (0, import_react22.createElement)("div", {
|
|
6086
6154
|
role: "group",
|
|
6087
6155
|
"aria-label": props.label,
|
|
6088
6156
|
id: props.id,
|
|
@@ -6091,7 +6159,7 @@ function Segmented(props) {
|
|
|
6091
6159
|
className: `dshpc-seg dshpc-seg--${size4}${sliding ? " dshpc-seg--slide" : ""}${props.block === true ? " dshpc-seg--block" : ""}${props.bordered === true ? " dshpc-seg--bordered" : ""}${props.className !== void 0 ? ` ${props.className}` : ""}`,
|
|
6092
6160
|
style: props.style
|
|
6093
6161
|
}, [
|
|
6094
|
-
sliding && thumb !== null ? (0,
|
|
6162
|
+
sliding && thumb !== null ? (0, import_react22.createElement)("span", {
|
|
6095
6163
|
key: "__thumb__",
|
|
6096
6164
|
className: "dshpc-seg__thumb",
|
|
6097
6165
|
"aria-hidden": true,
|
|
@@ -6117,7 +6185,7 @@ function Segmented(props) {
|
|
|
6117
6185
|
onChange(item.value);
|
|
6118
6186
|
}
|
|
6119
6187
|
};
|
|
6120
|
-
const itemButton = (0,
|
|
6188
|
+
const itemButton = (0, import_react22.createElement)("button", {
|
|
6121
6189
|
key: item.value,
|
|
6122
6190
|
type: "button",
|
|
6123
6191
|
className: "dshpc-seg__item",
|
|
@@ -6125,7 +6193,7 @@ function Segmented(props) {
|
|
|
6125
6193
|
"aria-pressed": on,
|
|
6126
6194
|
disabled,
|
|
6127
6195
|
onClick: handle
|
|
6128
|
-
}, item.label, item.count !== void 0 && item.count > 0 ? (0,
|
|
6196
|
+
}, item.label, item.count !== void 0 && item.count > 0 ? (0, import_react22.createElement)("span", { className: "dshpc-seg__count" }, String(item.count)) : null, item.badge !== void 0 && item.badge > 0 ? (0, import_react22.createElement)("span", { className: "dshpc-seg__badge" }, String(item.badge)) : null);
|
|
6129
6197
|
if (item.tooltip !== void 0 && renderer2 !== void 0) {
|
|
6130
6198
|
return renderer2({ label: item.tooltip, side: "top", children: itemButton });
|
|
6131
6199
|
}
|
|
@@ -6135,11 +6203,11 @@ function Segmented(props) {
|
|
|
6135
6203
|
}
|
|
6136
6204
|
|
|
6137
6205
|
// dist/ui/Textarea.js
|
|
6138
|
-
var
|
|
6206
|
+
var import_react23 = require("react");
|
|
6139
6207
|
function Textarea(props) {
|
|
6140
6208
|
ensureControls();
|
|
6141
6209
|
const { value, onChange, placeholder: placeholder2, error, disabled, id: id3, rows, spellCheck, className: className2, style: style2 } = props;
|
|
6142
|
-
const box = (0,
|
|
6210
|
+
const box = (0, import_react23.createElement)("textarea", {
|
|
6143
6211
|
id: id3,
|
|
6144
6212
|
rows,
|
|
6145
6213
|
value,
|
|
@@ -6155,14 +6223,14 @@ function Textarea(props) {
|
|
|
6155
6223
|
});
|
|
6156
6224
|
if (props.hint === void 0)
|
|
6157
6225
|
return box;
|
|
6158
|
-
return (0,
|
|
6226
|
+
return (0, import_react23.createElement)("span", { className: "dshpc-fieldwrap dshpc-fieldwrap--block" }, box, (0, import_react23.createElement)(FieldHint, { text: props.hint }));
|
|
6159
6227
|
}
|
|
6160
6228
|
|
|
6161
6229
|
// dist/ui/Checkbox.js
|
|
6162
|
-
var
|
|
6230
|
+
var import_react24 = require("react");
|
|
6163
6231
|
function Checkbox(props) {
|
|
6164
6232
|
const { checked, onChange, label, accentColor, disabled, className: className2 } = props;
|
|
6165
|
-
return (0,
|
|
6233
|
+
return (0, import_react24.createElement)("label", {
|
|
6166
6234
|
className: `dshpc-checkbox${className2 !== void 0 && className2 !== "" ? ` ${className2}` : ""}`,
|
|
6167
6235
|
style: {
|
|
6168
6236
|
display: "flex",
|
|
@@ -6172,7 +6240,7 @@ function Checkbox(props) {
|
|
|
6172
6240
|
lineHeight: "var(--dshpc-line-md)",
|
|
6173
6241
|
cursor: disabled === true ? "default" : "pointer"
|
|
6174
6242
|
}
|
|
6175
|
-
}, (0,
|
|
6243
|
+
}, (0, import_react24.createElement)("input", {
|
|
6176
6244
|
type: "checkbox",
|
|
6177
6245
|
checked,
|
|
6178
6246
|
disabled,
|
|
@@ -6187,51 +6255,7 @@ function Checkbox(props) {
|
|
|
6187
6255
|
onChange: (event) => {
|
|
6188
6256
|
onChange(event.target.checked);
|
|
6189
6257
|
}
|
|
6190
|
-
}), label !== void 0 ? (0,
|
|
6191
|
-
}
|
|
6192
|
-
|
|
6193
|
-
// dist/ui/MarqueeText.js
|
|
6194
|
-
var import_react24 = require("react");
|
|
6195
|
-
function MarqueeText(props) {
|
|
6196
|
-
const outerRef = (0, import_react24.useRef)(null);
|
|
6197
|
-
const innerRef = (0, import_react24.useRef)(null);
|
|
6198
|
-
const [dist2, setDist] = (0, import_react24.useState)(0);
|
|
6199
|
-
const measure = (0, import_react24.useCallback)(() => {
|
|
6200
|
-
const outer = outerRef.current;
|
|
6201
|
-
const inner = innerRef.current;
|
|
6202
|
-
if (outer === null || inner === null)
|
|
6203
|
-
return;
|
|
6204
|
-
setDist(Math.max(0, Math.ceil(inner.scrollWidth - outer.clientWidth)));
|
|
6205
|
-
}, []);
|
|
6206
|
-
(0, import_react24.useLayoutEffect)(() => {
|
|
6207
|
-
const outer = outerRef.current;
|
|
6208
|
-
const inner = innerRef.current;
|
|
6209
|
-
if (outer === null || inner === null)
|
|
6210
|
-
return;
|
|
6211
|
-
measure();
|
|
6212
|
-
const ro = new ResizeObserver(measure);
|
|
6213
|
-
ro.observe(outer);
|
|
6214
|
-
ro.observe(inner);
|
|
6215
|
-
return () => {
|
|
6216
|
-
ro.disconnect();
|
|
6217
|
-
};
|
|
6218
|
-
}, [measure]);
|
|
6219
|
-
(0, import_react24.useEffect)(() => {
|
|
6220
|
-
measure();
|
|
6221
|
-
}, [props.text, measure]);
|
|
6222
|
-
const run = dist2 > 0;
|
|
6223
|
-
return (0, import_react24.createElement)("span", {
|
|
6224
|
-
ref: outerRef,
|
|
6225
|
-
className: (run ? "dshpc-mq dshpc-mq-run" : "dshpc-mq") + (props.className === void 0 ? "" : ` ${props.className}`),
|
|
6226
|
-
title: props.title,
|
|
6227
|
-
style: props.style
|
|
6228
|
-
}, (0, import_react24.createElement)("span", {
|
|
6229
|
-
ref: innerRef,
|
|
6230
|
-
className: "dshpc-mq-in",
|
|
6231
|
-
style: {
|
|
6232
|
-
...run ? { "--dshpc-mq-dist": `${-dist2}px`, "--dshpc-mq-dur": `${Math.max(3, Math.round(dist2 / 30))}s` } : null
|
|
6233
|
-
}
|
|
6234
|
-
}, props.text));
|
|
6258
|
+
}), label !== void 0 ? (0, import_react24.createElement)("span", null, label) : null);
|
|
6235
6259
|
}
|
|
6236
6260
|
|
|
6237
6261
|
// dist/ui/SectionHead.js
|
|
@@ -56847,7 +56871,7 @@ var docData = {
|
|
|
56847
56871
|
},
|
|
56848
56872
|
"prose": [
|
|
56849
56873
|
{
|
|
56850
|
-
"zh": "Picker\uFF1A\u5355 / \u591A\u9009\u3001\u4E0A\u9650\u3001\u641C\u7D22\u3001\u5206\u7EC4\u3001\u7A7A\u6001\uFF0C\u81EA\u7ED8\u3002\u952E\u76D8\uFF1AEsc \u5173\u3001\u2191\u2193 \u79FB\u6E38\u6807\u3001Enter \u9009\u3002\u7EAF\u903B\u8F91\u53EF\u5355\u7528\uFF1A`toGroups` / `filterGroups` / `toggleValue`\u3002",
|
|
56874
|
+
"zh": "Picker\uFF1A\u5355 / \u591A\u9009\u3001\u4E0A\u9650\u3001\u641C\u7D22\u3001\u5206\u7EC4\u3001\u7A7A\u6001\uFF0C\u81EA\u7ED8\u3002\u952E\u76D8\uFF1AEsc \u5173\u3001\u2191\u2193 \u79FB\u6E38\u6807\u3001Enter \u9009\u3002\u7EAF\u903B\u8F91\u53EF\u5355\u7528\uFF1A`toGroups` / `filterGroups` / `toggleValue`\u3002\u89E6\u53D1\u5668\u652F\u6301 width / minWidth / maxWidth \u7EA6\u675F\u5BBD\u5EA6\uFF1A\u5B9A\u5BBD\u5FFD\u7565\u53E6\u4E24\u8005\uFF1B\u5185\u5BB9\u8D85\u957F\u5219\u7701\u7565\u53F7 + hover \u8DD1\u9A6C\u706F\u3002\u83DC\u5355\u91CC\u7684\u9009\u9879\u8D85\u957F\u540C\u6837\u7701\u7565 + hover \u8DD1\u9A6C\u706F\uFF0C\u4E0D\u4F1A\u628A\u83DC\u5355\u6491\u51FA\u6A2A\u5411\u6EDA\u52A8\u6761\u3002",
|
|
56851
56875
|
"en": "Picker: single/multiple selection, cap, search, grouping, empty state \u2014 self-drawn. Keyboard: Esc closes, \u2191\u2193 move the cursor, Enter selects. Logic reusable standalone: `toGroups` / `filterGroups` / `toggleValue`."
|
|
56852
56876
|
},
|
|
56853
56877
|
{
|
|
@@ -57016,6 +57040,33 @@ var docData = {
|
|
|
57016
57040
|
"en": "Custom width / margin"
|
|
57017
57041
|
}
|
|
57018
57042
|
},
|
|
57043
|
+
{
|
|
57044
|
+
"name": "width",
|
|
57045
|
+
"type": "number | string",
|
|
57046
|
+
"def": "\u2014",
|
|
57047
|
+
"desc": {
|
|
57048
|
+
"zh": "\u5B9A\u5BBD\uFF08px \u6216\u4EFB\u610F CSS \u957F\u5EA6\uFF09\uFF1B\u7ED9\u4E86\u5373\u5FFD\u7565 minWidth / maxWidth\uFF0C\u89E6\u53D1\u5668\u9501\u5B9A\u6B64\u5BBD\uFF1B\u5185\u5BB9\u8D85\u957F\u5219\u7701\u7565 + hover \u8DD1\u9A6C\u706F",
|
|
57049
|
+
"en": "Fixed width (px or any CSS length); overrides minWidth/maxWidth and locks the trigger; overflow elides + hover marquee"
|
|
57050
|
+
}
|
|
57051
|
+
},
|
|
57052
|
+
{
|
|
57053
|
+
"name": "minWidth",
|
|
57054
|
+
"type": "number | string",
|
|
57055
|
+
"def": "120px\uFF08CSS \u9ED8\u8BA4\uFF09",
|
|
57056
|
+
"desc": {
|
|
57057
|
+
"zh": "\u6700\u5C0F\u5BBD\uFF1B\u5185\u5BB9\u4E0D\u5230\u6B64\u5BBD\u89E6\u53D1\u5668\u4E5F\u4E0D\u66F4\u7A84",
|
|
57058
|
+
"en": "Minimum width; trigger never narrower than this"
|
|
57059
|
+
}
|
|
57060
|
+
},
|
|
57061
|
+
{
|
|
57062
|
+
"name": "maxWidth",
|
|
57063
|
+
"type": "number | string",
|
|
57064
|
+
"def": "100%\uFF08CSS \u9ED8\u8BA4\uFF09",
|
|
57065
|
+
"desc": {
|
|
57066
|
+
"zh": "\u6700\u5927\u5BBD\uFF1B\u5185\u5BB9\u8D85\u8FC7\u6B64\u5BBD\u5219\u7701\u7565 + hover \u8DD1\u9A6C\u706F",
|
|
57067
|
+
"en": "Maximum width; overflow elides + hover marquee"
|
|
57068
|
+
}
|
|
57069
|
+
},
|
|
57019
57070
|
{
|
|
57020
57071
|
"name": "ariaLabel",
|
|
57021
57072
|
"type": "string",
|
|
@@ -61467,9 +61518,9 @@ function ReferencePage() {
|
|
|
61467
61518
|
"tbody",
|
|
61468
61519
|
null,
|
|
61469
61520
|
[
|
|
61470
|
-
[t3("buildCore"), `v${"0.
|
|
61471
|
-
[t3("buildDemo"), `v${"0.
|
|
61472
|
-
[t3("buildStamp"), "
|
|
61521
|
+
[t3("buildCore"), `v${"0.6.1"}`],
|
|
61522
|
+
[t3("buildDemo"), `v${"0.6.1"}`],
|
|
61523
|
+
[t3("buildStamp"), "261028-041151-097"]
|
|
61473
61524
|
].map(
|
|
61474
61525
|
([label, value]) => (0, import_react67.createElement)(
|
|
61475
61526
|
"tr",
|
|
@@ -61791,9 +61842,9 @@ function DemoPage() {
|
|
|
61791
61842
|
lineHeight: "14px"
|
|
61792
61843
|
}
|
|
61793
61844
|
},
|
|
61794
|
-
(0, import_react69.createElement)("span", null, `core v${"0.
|
|
61795
|
-
(0, import_react69.createElement)("span", null, `demo v${"0.
|
|
61796
|
-
(0, import_react69.createElement)("span", { style: { marginTop: "4px", fontSize: "9px" } }, "
|
|
61845
|
+
(0, import_react69.createElement)("span", null, `core v${"0.6.1"}`),
|
|
61846
|
+
(0, import_react69.createElement)("span", null, `demo v${"0.6.1"}`),
|
|
61847
|
+
(0, import_react69.createElement)("span", { style: { marginTop: "4px", fontSize: "9px" } }, "261028-041151-097")
|
|
61797
61848
|
)
|
|
61798
61849
|
)
|
|
61799
61850
|
),
|