@sia.soul/sia-react-ui 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Select-CJJ5LQap.d.ts → Select-GiTHMScg.d.cts} +4 -5
- package/dist/{Select-CJJ5LQap.d.cts → Select-rtDktLYY.d.ts} +4 -5
- package/dist/chart.cjs +731 -707
- package/dist/chart.css +1 -1
- package/dist/chart.js +3 -2
- package/dist/{chunk-6VXOLMKZ.js → chunk-5ZTWY3PG.js} +18 -1
- package/dist/{chunk-2RRTDU3N.js → chunk-EJ23MVR6.js} +3 -18
- package/dist/chunk-EJDPRAU2.js +36 -0
- package/dist/{chunk-IMZT6VCU.js → chunk-IHTODT53.js} +8 -5
- package/dist/{chunk-R4OWKIXJ.js → chunk-MJUTLEEE.js} +20 -8
- package/dist/{chunk-OQLDEVCF.js → chunk-PX6BOFTW.js} +10 -3
- package/dist/{chunk-OAC7BSUR.js → chunk-R7BVDN3Q.js} +91 -43
- package/dist/{chunk-Q4XNFMUH.js → chunk-S2JAJCLN.js} +6 -4
- package/dist/{chunk-NZAT2RUM.js → chunk-WHARTF2I.js} +10 -1
- package/dist/{chunk-I342FGQY.js → chunk-Z3T6RDQP.js} +1 -1
- package/dist/{core-DFYheaoJ.d.ts → core-CBtbeAms.d.cts} +2 -1
- package/dist/{core-De2pRX5w.d.cts → core-D8BSMfHD.d.ts} +2 -1
- package/dist/core.cjs +275 -210
- package/dist/core.css +294 -41
- package/dist/core.d.cts +3 -2
- package/dist/core.d.ts +3 -2
- package/dist/core.js +6 -5
- package/dist/index.cjs +2709 -2434
- package/dist/index.css +295 -42
- package/dist/index.d.cts +23 -9
- package/dist/index.d.ts +23 -9
- package/dist/index.js +414 -224
- package/dist/markdown-editor.cjs +52 -20
- package/dist/markdown-editor.d.cts +3 -1
- package/dist/markdown-editor.d.ts +3 -1
- package/dist/markdown-editor.js +2 -1
- package/dist/rich-text-editor.cjs +884 -864
- package/dist/rich-text-editor.d.cts +3 -1
- package/dist/rich-text-editor.d.ts +3 -1
- package/dist/rich-text-editor.js +4 -3
- package/dist/{select-date-range-DOyG1DGp.d.ts → select-date-range-CQ1vmze_.d.ts} +7 -4
- package/dist/{select-date-range-UyYrHex6.d.cts → select-date-range-DRmGaEzP.d.cts} +7 -4
- package/dist/select-date-range.cjs +972 -903
- package/dist/select-date-range.d.cts +3 -2
- package/dist/select-date-range.d.ts +3 -2
- package/dist/select-date-range.js +4 -3
- package/dist/shared-DAYZvZVu.d.cts +5 -0
- package/dist/shared-DAYZvZVu.d.ts +5 -0
- package/package.json +1 -1
package/dist/core.cjs
CHANGED
|
@@ -668,8 +668,8 @@ var coreIconPaths = {
|
|
|
668
668
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M15 5.2a3.5 3.5 0 0 1 0 6.6M16.2 14.5c2.9.5 4.4 2.3 4.9 5.5" })
|
|
669
669
|
] }),
|
|
670
670
|
settings: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
671
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
|
|
672
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "3.5" }),
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 4.8 10 2 14 2 14 4.8 15.68 5.49 17.66 3.51 20.49 6.34 18.51 8.32 19.2 10 22 10 22 14 19.2 14 18.51 15.68 20.49 17.66 17.66 20.49 15.68 18.51 14 19.2 14 22 10 22 10 19.2 8.32 18.51 6.34 20.49 3.51 17.66 5.49 15.68 4.8 14 2 14 2 10 4.8 10 5.49 8.32 3.51 6.34 6.34 3.51 8.32 5.49Z" })
|
|
673
673
|
] }),
|
|
674
674
|
edit: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
|
|
675
675
|
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M4 20h4l11-11a2.8 2.8 0 0 0-4-4L4 16v4Z" }),
|
|
@@ -1124,6 +1124,11 @@ var PopupPortal = (0, import_react4.forwardRef)(function PopupPortal2({
|
|
|
1124
1124
|
|
|
1125
1125
|
// src/components/shared.ts
|
|
1126
1126
|
var import_react5 = require("react");
|
|
1127
|
+
var PlaceholderModeContext = (0, import_react5.createContext)("default");
|
|
1128
|
+
function usePlaceholderMode(mode) {
|
|
1129
|
+
const inherited = (0, import_react5.useContext)(PlaceholderModeContext);
|
|
1130
|
+
return mode ?? inherited;
|
|
1131
|
+
}
|
|
1127
1132
|
function useControllableState({ value, defaultValue, onChange }) {
|
|
1128
1133
|
const [internalValue, setInternalValue] = (0, import_react5.useState)(defaultValue);
|
|
1129
1134
|
const controlled = value !== void 0;
|
|
@@ -2142,19 +2147,80 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
|
|
|
2142
2147
|
}) });
|
|
2143
2148
|
}
|
|
2144
2149
|
|
|
2150
|
+
// src/components/FloatingPlaceholder.tsx
|
|
2151
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2152
|
+
function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
|
|
2153
|
+
const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
|
|
2154
|
+
return {
|
|
2155
|
+
enabled,
|
|
2156
|
+
className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
|
|
2157
|
+
label: enabled ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
|
|
2158
|
+
};
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2145
2161
|
// src/components/Select.tsx
|
|
2162
|
+
var import_react14 = require("react");
|
|
2163
|
+
|
|
2164
|
+
// src/components/OverflowTags.tsx
|
|
2146
2165
|
var import_react13 = require("react");
|
|
2147
|
-
var
|
|
2166
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2167
|
+
function OverflowTags({ items, maxCount: maxCount2, className = "", tagClassName, restClassName = "" }) {
|
|
2168
|
+
const rootRef = (0, import_react13.useRef)(null);
|
|
2169
|
+
const measureRef = (0, import_react13.useRef)(null);
|
|
2170
|
+
const limit = Math.min(items.length, Math.max(0, Math.floor(maxCount2) || 0));
|
|
2171
|
+
const [visibleCount, setVisibleCount] = (0, import_react13.useState)(0);
|
|
2172
|
+
(0, import_react13.useLayoutEffect)(() => {
|
|
2173
|
+
const root = rootRef.current;
|
|
2174
|
+
const measure = measureRef.current;
|
|
2175
|
+
if (!root || !measure) return;
|
|
2176
|
+
const update = () => {
|
|
2177
|
+
const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
|
|
2178
|
+
const widths = Array.from(measure.children, (child) => child.getBoundingClientRect().width);
|
|
2179
|
+
let used = 0;
|
|
2180
|
+
let fitting = 0;
|
|
2181
|
+
for (let count2 = 1; count2 <= limit; count2 += 1) {
|
|
2182
|
+
used += widths[count2 - 1] + (count2 > 1 ? gap : 0);
|
|
2183
|
+
const rest = count2 < items.length ? gap + widths[limit + count2] : 0;
|
|
2184
|
+
if (used + rest <= root.clientWidth) fitting = count2;
|
|
2185
|
+
}
|
|
2186
|
+
setVisibleCount((previous) => previous === fitting ? previous : fitting);
|
|
2187
|
+
};
|
|
2188
|
+
update();
|
|
2189
|
+
const observer = new ResizeObserver(update);
|
|
2190
|
+
observer.observe(root);
|
|
2191
|
+
for (const child of measure.children) observer.observe(child);
|
|
2192
|
+
return () => observer.disconnect();
|
|
2193
|
+
}, [items, limit]);
|
|
2194
|
+
const count = Math.min(visibleCount, limit);
|
|
2195
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: rootRef, className: `sia-overflow-tags ${className}`.trim(), children: [
|
|
2196
|
+
items.slice(0, count).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
2197
|
+
items.length > count ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} sia-overflow-tags__rest ${restClassName}`.trim(), children: [
|
|
2198
|
+
"+",
|
|
2199
|
+
items.length - count
|
|
2200
|
+
] }) : null,
|
|
2201
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { ref: measureRef, className: "sia-overflow-tags__measure", "aria-hidden": "true", children: [
|
|
2202
|
+
items.slice(0, limit).map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: tagClassName, children: item.label }, item.key)),
|
|
2203
|
+
Array.from({ length: limit + 1 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: `${tagClassName} ${restClassName}`.trim(), children: [
|
|
2204
|
+
"+",
|
|
2205
|
+
items.length - index
|
|
2206
|
+
] }, `rest-${index}`))
|
|
2207
|
+
] })
|
|
2208
|
+
] });
|
|
2209
|
+
}
|
|
2210
|
+
|
|
2211
|
+
// src/components/Select.tsx
|
|
2212
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
2148
2213
|
function defaultFilterOption(query, option) {
|
|
2149
2214
|
return String(option.label).toLowerCase().includes(query.toLowerCase());
|
|
2150
2215
|
}
|
|
2151
|
-
var Select = (0,
|
|
2216
|
+
var Select = (0, import_react14.forwardRef)(function Select2({
|
|
2152
2217
|
options,
|
|
2153
2218
|
mode = "single",
|
|
2154
2219
|
value,
|
|
2155
2220
|
defaultValue,
|
|
2156
2221
|
onChange,
|
|
2157
2222
|
placeholder = "\u8BF7\u9009\u62E9",
|
|
2223
|
+
placeholderMode,
|
|
2158
2224
|
size = "medium",
|
|
2159
2225
|
status = "default",
|
|
2160
2226
|
allowClear = false,
|
|
@@ -2178,18 +2244,18 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2178
2244
|
onKeyDown,
|
|
2179
2245
|
...props
|
|
2180
2246
|
}, forwardedRef) {
|
|
2181
|
-
const fallbackId = (0,
|
|
2247
|
+
const fallbackId = (0, import_react14.useId)();
|
|
2182
2248
|
const selectId = id ?? fallbackId;
|
|
2183
2249
|
const listboxId = `${selectId}-listbox`;
|
|
2184
|
-
const rootRef = (0,
|
|
2185
|
-
const popupRef = (0,
|
|
2186
|
-
const searchRef = (0,
|
|
2187
|
-
const listRef = (0,
|
|
2188
|
-
const [open, setOpen] = (0,
|
|
2189
|
-
const [query, setQuery] = (0,
|
|
2190
|
-
const [activeIndex, setActiveIndex] = (0,
|
|
2191
|
-
const [scrollTop, setScrollTop] = (0,
|
|
2192
|
-
const deferredQuery = (0,
|
|
2250
|
+
const rootRef = (0, import_react14.useRef)(null);
|
|
2251
|
+
const popupRef = (0, import_react14.useRef)(null);
|
|
2252
|
+
const searchRef = (0, import_react14.useRef)(null);
|
|
2253
|
+
const listRef = (0, import_react14.useRef)(null);
|
|
2254
|
+
const [open, setOpen] = (0, import_react14.useState)(false);
|
|
2255
|
+
const [query, setQuery] = (0, import_react14.useState)("");
|
|
2256
|
+
const [activeIndex, setActiveIndex] = (0, import_react14.useState)(-1);
|
|
2257
|
+
const [scrollTop, setScrollTop] = (0, import_react14.useState)(0);
|
|
2258
|
+
const deferredQuery = (0, import_react14.useDeferredValue)(query.trim());
|
|
2193
2259
|
const initialValue = defaultValue === void 0 ? mode === "multiple" ? [] : null : defaultValue;
|
|
2194
2260
|
const [currentValue, setCurrentValue] = useControllableState({
|
|
2195
2261
|
value,
|
|
@@ -2204,19 +2270,19 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2204
2270
|
}
|
|
2205
2271
|
}
|
|
2206
2272
|
});
|
|
2207
|
-
const selectedValues = (0,
|
|
2273
|
+
const selectedValues = (0, import_react14.useMemo)(() => {
|
|
2208
2274
|
if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
|
|
2209
2275
|
return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
|
|
2210
2276
|
}, [currentValue, mode]);
|
|
2211
|
-
const selectedValueSet = (0,
|
|
2212
|
-
const availableOptions = (0,
|
|
2277
|
+
const selectedValueSet = (0, import_react14.useMemo)(() => new Set(selectedValues), [selectedValues]);
|
|
2278
|
+
const availableOptions = (0, import_react14.useMemo)(() => {
|
|
2213
2279
|
if (!allowInput) return options;
|
|
2214
2280
|
const optionValueSet = new Set(options.map((option) => option.value));
|
|
2215
2281
|
const selectedCustomOptions = selectedValues.filter((selectedValue) => !optionValueSet.has(selectedValue)).map((selectedValue) => ({ label: String(selectedValue), value: selectedValue }));
|
|
2216
2282
|
return selectedCustomOptions.length ? [...selectedCustomOptions, ...options] : options;
|
|
2217
2283
|
}, [allowInput, options, selectedValues]);
|
|
2218
|
-
const selectedOptions = (0,
|
|
2219
|
-
const filteredOptions = (0,
|
|
2284
|
+
const selectedOptions = (0, import_react14.useMemo)(() => selectedValues.map((selectedValue) => availableOptions.find((option) => option.value === selectedValue)).filter((option) => option !== void 0), [availableOptions, selectedValues]);
|
|
2285
|
+
const filteredOptions = (0, import_react14.useMemo)(() => deferredQuery ? availableOptions.filter((option) => filterOption(deferredQuery, option)) : availableOptions, [availableOptions, deferredQuery, filterOption]);
|
|
2220
2286
|
const inputValue = query.trim();
|
|
2221
2287
|
const exactInputOption = inputValue ? availableOptions.find((option) => String(option.value).toLowerCase() === inputValue.toLowerCase() || typeof option.label === "string" && option.label.toLowerCase() === inputValue.toLowerCase()) : void 0;
|
|
2222
2288
|
const canSubmitInput = allowInput && Boolean(inputValue) && !exactInputOption;
|
|
@@ -2230,7 +2296,7 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2230
2296
|
const renderedOptions = virtualEnabled ? filteredOptions.slice(virtualStart, virtualEnd) : filteredOptions;
|
|
2231
2297
|
const enabledFilteredOptions = filteredOptions.filter((option) => !option.disabled);
|
|
2232
2298
|
const allFilteredSelected = enabledFilteredOptions.length > 0 && enabledFilteredOptions.every((option) => selectedValueSet.has(option.value));
|
|
2233
|
-
(0,
|
|
2299
|
+
(0, import_react14.useEffect)(() => {
|
|
2234
2300
|
if (!open) return void 0;
|
|
2235
2301
|
function closeFromOutside(event) {
|
|
2236
2302
|
const target = event.target;
|
|
@@ -2239,7 +2305,7 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2239
2305
|
document.addEventListener("mousedown", closeFromOutside);
|
|
2240
2306
|
return () => document.removeEventListener("mousedown", closeFromOutside);
|
|
2241
2307
|
}, [open]);
|
|
2242
|
-
(0,
|
|
2308
|
+
(0, import_react14.useEffect)(() => {
|
|
2243
2309
|
if (open && (showSearch || allowInput)) searchRef.current?.focus();
|
|
2244
2310
|
}, [allowInput, open, showSearch]);
|
|
2245
2311
|
function firstEnabledIndex() {
|
|
@@ -2358,7 +2424,7 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2358
2424
|
function renderOption(option, renderedIndex) {
|
|
2359
2425
|
const optionIndex = virtualEnabled ? virtualStart + renderedIndex : renderedIndex;
|
|
2360
2426
|
const selected = selectedValueSet.has(option.value);
|
|
2361
|
-
return /* @__PURE__ */ (0,
|
|
2427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2362
2428
|
"div",
|
|
2363
2429
|
{
|
|
2364
2430
|
id: `${listboxId}-${optionIndex}`,
|
|
@@ -2371,22 +2437,21 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2371
2437
|
onMouseDown: (event) => event.preventDefault(),
|
|
2372
2438
|
onClick: () => selectOption(option),
|
|
2373
2439
|
children: [
|
|
2374
|
-
/* @__PURE__ */ (0,
|
|
2375
|
-
selected ? /* @__PURE__ */ (0,
|
|
2440
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: option.label }),
|
|
2441
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "check", size: 15 }) : null
|
|
2376
2442
|
]
|
|
2377
2443
|
},
|
|
2378
2444
|
`${typeof option.value}-${option.value}`
|
|
2379
2445
|
);
|
|
2380
2446
|
}
|
|
2381
|
-
const
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
2447
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
|
|
2448
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
|
|
2449
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
2385
2450
|
"button",
|
|
2386
2451
|
{
|
|
2387
2452
|
...props,
|
|
2388
2453
|
ref: forwardedRef,
|
|
2389
|
-
className:
|
|
2454
|
+
className: `sia-select__trigger${floating.className}`,
|
|
2390
2455
|
id: selectId,
|
|
2391
2456
|
type: "button",
|
|
2392
2457
|
role: "combobox",
|
|
@@ -2399,41 +2464,36 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2399
2464
|
onClick: () => open ? closeDropdown() : openDropdown(),
|
|
2400
2465
|
onKeyDown: handleTriggerKeyDown,
|
|
2401
2466
|
children: [
|
|
2402
|
-
multiple && hasValue ? /* @__PURE__ */ (0,
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
hiddenTagCount
|
|
2407
|
-
] }) : null
|
|
2408
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
|
|
2409
|
-
loading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
|
|
2410
|
-
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
2467
|
+
multiple && hasValue ? /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("span", { className: `sia-select__value${hasValue ? "" : " is-placeholder"}`, children: selectedOptions[0]?.label ?? placeholder }),
|
|
2468
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "sia-select__spinner", "aria-hidden": "true" }) : null,
|
|
2469
|
+
floating.label,
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { className: "sia-select__arrow", name: "chevron-down", size: 15 })
|
|
2411
2471
|
]
|
|
2412
2472
|
}
|
|
2413
2473
|
),
|
|
2414
|
-
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0,
|
|
2415
|
-
/* @__PURE__ */ (0,
|
|
2416
|
-
showSearch || allowInput ? /* @__PURE__ */ (0,
|
|
2417
|
-
/* @__PURE__ */ (0,
|
|
2418
|
-
/* @__PURE__ */ (0,
|
|
2474
|
+
allowClear && hasValue && !disabled && !loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "sia-select__clear", type: "button", "aria-label": "\u6E05\u7A7A\u9009\u62E9", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
2475
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-select__dropdown", children: [
|
|
2476
|
+
showSearch || allowInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { className: "sia-select__search", children: [
|
|
2477
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "search", size: 15 }),
|
|
2478
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { ref: searchRef, value: query, maxLength: inputMaxLength, onChange: handleSearchChange, onKeyDown: (event) => handleInteractionKeyDown(event, true), placeholder: searchPlaceholder, "aria-label": searchPlaceholder })
|
|
2419
2479
|
] }) : null,
|
|
2420
|
-
canSubmitInput ? /* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2422
|
-
/* @__PURE__ */ (0,
|
|
2480
|
+
canSubmitInput ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "sia-select__input-option", onMouseDown: (event) => event.preventDefault(), onClick: submitInputValue, children: [
|
|
2481
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "plus", size: 14 }),
|
|
2482
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
|
|
2423
2483
|
"\u4F7F\u7528\u201C",
|
|
2424
2484
|
inputValue,
|
|
2425
2485
|
"\u201D"
|
|
2426
2486
|
] })
|
|
2427
2487
|
] }) : null,
|
|
2428
|
-
multiple && showSelectAll ? /* @__PURE__ */ (0,
|
|
2429
|
-
/* @__PURE__ */ (0,
|
|
2430
|
-
/* @__PURE__ */ (0,
|
|
2431
|
-
/* @__PURE__ */ (0,
|
|
2488
|
+
multiple && showSelectAll ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "sia-select__actions", children: [
|
|
2489
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", disabled: allFilteredSelected || enabledFilteredOptions.length === 0, onClick: selectAllFiltered, children: "\u5168\u9009" }),
|
|
2490
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", disabled: !hasValue, onClick: clearSelection, children: "\u6E05\u9664" }),
|
|
2491
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
|
|
2432
2492
|
selectedValues.length,
|
|
2433
2493
|
" \u9879\u5DF2\u9009"
|
|
2434
2494
|
] })
|
|
2435
2495
|
] }) : null,
|
|
2436
|
-
/* @__PURE__ */ (0,
|
|
2496
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
2437
2497
|
"div",
|
|
2438
2498
|
{
|
|
2439
2499
|
ref: listRef,
|
|
@@ -2444,7 +2504,7 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2444
2504
|
"aria-multiselectable": multiple || void 0,
|
|
2445
2505
|
style: { maxHeight: listHeight },
|
|
2446
2506
|
onScroll: handleListScroll,
|
|
2447
|
-
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0,
|
|
2507
|
+
children: filteredOptions.length > 0 ? virtualEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { className: "sia-select__empty", children: notFoundContent })
|
|
2448
2508
|
}
|
|
2449
2509
|
)
|
|
2450
2510
|
] })
|
|
@@ -2452,9 +2512,9 @@ var Select = (0, import_react13.forwardRef)(function Select2({
|
|
|
2452
2512
|
});
|
|
2453
2513
|
|
|
2454
2514
|
// src/components/Input.tsx
|
|
2455
|
-
var
|
|
2456
|
-
var
|
|
2457
|
-
var Input = (0,
|
|
2515
|
+
var import_react15 = require("react");
|
|
2516
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
2517
|
+
var Input = (0, import_react15.forwardRef)(function Input2({
|
|
2458
2518
|
label,
|
|
2459
2519
|
hint,
|
|
2460
2520
|
status = "default",
|
|
@@ -2464,7 +2524,7 @@ var Input = (0, import_react14.forwardRef)(function Input2({
|
|
|
2464
2524
|
allowClear = false,
|
|
2465
2525
|
onClear,
|
|
2466
2526
|
showCount = false,
|
|
2467
|
-
placeholderMode
|
|
2527
|
+
placeholderMode,
|
|
2468
2528
|
placeholder,
|
|
2469
2529
|
className = "",
|
|
2470
2530
|
id,
|
|
@@ -2475,13 +2535,13 @@ var Input = (0, import_react14.forwardRef)(function Input2({
|
|
|
2475
2535
|
onChange,
|
|
2476
2536
|
...props
|
|
2477
2537
|
}, forwardedRef) {
|
|
2478
|
-
const fallbackId = (0,
|
|
2538
|
+
const fallbackId = (0, import_react15.useId)();
|
|
2479
2539
|
const inputId = id ?? fallbackId;
|
|
2480
|
-
const localRef = (0,
|
|
2481
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
2540
|
+
const localRef = (0, import_react15.useRef)(null);
|
|
2541
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
2482
2542
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
2483
2543
|
const hasValue = currentText.length > 0;
|
|
2484
|
-
const floatingPlaceholder = placeholderMode === "floating" && Boolean(placeholder);
|
|
2544
|
+
const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
|
|
2485
2545
|
const hintId = `${inputId}-hint`;
|
|
2486
2546
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
2487
2547
|
function setRef(node) {
|
|
@@ -2507,7 +2567,7 @@ var Input = (0, import_react14.forwardRef)(function Input2({
|
|
|
2507
2567
|
input2.focus();
|
|
2508
2568
|
onClear?.();
|
|
2509
2569
|
}
|
|
2510
|
-
const input = /* @__PURE__ */ (0,
|
|
2570
|
+
const input = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
2511
2571
|
"input",
|
|
2512
2572
|
{
|
|
2513
2573
|
...props,
|
|
@@ -2524,30 +2584,30 @@ var Input = (0, import_react14.forwardRef)(function Input2({
|
|
|
2524
2584
|
onChange: handleChange
|
|
2525
2585
|
}
|
|
2526
2586
|
);
|
|
2527
|
-
const control = /* @__PURE__ */ (0,
|
|
2528
|
-
prefix ? /* @__PURE__ */ (0,
|
|
2529
|
-
floatingPlaceholder ? /* @__PURE__ */ (0,
|
|
2587
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { 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: [
|
|
2588
|
+
prefix ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-input-control__affix", children: prefix }) : null,
|
|
2589
|
+
floatingPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "sia-input-control__input-wrap", children: [
|
|
2530
2590
|
input,
|
|
2531
|
-
/* @__PURE__ */ (0,
|
|
2591
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-input-control__floating-placeholder", "aria-hidden": "true", children: placeholder })
|
|
2532
2592
|
] }) : input,
|
|
2533
|
-
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0,
|
|
2534
|
-
suffix ? /* @__PURE__ */ (0,
|
|
2535
|
-
showCount ? /* @__PURE__ */ (0,
|
|
2593
|
+
allowClear && hasValue && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { className: "sia-input-control__clear", type: "button", "aria-label": "\u6E05\u7A7A\u8F93\u5165", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
|
|
2594
|
+
suffix ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sia-input-control__affix", children: suffix }) : null,
|
|
2595
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `sia-input-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
2536
2596
|
currentText.length,
|
|
2537
2597
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
2538
2598
|
] }) : null
|
|
2539
2599
|
] });
|
|
2540
|
-
if (!label && !hint) return /* @__PURE__ */ (0,
|
|
2541
|
-
return /* @__PURE__ */ (0,
|
|
2542
|
-
label ? /* @__PURE__ */ (0,
|
|
2600
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
2602
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: "sia-field__label", htmlFor: inputId, children: label }) : null,
|
|
2543
2603
|
control,
|
|
2544
|
-
hint ? /* @__PURE__ */ (0,
|
|
2604
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
2545
2605
|
] });
|
|
2546
2606
|
});
|
|
2547
2607
|
|
|
2548
2608
|
// src/components/Upload.tsx
|
|
2549
|
-
var
|
|
2550
|
-
var
|
|
2609
|
+
var import_react16 = require("react");
|
|
2610
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
2551
2611
|
var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
|
|
2552
2612
|
function UploadRoot({
|
|
2553
2613
|
accept,
|
|
@@ -2569,9 +2629,9 @@ function UploadRoot({
|
|
|
2569
2629
|
onDrop,
|
|
2570
2630
|
...props
|
|
2571
2631
|
}) {
|
|
2572
|
-
const inputRef = (0,
|
|
2573
|
-
const filesRef = (0,
|
|
2574
|
-
const id = (0,
|
|
2632
|
+
const inputRef = (0, import_react16.useRef)(null);
|
|
2633
|
+
const filesRef = (0, import_react16.useRef)(fileList ?? defaultFileList);
|
|
2634
|
+
const id = (0, import_react16.useId)();
|
|
2575
2635
|
const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
|
|
2576
2636
|
filesRef.current = files;
|
|
2577
2637
|
function emit(file, nextList) {
|
|
@@ -2630,7 +2690,7 @@ function UploadRoot({
|
|
|
2630
2690
|
const next = files.filter((item) => item.uid !== file.uid);
|
|
2631
2691
|
emit({ ...file, status: "ready" }, next);
|
|
2632
2692
|
}
|
|
2633
|
-
return /* @__PURE__ */ (0,
|
|
2693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
2634
2694
|
"div",
|
|
2635
2695
|
{
|
|
2636
2696
|
className: `sia-upload sia-upload--${listType} ${className}`.trim(),
|
|
@@ -2641,7 +2701,7 @@ function UploadRoot({
|
|
|
2641
2701
|
onDrop: handleDrop,
|
|
2642
2702
|
...props,
|
|
2643
2703
|
children: [
|
|
2644
|
-
/* @__PURE__ */ (0,
|
|
2704
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
2645
2705
|
"input",
|
|
2646
2706
|
{
|
|
2647
2707
|
ref: inputRef,
|
|
@@ -2655,40 +2715,40 @@ function UploadRoot({
|
|
|
2655
2715
|
onChange: handleFiles
|
|
2656
2716
|
}
|
|
2657
2717
|
),
|
|
2658
|
-
/* @__PURE__ */ (0,
|
|
2659
|
-
showUploadList && files.length ? /* @__PURE__ */ (0,
|
|
2660
|
-
/* @__PURE__ */ (0,
|
|
2661
|
-
/* @__PURE__ */ (0,
|
|
2662
|
-
file.status === "uploading" ? /* @__PURE__ */ (0,
|
|
2663
|
-
/* @__PURE__ */ (0,
|
|
2718
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "sia-upload__trigger", onClick: () => !disabled && inputRef.current?.click(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { icon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "upload", size: 16 }), disabled, children: "\u9009\u62E9\u6587\u4EF6" }) }),
|
|
2719
|
+
showUploadList && files.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "sia-upload__list", children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
|
|
2720
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
|
|
2721
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-upload__name", title: file.name, children: file.name }),
|
|
2722
|
+
file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-upload__progress", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { width: `${file.percent ?? 0}%` } }) }) : null,
|
|
2723
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void remove(file), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "close", size: 14 }) })
|
|
2664
2724
|
] }, file.uid)) }) : null
|
|
2665
2725
|
]
|
|
2666
2726
|
}
|
|
2667
2727
|
);
|
|
2668
2728
|
}
|
|
2669
2729
|
function UploadDragger({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }) {
|
|
2670
|
-
return /* @__PURE__ */ (0,
|
|
2671
|
-
/* @__PURE__ */ (0,
|
|
2672
|
-
/* @__PURE__ */ (0,
|
|
2673
|
-
/* @__PURE__ */ (0,
|
|
2730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UploadRoot, { ...props, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "sia-upload-dragger__content", children: [
|
|
2731
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "upload", size: 28 }),
|
|
2732
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: "\u70B9\u51FB\u6216\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20" }),
|
|
2733
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: hint })
|
|
2674
2734
|
] }) });
|
|
2675
2735
|
}
|
|
2676
2736
|
var Upload = Object.assign(UploadRoot, { Dragger: UploadDragger, LIST_IGNORE });
|
|
2677
2737
|
|
|
2678
2738
|
// src/components/Modal.tsx
|
|
2679
|
-
var
|
|
2739
|
+
var import_react17 = require("react");
|
|
2680
2740
|
var import_client2 = require("react-dom/client");
|
|
2681
|
-
var
|
|
2741
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
2682
2742
|
var modalHandles = /* @__PURE__ */ new Set();
|
|
2683
2743
|
var MODAL_MOTION_DURATION = 220;
|
|
2684
2744
|
var typeIcons = {
|
|
2685
|
-
info: /* @__PURE__ */ (0,
|
|
2686
|
-
success: /* @__PURE__ */ (0,
|
|
2687
|
-
warning: /* @__PURE__ */ (0,
|
|
2688
|
-
error: /* @__PURE__ */ (0,
|
|
2689
|
-
confirm: /* @__PURE__ */ (0,
|
|
2745
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "info", size: 23 }),
|
|
2746
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "circle-check", size: 23 }),
|
|
2747
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "warning", size: 23 }),
|
|
2748
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "circle-close", size: 23 }),
|
|
2749
|
+
confirm: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "question", size: 23 })
|
|
2690
2750
|
};
|
|
2691
|
-
var ModalRoot = (0,
|
|
2751
|
+
var ModalRoot = (0, import_react17.forwardRef)(function Modal({
|
|
2692
2752
|
open,
|
|
2693
2753
|
title,
|
|
2694
2754
|
children,
|
|
@@ -2715,20 +2775,20 @@ var ModalRoot = (0, import_react16.forwardRef)(function Modal({
|
|
|
2715
2775
|
style,
|
|
2716
2776
|
...props
|
|
2717
2777
|
}, forwardedRef) {
|
|
2718
|
-
const localRef = (0,
|
|
2719
|
-
const titleId = (0,
|
|
2720
|
-
const [submitting, setSubmitting] = (0,
|
|
2721
|
-
const [rendered, setRendered] = (0,
|
|
2722
|
-
const [closing, setClosing] = (0,
|
|
2723
|
-
const afterOpenChangeRef = (0,
|
|
2778
|
+
const localRef = (0, import_react17.useRef)(null);
|
|
2779
|
+
const titleId = (0, import_react17.useId)();
|
|
2780
|
+
const [submitting, setSubmitting] = (0, import_react17.useState)(false);
|
|
2781
|
+
const [rendered, setRendered] = (0, import_react17.useState)(open);
|
|
2782
|
+
const [closing, setClosing] = (0, import_react17.useState)(false);
|
|
2783
|
+
const afterOpenChangeRef = (0, import_react17.useRef)(afterOpenChange);
|
|
2724
2784
|
afterOpenChangeRef.current = afterOpenChange;
|
|
2725
|
-
const submitLock = (0,
|
|
2726
|
-
(0,
|
|
2785
|
+
const submitLock = (0, import_react17.useRef)(false);
|
|
2786
|
+
(0, import_react17.useEffect)(() => {
|
|
2727
2787
|
if (!open || !rendered) return void 0;
|
|
2728
2788
|
const timer = window.setTimeout(() => afterOpenChangeRef.current?.(true), MODAL_MOTION_DURATION);
|
|
2729
2789
|
return () => window.clearTimeout(timer);
|
|
2730
2790
|
}, [open, rendered]);
|
|
2731
|
-
(0,
|
|
2791
|
+
(0, import_react17.useEffect)(() => {
|
|
2732
2792
|
if (open) {
|
|
2733
2793
|
setRendered(true);
|
|
2734
2794
|
setClosing(false);
|
|
@@ -2784,11 +2844,11 @@ var ModalRoot = (0, import_react16.forwardRef)(function Modal({
|
|
|
2784
2844
|
"--sia-modal-width": typeof width === "number" ? `${width}px` : width
|
|
2785
2845
|
};
|
|
2786
2846
|
const loading = submitting || confirmLoading;
|
|
2787
|
-
const defaultFooter = /* @__PURE__ */ (0,
|
|
2788
|
-
showCancel ? /* @__PURE__ */ (0,
|
|
2789
|
-
/* @__PURE__ */ (0,
|
|
2847
|
+
const defaultFooter = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
|
|
2848
|
+
showCancel ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { ...cancelButtonProps, onClick: requestClose, disabled: loading || cancelButtonProps?.disabled, children: cancelText }) : null,
|
|
2849
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { variant: "primary", ...okButtonProps, onClick: handleOk, loading, children: okText })
|
|
2790
2850
|
] });
|
|
2791
|
-
return /* @__PURE__ */ (0,
|
|
2851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(OverlayPortal, { container: getContainer, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
2792
2852
|
"div",
|
|
2793
2853
|
{
|
|
2794
2854
|
className: `sia-modal-root${centered ? " sia-modal-root--centered" : ""}`,
|
|
@@ -2797,7 +2857,7 @@ var ModalRoot = (0, import_react16.forwardRef)(function Modal({
|
|
|
2797
2857
|
onMouseDown: (event) => {
|
|
2798
2858
|
if (event.target === event.currentTarget && maskClosable) requestClose();
|
|
2799
2859
|
},
|
|
2800
|
-
children: /* @__PURE__ */ (0,
|
|
2860
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
|
|
2801
2861
|
"div",
|
|
2802
2862
|
{
|
|
2803
2863
|
ref: setRef,
|
|
@@ -2809,15 +2869,15 @@ var ModalRoot = (0, import_react16.forwardRef)(function Modal({
|
|
|
2809
2869
|
tabIndex: -1,
|
|
2810
2870
|
...props,
|
|
2811
2871
|
children: [
|
|
2812
|
-
/* @__PURE__ */ (0,
|
|
2813
|
-
/* @__PURE__ */ (0,
|
|
2814
|
-
typeIcons[type] ? /* @__PURE__ */ (0,
|
|
2815
|
-
title ? /* @__PURE__ */ (0,
|
|
2872
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-modal__header", children: [
|
|
2873
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "sia-modal__heading", children: [
|
|
2874
|
+
typeIcons[type] ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sia-modal__type-icon", "aria-hidden": "true", children: typeIcons[type] }) : null,
|
|
2875
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { id: titleId, children: title }) : null
|
|
2816
2876
|
] }),
|
|
2817
|
-
closable ? /* @__PURE__ */ (0,
|
|
2877
|
+
closable ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "sia-modal__close", "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846", onClick: requestClose, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "close", size: 17 }) }) : null
|
|
2818
2878
|
] }),
|
|
2819
|
-
children !== void 0 ? /* @__PURE__ */ (0,
|
|
2820
|
-
footer !== null ? /* @__PURE__ */ (0,
|
|
2879
|
+
children !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sia-modal__body", children }) : null,
|
|
2880
|
+
footer !== null ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sia-modal__footer", children: footer ?? defaultFooter }) : null
|
|
2821
2881
|
]
|
|
2822
2882
|
}
|
|
2823
2883
|
)
|
|
@@ -2851,7 +2911,7 @@ function openModal(config) {
|
|
|
2851
2911
|
cleanupTimer = window.setTimeout(cleanup, MODAL_MOTION_DURATION);
|
|
2852
2912
|
}
|
|
2853
2913
|
function render() {
|
|
2854
|
-
root.render(/* @__PURE__ */ (0,
|
|
2914
|
+
root.render(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ModalRoot, { ...currentConfig, open: currentOpen, onOpenChange: (nextOpen) => {
|
|
2855
2915
|
currentConfig.onOpenChange?.(nextOpen);
|
|
2856
2916
|
if (!nextOpen) closeWithMotion();
|
|
2857
2917
|
} }));
|
|
@@ -2893,7 +2953,7 @@ var Modal2 = Object.assign(ModalRoot, {
|
|
|
2893
2953
|
|
|
2894
2954
|
// src/components/Message.tsx
|
|
2895
2955
|
var import_client3 = require("react-dom/client");
|
|
2896
|
-
var
|
|
2956
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
2897
2957
|
var messageSeed = 0;
|
|
2898
2958
|
var messageRoot = null;
|
|
2899
2959
|
var messageContainer = null;
|
|
@@ -2902,11 +2962,11 @@ var defaultDuration = 3;
|
|
|
2902
2962
|
var maxCount = 5;
|
|
2903
2963
|
var messageTimers = /* @__PURE__ */ new Map();
|
|
2904
2964
|
var messageIcons = {
|
|
2905
|
-
info: /* @__PURE__ */ (0,
|
|
2906
|
-
success: /* @__PURE__ */ (0,
|
|
2907
|
-
warning: /* @__PURE__ */ (0,
|
|
2908
|
-
error: /* @__PURE__ */ (0,
|
|
2909
|
-
loading: /* @__PURE__ */ (0,
|
|
2965
|
+
info: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "info", size: 18 }),
|
|
2966
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "circle-check", size: 18 }),
|
|
2967
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "warning", size: 18 }),
|
|
2968
|
+
error: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "circle-close", size: 18 }),
|
|
2969
|
+
loading: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "loader", size: 18, spin: true })
|
|
2910
2970
|
};
|
|
2911
2971
|
function ensureMessageRoot() {
|
|
2912
2972
|
if (typeof document === "undefined") return false;
|
|
@@ -2920,10 +2980,10 @@ function ensureMessageRoot() {
|
|
|
2920
2980
|
}
|
|
2921
2981
|
function renderMessages() {
|
|
2922
2982
|
if (!ensureMessageRoot()) return;
|
|
2923
|
-
messageRoot.render(/* @__PURE__ */ (0,
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2926
|
-
item.closable ? /* @__PURE__ */ (0,
|
|
2983
|
+
messageRoot.render(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "sia-message-list", "aria-live": "polite", children: messageItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `sia-message sia-message--${item.type}`, role: item.type === "loading" ? "status" : "alert", children: [
|
|
2984
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-message__icon", "aria-hidden": "true", children: messageIcons[item.type] }),
|
|
2985
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sia-message__content", children: item.content }),
|
|
2986
|
+
item.closable ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { type: "button", className: "sia-message__close", "aria-label": "\u5173\u95ED\u63D0\u793A", onClick: () => closeMessage(item.key), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "close", size: 14 }) }) : null
|
|
2927
2987
|
] }, item.key)) }));
|
|
2928
2988
|
}
|
|
2929
2989
|
function closeMessage(key) {
|
|
@@ -2989,37 +3049,39 @@ var message = {
|
|
|
2989
3049
|
};
|
|
2990
3050
|
|
|
2991
3051
|
// src/components/Breadcrumb.tsx
|
|
2992
|
-
var
|
|
3052
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
2993
3053
|
function Breadcrumb({ items, separator = "/", itemRender, className = "", ...props }) {
|
|
2994
|
-
return /* @__PURE__ */ (0,
|
|
3054
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("nav", { "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", ...props, className: `sia-breadcrumb ${className}`.trim(), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("ol", { className: "sia-breadcrumb__list", children: items.map((item, index) => {
|
|
2995
3055
|
const current = index === items.length - 1;
|
|
2996
|
-
const content = /* @__PURE__ */ (0,
|
|
2997
|
-
item.icon ? /* @__PURE__ */ (0,
|
|
2998
|
-
/* @__PURE__ */ (0,
|
|
3056
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
|
|
3057
|
+
item.icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__icon", "aria-hidden": "true", children: item.icon }) : null,
|
|
3058
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__title", children: item.title })
|
|
2999
3059
|
] });
|
|
3000
3060
|
const custom = itemRender?.(item, index, items);
|
|
3001
|
-
const label = item.disabled ? /* @__PURE__ */ (0,
|
|
3002
|
-
return /* @__PURE__ */ (0,
|
|
3003
|
-
/* @__PURE__ */ (0,
|
|
3061
|
+
const label = item.disabled ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__label", "aria-disabled": "true", children: content }) : custom !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__label", children: custom }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("a", { className: "sia-breadcrumb__label", href: item.href, target: item.target, rel: item.target === "_blank" ? "noopener noreferrer" : void 0, onClick: item.onClick, children: content }) : item.onClick ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { className: "sia-breadcrumb__label", variant: "text", onClick: item.onClick, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__label", children: content });
|
|
3062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("li", { className: `sia-breadcrumb__item${current ? " is-current" : ""}${item.disabled ? " is-disabled" : ""}`, children: [
|
|
3063
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "sia-breadcrumb__entry", "aria-current": current ? "page" : void 0, children: [
|
|
3004
3064
|
label,
|
|
3005
|
-
item.menu?.items.length ? /* @__PURE__ */ (0,
|
|
3065
|
+
item.menu?.items.length ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Dropdown, { menu: item.menu, trigger: ["click"], disabled: item.disabled, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { className: "sia-breadcrumb__menu-trigger", variant: "text", size: "small", disabled: item.disabled, "aria-label": `\u5C55\u5F00${typeof item.title === "string" ? item.title : "\u5C42\u7EA7"}\u83DC\u5355`, icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-down", size: 12 }) }) }) : null
|
|
3006
3066
|
] }),
|
|
3007
|
-
!current ? /* @__PURE__ */ (0,
|
|
3067
|
+
!current ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sia-breadcrumb__separator", "aria-hidden": "true", children: item.separator === void 0 ? separator : item.separator }) : null
|
|
3008
3068
|
] }, item.key ?? index);
|
|
3009
3069
|
}) }) });
|
|
3010
3070
|
}
|
|
3011
3071
|
|
|
3012
3072
|
// src/components/Typography.tsx
|
|
3013
|
-
var
|
|
3073
|
+
var import_react19 = require("react");
|
|
3014
3074
|
|
|
3015
3075
|
// src/components/TextArea.tsx
|
|
3016
|
-
var
|
|
3017
|
-
var
|
|
3018
|
-
var TextArea = (0,
|
|
3076
|
+
var import_react18 = require("react");
|
|
3077
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
3078
|
+
var TextArea = (0, import_react18.forwardRef)(function TextArea2({
|
|
3019
3079
|
label,
|
|
3020
3080
|
hint,
|
|
3021
3081
|
status = "default",
|
|
3022
3082
|
showCount = false,
|
|
3083
|
+
placeholder,
|
|
3084
|
+
placeholderMode,
|
|
3023
3085
|
className = "",
|
|
3024
3086
|
id,
|
|
3025
3087
|
disabled,
|
|
@@ -3029,18 +3091,19 @@ var TextArea = (0, import_react17.forwardRef)(function TextArea2({
|
|
|
3029
3091
|
onChange,
|
|
3030
3092
|
...props
|
|
3031
3093
|
}, ref) {
|
|
3032
|
-
const fallbackId = (0,
|
|
3094
|
+
const fallbackId = (0, import_react18.useId)();
|
|
3033
3095
|
const textAreaId = id ?? fallbackId;
|
|
3034
|
-
const [uncontrolledValue, setUncontrolledValue] = (0,
|
|
3096
|
+
const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
|
|
3035
3097
|
const currentText = value !== void 0 ? String(value) : uncontrolledValue;
|
|
3098
|
+
const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: currentText.length > 0 });
|
|
3036
3099
|
const hintId = `${textAreaId}-hint`;
|
|
3037
3100
|
const describedBy = [props["aria-describedby"], hint ? hintId : null].filter(Boolean).join(" ") || void 0;
|
|
3038
3101
|
function handleChange(event) {
|
|
3039
3102
|
setUncontrolledValue(event.target.value);
|
|
3040
3103
|
onChange?.(event);
|
|
3041
3104
|
}
|
|
3042
|
-
const control = /* @__PURE__ */ (0,
|
|
3043
|
-
/* @__PURE__ */ (0,
|
|
3105
|
+
const control = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
|
|
3106
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
3044
3107
|
"textarea",
|
|
3045
3108
|
{
|
|
3046
3109
|
...props,
|
|
@@ -3051,26 +3114,28 @@ var TextArea = (0, import_react17.forwardRef)(function TextArea2({
|
|
|
3051
3114
|
value,
|
|
3052
3115
|
defaultValue,
|
|
3053
3116
|
maxLength,
|
|
3117
|
+
placeholder,
|
|
3054
3118
|
"aria-describedby": describedBy,
|
|
3055
3119
|
"aria-invalid": status === "error" || void 0,
|
|
3056
3120
|
onChange: handleChange
|
|
3057
3121
|
}
|
|
3058
3122
|
),
|
|
3059
|
-
|
|
3123
|
+
floating.label,
|
|
3124
|
+
showCount ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-textarea-control__count${maxLength !== void 0 && currentText.length >= maxLength ? " is-limit" : ""}`, "aria-live": "polite", children: [
|
|
3060
3125
|
currentText.length,
|
|
3061
3126
|
maxLength !== void 0 ? `/${maxLength}` : null
|
|
3062
3127
|
] }) : null
|
|
3063
3128
|
] });
|
|
3064
|
-
if (!label && !hint) return /* @__PURE__ */ (0,
|
|
3065
|
-
return /* @__PURE__ */ (0,
|
|
3066
|
-
label ? /* @__PURE__ */ (0,
|
|
3129
|
+
if (!label && !hint) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: `sia-field ${className}`.trim(), children: control });
|
|
3130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: `sia-field ${className}`.trim(), children: [
|
|
3131
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("label", { className: "sia-field__label", htmlFor: textAreaId, children: label }) : null,
|
|
3067
3132
|
control,
|
|
3068
|
-
hint ? /* @__PURE__ */ (0,
|
|
3133
|
+
hint ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { id: hintId, className: `sia-field__hint sia-field__hint--${status}`, children: hint }) : null
|
|
3069
3134
|
] });
|
|
3070
3135
|
});
|
|
3071
3136
|
|
|
3072
3137
|
// src/components/Typography.tsx
|
|
3073
|
-
var
|
|
3138
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
3074
3139
|
function TypographyContent({
|
|
3075
3140
|
as: Tag2 = "span",
|
|
3076
3141
|
type,
|
|
@@ -3089,26 +3154,26 @@ function TypographyContent({
|
|
|
3089
3154
|
className = "",
|
|
3090
3155
|
...props
|
|
3091
3156
|
}) {
|
|
3092
|
-
const contentRef = (0,
|
|
3093
|
-
const editRef = (0,
|
|
3094
|
-
const timer = (0,
|
|
3095
|
-
const [localText, setLocalText] = (0,
|
|
3096
|
-
const [draft, setDraft] = (0,
|
|
3097
|
-
const [editing, setEditing] = (0,
|
|
3098
|
-
const [copied, setCopied] = (0,
|
|
3099
|
-
const [copyError, setCopyError] = (0,
|
|
3100
|
-
const [expanded, setExpanded] = (0,
|
|
3101
|
-
const [overflow, setOverflow] = (0,
|
|
3157
|
+
const contentRef = (0, import_react19.useRef)(null);
|
|
3158
|
+
const editRef = (0, import_react19.useRef)(null);
|
|
3159
|
+
const timer = (0, import_react19.useRef)();
|
|
3160
|
+
const [localText, setLocalText] = (0, import_react19.useState)();
|
|
3161
|
+
const [draft, setDraft] = (0, import_react19.useState)("");
|
|
3162
|
+
const [editing, setEditing] = (0, import_react19.useState)(false);
|
|
3163
|
+
const [copied, setCopied] = (0, import_react19.useState)(false);
|
|
3164
|
+
const [copyError, setCopyError] = (0, import_react19.useState)(false);
|
|
3165
|
+
const [expanded, setExpanded] = (0, import_react19.useState)(false);
|
|
3166
|
+
const [overflow, setOverflow] = (0, import_react19.useState)(false);
|
|
3102
3167
|
const editConfig = typeof editable === "object" ? editable : void 0;
|
|
3103
3168
|
const content = editConfig?.text ?? localText ?? children;
|
|
3104
3169
|
const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
|
|
3105
3170
|
const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
|
|
3106
3171
|
const expandable = typeof ellipsis === "object" && ellipsis.expandable;
|
|
3107
|
-
(0,
|
|
3172
|
+
(0, import_react19.useEffect)(() => {
|
|
3108
3173
|
setLocalText(void 0);
|
|
3109
3174
|
}, [children]);
|
|
3110
|
-
(0,
|
|
3111
|
-
(0,
|
|
3175
|
+
(0, import_react19.useEffect)(() => () => clearTimeout(timer.current), []);
|
|
3176
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
3112
3177
|
const element = contentRef.current;
|
|
3113
3178
|
if (!element || !ellipsis || editing || expanded) return;
|
|
3114
3179
|
const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
|
|
@@ -3139,15 +3204,15 @@ function TypographyContent({
|
|
|
3139
3204
|
requestAnimationFrame(() => editRef.current?.focus());
|
|
3140
3205
|
}
|
|
3141
3206
|
let formatted = content;
|
|
3142
|
-
if (strong) formatted = /* @__PURE__ */ (0,
|
|
3143
|
-
if (italic) formatted = /* @__PURE__ */ (0,
|
|
3144
|
-
if (underline) formatted = /* @__PURE__ */ (0,
|
|
3145
|
-
if (deleted) formatted = /* @__PURE__ */ (0,
|
|
3146
|
-
if (mark) formatted = /* @__PURE__ */ (0,
|
|
3147
|
-
if (code) formatted = /* @__PURE__ */ (0,
|
|
3148
|
-
if (keyboard) formatted = /* @__PURE__ */ (0,
|
|
3149
|
-
return /* @__PURE__ */ (0,
|
|
3150
|
-
/* @__PURE__ */ (0,
|
|
3207
|
+
if (strong) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: formatted });
|
|
3208
|
+
if (italic) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("em", { children: formatted });
|
|
3209
|
+
if (underline) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("u", { children: formatted });
|
|
3210
|
+
if (deleted) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("del", { children: formatted });
|
|
3211
|
+
if (mark) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("mark", { children: formatted });
|
|
3212
|
+
if (code) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("code", { children: formatted });
|
|
3213
|
+
if (keyboard) formatted = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("kbd", { children: formatted });
|
|
3214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Tag2, { ...props, "aria-disabled": disabled || void 0, className: `sia-typography sia-typography--${Tag2}${type ? ` sia-typography--${type}` : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: editing ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sia-typography__editor", children: [
|
|
3215
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3151
3216
|
TextArea,
|
|
3152
3217
|
{
|
|
3153
3218
|
autoFocus: true,
|
|
@@ -3169,32 +3234,32 @@ function TypographyContent({
|
|
|
3169
3234
|
}
|
|
3170
3235
|
}
|
|
3171
3236
|
),
|
|
3172
|
-
/* @__PURE__ */ (0,
|
|
3173
|
-
/* @__PURE__ */ (0,
|
|
3174
|
-
/* @__PURE__ */ (0,
|
|
3237
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sia-typography__edit-actions", children: [
|
|
3238
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", onClick: () => finish(false), children: "\u53D6\u6D88" }),
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "small", variant: "primary", onClick: () => finish(true), children: "\u4FDD\u5B58" })
|
|
3175
3240
|
] })
|
|
3176
|
-
] }) : /* @__PURE__ */ (0,
|
|
3177
|
-
/* @__PURE__ */ (0,
|
|
3178
|
-
expandable && (overflow || expanded) ? /* @__PURE__ */ (0,
|
|
3179
|
-
editable ? /* @__PURE__ */ (0,
|
|
3241
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
|
|
3242
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { ref: contentRef, className: ellipsis && !expanded ? "sia-typography__ellipsis" : void 0, style: ellipsis && !expanded ? { "--sia-typography-rows": rows } : void 0, children: formatted }),
|
|
3243
|
+
expandable && (overflow || expanded) ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "link", size: "small", className: "sia-typography__action", "aria-expanded": expanded, disabled, onClick: () => setExpanded(!expanded), children: expanded ? "\u6536\u8D77" : "\u5C55\u5F00" }) : null,
|
|
3244
|
+
editable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { ref: editRef, variant: "text", size: "small", className: "sia-typography__action", "aria-label": "\u7F16\u8F91\u6587\u672C", title: "\u7F16\u8F91", disabled, icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "edit", size: 14 }), onClick: () => {
|
|
3180
3245
|
setDraft(contentRef.current?.textContent ?? "");
|
|
3181
3246
|
setEditing(true);
|
|
3182
3247
|
} }) : null,
|
|
3183
|
-
copyable ? /* @__PURE__ */ (0,
|
|
3184
|
-
copyError ? /* @__PURE__ */ (0,
|
|
3248
|
+
copyable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "text", size: "small", className: "sia-typography__action", "aria-label": copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u6587\u672C", title: copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236", disabled, icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: copied ? "check" : "copy", size: 14 }), onClick: () => void copy() }) : null,
|
|
3249
|
+
copyError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { role: "status", className: "sia-typography--danger", children: "\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u624B\u52A8\u9009\u62E9\u6587\u672C\u590D\u5236\u3002" }) : null
|
|
3185
3250
|
] }) });
|
|
3186
3251
|
}
|
|
3187
3252
|
function Title({ level = 1, ...props }) {
|
|
3188
|
-
return /* @__PURE__ */ (0,
|
|
3253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypographyContent, { ...props, as: `h${level}` });
|
|
3189
3254
|
}
|
|
3190
3255
|
function Text(props) {
|
|
3191
|
-
return /* @__PURE__ */ (0,
|
|
3256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypographyContent, { ...props });
|
|
3192
3257
|
}
|
|
3193
3258
|
function Paragraph(props) {
|
|
3194
|
-
return /* @__PURE__ */ (0,
|
|
3259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TypographyContent, { ...props, as: "p" });
|
|
3195
3260
|
}
|
|
3196
3261
|
function Link({ disabled, className = "", onClick, href, target, rel, ...props }) {
|
|
3197
|
-
return /* @__PURE__ */ (0,
|
|
3262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
3198
3263
|
"a",
|
|
3199
3264
|
{
|
|
3200
3265
|
...props,
|
|
@@ -3212,15 +3277,15 @@ function Link({ disabled, className = "", onClick, href, target, rel, ...props }
|
|
|
3212
3277
|
);
|
|
3213
3278
|
}
|
|
3214
3279
|
function TypographyRoot({ className = "", ...props }) {
|
|
3215
|
-
return /* @__PURE__ */ (0,
|
|
3280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...props, className: `sia-typography ${className}`.trim() });
|
|
3216
3281
|
}
|
|
3217
3282
|
var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
|
|
3218
3283
|
|
|
3219
3284
|
// src/components/FloatButton.tsx
|
|
3220
|
-
var
|
|
3221
|
-
var
|
|
3222
|
-
var GroupShape = (0,
|
|
3223
|
-
var FloatButtonRoot = (0,
|
|
3285
|
+
var import_react20 = require("react");
|
|
3286
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
3287
|
+
var GroupShape = (0, import_react20.createContext)(void 0);
|
|
3288
|
+
var FloatButtonRoot = (0, import_react20.forwardRef)(function FloatButton({
|
|
3224
3289
|
icon,
|
|
3225
3290
|
description,
|
|
3226
3291
|
tooltip,
|
|
@@ -3233,9 +3298,9 @@ var FloatButtonRoot = (0, import_react19.forwardRef)(function FloatButton({
|
|
|
3233
3298
|
children,
|
|
3234
3299
|
...props
|
|
3235
3300
|
}, ref) {
|
|
3236
|
-
const groupShape = (0,
|
|
3301
|
+
const groupShape = (0, import_react20.useContext)(GroupShape);
|
|
3237
3302
|
const label = props["aria-label"] ?? (typeof tooltip === "string" ? tooltip : typeof description === "string" ? description : "\u60AC\u6D6E\u64CD\u4F5C");
|
|
3238
|
-
const button = /* @__PURE__ */ (0,
|
|
3303
|
+
const button = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3239
3304
|
"button",
|
|
3240
3305
|
{
|
|
3241
3306
|
...props,
|
|
@@ -3243,13 +3308,13 @@ var FloatButtonRoot = (0, import_react19.forwardRef)(function FloatButton({
|
|
|
3243
3308
|
type: htmlType,
|
|
3244
3309
|
"aria-label": label,
|
|
3245
3310
|
className: `sia-float-button sia-float-button--${groupShape ?? shape} sia-float-button--${type} ${className}`.trim(),
|
|
3246
|
-
children: /* @__PURE__ */ (0,
|
|
3247
|
-
icon !== null ? /* @__PURE__ */ (0,
|
|
3248
|
-
description != null || children != null ? /* @__PURE__ */ (0,
|
|
3311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Badge, { ...badge, className: "sia-float-button__badge", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "sia-float-button__body", children: [
|
|
3312
|
+
icon !== null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-float-button__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "question", size: 20 }) }) : null,
|
|
3313
|
+
description != null || children != null ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-float-button__description", children: description ?? children }) : null
|
|
3249
3314
|
] }) })
|
|
3250
3315
|
}
|
|
3251
3316
|
);
|
|
3252
|
-
return /* @__PURE__ */ (0,
|
|
3317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sia-float-button-root", style, children: tooltip ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Tooltip, { title: tooltip, placement: "left", children: button }) : button });
|
|
3253
3318
|
});
|
|
3254
3319
|
function FloatButtonGroup({
|
|
3255
3320
|
shape = "circle",
|
|
@@ -3271,10 +3336,10 @@ function FloatButtonGroup({
|
|
|
3271
3336
|
...props
|
|
3272
3337
|
}) {
|
|
3273
3338
|
const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
|
|
3274
|
-
const rootRef = (0,
|
|
3275
|
-
const triggerRef = (0,
|
|
3276
|
-
const id = (0,
|
|
3277
|
-
(0,
|
|
3339
|
+
const rootRef = (0, import_react20.useRef)(null);
|
|
3340
|
+
const triggerRef = (0, import_react20.useRef)(null);
|
|
3341
|
+
const id = (0, import_react20.useId)();
|
|
3342
|
+
(0, import_react20.useEffect)(() => {
|
|
3278
3343
|
if (!trigger || !visible) return;
|
|
3279
3344
|
const close = (event) => {
|
|
3280
3345
|
if (!rootRef.current?.contains(event.target)) setVisible(false);
|
|
@@ -3282,7 +3347,7 @@ function FloatButtonGroup({
|
|
|
3282
3347
|
document.addEventListener("pointerdown", close);
|
|
3283
3348
|
return () => document.removeEventListener("pointerdown", close);
|
|
3284
3349
|
}, [trigger, visible, setVisible]);
|
|
3285
|
-
return /* @__PURE__ */ (0,
|
|
3350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(GroupShape.Provider, { value: shape, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
3286
3351
|
"div",
|
|
3287
3352
|
{
|
|
3288
3353
|
...props,
|
|
@@ -3309,13 +3374,13 @@ function FloatButtonGroup({
|
|
|
3309
3374
|
}
|
|
3310
3375
|
},
|
|
3311
3376
|
children: [
|
|
3312
|
-
!trigger || visible ? /* @__PURE__ */ (0,
|
|
3313
|
-
trigger ? /* @__PURE__ */ (0,
|
|
3377
|
+
!trigger || visible ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { id, className: "sia-float-button-group__list", children }) : null,
|
|
3378
|
+
trigger ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
3314
3379
|
FloatButtonRoot,
|
|
3315
3380
|
{
|
|
3316
3381
|
ref: triggerRef,
|
|
3317
3382
|
type,
|
|
3318
|
-
icon: visible ? closeIcon ?? /* @__PURE__ */ (0,
|
|
3383
|
+
icon: visible ? closeIcon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 20 }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "plus", size: 20 }),
|
|
3319
3384
|
tooltip,
|
|
3320
3385
|
"aria-label": visible ? "\u6536\u8D77\u60AC\u6D6E\u83DC\u5355" : "\u5C55\u5F00\u60AC\u6D6E\u83DC\u5355",
|
|
3321
3386
|
"aria-expanded": visible,
|
|
@@ -3328,8 +3393,8 @@ function FloatButtonGroup({
|
|
|
3328
3393
|
) });
|
|
3329
3394
|
}
|
|
3330
3395
|
function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
|
|
3331
|
-
const [visible, setVisible] = (0,
|
|
3332
|
-
(0,
|
|
3396
|
+
const [visible, setVisible] = (0, import_react20.useState)(false);
|
|
3397
|
+
(0, import_react20.useEffect)(() => {
|
|
3333
3398
|
const element = target ? target() : window;
|
|
3334
3399
|
if (!element) return;
|
|
3335
3400
|
const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);
|
|
@@ -3338,7 +3403,7 @@ function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth
|
|
|
3338
3403
|
return () => element.removeEventListener("scroll", update);
|
|
3339
3404
|
}, [target, visibilityHeight]);
|
|
3340
3405
|
if (!visible) return null;
|
|
3341
|
-
return /* @__PURE__ */ (0,
|
|
3406
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(FloatButtonRoot, { ...props, tooltip, icon: icon ?? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "arrow-up", size: 20 }), onClick: (event) => {
|
|
3342
3407
|
onClick?.(event);
|
|
3343
3408
|
if (event.defaultPrevented) return;
|
|
3344
3409
|
const element = target ? target() : window;
|