@ioca/react 1.0.4 → 1.0.6

package/lib/index.js

@@ -1,3537 +1 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import classNames from 'classnames';
-import { debounce, uid, throttle, pick, title } from 'radash';
-import { forwardRef, createElement, useEffect, useCallback, isValidElement, cloneElement, useState, useMemo, Children, useRef, useLayoutEffect, Fragment as Fragment$1, createContext, useContext, useImperativeHandle } from 'react';
-import { SkipPreviousRound, CloseRound, MinusRound, PlusRound, InboxTwotone, VisibilityRound, VisibilityOffRound, SyncAltRound, KeyboardArrowLeftRound, KeyboardArrowRightRound, CalendarMonthTwotone, PauseRound, PlayArrowRound, StopRound, FullscreenExitRound, FullscreenRound, VolumeOffRound, VolumeDownRound, FeedOutlined, AspectRatioRound, OpenInNewRound, FileDownloadOutlined, RotateRightRound, RotateLeftRound, HideImageTwotone, MoreHorizRound, InfoOutlined, SearchRound, CheckRound, UnfoldMoreRound, KeyboardArrowDownRound, ListAltRound, CloudUploadTwotone, PlusSharp } from '@ricons/material';
-import { useReactive, useMemoizedFn, useClickAway, useCreation, useSize } from 'ahooks';
-import { createRoot } from 'react-dom/client';
-import ScrollContainer from 'react-custom-scrollbars-2';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { createPortal } from 'react-dom';
-import VList from 'rc-virtual-list';
-import PubSub from 'pubsub-js';
 
-const TIMEOUT = 500;
-const useRipple = () => {
-    if (document.documentElement.dataset["useripple"])
-        return;
-    document.documentElement.dataset["useripple"] = "enable";
-    document.addEventListener("mousedown", listener);
-};
-function listener(e) {
-    const target = e.target;
-    const parent = target.closest("[data-ripple]");
-    if (!target || !parent)
-        return;
-    triggerRipple(parent, e);
-}
-function triggerRipple(target, e) {
-    const [$box, $ripple] = createRipple();
-    const rect = target.getBoundingClientRect();
-    const size = Math.max(rect.width, rect.height) * 2;
-    $ripple.style.cssText = `
-        left: ${e.pageX - rect.left}px;
-        top: ${e.pageY - rect.top}px;
-        width: ${size}px;
-        height: ${size}px;
-        transition: all ${TIMEOUT / 1000}s;
-    `;
-    target.insertAdjacentElement("afterbegin", $box);
-    target.offsetHeight;
-    $ripple.classList.add("i-ripple-active");
-    setTimeout(() => {
-        $box.remove();
-    }, TIMEOUT);
-}
-function createRipple() {
-    const $box = document.createElement("SPAN");
-    const $ripple = document.createElement("SPAN");
-    $box.className = "i-ripple-container";
-    $ripple.className = "i-ripple";
-    $box.append($ripple);
-    return [$box, $ripple];
-}
-
-const Loading = (props) => {
-    const { icon, text, size, style, className, ...restProps } = props;
-    return (jsxs("div", { className: classNames("i-loading-container", className), style: { fontSize: size, ...style }, ...restProps, children: [icon ?? (jsx("svg", { width: '24', height: '24', stroke: '#000', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', className: 'i-loading-icon', children: jsx("circle", { cx: '12', cy: '12', r: '9.5', fill: 'none', strokeWidth: '3', strokeLinecap: 'round', strokeDasharray: 40, strokeDashoffset: 0 }) })), text] }));
-};
-
-const formatClass = ({ outline, flat, loading, disabled, size = "normal", block, round, square, secondary, className, }) => classNames("i-btn", className, {
-    "i-btn-outline": outline,
-    "i-btn-flat": flat,
-    "i-btn-block": block,
-    "i-btn-loading": loading,
-    "i-btn-square": square,
-    "i-btn-secondary": secondary,
-    [`i-btn-${size}`]: size !== "normal",
-    round,
-    disabled,
-});
-const Button = forwardRef((props, ref) => {
-    const { as: As = "a", children, className, loading, flat, outline, square, secondary, size, round, href, ripple = true, onClick, ...restProps } = props;
-    const handleClick = (e) => {
-        if (loading || restProps.disabled) {
-            e.stopPropagation();
-            return;
-        }
-        onClick?.(e);
-    };
-    if (!children)
-        return jsx(Fragment, {});
-    const childNodes = [
-        loading && jsx(Loading, {}, 'loading'),
-        createElement("span", { key: "content", className: "i-btn-content" }, children),
-    ];
-    const attrs = {
-        className: formatClass(props),
-        ["data-ripple"]: ripple,
-        onClick: handleClick,
-    };
-    useEffect(() => {
-        ripple && useRipple();
-    }, [ripple]);
-    if (typeof As === "string") {
-        return createElement(As, {
-            ref,
-            href,
-            ...attrs,
-            ...restProps,
-        }, childNodes);
-    }
-    return createElement(As, {
-        to: href || "",
-        ...attrs,
-        ...restProps,
-    }, childNodes);
-});
-
-function Group(props) {
-    const { children, vertical, className, style } = props;
-    return (jsx("div", { className: classNames(className, vertical ? "i-btn-group-vertical" : "i-btn-group-horizonal"), style: style, children: children }));
-}
-
-function Toggle(props) {
-    const { active, activeClass, after, disabled, children, className, onClick, onToggle, ...restProps } = props;
-    const state = useReactive({
-        active,
-        done: true,
-    });
-    const toggle = useCallback(() => {
-        const hasAfter = after !== undefined;
-        const nextActive = !state.active;
-        Object.assign(state, {
-            active: nextActive,
-            done: !hasAfter,
-        });
-        onToggle?.(nextActive);
-        hasAfter &&
-            setTimeout(() => {
-                state.done = true;
-            }, 16);
-    }, [after]);
-    const handleClick = (e) => {
-        onClick?.(e);
-        !disabled && toggle();
-    };
-    useEffect(() => {
-        state.active !== active && toggle();
-    }, [active]);
-    return (jsx(Button, { className: classNames(className, { [activeClass || ""]: state.active }, "i-btn-toggle"), ...restProps, onClick: handleClick, children: jsx("div", { className: classNames("i-btn-toggle-content", {
-                "i-btn-toggle-active": state.done,
-            }), children: state.active ? after ?? children : children }) }));
-}
-
-Button.Toggle = Toggle;
-Button.Group = Group;
-
-const Icon = forwardRef((props, ref) => {
-    const { icon, size = "1.425em", rotate, style, className, ...restProps } = props;
-    if (!isValidElement(icon))
-        return icon;
-    const elProps = {
-        ref,
-        style: {
-            transform: rotate ? `rotate(${rotate}deg)` : undefined,
-            ...style,
-            width: size,
-            height: size,
-        },
-        className: classNames("i-icon", className),
-        ...restProps,
-    };
-    return cloneElement(icon, elProps);
-});
-
-function ToTop(props) {
-    const { style, className, onClick } = props;
-    return (jsx(Button, { square: true, className: classNames("i-affix-totop", className), style: { ...style }, onClick: onClick, children: jsx(Icon, { icon: jsx(SkipPreviousRound, {}), rotate: 90 }) }));
-}
-
-const Affix = (props) => {
-    const { position = "fixed", left, top, right, bottom, offset, style, className, children, getContainer = () => document.body, } = props;
-    const [hidden, setHidden] = useState(false);
-    const hijackChildren = useMemo(() => Children.map(children, (node) => {
-        if (node.type === ToTop) {
-            const { onClick } = node.props;
-            return cloneElement(node, {
-                key: node.key,
-                ...node.props,
-                onClick: (e) => {
-                    const container = getContainer();
-                    onClick?.(e);
-                    container?.scrollTo({
-                        top: 0,
-                        left: 0,
-                        behavior: "smooth",
-                    });
-                },
-            });
-        }
-        return node;
-    }), [children, getContainer]);
-    useEffect(() => {
-        const container = getContainer();
-        if (!offset || !container)
-            return;
-        const listener = debounce({ delay: 160 }, () => {
-            const top = container.scrollTop;
-            setHidden(top < offset);
-        });
-        container.addEventListener("scroll", listener);
-        return () => {
-            container.removeEventListener("scroll", listener);
-        };
-    }, [offset, getContainer]);
-    return (jsx("div", { className: classNames("i-affix", className, {
-            "i-affix-hidden": hidden,
-        }), style: {
-            ...style,
-            position,
-            left,
-            top,
-            right,
-            bottom,
-        }, children: hijackChildren }));
-};
-Affix.ToTop = ToTop;
-
-const Badge = (props) => {
-    const { content, contentClass, dot, dotSize, round, disabled, style, className, children, } = props;
-    return (jsxs("div", { style: style, className: classNames("i-badge", { rounded: round }, className), children: [children, jsx("div", { className: classNames("i-badge-content", contentClass, {
-                    "i-badge-dot": dot,
-                    "i-badge-hidden": disabled,
-                }), style: { fontSize: dotSize }, children: content })] }));
-};
-
-const Area = (name) => (props) => (jsx("div", { style: props.style, className: classNames("i-card-" + name, props.className), children: props.children }));
-const Header$2 = Area("header");
-const Footer = Area("footer");
-const Banner = Area("banner");
-const Tailer = Area("tail");
-
-const Card = (props) => {
-    const { shadow = true, border, style, className, children } = props;
-    const slots = useMemo(() => {
-        const nodes = {};
-        Children.map(children, (child) => {
-            const type = child.type;
-            switch (type) {
-                case Header$2:
-                    nodes["header"] = child;
-                    break;
-                case Footer:
-                    nodes["footer"] = child;
-                    break;
-                case Banner:
-                    nodes["banner"] = child;
-                    break;
-                case Tailer:
-                    nodes["tailer"] = child;
-                    break;
-                default:
-                    nodes["content"] = [...(nodes["content"] || []), child];
-                    break;
-            }
-        });
-        return nodes;
-    }, [children]);
-    const { header, banner, content, footer, tailer } = slots;
-    return (jsxs("div", { style: style, className: classNames("i-card", className, {
-            shadow,
-            "i-card-bordered": border,
-        }), children: [banner, header, content && jsx("div", { className: 'i-card-content', children: content }), footer, tailer] }));
-};
-Card.Header = Header$2;
-Card.Footer = Footer;
-Card.Banner = Banner;
-Card.Tailer = Tailer;
-
-var TFileType;
-(function (TFileType) {
-    TFileType["IMAGE"] = "IMAGE";
-    TFileType["VIDEO"] = "VIDEO";
-    TFileType["AUDIO"] = "AUDIO";
-    TFileType["PDF"] = "PDF";
-    TFileType["EXCEL"] = "EXCEL";
-    TFileType["TXT"] = "TXT";
-    TFileType["UNKNOWN"] = "UNKNOWN";
-})(TFileType || (TFileType = {}));
-
-function getPosition($source, $popup, options = {}) {
-    const { refWindow, gap = 0, offset = 0, position = "top", align } = options;
-    if (!$source || !$popup)
-        return [
-            0,
-            0,
-            {
-                arrowX: 0,
-                arrowY: 0,
-                arrowPos: "bottom",
-            },
-        ];
-    const rectT = $source.getBoundingClientRect();
-    const rectC = $popup.getBoundingClientRect();
-    let w = window.innerWidth;
-    let h = window.innerHeight;
-    let { left: tl, top: tt, right: tr, bottom: tb, width: tw, height: th, } = rectT;
-    const { height: ch, width: cw } = rectC;
-    if (!refWindow) {
-        const rectPa = $source.offsetParent?.getBoundingClientRect();
-        w = rectPa?.width || w;
-        h = rectPa?.height || h;
-        tl = $source.offsetLeft;
-        tt = $source.offsetTop;
-        tr = tl + rectT.width;
-        tb = tt + rectT.height;
-    }
-    let y = 0;
-    let x = 0;
-    let arrowX = 0;
-    let arrowY = 0;
-    let arrowPos = "bottom";
-    switch (position) {
-        case "left":
-        case "right":
-            y =
-                th !== ch
-                    ? computePosition({
-                        containerSize: h,
-                        targetSize: th,
-                        targetOffset: tt,
-                        contentSize: ch,
-                        gap,
-                        align,
-                    })
-                    : tt;
-            arrowY = y < tt ? tt - y + th / 2 : th / 2;
-            const xl = tl - offset - cw;
-            const xr = tr + offset + cw;
-            if (position === "left") {
-                x = xl < 0 ? tr + offset : xl;
-                arrowX = xl < 0 ? 0 : cw;
-                arrowPos = xl < 0 ? "left" : "right";
-            }
-            else {
-                x = w > xr ? tr + offset : xl;
-                arrowX = w > xr ? 0 : cw;
-                arrowPos = w > xr ? "left" : "right";
-            }
-            break;
-        case "top":
-        case "bottom":
-            x =
-                tw !== cw
-                    ? computePosition({
-                        containerSize: w,
-                        targetOffset: tl,
-                        targetSize: tw,
-                        contentSize: cw,
-                        gap,
-                        align,
-                    })
-                    : tl;
-            arrowX = x > tl ? cw / 2 : tl - x + tw / 2;
-            const yt = tt - offset - ch;
-            const yb = tb + offset + ch;
-            if (position === "top") {
-                y = yt < 0 ? tb + offset : yt;
-                arrowY = yt < 0 ? 0 : ch;
-                arrowPos = yt < 0 ? "top" : "bottom";
-            }
-            else {
-                y = h > yb ? tb + offset : yt;
-                arrowY = h > yb ? 0 : ch;
-                arrowPos = h > yb ? "top" : "bottom";
-            }
-            break;
-    }
-    return [
-        x,
-        y,
-        {
-            arrowX,
-            arrowY,
-            arrowPos,
-        },
-    ];
-}
-function getPointPosition(e, content) {
-    const { pageX: x, pageY: y } = e;
-    const { width: w, height: h } = content.getBoundingClientRect();
-    const { innerHeight: wh, innerWidth: ww } = window;
-    const left = x + w >= ww ? (x - w > 0 ? x - w : x) : x;
-    const top = y + h >= wh ? (y - h > 0 ? y - h : y) : y;
-    return [left, top];
-}
-function computePosition({ containerSize, targetSize, targetOffset, contentSize, gap, align = "center", }) {
-    const centerPoint = targetOffset + targetSize / 2;
-    switch (align) {
-        case "start":
-            return targetOffset + contentSize > containerSize
-                ? targetOffset + targetSize
-                : targetOffset;
-        case "center":
-            if (targetSize >= contentSize) {
-                return centerPoint - contentSize / 2;
-            }
-            if (centerPoint + contentSize / 2 + gap > containerSize) {
-                return targetOffset + targetSize - contentSize;
-            }
-            if (centerPoint - contentSize / 2 - gap < 0) {
-                return gap;
-            }
-            return centerPoint - contentSize / 2;
-        case "end":
-            const result = targetOffset + targetSize - contentSize;
-            return result > 0 ? result : gap;
-        default:
-            return centerPoint - contentSize / 2;
-    }
-}
-function formatOption(options) {
-    return options.map((option) => ["string", "number"].includes(typeof option)
-        ? { label: option, value: option }
-        : option);
-}
-function animate(from, to, duration = 1000, callback, easing = (t) => 1 - Math.pow(1 - t, 4)) {
-    const start = performance.now();
-    const diff = to - from;
-    let raf = requestAnimationFrame(loop);
-    function loop() {
-        raf = requestAnimationFrame(loop);
-        const past = performance.now() - start;
-        let percent = past / duration;
-        if (percent >= 1) {
-            percent = 1;
-            cancelAnimationFrame(raf);
-        }
-        const pass = diff * easing(percent);
-        callback?.(pass);
-    }
-}
-function formatNumber(value, options = {}) {
-    const { precision, thousand } = options;
-    const result = value.toFixed(precision);
-    if (!thousand)
-        return result;
-    const points = result.split(".");
-    const integer = points[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, `$&${thousand}`);
-    if (points.length === 1)
-        return integer;
-    return `${integer}.${points[1]}`;
-}
-function renderNode(node, container = document.body) {
-    const div = document.createElement("div");
-    container.append(div);
-    const root = createRoot(div);
-    const sto = setTimeout(() => {
-        root?.render(node);
-    }, 0);
-    return () => {
-        div?.remove();
-        root?.unmount();
-        sto && clearTimeout(sto);
-    };
-}
-function getSuffixByUrl(url) {
-    return url.match(/\.([^\./\?]+)($|\?)/)?.[1];
-}
-function getFileType(suffix, type) {
-    switch (true) {
-        case ["jpg", "jpeg", "png", "webp", "svg"].includes(suffix) ||
-            type?.startsWith("image/"):
-            return TFileType["IMAGE"];
-        case ["mp4", "avi"].includes(suffix) || type?.startsWith("video/"):
-            return TFileType["VIDEO"];
-        default:
-            return TFileType["UNKNOWN"];
-    }
-}
-function fullScreen(el) {
-    el.requestFullscreen?.();
-}
-function exitFullScreen() {
-    document.exitFullscreen?.();
-}
-function formatTime(time, options) {
-    const result = [];
-    const { zero = true, units = ["", ":", ":"] } = options || {};
-    const l = units.length;
-    let i = 0;
-    while (i < l) {
-        if (time <= 0 && i > 1)
-            break;
-        const n = Math.round(time % 60);
-        time = Math.floor(time / 60);
-        result.unshift((zero && n < 10 ? `0${n}` : n) + units[i++]);
-    }
-    return result.join("");
-}
-function getNextSorter(prevSortBy, prevSortType, sortBy) {
-    const types = ["desc", "asc"];
-    if (prevSortBy === sortBy) {
-        const i = types.findIndex((t) => t === prevSortType) + 1;
-        const type = types[i] || "";
-        const by = type === "" ? "" : sortBy;
-        return [by, type];
-    }
-    return [sortBy, "desc"];
-}
-function formatBytes(bytes, decimals = 2) {
-    if (!+bytes)
-        return "0 Bytes";
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-}
-function clamp(value, min, max) {
-    return value < min ? min : value > max ? max : value;
-}
-
-function CheckboxItem(props) {
-    const { type = "default", label, name, value = false, className, status = "normal", message, disabled, partof, children, onChange, ...restProps } = props;
-    const state = useReactive({
-        value,
-        status,
-        message,
-    });
-    const handleChange = useMemoizedFn((e) => {
-        const checked = e.target.checked;
-        Object.assign(state, {
-            value: checked,
-            status,
-            message,
-        });
-        onChange?.(checked, e);
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    return (jsxs("label", { className: classNames("i-checkbox-item", {
-            [`i-checkbox-${state.status}`]: state.status !== "normal",
-            disabled,
-        }, className), ...restProps, children: [jsx("input", { type: 'checkbox', name: name, className: classNames("i-checkbox-input", {
-                    [`i-checkbox-${type}`]: !partof,
-                    "i-checkbox-partof": partof,
-                }), checked: state.value, disabled: disabled, onChange: handleChange }), jsx("span", { className: 'i-checkbox-text', children: children || label }), state.message && (jsxs("span", { className: 'i-checkbox-message', children: ["*", state.message] }))] }));
-}
-
-function Checkbox(props) {
-    const { label, name, options = [], value = "", type = "default", optionInline = true, labelInline, disabled, status = "normal", message, required, className, onChange, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
-    const handleChange = useMemoizedFn((checked, opt, e) => {
-        const group = [...state.value];
-        const i = group.findIndex((item) => item === opt.value);
-        if (checked && i < 0) {
-            group.push(opt.value);
-        }
-        else if (!checked && i > -1) {
-            group.splice(i, 1);
-        }
-        state.value = group;
-        onChange?.(group, opt, e);
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    return (jsxs("div", { className: classNames("i-checkbox i-input-label", {
-            [`i-checkbox-${status}`]: status !== "normal",
-            "i-input-inline": labelInline,
-        }, className), ...restProps, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-checkbox-message', children: message })] })), jsx("div", { className: classNames("i-checkbox-options", {
-                    "i-options-block": !optionInline,
-                    "i-checkbox-options-button": type === "button",
-                }), children: formattedOptions.map((option) => {
-                    return (jsx(CheckboxItem, { name: name, value: state.value.includes(option.value), type: type, disabled: disabled || option.disabled, onChange: (checked, e) => handleChange(checked, option, e), children: option.label }, option.value));
-                }) })] }));
-}
-Checkbox.Item = CheckboxItem;
-
-const Helpericon = (props) => {
-    const { as = "a", active, className, icon = jsx(CloseRound, {}), ...restProps } = props;
-    if (!active)
-        return jsx(Fragment, {});
-    return createElement(as, {
-        className: classNames("i-helpericon", className),
-        ...restProps,
-    }, [
-        createElement(Icon, {
-            key: uid(3),
-            icon,
-        }),
-    ]);
-};
-
-function Item$5(props) {
-    return jsx(Fragment, {});
-}
-
-const Collapse = (props) => {
-    const { active, items, multiple, border, headerClickable, className, children, renderToggle = (active) => active ? jsx(MinusRound, {}) : jsx(PlusRound, {}), onCollapse, ...restProps } = props;
-    const state = useReactive({
-        active,
-    });
-    const collapses = useMemo(() => {
-        if (!items) {
-            if (!children)
-                return [];
-            return (Children.map(children, (node, i) => {
-                const { key, props: nodeProps } = node;
-                const { title, children, content, disabled, ...restProps } = nodeProps;
-                return {
-                    ...restProps,
-                    key: key || i,
-                    title,
-                    content: children || content,
-                    disabled,
-                };
-            }) || []);
-        }
-        return items;
-    }, [children]);
-    const handleHeaderClick = (item) => {
-        if (!headerClickable)
-            return;
-        handleToggle(item);
-    };
-    const handleToggle = (item) => {
-        const { key, disabled } = item;
-        if (disabled)
-            return;
-        if (!multiple) {
-            state.active = state.active === key ? undefined : key;
-            onCollapse?.(key, state.active !== undefined);
-            return;
-        }
-        if (!Array.isArray(state.active))
-            state.active = [];
-        const i = state.active.findIndex((k) => k === key);
-        if (i > -1) {
-            state.active.splice(i, 1);
-        }
-        else {
-            key !== undefined && state.active.push(key);
-        }
-        onCollapse?.(key, i < 0);
-    };
-    return (jsx("div", { className: classNames("i-collapse", {
-            "i-collapse-bordered": border,
-        }, className), ...restProps, children: collapses.map((item) => {
-            const { key, title, content, disabled, className, ...restProps } = item;
-            const isActive = multiple
-                ? (state.active || []).includes(key)
-                : state.active === key;
-            return (jsxs("div", { className: classNames("i-collapse-item", className, {
-                    "i-collapse-active": isActive,
-                    "i-collapse-disabled": disabled,
-                }), ...restProps, children: [jsxs("div", { className: 'i-collapse-header', onClick: () => handleHeaderClick(item), children: [title, jsx(Helpericon, { active: true, className: 'i-collapse-toggle', icon: renderToggle(isActive), onClick: () => handleToggle(item) })] }), jsx("div", { className: 'i-collapse-content', children: content })] }, key));
-        }) }));
-};
-Collapse.Item = Item$5;
-
-function Empty(props) {
-    const { className, ...restProps } = props;
-    return (jsx(InboxTwotone, { className: classNames("i-empty", className), ...restProps }));
-}
-
-function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
-    const style = {
-        "--datagrid-justify": justify,
-        gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
-        insetInline: `var(--datagrid-cell-inset-${col})`,
-    };
-    return style;
-}
-function Cell(props) {
-    const { column, row, col, data, onCellClick, onCellDoubleClick } = props;
-    const { id, fixed, justify, rowSpan, render } = column;
-    const style = getCellStyle({ justify, fixed, col, row, rowSpan });
-    return (jsx("div", { className: classNames("i-datagrid-cell", {
-            [`i-datagrid-cell-fixed-${fixed}`]: fixed,
-        }), "data-col": id, style: style, onClick: (e) => onCellClick?.(data, column, row, col, e), onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e), children: render?.(data[id], data, col) ?? (jsx("div", { className: 'i-datagrid-cell-content', children: data[id] })) }));
-}
-
-const MouseMoveEvents = new Set();
-const MouseUpEvents = new Set();
-document.addEventListener("mousemove", (e) => {
-    for (const listener of MouseMoveEvents.values()) {
-        listener(e);
-    }
-});
-document.addEventListener("mouseup", (e) => {
-    for (const listener of MouseUpEvents.values()) {
-        listener(e);
-    }
-});
-function useMouseMove(listener) {
-    useEffect(() => {
-        MouseMoveEvents.add(listener);
-        return () => {
-            MouseMoveEvents.delete(listener);
-        };
-    }, [listener]);
-}
-function useMouseUp(listener) {
-    useEffect(() => {
-        MouseUpEvents.add(listener);
-        return () => {
-            MouseUpEvents.delete(listener);
-        };
-    }, [listener]);
-}
-function useIntersectionObserver(configs) {
-    const WM = new WeakMap();
-    const IO = new IntersectionObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target, entry.isIntersecting);
-        });
-    }, configs);
-    function observe(target, callback) {
-        if (WM.get(target))
-            return;
-        WM.set(target, callback);
-        target && IO.observe(target);
-    }
-    function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
-    }
-    function disconnect() {
-        IO.disconnect();
-    }
-    return {
-        observe,
-        unobserve,
-        disconnect,
-    };
-}
-function useResizeObserver() {
-    const WM = new WeakMap();
-    const IO = new ResizeObserver((entries) => {
-        entries.map((entry) => {
-            const callback = WM.get(entry.target);
-            callback?.(entry.target);
-        });
-    });
-    function observe(target, callback) {
-        if (WM.get(target))
-            return;
-        target && IO.observe(target);
-        WM.set(target, callback);
-    }
-    function unobserve(target) {
-        target && IO.unobserve(target);
-        WM.delete(target);
-    }
-    function disconnect() {
-        IO.disconnect();
-    }
-    return {
-        observe,
-        unobserve,
-        disconnect,
-    };
-}
-
-function Resize(props) {
-    const { index, onWidthChange } = props;
-    const state = useReactive({
-        resizing: false,
-        x: 0,
-        width: 0,
-    });
-    const handleMouseDown = useMemoizedFn((e) => {
-        const tar = e.target;
-        const width = tar.offsetParent.offsetWidth;
-        Object.assign(state, {
-            x: e.pageX,
-            resizing: true,
-            width,
-        });
-    });
-    const handleMouseMove = useMemoizedFn((e) => {
-        if (!state.resizing)
-            return;
-        e.preventDefault();
-        const after = state.width + e.pageX - state.x;
-        if (after <= 24)
-            return;
-        onWidthChange(index, after);
-    });
-    const handleMouseUp = () => {
-        if (!state.resizing)
-            return;
-        state.resizing = false;
-    };
-    useMouseMove(handleMouseMove);
-    useMouseUp(handleMouseUp);
-    return (jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
-}
-
-const Arrow = (props) => (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', ...props, children: jsx("g", { fill: 'none', children: jsx("path", { d: 'M9 17.898c0 1.074 1.265 1.648 2.073.941l6.31-5.522a1.75 1.75 0 0 0 0-2.634l-6.31-5.522C10.265 4.454 9 5.028 9 6.102v11.796z', fill: 'currentColor' }) }) }));
-function Sorter(props) {
-    const { type } = props;
-    return (jsxs("a", { className: classNames("i-datagrid-sorter", {
-            [`i-datagrid-sorter-${type}`]: type,
-        }), children: [jsx(Arrow, { className: 'i-datagrid-sorter-caret' }), jsx(Arrow, { className: 'i-datagrid-sorter-caret' })] }));
-}
-
-function Row(props) {
-    const { row, data, columns, onRowClick, onCellClick, onCellDoubleClick } = props;
-    return (jsx("div", { className: 'i-datagrid-row', onClick: () => onRowClick?.(data, row), children: columns.map((col, i) => (jsx(Cell, { column: col, col: i, row: row, data: data, onCellClick: onCellClick, onCellDoubleClick: onCellDoubleClick }, i))) }));
-}
-function Header$1(props) {
-    const { columns, resizable, sortBy, sortType, onWidthChange, onHeaderClick, } = props;
-    return (jsx("div", { className: 'i-datagrid-header i-datagrid-row', children: columns.map((column, col) => {
-            const { id, title, fixed, colSpan, sorter, justify, renderHeader, } = column;
-            const style = getCellStyle({
-                justify,
-                row: 0,
-                col,
-                colSpan,
-            });
-            const order = sortBy === id ? sortType : "";
-            return (jsxs("div", { "data-col": id, className: classNames("i-datagrid-cell", {
-                    "i-datagrid-has-sorter": sorter,
-                    "i-datagrid-cell-fixed": fixed,
-                }), style: { ...style, insetBlockStart: 0 }, onClick: (e) => onHeaderClick?.(column, e), children: [renderHeader?.(column, col) ?? (jsx("div", { className: 'i-datagrid-cell-content', children: title || id })), sorter && jsx(Sorter, { type: order }), resizable && (jsx(Resize, { index: col, onWidthChange: onWidthChange }))] }, col));
-        }) }));
-}
-
-const Datagrid = (props) => {
-    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", empty = jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => jsx(Loading, { size: '1.5em', className: 'color-3' }), onCellClick, onRowClick, onHeaderClick, onSort, onScroll, onResize, } = props;
-    const container = useRef(null);
-    const scrollbar = useRef(null);
-    const state = useReactive({
-        rows: data,
-        widths: columns.map((col) => col.width ?? "auto"),
-        sortBy: "",
-        sortType: "",
-    });
-    const styles = useMemo(() => {
-        const { widths } = state;
-        const o = {
-            ...style,
-            "--grid-template-columns": widths
-                .map((w) => {
-                return typeof w === "number" ? `${w}px` : w;
-            })
-                .join(" "),
-        };
-        if (!resizable)
-            return o;
-        const fws = columns.map((col, i) => {
-            const { fixed } = col;
-            if (!fixed)
-                return 0;
-            return widths[i];
-        });
-        columns.map((col, i) => {
-            const { fixed } = col;
-            if (!fixed)
-                return;
-            if (i === 0) {
-                o[`--datagrid-cell-inset-0`] = 0;
-            }
-            else if (i === fws.length - 1) {
-                o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
-            }
-            else {
-                const isLeft = fixed === "left";
-                const before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);
-                const sum = before.reduce((pre, cur) => pre + cur) + "px";
-                const result = isLeft ? `${sum} auto` : `auto ${sum}`;
-                o[`--datagrid-cell-inset-${i}`] = result;
-            }
-        });
-        return o;
-    }, [state.widths, resizable]);
-    const handleWidthChange = useCallback((i, w) => {
-        if (!resizable)
-            return;
-        const [...ws] = state.widths;
-        ws[i] = w;
-        state.widths = ws;
-        onResize?.(columns[i], w);
-    }, [resizable]);
-    const handleHeaderClick = useCallback((column, e) => {
-        if (column?.sorter) {
-            const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
-            Object.assign(state, {
-                sortBy,
-                sortType,
-            });
-            onSort?.(sortBy, sortType);
-        }
-        onHeaderClick?.(column, e);
-    }, []);
-    const rows = useMemo(() => {
-        const { sortBy, sortType } = state;
-        if (sortBy && !onSort) {
-            const sorter = columns.find((col) => col.id === sortBy)?.sorter;
-            const sortFn = typeof sorter === "function"
-                ? sorter
-                : (a, b) => b[sortBy] - a[sortBy];
-            const sorted = [...data].sort(sortFn);
-            return sortType === "desc" ? sorted : sorted.reverse();
-        }
-        return data;
-    }, [data, columns, state.sortBy, state.sortType]);
-    useEffect(() => {
-        if (!container.current)
-            return;
-        const { current: div } = container;
-        const tds = div.querySelector(".i-datagrid-row")?.children;
-        if (!tds?.length)
-            return;
-        state.widths = Array.from(tds).map((node) => node.offsetWidth);
-    }, [columns, resizable]);
-    useEffect(() => {
-        loading && scrollbar.current?.scrollTop(0);
-    }, [loading]);
-    const scrollBarStyle = {
-        "--padding": cellPadding,
-        ...styles,
-    };
-    return (jsxs(ScrollContainer, { ref: scrollbar, autoHide: true, autoHeight: true, autoHeightMax: height, style: scrollBarStyle, className: classNames("i-datagrid-container", className, {
-            "i-datagrid-bordered": border,
-            "i-datagrid-striped": striped,
-        }), renderView: (props) => (jsx("div", { ...props, className: classNames({ "i-datagrid-loading": loading }) })), onScroll: onScroll, children: [jsxs("div", { ref: container, className: 'i-datagrid', children: [header && (jsx(Header$1, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick }, i))), rows.length < 1 && empty] }), loading && renderLoading()] }));
-};
-
-function InputContainer(props) {
-    const { label, className, labelInline, style, children, status, tip, required, } = props;
-    return (jsxs("label", { className: classNames("i-input-label", className, {
-            "i-input-inline": labelInline,
-        }), style: style, children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label] })), children, tip && (jsx("span", { className: classNames("i-input-message", {
-                    [`i-input-${status}`]: status !== "normal",
-                }), children: tip }))] }));
-}
-
-const Input = forwardRef((props, ref) => {
-    const { type = "text", label, name, value = props.initValue ?? "", initValue = "", prepend, append, labelInline, className, status = "normal", message, tip, clear, hideVisible, border, required, onChange, onEnter, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-        type,
-        visible: false,
-    });
-    const handleChange = useCallback((e) => {
-        const v = e.target.value;
-        state.value = v;
-        onChange?.(v, e);
-    }, []);
-    const handleKeydown = useMemoizedFn((e) => {
-        e.code === "Enter" && onEnter?.();
-    });
-    const handleHelperClick = () => {
-        if (type === "password" && !hideVisible) {
-            Object.assign(state, {
-                visible: !state.visible,
-                type: !state.visible ? "text" : "password",
-            });
-            return;
-        }
-        const v = "";
-        onChange?.(v);
-    };
-    const HelperIcon = useMemo(() => {
-        if (type === "password") {
-            return state.visible ? jsx(VisibilityRound, {}) : jsx(VisibilityOffRound, {});
-        }
-        return undefined;
-    }, [state.visible]);
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        ref,
-        type: state.type,
-        name,
-        value: state.value,
-        className: classNames("i-input", `i-input-${type}`),
-        onChange: handleChange,
-        onKeyDown: handleKeydown,
-        ...restProps,
-    };
-    const clearable = clear && state.value;
-    const showHelper = type === "password" && !!state.value;
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, required: required, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), jsx("input", { ...inputProps }), jsx(Helpericon, { active: !!clearable || showHelper, icon: HelperIcon, onClick: handleHelperClick }), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
-});
-
-const Number$2 = forwardRef((props, ref) => {
-    const { label, name, value = props.initValue ?? "", initValue, labelInline, step = 1, min = -Infinity, max = Infinity, thousand, precision, type, className, status = "normal", append, border, prepend, message, tip, hideControl, style, onChange, onEnter, onInput, onBlur, ...rest } = props;
-    const state = useReactive({
-        value,
-    });
-    const getRangeNumber = useCallback((v) => clamp(v, min, max), [min, max]);
-    const getFormatNumber = useCallback((v) => formatNumber(v, { precision, thousand }), [precision, thousand]);
-    const formatInputValue = useCallback((v) => {
-        if (!v)
-            return "";
-        if (typeof v === "number" || !thousand)
-            return v;
-        return v.replaceAll(thousand, "");
-    }, [thousand]);
-    const handleChange = useMemoizedFn((e) => {
-        const { value } = e.target;
-        const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
-        state.value = v;
-        onChange?.(+v, e);
-    });
-    const handleOperate = useMemoizedFn((param) => {
-        const value = formatInputValue(state.value) ?? 0;
-        const result = getRangeNumber(+value + param);
-        state.value = getFormatNumber(result);
-        onChange?.(result);
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        ref,
-        name,
-        value: state.value,
-        className: "i-input i-input-number",
-        onChange: handleChange,
-        ...rest,
-    };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: () => handleOperate(-step) })), jsx("input", { ...inputProps }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: () => handleOperate(step) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
-});
-
-const Range = (props) => {
-    const { label, name, value = props.initValue ?? "", initValue, labelInline, min = -Infinity, max = Infinity, type, className, status = "normal", message, tip, append, prepend, step = 1, thousand, precision, hideControl, placeholder, border, onChange, onBlur, style, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
-    const getRangeNumber = useCallback((v) => clamp(v, min, max), [min, max]);
-    const getFormatNumber = useCallback((v) => formatNumber(v, { precision, thousand }), [precision, thousand]);
-    const formatInputValue = useCallback((v) => {
-        if (!v)
-            return "";
-        if (typeof v === "number" || !thousand)
-            return v;
-        return v.replaceAll(thousand, "");
-    }, [thousand]);
-    const handleChange = useMemoizedFn((e, i) => {
-        const { value } = e.target;
-        const v = formatInputValue(value.replace(/[^\d\.-]/g, ""));
-        const range = Array.isArray(state.value) ? state.value : [];
-        range[i] = +v;
-        state.value = range;
-        onChange?.(range, e);
-    });
-    const handleOperate = useMemoizedFn((e, param, i) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const range = Array.isArray(state.value) ? state.value : [];
-        const value = formatInputValue(range[i]) ?? 0;
-        const result = getRangeNumber(+value + param);
-        range[i] = getFormatNumber(result);
-        state.value = range;
-        onChange?.(range, e);
-    });
-    const handleSwitch = useMemoizedFn((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const range = state.value ?? [];
-        const v = range[0];
-        range[0] = range[1];
-        range[1] = v;
-        state.value = range;
-        onChange?.(range);
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        name,
-        className: "i-input i-input-number",
-        ...restProps,
-    };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsxs("div", { className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: [prepend && jsx("div", { className: 'i-input-prepend', children: prepend }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 0) })), jsx("input", { value: state.value?.[0] || "", placeholder: placeholder?.[0], ...inputProps, onChange: (e) => handleChange(e, 0) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 0) })), jsx(Helpericon, { active: true, icon: jsx(SyncAltRound, {}), style: { margin: 0 }, onClick: handleSwitch }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(MinusRound, {}), onClick: (e) => handleOperate(e, -step, 1) })), jsx("input", { value: state.value?.[1] || "", placeholder: placeholder?.[1], ...inputProps, onChange: (e) => handleChange(e, 1) }), !hideControl && (jsx(Helpericon, { active: true, icon: jsx(PlusRound, {}), onClick: (e) => handleOperate(e, step, 1) })), append && jsx("div", { className: 'i-input-append', children: append })] }) }));
-};
-
-const Textarea = forwardRef((props, ref) => {
-    const { label, name, value = props.initValue ?? "", initValue, labelInline, className, status = "normal", message, tip, autoSize, border, style, onChange, onEnter, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
-    const refTextarea = useRef(null);
-    const handleChange = useCallback((e) => {
-        const v = e.target.value;
-        state.value = v;
-        const ta = refTextarea.current?.firstChild;
-        if (autoSize && ta) {
-            // ta.style.height = "inherit";
-            ta.style.height = `${ta.scrollHeight}px`;
-        }
-        onChange?.(v, e);
-    }, []);
-    const handleKeydown = useMemoizedFn((e) => {
-        e.code === "Enter" && onEnter?.();
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const inputProps = {
-        ref,
-        name,
-        value: state.value,
-        className: "i-input i-textarea",
-        onChange: handleChange,
-        onKeyDown: handleKeydown,
-        ...restProps,
-    };
-    return (jsx(InputContainer, { label: label, labelInline: labelInline, className: className, style: style, tip: message ?? tip, status: status, children: jsx("div", { ref: refTextarea, className: classNames("i-input-item", {
-                [`i-input-${status}`]: status !== "normal",
-                "i-input-borderless": !border,
-            }), children: jsx("textarea", { ...inputProps }) }) }));
-});
-
-Input.Textarea = Textarea;
-Input.Number = Number$2;
-Input.Range = Range;
-
-const Content$1 = forwardRef((props, ref) => {
-    const { getContainer = (trigger) => trigger?.offsetParent ?? document.body, trigger, arrow, arrowProps = {}, className, children, ...restProps } = props;
-    const arrowCSS = useMemo(() => {
-        let { left, top, pos } = arrowProps;
-        let transform = "";
-        switch (pos) {
-            case "left":
-                left += 2;
-                transform = `translate(-100%, -50%) rotate(180deg)`;
-                break;
-            case "right":
-                left -= 2;
-                transform = `translate(0, -50%)`;
-                break;
-            case "top":
-                top -= 2;
-                transform = `translate(-50%, -50%) rotate(-90deg)`;
-                break;
-            case "bottom":
-                top += 2;
-                transform = `translate(-50%, -50%) rotate(90deg)`;
-                break;
-        }
-        return {
-            left,
-            top,
-            transform,
-        };
-    }, [arrowProps]);
-    const content = (jsxs("div", { ref: ref, className: classNames("i-popup", className), ...restProps, children: [arrow && (jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', className: 'i-popup-arrow', style: arrowCSS, children: jsx("path", { d: 'M0.5 0L1.5 0C1.5 4, 3 5.5, 5 7.5S8,10 8,12S7 14.5, 5 16.5S1.5,20 1.5,24L0.5 24L0.5 0z' }) })), children] }));
-    return createPortal(content, getContainer(trigger));
-});
-
-function Popup(props) {
-    const { visible = false, content, trigger = "hover", gap = 12, offset = 8, fixed, position = "top", showDelay = 16, hideDelay = 12, touchable, arrow = true, align, fitSize, watchResize, clickOutside = true, disabled, referToWindow, style, className, getContainer, children, onVisibleChange, } = props;
-    const triggerRef = useRef(null);
-    const contentRef = useRef(null);
-    const state = useReactive({
-        show: false,
-        toggling: false,
-        style: { position: fixed ? "fixed" : "absolute" },
-        arrowProps: {},
-    });
-    useClickAway((e) => {
-        if (!clickOutside)
-            return;
-        const tar = e.target;
-        const isContain = triggerRef.current?.contains(tar);
-        if (!state.show)
-            return;
-        (!isContain || trigger === "contextmenu") && handleToggle(false);
-    }, contentRef);
-    const handleShow = () => {
-        if (disabled)
-            return;
-        if (state.show &&
-            (trigger !== "hover" || (trigger === "hover" && !touchable))) {
-            return;
-        }
-        state.show = true;
-        state.toggling && clearTimeout(state.toggling);
-        state.toggling = setTimeout(() => {
-            const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-                position,
-                gap,
-                offset,
-                align,
-                refWindow: referToWindow,
-            });
-            state.style = {
-                ...state.style,
-                opacity: 1,
-                transform: "none",
-                left,
-                top,
-            };
-            state.arrowProps = {
-                left: arrowX,
-                top: arrowY,
-                pos: arrowPos,
-            };
-            state.toggling && clearTimeout(state.toggling);
-            onVisibleChange?.(true);
-        }, showDelay);
-    };
-    const handleHide = () => {
-        if (!state.show)
-            return;
-        state.toggling = setTimeout(() => {
-            state.style = {
-                ...state.style,
-                opacity: 0,
-                transform: "translate(0, 2px)",
-            };
-            setTimeout(() => {
-                state.show = false;
-                state.toggling && clearTimeout(state.toggling);
-                onVisibleChange?.(false);
-            }, 160);
-        }, hideDelay);
-    };
-    const handleToggle = (action) => {
-        if (action !== undefined) {
-            action ? handleShow() : handleHide();
-            return;
-        }
-        state.show ? handleHide() : handleShow();
-    };
-    const eventMaps = useCreation(() => ({
-        click: {
-            onClick: () => handleToggle(true),
-        },
-        hover: {
-            onMouseEnter: () => handleToggle(true),
-            onMouseLeave: () => handleToggle(false),
-        },
-        focus: {
-            onFocus: () => handleToggle(true),
-            onBlur: () => handleToggle(false),
-        },
-        contextmenu: {
-            onContextMenu: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                if (state.show) {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        left,
-                        top,
-                    };
-                    return;
-                }
-                state.show = true;
-                state.toggling = setTimeout(() => {
-                    const [left, top] = getPointPosition(e, contentRef.current);
-                    state.style = {
-                        ...state.style,
-                        opacity: 1,
-                        transform: "none",
-                        left,
-                        top,
-                    };
-                    state.toggling && clearTimeout(state.toggling);
-                    onVisibleChange?.(true);
-                }, showDelay);
-            },
-        },
-        none: {},
-    }), []);
-    const contentTouch = useMemo(() => {
-        if (!touchable)
-            return {};
-        const events = {};
-        if (trigger === "hover") {
-            events["onMouseEnter"] = () => handleToggle(true);
-            events["onMouseLeave"] = () => handleToggle(false);
-        }
-        return events;
-    }, [touchable, trigger]);
-    const computePosition = () => {
-        if (!state.show)
-            return;
-        const [left, top, { arrowX, arrowY, arrowPos }] = getPosition(triggerRef.current, contentRef.current, {
-            position,
-            gap,
-            offset,
-            align,
-            refWindow: referToWindow,
-        });
-        Object.assign(state, {
-            style: { ...state.style, left, top },
-            arrowProps: { left: arrowX, top: arrowY, pos: arrowPos },
-        });
-    };
-    useEffect(() => {
-        if (trigger === "contextmenu")
-            return;
-        const { observe, unobserve, disconnect } = useResizeObserver();
-        triggerRef.current && observe(triggerRef.current, computePosition);
-        if (!watchResize || !contentRef.current)
-            return;
-        observe(contentRef.current, computePosition);
-        return () => {
-            if (!watchResize || !contentRef.current)
-                return;
-            unobserve(contentRef.current);
-            triggerRef.current && unobserve(triggerRef.current);
-            disconnect();
-        };
-    }, [watchResize, contentRef.current, triggerRef.current]);
-    useLayoutEffect(() => {
-        if (!fitSize || !state.show)
-            return;
-        const vertical = ["top", "bottom"].includes(position);
-        const size = triggerRef.current?.[vertical ? "offsetWidth" : "offsetHeight"];
-        state.style = { ...state.style, [vertical ? "width" : "height"]: size };
-    }, [state.show, fitSize]);
-    useLayoutEffect(() => {
-        handleToggle(visible);
-    }, [visible]);
-    return (jsxs(Fragment, { children: [Children.map(children, (child) => {
-                if (!isValidElement(child))
-                    return;
-                const { type, props } = child;
-                if (typeof type === "function")
-                    return child;
-                const { className, ...rest } = props;
-                return cloneElement(child, {
-                    ref: triggerRef,
-                    className,
-                    ...eventMaps[trigger],
-                    ...rest,
-                });
-            }), state.show && (jsx(Content$1, { ref: contentRef, arrow: arrow && trigger !== "contextmenu", style: { ...style, ...state.style }, arrowProps: state.arrowProps, className: className, ...contentTouch, trigger: triggerRef.current, getContainer: getContainer, children: content }))] }));
-}
-
-const Dates = (props) => {
-    const { value, month, weeks = ["一", "二", "三", "四", "五", "六", "日"], renderDate = (date) => date.date(), disabledDate, onDateClick, } = props;
-    const today = dayjs();
-    const dates = useMemo(() => {
-        const dates = [];
-        const lastDateOfLastMonth = month.add(-1, "month").endOf("month");
-        let { $W, $D } = lastDateOfLastMonth;
-        if ($W !== 0) {
-            const lastMonthDates = Array.from({ length: $W }).map((whatever, i) => lastDateOfLastMonth.add(i + 1 - $W, "day"));
-            dates.push(...lastMonthDates);
-        }
-        const lastDate = month.endOf("month");
-        $D = lastDate.$D;
-        $W = lastDate.$W;
-        dates.push(...Array.from({ length: $D }).map((whatever, i) => lastDate.add(i + 1 - $D, "day")));
-        if ($W !== 0) {
-            dates.push(...Array.from({ length: 7 - $W }).map((whatever, i) => lastDate.add(i + 1, "day")));
-        }
-        return dates;
-    }, [month]);
-    const handleDateClick = useMemoizedFn((date) => {
-        if (disabledDate?.(date))
-            return;
-        onDateClick?.(date);
-    });
-    return (jsxs(Fragment, { children: [jsx("div", { className: 'i-datepicker-weeks', children: weeks.map((week, i) => (jsx("span", { className: 'i-datepicker-week', children: week }, i))) }), jsx("div", { className: 'i-datepicker-dates', children: dates.map((date, i) => {
-                    const active = date.isSame(value, "day");
-                    const isSameMonth = date.isSame(month, "month");
-                    const isToday = date.isSame(today, "day");
-                    const disabled = disabledDate?.(date);
-                    return (jsx("div", { className: classNames("i-datepicker-item", {
-                            "i-datepicker-active": active,
-                            "i-datepicker-same-month": isSameMonth,
-                            "i-datepicker-today": isToday,
-                            "i-datepicker-disabled": disabled,
-                        }), onClick: () => handleDateClick(date), children: renderDate(date) }, i));
-                }) })] }));
-};
-
-const MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const YearMonth = (props) => {
-    const { value, unitMonth = "月", unitYear = "年", renderYear, renderMonth, onClick, } = props;
-    return (jsxs("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: onClick, children: [jsx("span", { children: renderYear?.(value.year()) }), unitYear, jsx("span", { children: renderMonth?.(value.month() + 1) }), unitMonth] }));
-};
-const Panel = (props) => {
-    const { value, unitYear, unitMonth, renderDate, renderMonth = (m) => m, renderYear = (y) => y, disabledDate, onDateClick, } = props;
-    const state = useReactive({
-        today: value,
-        month: value || dayjs(),
-        selectedYear: dayjs(),
-        years: [],
-        selectable: false,
-    });
-    const $years = useRef(null);
-    const handleOperateMonth = useCallback((next) => {
-        state.month = state.month[next ? "add" : "subtract"](1, "month");
-    }, []);
-    const handleChangeDate = (date) => {
-        if (date.isSame(state.today, "day"))
-            return;
-        if (!date.isSame(state.month, "month")) {
-            state.month = date;
-        }
-        state.today = date;
-        onDateClick?.(date);
-    };
-    const handleChangeMonth = (month) => {
-        state.month = state.month
-            .year(state.selectedYear.year())
-            .month(month - 1);
-        state.selectable = false;
-    };
-    const getMoreYears = throttle({ interval: 100 }, (e) => {
-        const isUp = e.deltaY < 0;
-        state.years = state.years.map((y) => (y += isUp ? -1 : 1));
-    });
-    useEffect(() => {
-        if (!state.selectable)
-            return;
-        state.selectedYear = state.month;
-        const y = state.selectedYear.year();
-        const years = Array.from({ length: 7 }).map((_, i) => y - 3 + i);
-        state.years = [...years];
-    }, [state.selectable]);
-    useEffect(() => {
-        state.today = value;
-        state.month = value || dayjs();
-    }, [value]);
-    return (jsxs("div", { className: 'i-datepicker', children: [jsxs("div", { className: 'i-datepicker-units', children: [jsx(YearMonth, { value: state.month, unitYear: unitYear, unitMonth: unitMonth, renderMonth: renderMonth, renderYear: renderYear, onClick: () => (state.selectable = true) }), jsx("a", { className: 'ml-auto i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(false), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx("a", { className: 'i-datepicker-action', "data-ripple": true, onClick: () => handleOperateMonth(true), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }), jsxs("div", { className: classNames("i-datepicker-ym", {
-                    "i-datepicker-active": state.selectable,
-                }), children: [jsx(Helpericon, { active: true, className: 'i-datepicker-close', onClick: () => (state.selectable = false) }), jsx("div", { ref: $years, className: 'i-datepicker-years', onWheel: getMoreYears, children: state.years.map((y) => (jsx("a", { className: classNames("i-datepicker-year", {
-                                "i-datepicker-active": y === state.selectedYear.year(),
-                            }), onClick: () => (state.selectedYear =
-                                state.selectedYear.year(y)), children: renderYear(y) }, y))) }), jsx("div", { className: 'i-datepicker-months', children: MONTHS.map((m) => {
-                            return (jsx("a", { className: classNames("i-datepicker-month", {
-                                    "i-datepicker-active": m === state.month.month() + 1,
-                                }), onClick: () => handleChangeMonth(m), children: renderMonth(m) }, m));
-                        }) })] }), jsx(Dates, { value: state.today, month: state.month, disabledDate: disabledDate, onDateClick: handleChangeDate, renderDate: renderDate })] }));
-};
-
-dayjs.extend(customParseFormat);
-const FORMATTYPES = ["YYYY-MM-DD", "YYYY-M-D", "YYYY/MM/DD", "YYYY/M/D"];
-const Datepicker = (props) => {
-    const { name, value, weeks, format = "YYYY-MM-DD", renderDate, renderMonth, renderYear, popupProps, disabledDate, onDateClick, onChange, onBlur, ...restProps } = props;
-    const state = useReactive({
-        value,
-    });
-    const [active, setActive] = useState(false);
-    const dayJsValue = useMemo(() => {
-        if (!state.value)
-            return null;
-        const date = dayjs(state.value, format, true);
-        if (date.isValid())
-            return date;
-        return null;
-    }, [state.value]);
-    const handleDateClick = (date) => {
-        handleChange(date.format(format));
-    };
-    const handleChange = (v) => {
-        state.value = v;
-        onChange?.(v);
-    };
-    const handleSetDate = () => {
-        if (!state.value)
-            return;
-        const date = dayjs(state.value, FORMATTYPES, true);
-        if (date.isValid()) {
-            handleChange(date.format(format));
-            return;
-        }
-        handleChange("");
-    };
-    const handleBlur = (e) => {
-        onBlur?.(e);
-        handleSetDate();
-    };
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    return (jsx(Popup, { visible: active, trigger: 'click', position: 'bottom', arrow: false, align: 'start', content: jsx(Panel, { value: dayJsValue, weeks: weeks, renderDate: renderDate, renderMonth: renderMonth, renderYear: renderYear, disabledDate: disabledDate, onDateClick: handleDateClick }), ...popupProps, watchResize: true, onVisibleChange: setActive, children: jsx(Input, { value: state.value, prepend: jsx(Icon, { icon: jsx(CalendarMonthTwotone, {}), className: 'i-datepicker-icon', size: '1em' }), onChange: handleChange, onBlur: handleBlur, onEnter: handleSetDate, ...restProps }) }));
-};
-
-const Description = (props) => {
-    const { data, colon, columns = 1, gap = ".5em", align, labelWidth, labelAlign, vertical, equally, style, className, } = props;
-    return (jsx("div", { className: classNames("i-description", className), style: {
-            ["--description-label-width"]: labelWidth,
-            gridTemplateColumns: `repeat(${columns}, ${equally ? "1fr" : "auto"})`,
-            gap,
-            textAlign: align,
-            ...style,
-        }, children: data.map((item, i) => {
-            const { label, value, style, hidden, rowSpan = 1, colSpan = 1, } = item;
-            if (hidden)
-                return jsx(Fragment$1, {}, i);
-            return (jsxs("div", { className: classNames("i-description-item", {
-                    "i-description-item-vertical": vertical,
-                }), style: {
-                    gridColumn: `span ${colSpan}`,
-                    gridRow: `span ${rowSpan}`,
-                    ...style,
-                }, children: [label && (jsxs("div", { className: 'i-description-label', style: { textAlign: labelAlign }, children: [label, colon] })), jsx("div", { className: 'i-description-value', children: value })] }, i));
-        }) }));
-};
-
-function Drawer(props) {
-    const { visible, position = "left", header, footer, backdropClosable = true, hideCloseButton, className, children, onVisibleChange, onClose, ...restProps } = props;
-    const [show, setShow] = useState(visible);
-    const [active, setActive] = useState(visible);
-    const toggable = useRef(true);
-    useEffect(() => {
-        visible ? handleShow() : handleHide();
-    }, [visible]);
-    const handleShow = useCallback(() => {
-        if (!toggable.current)
-            return;
-        setShow(true);
-        onVisibleChange?.(true);
-        toggable.current = false;
-        setTimeout(() => {
-            setActive(true);
-            toggable.current = true;
-        }, 24);
-    }, []);
-    const handleHide = useCallback(() => {
-        if (!toggable.current)
-            return;
-        toggable.current = false;
-        setActive(false);
-        setTimeout(() => {
-            setShow(false);
-            onVisibleChange?.(false);
-            toggable.current = true;
-            onClose?.();
-        }, 240);
-    }, []);
-    const handleBackdropClick = useCallback(function () {
-        backdropClosable && handleHide();
-    }, []);
-    return createPortal(show && (jsx("div", { className: classNames("i-backdrop-drawer", className, {
-            "i-active": active,
-        }), onClick: handleBackdropClick, ...restProps, children: jsxs("div", { className: classNames("i-drawer", `i-drawer-${position}`), onClick: (e) => e.stopPropagation(), children: [jsxs("header", { className: 'i-drawer-header', children: [header, jsx(Helpericon, { active: !hideCloseButton, className: 'i-drawer-close', onClick: handleHide })] }), jsx("div", { className: 'i-drawer-content', children: children }), jsx("div", { className: 'i-drawer-footer', children: footer })] }) })), document.body);
-}
-
-const Item$4 = forwardRef((props, ref) => {
-    const { active, type, align, disabled, label, style, className, children, ...restProps } = props;
-    return (jsxs("li", { ref: ref, className: classNames("i-list-item", className, {
-            "i-list-item-active": active,
-            "i-list-option": type === "option",
-            disabled,
-        }), style: { alignItems: align, ...style }, ...restProps, children: [label !== undefined && (jsx("span", { className: 'i-list-item-label', children: label })), children] }));
-});
-
-const Virtual = (props) => {
-    const { data, itemKey, renderItem, ...restProps } = props;
-    return (jsx(VList, { data: data, itemKey: itemKey, ...restProps, children: (item, i) => {
-            return renderItem?.(item, i);
-        } }));
-};
-
-const List$1 = (props) => {
-    const { label, type, className, children, ...restProps } = props;
-    return (jsx("ul", { className: classNames("i-list", className), ...restProps, children: Children.map(children, (node, i) => {
-            const renderLabel = typeof label === "function" ? label(i) : label;
-            return cloneElement(node, {
-                label: renderLabel,
-                ...node.props,
-                type,
-            });
-        }) }));
-};
-List$1.Virtual = Virtual;
-List$1.Item = Item$4;
-
-const { Item: ListItem } = List$1;
-const Item$3 = (props) => {
-    const { more, moreProps, ...restProps } = props;
-    const Li = jsx(ListItem, { ...restProps });
-    if (!more)
-        return Li;
-    return (jsx(Popup, { position: 'right', touchable: true, arrow: false, align: 'start', offset: 10, ...moreProps, content: jsx(List$1, { className: 'i-dropdown-content', onClick: (e) => e.stopPropagation(), children: more }), children: Li }));
-};
-
-const Dropdown = (props) => {
-    const { width, content, children, ...restProps } = props;
-    return (jsx(Popup, { trigger: 'click', position: 'bottom', touchable: true, content: jsx(List$1, { className: 'i-dropdown-content', style: { minWidth: width }, children: content }), ...restProps, children: children }));
-};
-Dropdown.Item = Item$3;
-
-const Flex = (props) => {
-    const { as: Component = "div", align, justify, direction, wrap, gap, columns, className, style, ...restProps } = props;
-    const gridColumns = useMemo(() => {
-        if (!columns)
-            return;
-        if (typeof columns === "number")
-            return `repeat(${columns}, 1fr)`;
-        return columns;
-    }, [columns]);
-    return (jsx(Component, { ...restProps, style: {
-            alignItems: align,
-            justifyContent: justify,
-            gap,
-            flexDirection: direction,
-            flexWrap: wrap === true ? "wrap" : wrap,
-            gridTemplateColumns: gridColumns,
-            ...style,
-        }, className: classNames(className, {
-            [columns ? "grid" : "flex"]: true,
-        }) }));
-};
-
-const Context = createContext({});
-
-function Field(props) {
-    const { name, required, children } = props;
-    const state = useReactive({
-        value: undefined,
-        status: "normal",
-        message: undefined,
-        update: 0,
-    });
-    const form = useContext(Context);
-    const { id } = form;
-    const handleChange = useCallback((v) => {
-        if (!name)
-            return;
-        form.set(name, v);
-    }, [name]);
-    const hijackChildren = useMemo(() => {
-        return Children.map(children, (node) => {
-            if (!isValidElement(node))
-                return null;
-            const { onChange } = node.props;
-            const { value, status, message } = state;
-            return cloneElement(node, {
-                value,
-                status,
-                message,
-                required,
-                onChange: (...args) => {
-                    handleChange(args[0]);
-                    onChange?.(...args);
-                    Object.assign(state, {
-                        status: "normal",
-                        message: undefined,
-                    });
-                },
-            });
-        });
-    }, [children, state.update]);
-    useEffect(() => {
-        if (!name)
-            return;
-        PubSub.subscribe(`${id}:set:${name}`, (evt, v) => {
-            state.value = v;
-            state.update += 1;
-        });
-        PubSub.subscribe(`${id}:invalid:${name}`, (evt, v) => {
-            Object.assign(state, v);
-            state.update += 1;
-        });
-        setTimeout(() => {
-            form.data[name] = form.data[name] ?? undefined;
-        }, 0);
-        return () => {
-            PubSub.unsubscribe(`${id}:set:${name}`);
-            PubSub.unsubscribe(`${id}:invalid:${name}`);
-        };
-    }, [name]);
-    if (!name)
-        return children;
-    return hijackChildren;
-}
-
-class IFormInstance {
-    id;
-    data = {};
-    rules = {};
-    constructor() {
-        this.id = uid(8);
-        this.data = {};
-    }
-    get(field) {
-        return field ? this.data[field] : this.data;
-    }
-    set(field, value) {
-        const id = this.id;
-        if (!this.data)
-            return;
-        if (typeof field === "string") {
-            this.data[field] = value;
-            PubSub.publish(`${id}:set:${field}`, value);
-            return;
-        }
-        Object.keys(field).map((name) => {
-            this.data[name] = field[name];
-            PubSub.publish(`${id}:set:${name}`, field[name]);
-        });
-    }
-    clear() {
-        if (!this.data)
-            return;
-        Object.keys(this.data).map((name) => {
-            PubSub.publish(`${this.id}:set:${name}`, undefined);
-            this.data[name] = undefined;
-        });
-    }
-    async validate(field) {
-        const { id, rules, data } = this;
-        if (!rules)
-            return data;
-        if (field) {
-            const o = rules[field];
-            const rule = {
-                validator: (v) => Array.isArray(v)
-                    ? v.length > 0
-                    : ![undefined, null, ""].includes(v),
-                message: undefined,
-            };
-            if (typeof o === "function") {
-                rule.validator = o;
-            }
-            else if (o === true) {
-                rule.message = "required";
-            }
-            else {
-                Object.assign(rule, o);
-            }
-            const isValid = rule.validator?.(data[field], this);
-            if (!isValid) {
-                PubSub.publish(`${id}:invalid:${field}`, {
-                    message: rule.message,
-                    status: "error",
-                });
-                return false;
-            }
-            PubSub.publish(`${id}:invalid:${name}`, {
-                message: null,
-                status: "normal",
-            });
-            return true;
-        }
-        let isAllValid = true;
-        Object.keys(data).map((name) => {
-            const o = rules[name];
-            if (o === undefined)
-                return;
-            const rule = {
-                validator: (v) => (Array.isArray(v) ? v.length > 0 : !!v),
-                message: undefined,
-            };
-            if (typeof o === "function") {
-                rule.validator = o;
-            }
-            else if (o === true) {
-                rule.message = "required";
-            }
-            else {
-                Object.assign(rule, o);
-            }
-            const isValid = rule.validator?.(data[name], this);
-            if (!isValid) {
-                PubSub.publish(`${id}:invalid:${name}`, {
-                    message: rule.message,
-                    status: "error",
-                });
-                isAllValid = false;
-            }
-            else {
-                PubSub.publish(`${id}:invalid:${name}`, {
-                    message: null,
-                    status: "normal",
-                });
-            }
-        });
-        return isAllValid ? data : false;
-    }
-}
-function useForm(form) {
-    const formRef = useRef();
-    if (!formRef.current) {
-        formRef.current = form ?? new IFormInstance();
-    }
-    return formRef.current;
-}
-
-const Form = (props) => {
-    const { form = {}, rules = {}, initialValues = {}, style, className, width, children, ...rest } = props;
-    useEffect(() => {
-        Object.assign(form, {
-            data: { ...initialValues },
-            rules: { ...rules },
-        });
-    }, [form, rules]);
-    return (jsx(Context.Provider, { value: form, children: jsx("form", { style: { ...style, width }, className: classNames("i-form", className), ...rest, children: children }) }));
-};
-Form.useForm = useForm;
-Form.Field = Field;
-
-function DefaultContent(props) {
-    const { title, footer, hideCloseButton, footerLeft, okButtonProps = {
-        children: "确定",
-        onClick: props.onOk,
-    }, cancelButtonProps = {
-        secondary: true,
-        children: "关闭",
-        onClick: props.onClose,
-    }, children, onClose, } = props;
-    const showHeader = title || !hideCloseButton;
-    const renderFooter = useMemo(() => {
-        if (footer || footer === null)
-            return footer;
-        const propsOk = Object.assign({}, okButtonProps);
-        const propsCancel = Object.assign({}, cancelButtonProps);
-        return (jsxs(Fragment, { children: [footerLeft, jsx(Button, { ...propsOk }), jsx(Button, { ...propsCancel })] }));
-    }, [footer, okButtonProps, cancelButtonProps]);
-    return (jsxs(Fragment, { children: [showHeader && (jsxs("header", { className: 'i-modal-header', children: [title && jsx("b", { children: title }), jsx(Helpericon, { active: !hideCloseButton, className: 'i-modal-close', onClick: onClose })] })), jsx("div", { className: 'i-modal-content', children: children }), jsx("footer", { className: 'i-modal-footer', children: renderFooter })] }));
-}
-function Modal(props) {
-    const { visible, title, footer, okButtonProps, cancelButtonProps, closable = true, hideBackdrop, backdropClosable = true, hideCloseButton, width, height, customized, fixed, shadow = true, children, style, className, footerLeft, onVisibleChange, onClose, onOk, ...restProps } = props;
-    const [show, setShow] = useState(visible);
-    const [active, setActive] = useState(false);
-    const [bounced, setBounced] = useState(false);
-    const toggable = useRef(true);
-    const handleShow = useCallback(() => {
-        if (!toggable.current)
-            return;
-        setShow(true);
-        toggable.current = false;
-        setTimeout(() => {
-            setActive(true);
-            onVisibleChange?.(true);
-            toggable.current = true;
-        }, 24);
-    }, []);
-    const handleHide = useCallback(() => {
-        if (!toggable.current)
-            return;
-        toggable.current = false;
-        if (!closable) {
-            setBounced(true);
-            setTimeout(() => {
-                setBounced(false);
-                toggable.current = true;
-            }, 400);
-            return;
-        }
-        setActive(false);
-        setTimeout(() => {
-            setShow(false);
-            toggable.current = true;
-            onVisibleChange?.(false);
-            onClose?.();
-        }, 240);
-    }, [closable]);
-    const handleBackdropClick = useCallback(function () {
-        backdropClosable && handleHide();
-    }, [closable, backdropClosable]);
-    useEffect(() => {
-        visible ? handleShow() : handleHide();
-    }, [visible]);
-    if (!show)
-        return null;
-    return createPortal(jsx("div", { className: classNames("i-modal-container", {
-            "i-modal-backdrop": !hideBackdrop,
-            "i-modal-customized": customized,
-            "i-modal-active": active,
-            fixed,
-        }, className), style: style, onClick: handleBackdropClick, children: jsxs("div", { className: classNames("i-modal", {
-                bounced,
-                shadow,
-            }), style: {
-                width,
-                height,
-            }, onClick: (e) => e.stopPropagation(), ...restProps, children: [customized && children, !customized && (jsx(DefaultContent, { title: title, hideCloseButton: hideCloseButton, footer: footer, okButtonProps: okButtonProps, cancelButtonProps: cancelButtonProps, children: children, footerLeft: footerLeft, onOk: onOk, onClose: handleHide }))] }) }), document.body);
-}
-
-const HookModal = forwardRef((props, ref) => {
-    const state = useReactive({});
-    useImperativeHandle(ref, () => ({
-        update: (config = {}) => {
-            Object.assign(state, config);
-        },
-    }));
-    return jsx(Modal, { ...props, ...state });
-});
-
-const Text = (props) => {
-    const { as: Tag = "span", size, weight, decoration, gradient, style, className, children, } = props;
-    const gradients = useMemo(() => {
-        if (!gradient || !Array.isArray(gradient))
-            return {};
-        return {
-            background: `-webkit-linear-gradient(${gradient.join(",")})`,
-            backgroundClip: "text",
-        };
-    }, [gradient]);
-    return (jsx(Tag, { style: {
-            fontSize: size,
-            fontWeight: weight,
-            textDecoration: decoration,
-            ...gradients,
-            ...style,
-        }, className: classNames(className, {
-            "i-text-gradient": gradient,
-        }), children: children }));
-};
-
-function Number$1(props) {
-    const { count, to, decimal, thousand = ",", duration = 2400, easing, ...restProps } = props;
-    const [n, setN] = useState(count);
-    const number = useMemo(() => {
-        if (n === undefined)
-            return;
-        const z = n.toFixed(decimal);
-        if (!thousand)
-            return z;
-        return formatNumber(n, { precision: decimal, thousand });
-    }, [n, thousand]);
-    useEffect(() => {
-        if (count === undefined || to === undefined)
-            return;
-        animate(count, to, duration, (v) => setN(count + v), easing);
-    }, [to]);
-    useEffect(() => setN(count), [count]);
-    return jsx(Text, { ...restProps, children: number });
-}
-
-function Number(props) {
-    const { seconds, zero, units, ...restProps } = props;
-    const text = useMemo(() => {
-        if (seconds === undefined)
-            return "";
-        return formatTime(seconds, {
-            zero,
-            units,
-        });
-    }, [seconds]);
-    return jsx(Text, { ...restProps, children: text });
-}
-
-Text.Number = Number$1;
-Text.Time = Number;
-
-function Circle(props) {
-    const { value, height = 40, size = 8 } = props;
-    return (jsxs("div", { className: 'i-progress-circle', children: [jsxs("svg", { width: height, height: height, children: [jsx("circle", { cx: height / 2, cy: height / 2, r: height / 2 - size / 2, fill: 'none', stroke: 'var(--background-opacity-2)', strokeWidth: size }), jsx("circle", { cx: height / 2, cy: height / 2, r: height / 2 - size / 2, fill: 'none', stroke: 'var(--color-main)', strokeWidth: size, strokeDasharray: 100, pathLength: 100, className: 'i-progress-circle-path', strokeLinecap: 'round', style: {
-                            strokeDashoffset: `calc(100 - ${value})`,
-                        } })] }), jsxs("span", { className: 'i-progress-circle-value', children: [jsx("span", { children: value }), jsx(Text, { size: '.81em', className: 'color-7', children: "%" })] })] }));
-}
-
-const Line = forwardRef((props, ref) => {
-    const { value, size, barClass, dragging, renderCursor, onMouseDown } = props;
-    return (jsx("div", { ref: ref, className: 'i-progress', style: { height: size }, onMouseDown: onMouseDown, children: jsx("div", { className: classNames("i-progress-bar", barClass, {
-                "no-transition": dragging,
-            }), style: { width: `${value}%` }, children: renderCursor && (jsx("a", { className: 'i-progress-cursor', children: renderCursor(value ?? 0) })) }) }));
-});
-
-const Progress = (props) => {
-    const { value = 0, size = 8, height = 40, precision = 0, style, draggable = true, type = "line", barClass, label, labelInline, className, renderCursor, onChange, } = props;
-    const ref = useRef(null);
-    const state = useReactive({
-        value,
-        dragging: false,
-        width: 0,
-        start: 0,
-    });
-    const toFixedValue = useMemo(() => {
-        let value = +state.value.toFixed(precision);
-        value = Math.min(100, value);
-        value = Math.max(0, value);
-        return value;
-    }, [state.value, precision]);
-    const handleMouseDown = useMemoizedFn((e) => {
-        if (!ref.current || !draggable)
-            return;
-        const rect = ref.current.getBoundingClientRect();
-        const value = ((e.pageX - rect.left) * 100) / rect.width;
-        Object.assign(state, {
-            value,
-            width: rect.width,
-            start: rect.left,
-            dragging: true,
-        });
-    });
-    const handleMouseMove = useMemoizedFn((e) => {
-        if (!state.dragging || !draggable)
-            return;
-        e.preventDefault();
-        const { start, width } = state;
-        const offset = e.pageX - start;
-        if (offset < 0 || offset > width)
-            return;
-        state.value = ((e.pageX - start) * 100) / width;
-    });
-    const handleMouseUp = useMemoizedFn(() => {
-        if (!state.dragging || !draggable)
-            return;
-        onChange?.(toFixedValue);
-        state.dragging = false;
-    });
-    useMouseMove(handleMouseMove);
-    useMouseUp(handleMouseUp);
-    useEffect(() => {
-        if (value > 100) {
-            state.value = 100;
-            return;
-        }
-        if (value < 0) {
-            state.value = 0;
-            return;
-        }
-        state.value = value;
-    }, [value]);
-    return (jsxs("div", { className: classNames("i-input-label", className, {
-            "i-input-inline": labelInline,
-        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), type === "line" && (jsx(Line, { ref: ref, size: size, barClass: barClass, dragging: state.dragging, value: state.value, renderCursor: renderCursor, onMouseDown: handleMouseDown })), type === "circle" && (jsx(Circle, { value: state.value, height: height, size: size }))] }));
-};
-
-const Video = forwardRef((props, ref) => {
-    const { style, hideControls, autoplay, muted, volume = 50, height, width, useOriginControls, timeProgressProps = {
-        barClass: "bg-2",
-    }, volumeProgressProps = {
-        barClass: "bg-1",
-    }, className, onFullScreenChange, ...restProps } = props;
-    const state = useReactive({
-        playing: autoplay,
-        volume: muted ? 0 : volume,
-        volumeCache: 0,
-        muted,
-        current: 0,
-        duration: 0,
-        isFullscreen: false,
-    });
-    const $v = useRef(null);
-    const timeUpdateListener = (e) => {
-        const tar = e.target;
-        if (tar.paused)
-            return;
-        Object.assign(state, {
-            current: tar.currentTime,
-        });
-    };
-    const playChangeListener = (e) => {
-        state.playing = !e.target.paused;
-    };
-    const fsChangeListener = () => {
-        const tar = $v.current?.parentElement;
-        if (!tar)
-            return;
-        state.isFullscreen = document.fullscreenElement === tar;
-    };
-    const volumeChangeListener = (e) => {
-        const tar = e.target;
-        Object.assign(state, {
-            volume: tar.volume * 100,
-            muted: tar.volume === 0,
-        });
-    };
-    const handlePlay = () => {
-        const v = $v.current;
-        if (!v)
-            return;
-        v.paused ? v.play() : v.pause();
-    };
-    const handleReady = (e) => {
-        const tar = e.target;
-        Object.assign(state, {
-            duration: tar.duration,
-            current: tar.currentTime,
-        });
-        tar.volume = state.volume / 100;
-    };
-    const handleMuted = () => {
-        const v = $v.current;
-        if (!v)
-            return;
-        if (v.volume > 0) {
-            state.volumeCache = v.volume;
-            v.volume = 0;
-            return;
-        }
-        v.volume = state.volumeCache === 0 ? 0.5 : state.volumeCache;
-    };
-    const handleStop = () => {
-        const v = $v.current;
-        if (!v)
-            return;
-        v.currentTime = 0;
-        v.pause();
-    };
-    const handleFullscreen = () => {
-        const tar = $v.current?.parentElement;
-        if (!tar)
-            return;
-        state.isFullscreen ? exitFullScreen() : fullScreen(tar);
-        onFullScreenChange?.(!state.isFullscreen);
-    };
-    const handleUpdateTime = (t) => {
-        const v = $v.current;
-        if (!v)
-            return;
-        v.currentTime = (state.duration * t) / 100;
-    };
-    const handleUpdateVolume = (t) => {
-        const v = $v.current;
-        if (!v)
-            return;
-        v.volume = t / 100;
-    };
-    useImperativeHandle(ref, () => ({
-        play: () => {
-            const v = $v.current;
-            if (!v)
-                return;
-            v.play();
-        },
-        pause: () => {
-            const v = $v.current;
-            if (!v)
-                return;
-            v.pause();
-        },
-        stop: handleStop,
-        fullscreen: handleFullscreen,
-        getVideo: () => $v.current,
-    }));
-    useEffect(() => {
-        const v = $v.current;
-        if (!v)
-            return;
-        v.addEventListener("timeupdate", timeUpdateListener);
-        v.addEventListener("play", playChangeListener);
-        v.addEventListener("pause", playChangeListener);
-        v.addEventListener("volumechange", volumeChangeListener);
-        document.addEventListener("fullscreenchange", fsChangeListener);
-        return () => {
-            v.removeEventListener("timeupdate", timeUpdateListener);
-            v.removeEventListener("play", playChangeListener);
-            v.removeEventListener("pause", playChangeListener);
-            v.removeEventListener("volumechange", volumeChangeListener);
-            document.removeEventListener("fullscreenchange", fsChangeListener);
-        };
-    }, []);
-    return (jsxs("div", { className: classNames("i-video", className), style: { height, width, ...style }, onClick: handlePlay, onDoubleClick: () => handleFullscreen(), children: [jsx("video", { ref: $v, onCanPlay: handleReady, ...restProps, controls: useOriginControls }), !hideControls && !useOriginControls && (jsxs("div", { className: 'i-video-controls', onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: 'i-video-control flex-1', children: [jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, after: jsx(Icon, { icon: jsx(PauseRound, {}) }), active: state.playing, onClick: handlePlay, children: jsx(Icon, { icon: jsx(PlayArrowRound, {}) }) }), jsx(Button, { className: 'i-video-btn', flat: true, square: true, onClick: handleStop, children: jsx(Icon, { icon: jsx(StopRound, {}) }) }), jsxs("span", { className: 'i-video-times', children: [jsx(Text.Time, { seconds: state.current }), " /", jsx(Text.Time, { seconds: state.duration })] }), jsx(Progress, { className: 'mr-8', ...timeProgressProps, value: (state.current / state.duration) * 100, onChange: handleUpdateTime })] }), jsx("div", { className: 'i-video-control', children: jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, after: jsx(Icon, { icon: jsx(FullscreenExitRound, {}) }), active: state.isFullscreen, onClick: () => handleFullscreen(), children: jsx(Icon, { icon: jsx(FullscreenRound, {}) }) }) }), jsxs("div", { className: 'i-video-control', children: [jsx(Button.Toggle, { className: 'i-video-btn', flat: true, square: true, active: state.volume <= 0, after: jsx(Icon, { icon: jsx(VolumeOffRound, {}), size: '1.2em' }), onClick: handleMuted, children: jsx(Icon, { icon: jsx(VolumeDownRound, {}) }) }), jsx(Progress, { style: { width: 100 }, className: 'mr-8', ...volumeProgressProps, value: state.volume, onChange: handleUpdateVolume })] })] }))] }));
-});
-
-function renderFile(props) {
-    const { name, suffix, type } = props;
-    switch (type) {
-        case TFileType.IMAGE:
-            return jsx("img", { src: props.src });
-        case TFileType.VIDEO:
-            return jsx(Video, { ...props });
-        default:
-            return (jsxs("div", { className: 'i-preview-unknown', children: [jsx(Icon, { icon: jsx(FeedOutlined, {}), size: '3em' }), jsx("h5", { className: 'mt-4', children: name || suffix || "?" })] }));
-    }
-}
-
-function Content(props) {
-    const { items = [], initial = 0, renderFile: renderFile$1 = renderFile, onRotate, onChange, onClose, onZoom, } = props;
-    const state = useReactive({
-        current: initial,
-        rotate: 0,
-        scale: 1,
-        translate: `0, 0`,
-    });
-    const box = useRef(null);
-    const files = useMemo(() => {
-        return items.map((item) => {
-            const o = {
-                src: "",
-            };
-            if (typeof item === "string") {
-                o.src = item;
-            }
-            else {
-                Object.assign(o, item);
-            }
-            o.suffix = getSuffixByUrl(o.src) || "";
-            o.type = getFileType(o.suffix, item["type"]);
-            return o;
-        });
-    }, [items]);
-    const { file, content } = useMemo(() => {
-        const file = files[state.current];
-        const content = renderFile$1(file);
-        return {
-            file,
-            content,
-        };
-    }, [state.current, items]);
-    const isImage = file.type === TFileType.IMAGE;
-    const handleSwitch = (next) => {
-        const l = files.length;
-        const { current: before } = state;
-        if (next >= l) {
-            state.current = 0;
-        }
-        else if (next < 0) {
-            state.current = l - 1;
-        }
-        else {
-            state.current = next;
-        }
-        onChange?.(state.current, before);
-        state.rotate = files[state.current].rotate || 0;
-        if (state.scale !== 1) {
-            state.scale = 1;
-            onZoom?.(1);
-        }
-        onRotate?.(state.rotate);
-    };
-    const handleRotate = (deg) => {
-        state.rotate += deg;
-        onRotate?.(state.rotate);
-    };
-    const handleMouseWheel = throttle({ interval: 60 }, (e) => {
-        if (!isImage)
-            return;
-        let after = state.scale + (e.deltaY < 0 ? 0.05 : -0.05);
-        if (after > 2)
-            after = 2;
-        if (after < 0.25)
-            after = 0.25;
-        onZoom?.(after);
-        state.scale = after;
-    });
-    return (jsxs(Fragment, { children: [jsx("div", { ref: box, className: 'i-preview-content', style: {
-                    transform: `rotate(${state.rotate}deg) scale(${state.scale})`,
-                }, onWheel: handleMouseWheel, onClick: (e) => e.stopPropagation(), children: content }), jsxs("div", { className: 'i-preview-controls', children: [jsx(Button, { square: true, flat: true, onClick: onClose, children: jsx(Icon, { icon: jsx(CloseRound, {}) }) }), files.length > 1 && (jsxs("span", { className: 'px-8', children: [state.current + 1, " / ", files.length] })), state.scale !== 1 && (jsxs(Button, { flat: true, onClick: () => (state.scale = 1), children: [jsx(Icon, { icon: jsx(AspectRatioRound, {}) }), jsxs("span", { className: 'mt-4', children: [(state.scale * 100).toFixed(0), "%"] })] })), jsx(Button, { square: true, flat: true, href: file.src, target: '_blank', children: jsx(Icon, { icon: jsx(OpenInNewRound, {}) }) }), jsx(Button, { square: true, flat: true, href: file.src, download: true, target: '_blank', children: jsx(Icon, { icon: jsx(FileDownloadOutlined, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(90), children: jsx(Icon, { icon: jsx(RotateRightRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleRotate(-90), children: jsx(Icon, { icon: jsx(RotateLeftRound, {}) }) }), files.length > 1 && (jsxs(Fragment, { children: [jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current - 1), children: jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }) }), jsx(Button, { square: true, flat: true, onClick: () => handleSwitch(state.current + 1), children: jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }) })] }))] })] }));
-}
-
-function usePreview() {
-    const ref = useRef(null);
-    const preview = (config) => {
-        const { items, modalProps, onClose, ...restProps } = config;
-        const handleClose = () => {
-            onClose?.();
-            unMount?.();
-        };
-        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, className: 'i-preview', customized: true, shadow: false, ...modalProps, children: jsx(Content, { ...restProps, items: items, onClose: () => {
-                    ref.current?.update({ visible: false });
-                } }), fixed: true, onClose: handleClose }));
-    };
-    return preview;
-}
-
-const Image = (props) => {
-    const { src, round, size, initSize, lazyload, fallback = (jsx(Icon, { icon: jsx(HideImageTwotone, {}), size: '2em', className: 'color-5' })), fit, style, className, children, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
-    const state = useReactive({
-        status: "loading",
-    });
-    const ref = useRef(null);
-    const wh = fit ? "100%" : undefined;
-    const { observe, unobserve } = useIntersectionObserver();
-    const preview = usePreview();
-    const handleError = (err) => {
-        onError?.(err);
-        state.status = "error";
-    };
-    const handleLoad = (e) => {
-        onLoad?.(e);
-        state.status = undefined;
-    };
-    const handleClick = (e) => {
-        onClick?.(e);
-        previewable &&
-            src &&
-            preview({
-                items: [
-                    {
-                        src,
-                        type: TFileType.IMAGE,
-                    },
-                ],
-            });
-    };
-    useEffect(() => {
-        if (!src)
-            return;
-        state.status = "loading";
-        if (!lazyload || !ref.current)
-            return;
-        observe(ref.current, (tar, visible) => {
-            if (!visible)
-                return;
-            tar.setAttribute("src", tar.dataset.src || "");
-            unobserve(tar);
-        });
-        return () => {
-            ref.current && unobserve(ref.current);
-        };
-    }, [src]);
-    restProps[lazyload ? "data-src" : "src"] = src;
-    const iSize = state.status === "loading" ? initSize : undefined;
-    return (jsx("div", { style: {
-            width: size ?? iSize,
-            height: size ?? iSize,
-            ...style,
-        }, className: classNames("i-image", className, {
-            rounded: round,
-            [`i-image-${state.status}`]: state.status,
-        }), children: state.status === "error" ? (fallback) : (jsxs(Fragment, { children: [src && (jsx("img", { ref: ref, style: { objectFit: fit, width: wh, height: wh }, ...restProps, onLoad: handleLoad, onError: handleError, onClick: handleClick })), src && state.status === "loading" && jsx(Loading, {}), children && jsx("div", { className: 'i-image-text', children: children })] })) }));
-};
-
-function List(props) {
-    const { items = [], gap = 8, columns, wrap, direction, usePreview: previewable, onClick, ...restProps } = props;
-    const preview = usePreview();
-    const files = useMemo(() => {
-        return items.map((item) => {
-            const o = {
-                src: "",
-            };
-            if (typeof item === "string") {
-                o.src = item;
-            }
-            else {
-                Object.assign(o, item);
-            }
-            o.suffix = getSuffixByUrl(o.src) || "";
-            o.type = getFileType(o.suffix, item["type"]);
-            return o;
-        });
-    }, [items]);
-    const handleClick = (e, i) => {
-        onClick?.(e);
-        previewable &&
-            preview({
-                items: files,
-                initial: i,
-            });
-    };
-    if (!files.length)
-        return "";
-    return (jsx(Flex, { className: 'i-image-list', gap: gap, columns: columns, wrap: wrap, direction: direction, children: files.map((img, i) => {
-            return (jsx(Image, { src: img.src, size: 60, usePreview: false, onClick: (e) => handleClick(e, i), ...restProps }, i));
-        }) }));
-}
-
-Image.List = List;
-
-const AlignMap = {
-    left: "flex-start",
-    center: "center",
-    right: "flex-end",
-};
-const GlobalConfig = {
-    align: "center",
-    offset: "12px",
-    gap: 12,
-    max: 0,
-};
-const ItemDefaultConfig = {
-    duration: 3000,
-    closable: true,
-    active: false,
-};
-const container = createContainer();
-const handler = {
-    callout(item) { },
-    close() { },
-};
-const queue = {
-    left: [],
-    center: [],
-    right: [],
-};
-const heights = {
-    left: [],
-    center: [],
-    right: [],
-};
-createRoot(container).render(jsx(Messages, {}));
-const MessageItem = forwardRef(function ({ active, content, top, className, style, onClick }, ref) {
-    return (jsx("div", { ref: ref, className: classNames("i-message", className, {
-            "i-message-active": active,
-        }), style: {
-            ...style,
-            top,
-        }, onClick: onClick, children: content }));
-});
-function Messages() {
-    const ref = useRef(null);
-    const state = useReactive({
-        items: {
-            left: [],
-            center: [],
-            right: [],
-        },
-        tops: {
-            left: [],
-            center: [],
-            right: [],
-        },
-    });
-    const offsetTop = {
-        left: 0,
-        center: 0,
-        right: 0,
-    };
-    useEffect(() => {
-        Object.assign(handler, {
-            callout: function (item) {
-                const { align = "center", unshift, onShow } = item;
-                const size = queue[align][unshift ? "unshift" : "push"](item);
-                state.items[align] = [...queue[align]];
-                setTimeout(() => {
-                    const h = ref.current?.offsetHeight || 0;
-                    queue[align][unshift ? 0 : size - 1].active = true;
-                    state.items[align] = [...queue[align]];
-                    heights[align][unshift ? "unshift" : "push"](h);
-                    state.tops[align] = [...heights[align]];
-                    onShow?.();
-                }, 0);
-                item.duration !== 0 &&
-                    setTimeout(this.close.bind(item), item.duration);
-            },
-            close: function () {
-                const item = this;
-                const { align = "center", onHide } = item;
-                const index = queue[align].findIndex((i) => i.id === item.id);
-                if (index < 0)
-                    return;
-                queue[align][index].active = false;
-                state.items[align] = [...queue[align]];
-                item.timer = setTimeout(() => {
-                    const index = queue[align].findIndex((i) => i.id === item.id);
-                    queue[align].splice(index, 1);
-                    heights[align].splice(index, 1);
-                    state.tops[align] = [...heights[align]];
-                    state.items[align] = [...queue[align]];
-                    item.timer && clearTimeout(item.timer);
-                    onHide?.();
-                }, 240);
-            },
-        });
-    }, []);
-    const renderItems = (item, i) => {
-        if (!item)
-            return jsx(Fragment, {});
-        const { id, active, content, align = "center", className } = item;
-        offsetTop[align] += state.tops[align][i - 1] || 0;
-        const top = GlobalConfig.gap * i + offsetTop[align];
-        return (jsx(MessageItem, { ref: ref, active: active, content: content, top: top, className: className, style: { alignSelf: AlignMap[align] }, onClick: handler.close.bind(item) }, id));
-    };
-    return (jsxs("div", { className: 'i-messages', children: [state.items.left.map(renderItems), state.items.center.map(renderItems), state.items.right.map(renderItems)] }));
-}
-function message(config) {
-    if (["string", "number"].includes(typeof config) ||
-        isValidElement(config)) {
-        config = { content: config };
-    }
-    config = Object.assign({ id: uid(7) }, ItemDefaultConfig, config);
-    handler.callout(config);
-    return handler.close.bind(config);
-}
-function createContainer(direction) {
-    const container = document.createElement("div");
-    container.dataset.id = "messages";
-    document.body.append(container);
-    return container;
-}
-
-function useModal() {
-    const ref = useRef(null);
-    const handleOpen = (props) => {
-        const unMount = renderNode(jsx(HookModal, { ref: ref, visible: true, ...props, onClose: () => {
-                props.onClose?.();
-                unMount?.();
-            } }));
-    };
-    const handleUpdate = (props) => {
-        if (!ref.current)
-            return;
-        const { update } = ref.current;
-        update(props);
-    };
-    return {
-        open: handleOpen,
-        update: handleUpdate,
-    };
-}
-
-Modal.useModal = useModal;
-
-const Page = (props) => {
-    const { page, active, children, onChange } = props;
-    const [loading, setLoading] = useState(false);
-    const handleClick = async () => {
-        if (active || loading)
-            return;
-        setLoading(true);
-        await onChange?.(page);
-        setLoading(false);
-    };
-    return (jsxs("a", { className: classNames("i-page", {
-            "i-page-active": active,
-            "i-page-loading": loading,
-            "i-page-disabled": false,
-        }), "data-page": page, onClick: handleClick, children: [loading && jsx(Loading, {}), children] }));
-};
-
-const Pagination = (props) => {
-    const { page: defaultPage = 1, size = 10, total = 0, sibling = 2, prev = jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}) }), next = jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}) }), simple, jumper, className, renderEllipsis = () => (jsx(Icon, { icon: jsx(MoreHorizRound, {}), className: 'color-7' })), renderPage = (i) => i, onChange, ...restProps } = props;
-    const [page, setPage] = useState(defaultPage);
-    const [loading, setLoading] = useState(false);
-    const totalPage = useMemo(() => Math.ceil(total / size), [size, total]);
-    const [start, end, loop] = useMemo(() => {
-        const start = Math.max(1, page - sibling);
-        const end = Math.min(totalPage, page + sibling);
-        return [
-            start,
-            end,
-            Array.from({ length: end - start + 1 }).map((n, i) => start + i),
-        ];
-    }, [page, totalPage, sibling]);
-    if (totalPage <= page && page === 1)
-        return jsx(Fragment, {});
-    const handlePageChange = async (p) => {
-        if (!onChange || loading)
-            return;
-        setLoading(true);
-        return new Promise(async (resolve) => {
-            if (p === undefined)
-                return;
-            await onChange(p);
-            setPage(p);
-            setLoading(false);
-            resolve();
-        });
-    };
-    useEffect(() => setPage(defaultPage), [defaultPage]);
-    return (jsxs("div", { className: classNames("i-pagination", className), ...restProps, children: [prev && (jsx(Page, { page: page - 1 || 1, onChange: handlePageChange, children: prev })), start > 1 && (jsx(Page, { page: 1, onChange: handlePageChange, children: renderPage(1) })), start > 2 && renderEllipsis(), loop.map((p) => {
-                return (jsx(Page, { page: p, active: p === page, onChange: handlePageChange, children: renderPage(p) }, p));
-            }), end < totalPage - 1 && renderEllipsis(), end < totalPage && (jsx(Page, { page: totalPage, onChange: handlePageChange, children: renderPage(totalPage) })), next && (jsx(Page, { page: page + 1, onChange: handlePageChange, children: next }))] }));
-};
-
-const defaultOk = {
-    children: "确定",
-};
-const defaultCancel = {
-    children: "取消",
-    secondary: true,
-};
-const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon = jsx(Icon, { icon: jsx(InfoOutlined, {}), className: 'error' }), content, okButtonProps, cancelButtonProps, children, align = "end", position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
-    const state = useReactive({
-        loading: false,
-        visible,
-    });
-    const ok = okButtonProps
-        ? Object.assign({}, defaultOk, okButtonProps)
-        : defaultOk;
-    const cancel = cancelButtonProps
-        ? Object.assign({}, defaultCancel, cancelButtonProps)
-        : defaultCancel;
-    const handleVisibleChange = (v) => {
-        state.visible = v;
-        restProps.onVisibleChange?.(v);
-    };
-    const handleOk = async (e) => {
-        state.loading = true;
-        ok.onClick?.(e);
-        await onOk?.();
-        state.loading = false;
-        state.visible = false;
-    };
-    const handleCancel = async (e) => {
-        cancel.onClick?.(e);
-        await onClose?.();
-        state.visible = false;
-    };
-    const popconfirmContent = (jsxs("div", { className: 'i-popconfirm', children: [jsxs(Flex, { gap: 12, children: [icon, jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxs(Flex, { gap: 12, justify: 'flex-end', className: 'mt-8 i-popconfirm-footer', children: [cancelButtonProps !== null && (jsx(Button, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsx(Button, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
-    return (jsx(Popup, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
-};
-
-function RadioItem(props) {
-    const { type = "default", name, value, checked, disabled, children, onChange, } = props;
-    const handleChange = (e) => {
-        onChange?.(value, e);
-    };
-    return (jsxs("label", { className: classNames("i-radio-item", { disabled }), children: [jsx("input", { type: 'radio', name: name, checked: checked, className: classNames("i-radio-input", `i-radio-${type}`), disabled: disabled, onChange: handleChange }), jsx("span", { className: 'i-radio-text', children: children })] }));
-}
-
-function Radio(props) {
-    const { label, name, options, value, type = "default", status = "normal", message, optionInline = true, labelInline, disabled, required, className, onChange, } = props;
-    const state = useReactive({
-        value,
-    });
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
-    const handleChange = useMemoizedFn((value, e) => {
-        state.value = value;
-        onChange?.(value, e);
-    });
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    return (jsxs("div", { className: classNames("i-radio i-input-label", {
-            [`i-radio-${status}`]: status !== "normal",
-            "i-input-inline": labelInline,
-        }, className), children: [label && (jsxs("span", { className: 'i-input-label-text', children: [required && jsx("span", { className: 'error', children: "*" }), label, message && jsx("p", { className: 'i-radio-message', children: message })] })), jsx("div", { className: classNames("i-radio-options", {
-                    "i-options-block": !optionInline,
-                    "i-radio-options-button": type === "button",
-                }), children: formattedOptions.map((option) => (jsx(RadioItem, { name: name, value: option.value, checked: state.value === option.value, type: type, disabled: disabled || option.disabled, onChange: handleChange, children: option.label }, option.value))) })] }));
-}
-Radio.Item = RadioItem;
-
-const Tag = (props) => {
-    const { dot, dotClass, outline, round, size = "normal", className, children, onClose, onClick, ...restProps } = props;
-    return (jsxs("span", { className: classNames("i-tag", {
-            "i-tag-outline": outline,
-            "i-tag-clickable": onClick,
-            [`i-tag-${size}`]: size !== "normal",
-            round,
-        }, className), onClick: onClick, ...restProps, children: [dot && jsx("span", { className: classNames("i-tag-dot", dotClass) }), children, onClose && (jsx(Helpericon, { active: true, className: 'i-tag-close', onClick: onClose }))] }));
-};
-
-const Options = (props) => {
-    const { value: val, options, filter, filterPlaceholder, multiple, empty = jsx(Empty, {}), onSelect, onFilter, } = props;
-    return (jsxs("div", { className: classNames("i-select-options", {
-            "i-select-options-multiple": multiple,
-        }), children: [filter && multiple && (jsxs("div", { className: 'i-select-filter', children: [jsx(Icon, { icon: jsx(SearchRound, {}), className: 'color-8 ml-8 my-auto', size: '1.2em' }), jsx("input", { type: 'text', className: 'i-input', placeholder: filterPlaceholder, onChange: onFilter })] })), options.length === 0 && empty, options.map((option, i) => {
-                const { label, value, disabled } = option;
-                const isActive = multiple
-                    ? val?.includes(value)
-                    : val === value;
-                return (jsxs(List$1.Item, { active: isActive, type: 'option', onClick: () => onSelect?.(value, option), disabled: disabled, children: [multiple && (jsx(Icon, { icon: jsx(CheckRound, {}), className: 'i-select-option-check', size: '1em' })), label] }, value || i));
-            })] }));
-};
-const activeOptions = (options = [], value = [], max = 3) => {
-    const total = options.flatMap((opt) => value.includes(opt.value) ? [opt] : []);
-    if (max >= total.length)
-        return total;
-    const rest = total.length - max;
-    const after = total.slice(0, max);
-    after.push(rest);
-    return after;
-};
-const displayValue = (config) => {
-    const { options, value, maxDisplay, multiple, onSelect } = config;
-    if (multiple) {
-        return activeOptions(options, value, maxDisplay).map((opt, i) => {
-            if (typeof opt === "number")
-                return jsxs(Tag, { children: ["+", opt] }, i);
-            const { label, value } = opt;
-            return (jsx(Tag, { onClose: (e) => {
-                    e?.stopPropagation();
-                    onSelect?.(value, opt);
-                }, children: label }, value));
-        });
-    }
-    return options.find((opt) => opt.value === value)?.label;
-};
-
-const Select = forwardRef((props, ref) => {
-    const { type = "text", name, label, value = "", placeholder, options = [], multiple, prepend, append, labelInline, style, className, message, status = "normal", hideClear, maxDisplay, border, filter, tip, filterPlaceholder = "...", popupProps, onSelect, onChange, ...restProps } = props;
-    const state = useReactive({
-        inputValue: "",
-        filterValue: "",
-        value,
-        loading: false,
-    });
-    const [active, setActive] = useState(false);
-    const formattedOptions = useMemo(() => formatOption(options), [options]);
-    const filterOptions = useMemo(() => {
-        const { filterValue: fv } = state;
-        if (!fv || !filter)
-            return formattedOptions;
-        const filterFn = typeof filter === "function"
-            ? filter
-            : (opt) => opt.value.includes(fv) || opt.label.includes(fv);
-        return formattedOptions.filter(filterFn);
-    }, [formattedOptions, filter, state.filterValue]);
-    const changeValue = (v) => {
-        state.value = v;
-        onChange?.(v);
-    };
-    const handleSelect = useCallback((value, option) => {
-        onSelect?.(value, option);
-        if (multiple) {
-            const values = [...state.value];
-            const i = values.findIndex((v) => v === value);
-            i > -1 ? values.splice(i, 1) : values.push(value);
-            changeValue(values);
-            return;
-        }
-        setActive(false);
-        changeValue(value);
-    }, []);
-    const handleVisibleChange = (visible) => {
-        setActive(visible);
-        if (!filter)
-            return;
-        state.filterValue = "";
-    };
-    const handleHelperClick = (e) => {
-        if (!active)
-            return;
-        changeValue(multiple ? [] : "");
-    };
-    const handleFilterChange = useMemoizedFn(debounce({ delay: 400 }, (e) => {
-        const v = e.target.value;
-        state.filterValue = v;
-    }));
-    const handleInputChange = (e) => {
-        state.filterValue = e.target.value;
-    };
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    const hasValue = multiple
-        ? state.value.length > 0
-        : !!state.value;
-    const clearable = !hideClear && active && hasValue;
-    const text = message ?? tip;
-    return (jsxs("label", { className: classNames("i-input-label", className, {
-            "i-input-inline": labelInline,
-        }), style: style, children: [label && jsx("span", { className: 'i-input-label-text', children: label }), jsx(Popup, { position: 'bottom', arrow: false, fitSize: true, ...popupProps, visible: active, trigger: 'none', onVisibleChange: handleVisibleChange, content: jsx(Options, { options: filterOptions, value: state.value, multiple: multiple, filter: !!filter, filterPlaceholder: filterPlaceholder, onSelect: handleSelect, onFilter: handleFilterChange }), children: jsxs("div", { className: classNames("i-input-item", {
-                        [`i-input-${status}`]: status !== "normal",
-                        "i-input-borderless": !border,
-                        "i-input-focus": active,
-                    }), onClick: () => setActive(true), children: [prepend, jsx("input", { ref: ref, type: 'hidden', value: state.value, ...restProps }), multiple ? (hasValue ? (jsx("div", { className: classNames("i-input i-select", {
-                                "i-select-multiple": multiple,
-                            }), children: displayValue({
-                                options: formattedOptions,
-                                value: state.value,
-                                multiple,
-                                maxDisplay,
-                                onSelect: handleSelect,
-                            }) })) : (jsx("input", { className: 'i-input i-select', placeholder: placeholder, readOnly: true }))) : null, !multiple && (jsx("input", { value: active ? state.filterValue : state.value, className: 'i-input i-select', placeholder: state.value || placeholder, onChange: handleInputChange, readOnly: !filter })), jsx(Helpericon, { active: true, icon: clearable ? undefined : jsx(UnfoldMoreRound, {}), onClick: handleHelperClick }), append] }) }), text && jsx("span", { className: 'i-input-message', children: text })] }));
-});
-
-function Divider() {
-    return jsx("i", { className: 'i-step-divider' });
-}
-
-const STATUS = ["finished", "active", "pending"];
-function defaultRenderIcon(i, status) {
-    return (jsx("span", { className: 'i-step-item-index', children: status === "finished" ? (jsx(CheckRound, { style: { width: "1em", height: "1.5em" } })) : (i + 1) }));
-}
-function Item$2(props) {
-    const { index = 0, active = 0, renderIcon = defaultRenderIcon, title, vertical, line = jsx(Divider, {}), style, className, children, onClick, } = props;
-    const status = STATUS[index === active ? 1 : index < active ? 0 : 2];
-    const handleClick = () => {
-        onClick?.(index);
-    };
-    return (jsx("div", { style: style, className: classNames("i-step-item", `i-step-item-${status}`, className), onClick: handleClick, children: vertical ? (jsxs(Fragment, { children: [jsxs("div", { className: 'i-step-item-left', children: [renderIcon?.(index, status), line] }), jsxs("div", { className: 'i-step-item-right', children: [jsx("div", { className: 'i-step-item-title', children: title }), children && (jsx("div", { className: 'i-step-item-content', children: children }))] })] })) : (jsxs(Fragment, { children: [jsxs("div", { className: 'i-step-item-title', children: [renderIcon?.(index, status), jsx("span", { children: title }), line] }), children && (jsx("div", { className: 'i-step-item-content', children: children }))] })) }));
-}
-
-const Step = (props) => {
-    const { active = 0, vertical, renderIcon, line, style, className, children, onClick, } = props;
-    const steps = useMemo(() => {
-        const nodes = [];
-        let index = 0;
-        Children.map(children, (el) => {
-            if (!el || el.type !== Item$2)
-                return;
-            const { props: elProps } = el;
-            nodes.push({
-                ...el,
-                props: {
-                    renderIcon,
-                    line,
-                    onClick,
-                    ...elProps,
-                    vertical,
-                    active,
-                    index: index++,
-                },
-            });
-        });
-        return nodes;
-    }, [active, children]);
-    return (jsx("div", { className: classNames("i-step", { "i-step-vertical": vertical }, className), style: style, children: steps }));
-};
-Step.Item = Item$2;
-
-function Item$1(props) {
-    const { index = 0, active, type, transition, gap = 0, itemHeight, vertical, style, className, children, } = props;
-    const selfStyle = useMemo(() => {
-        if (type === "normal") {
-            return {
-                [vertical ? "paddingBlock" : "paddingInline"]: gap / 2,
-                height: itemHeight,
-            };
-        }
-        return {
-            transform: `translate(-${index * 100}%, 0)`,
-            transition,
-        };
-    }, [index, gap, itemHeight, vertical, type]);
-    return (jsx("div", { style: { ...style, ...selfStyle }, className: classNames("i-swiper-item", className, {
-            "i-swiper-active": active,
-        }), "data-index": index, children: children }));
-}
-
-const Swiper = forwardRef((props, ref) => {
-    const { type = "normal", initial = 0, display = 1, scroll = 1, loop = true, vertical, prev = jsx(Icon, { icon: jsx(KeyboardArrowLeftRound, {}), size: '2em' }), next = jsx(Icon, { icon: jsx(KeyboardArrowRightRound, {}), size: '2em' }), duration = 600, interval = 3000, autoplay, pauseOnHover, arrow = true, reverse, draggable, dragOffset = 40, gap = 0, itemHeight, indicator, style, className, children, renderIndicator, onBeforeSwipe, onAfterSwipe, } = props;
-    const listRef = useRef(null);
-    const timerRef = useRef(null);
-    const transition = `all ${duration / 1000}s`;
-    const state = useReactive({
-        current: initial,
-        swipable: true,
-        transition: type === "fade" ? "none" : transition,
-        dragStart: 0,
-        dragging: false,
-        initialized: false,
-    });
-    const items = useMemo(() => {
-        return Children.map(children, (node) => {
-            if (node.type !== Item$1)
-                return;
-            return node;
-        });
-    }, [children]);
-    const [displayItems, extra, size, total, listSize] = useMemo(() => {
-        const extra = type === "normal" && loop && items.length > display
-            ? display + 1
-            : 0;
-        let list = [];
-        if (extra <= 0) {
-            list = [...items];
-        }
-        else {
-            const head = items.slice(0, extra);
-            const tail = items.slice(-extra);
-            list = [...tail, ...items, ...head];
-        }
-        const listSize = `${(list.length / display) * 100}%`;
-        return [list, extra, items.length, list.length, listSize];
-    }, [display, loop, type, items]);
-    const offsetPercent = useMemo(() => (-100 * (state.current + extra)) / total, [state.current, total]);
-    const position = useMemo(() => {
-        if (size <= display || type === "fade")
-            return;
-        const offset = vertical
-            ? `0, ${offsetPercent}%`
-            : `${offsetPercent}%, 0`;
-        return `translate3d(${offset}, 0)`;
-    }, [offsetPercent, vertical, display, size, type]);
-    const trackStyle = useMemo(() => {
-        if (!vertical || !itemHeight)
-            return;
-        return {
-            height: itemHeight * display,
-        };
-    }, [vertical, itemHeight, display]);
-    const indicatorsLoop = useMemo(() => {
-        return Array.from({
-            length: Math.ceil((size - display) / scroll) + 1,
-        });
-    }, [loop, indicator]);
-    const clearTimer = () => {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-    };
-    const swipeTo = useCallback((i) => {
-        if (!state.swipable || i === state.current)
-            return;
-        state.swipable = false;
-        onBeforeSwipe?.(state.current);
-        let reset = false;
-        let next = i;
-        const lastDisplay = size - display;
-        if (loop) {
-            if (i > lastDisplay) {
-                reset = true;
-                i = size;
-                next = 0;
-            }
-            else if (i < 0) {
-                reset = true;
-                i = -display;
-                next = lastDisplay;
-            }
-        }
-        else {
-            next = clamp(next, 0, lastDisplay);
-            i = next;
-        }
-        setTimeout(() => {
-            state.swipable = true;
-        }, duration + 32);
-        if (type === "fade") {
-            state.current = next;
-            onAfterSwipe?.(next);
-            return;
-        }
-        state.current = i;
-        if (!reset) {
-            if (autoplay) {
-                timerRef.current = setTimeout(swipeNext, interval);
-            }
-            setTimeout(() => {
-                onAfterSwipe?.(next);
-            }, duration + 12);
-            return;
-        }
-        setTimeout(() => {
-            state.transition = "none";
-            state.current = next;
-            onAfterSwipe?.(next);
-            if (autoplay) {
-                timerRef.current = setTimeout(swipeNext, interval);
-            }
-            setTimeout(() => {
-                state.transition = transition;
-            }, 60);
-        }, duration + 20);
-    }, [duration, autoplay]);
-    const swipeNext = () => {
-        swipeTo(reverse ? state.current - scroll : state.current + scroll);
-    };
-    const swipePrev = () => {
-        swipeTo(reverse ? state.current + scroll : state.current - scroll);
-    };
-    const handleMouseDown = useCallback((e) => {
-        if (!draggable || !state.swipable || type === "fade")
-            return;
-        e.stopPropagation();
-        Object.assign(state, {
-            dragStart: vertical ? e.clientY : e.clientX,
-            dragging: true,
-            transition: "none",
-        });
-    }, [draggable, vertical]);
-    const handleMouseMove = useCallback((e) => {
-        if (!state.dragging || !listRef.current)
-            return;
-        e.preventDefault();
-        const dragEnd = vertical ? e.clientY : e.clientX;
-        const offset = ((dragEnd - state.dragStart) * 61.8) /
-            listRef.current[vertical ? "offsetHeight" : "offsetWidth"] +
-            offsetPercent;
-        listRef.current.style.transform = `translate3d(${vertical ? `0, ${offset}%` : `${offset}%, 0`}, 0)`;
-    }, [vertical, listRef.current, offsetPercent]);
-    const handleMouseUp = useCallback((e) => {
-        if (!state.dragging || !listRef.current)
-            return;
-        const dragEnd = vertical ? e.clientY : e.clientX;
-        const part = listRef.current[vertical ? "offsetHeight" : "offsetWidth"] /
-            total;
-        const offset = (dragEnd - state.dragStart) * 0.618;
-        const absOffset = Math.abs(offset);
-        if (absOffset > dragOffset) {
-            const base = Math.floor(absOffset / part);
-            const mod = (absOffset % part) - dragOffset > 0 ? 1 : 0;
-            const p = base + mod;
-            let to = state.current + (offset > 0 ? -p : p);
-            swipeTo(to);
-        }
-        listRef.current.style.transform = position || "";
-        Object.assign(state, {
-            dragging: false,
-            transition,
-        });
-    }, [vertical, listRef.current, offsetPercent]);
-    const handleMouseOver = () => {
-        if (!pauseOnHover)
-            return;
-        clearTimer();
-    };
-    const handleMouseLeave = () => {
-        if (!pauseOnHover)
-            return;
-        clearTimer();
-        timerRef.current = setTimeout(swipeNext, interval);
-    };
-    useMouseMove(handleMouseMove);
-    useMouseUp(handleMouseUp);
-    useImperativeHandle(ref, () => ({
-        swipeTo,
-        swipeNext,
-        swipePrev,
-    }));
-    useEffect(() => {
-        if (!autoplay)
-            return;
-        timerRef.current = setTimeout(swipeNext, interval);
-        return () => {
-            clearTimeout(timerRef.current);
-            timerRef.current = null;
-        };
-    }, [autoplay, interval]);
-    return (jsxs("div", { style: style, className: classNames("i-swiper", {
-            "i-swiper-vertical": vertical,
-            "i-swiper-initialized": state.initialized,
-        }, className), children: [jsxs("div", { className: 'i-swiper-track', style: trackStyle, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, children: [jsx("div", { ref: listRef, className: classNames("i-swiper-list", {
-                            "i-swiper-fade": type === "fade",
-                        }), style: {
-                            [vertical ? "height" : "width"]: listSize,
-                            transform: position,
-                            transition: state.transition,
-                        }, onMouseDown: handleMouseDown, children: displayItems.map((item, i) => {
-                            const { props: itemProps } = item;
-                            return (jsx(Item$1, { index: i, active: i - extra === state.current, type: type, gap: gap, transition: transition, itemHeight: itemHeight, vertical: vertical, ...itemProps }, i));
-                        }) }), arrow && (jsxs(Fragment, { children: [jsx("a", { className: 'i-swiper-arrow i-swiper-prev', onClick: swipePrev, children: prev }), jsx("a", { className: 'i-swiper-arrow i-swiper-next', onClick: swipeNext, children: next })] }))] }), indicator && (jsx("div", { className: 'i-swiper-indicators', children: indicatorsLoop.map((whatever, i) => {
-                    return (jsx("a", { className: classNames("i-swiper-indicator", {
-                            "i-indicator-active": i ===
-                                Math[loop ? "floor" : "ceil"](((state.current + size) % size) /
-                                    scroll),
-                        }), onClick: () => swipeTo(i * scroll), children: renderIndicator?.(i) }, i));
-                }) }))] }));
-});
-Swiper.Item = Item$1;
-
-const Item = (props) => {
-    return jsx(Fragment, {});
-};
-
-const Tabs = forwardRef((props, ref) => {
-    const { active, tabs: items, type = "default", prepend, append, children, className, vertical, toggable, bar = true, hideMore, barClass, renderMore = () => (jsx(Button, { flat: true, square: true, size: 'small', children: jsx(Icon, { icon: jsx(MoreHorizRound, {}) }) })), onTabChange, ...rest } = props;
-    const navRefs = useRef([]);
-    const barRef = useRef(null);
-    const navsRef = useRef(null);
-    const state = useReactive({
-        active,
-        prevActive: undefined,
-        barStyle: {},
-        cachedTabs: [],
-        overflow: false,
-        more: [],
-        tabs: [],
-    });
-    const { observe, unobserve } = useIntersectionObserver();
-    const size = useSize(navsRef);
-    useEffect(() => {
-        if (!items) {
-            if (!children) {
-                state.tabs = [];
-                return;
-            }
-            state.tabs = Children.map(children, (node, i) => {
-                const { key, props: nodeProps } = node;
-                const { title, children, content, keepDOM } = nodeProps;
-                const cloned = children
-                    ? pick(children, ["props", "type", "$$typeof", "ref"])
-                    : content;
-                return {
-                    key: key || String(i),
-                    title,
-                    content: cloned,
-                    keepDOM,
-                };
-            });
-            return;
-        }
-        state.tabs = items.map((item, i) => {
-            if (["string", "number"].includes(typeof item)) {
-                return { key: item, title: item };
-            }
-            if (item.key === undefined) {
-                item.key = i;
-            }
-            return item;
-        });
-    }, [children, items]);
-    const add = (tab) => {
-        const { key } = tab;
-        const i = state.tabs.findIndex((t) => t.key === key);
-        if (i > -1) {
-            open(state.tabs[i].key ?? i);
-            return;
-        }
-        const l = state.tabs.length;
-        const tkey = tab.key ?? l;
-        state.tabs.push({ ...tab, key: tkey });
-        open(tkey);
-    };
-    const close = (key) => {
-        const i = state.tabs.findIndex((t) => t.key === key);
-        if (i < 0)
-            return;
-        state.tabs.splice(i, 1);
-        if (state.active !== key)
-            return;
-        const next = state.tabs[i] || state.tabs[i - 1];
-        open(state.prevActive ?? next?.key ?? "");
-    };
-    const open = (key) => {
-        if (key === state.active) {
-            if (!toggable)
-                return;
-            onTabChange?.(undefined, key);
-            state.active = undefined;
-            state.barStyle = {
-                height: 0,
-                width: 0,
-            };
-            return;
-        }
-        state.prevActive = state.active;
-        onTabChange?.(key, state.active);
-        state.active = key;
-    };
-    const handleMouseWheel = (e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (vertical)
-            return;
-        navsRef.current?.scrollBy({
-            left: e.deltaY + e.deltaX,
-        });
-    };
-    useEffect(() => {
-        if (!size || hideMore)
-            return;
-        const { scrollHeight, scrollWidth } = navsRef.current;
-        const { width, height } = size;
-        state.overflow = scrollHeight > height || scrollWidth > width;
-        if (!state.overflow)
-            return;
-        navRefs.current.map((nav, i) => {
-            if (!nav)
-                return;
-            observe(nav, (tar, visible) => {
-                if (!state.tabs[i])
-                    return;
-                state.tabs[i].intersecting = visible;
-                state.more = state.tabs.filter((tab) => !tab.intersecting);
-            });
-        });
-    }, [size, hideMore, state.tabs.length]);
-    useEffect(() => {
-        if (!bar || type === "pane" || state.active === undefined) {
-            return;
-        }
-        const index = state.tabs.findIndex((tab) => tab.key === state.active);
-        setTimeout(() => {
-            const nav = navRefs.current[index];
-            if (!nav)
-                return;
-            if (state.tabs[index].keepDOM && state.active) {
-                const i = state.cachedTabs.findIndex((k) => k === state.active);
-                i < 0 && state.cachedTabs.unshift(state.active);
-            }
-            const { offsetHeight, offsetLeft, offsetTop, offsetWidth } = nav;
-            const isLine = type === "line";
-            state.barStyle = {
-                height: !vertical && isLine ? ".25em" : offsetHeight,
-                width: vertical && isLine ? ".25em" : offsetWidth,
-                transform: `translate(${offsetLeft}px, ${offsetTop}px)`,
-            };
-        }, 16);
-    }, [state.active, bar]);
-    useEffect(() => {
-        if (active === undefined || state.active === active)
-            return;
-        open(active);
-    }, [active]);
-    useEffect(() => {
-        if (hideMore)
-            return;
-        return () => {
-            navRefs.current?.map(unobserve);
-        };
-    }, [state.tabs.length]);
-    useEffect(() => {
-        if (!navsRef.current || vertical)
-            return;
-        navsRef.current.addEventListener("wheel", handleMouseWheel, {
-            passive: false,
-        });
-        return () => {
-            if (!navsRef.current)
-                return;
-            navsRef.current.removeEventListener("wheel", handleMouseWheel);
-        };
-    }, [navsRef.current]);
-    useImperativeHandle(ref, () => ({
-        open,
-        close,
-        add,
-        navs: navsRef,
-    }));
-    return (jsxs("div", { className: classNames("i-tabs", { flex: vertical, [`i-tabs-${type}`]: type !== "default" }, className), ...rest, children: [jsxs("div", { className: classNames("i-tab-navs-container", {
-                    "i-tab-navs-vertical": vertical,
-                }), children: [prepend, jsxs("div", { ref: navsRef, className: 'i-tab-navs', children: [state.tabs.map((tab, i) => {
-                                const { title, key = i, closable } = tab;
-                                return (jsxs("a", { ref: (ref) => (navRefs.current[i] =
-                                        ref), className: classNames("i-tab-nav", {
-                                        "i-tab-active": state.active === key,
-                                    }), onClick: () => open(key), children: [title, closable && (jsx(Helpericon, { as: 'i', active: true, className: 'i-tab-nav-close', onClick: (e) => {
-                                                e.stopPropagation();
-                                                close(key);
-                                            } }))] }, key));
-                            }), bar && (jsx("span", { ref: barRef, className: classNames("i-tab-navs-bar", barClass), style: state.barStyle }))] }), !hideMore && state.overflow && state.more.length > 0 && (jsx(Popup, { arrow: false, position: vertical ? "right" : "bottom", align: 'end', touchable: true, hideDelay: 500, content: jsx("div", { className: 'i-tabs-morelist pd-4', children: state.more.map((tab, i) => {
-                                const { key = i, title } = tab;
-                                const isActive = state.active === key;
-                                return (jsx("a", { className: classNames("i-tab-nav", {
-                                        "i-tab-active": isActive,
-                                    }), onClick: () => open(key), children: title }, key));
-                            }) }), children: renderMore(state.more) })), append] }), jsx("div", { className: 'i-tab-contents', children: state.tabs.map((tab, i) => {
-                    const { key = i, content } = tab;
-                    const isActive = state.active === key;
-                    const show = isActive ||
-                        (key !== undefined && state.cachedTabs.includes(key));
-                    return (show && (jsx("div", { className: classNames("i-tab-content", {
-                            "i-tab-active": isActive,
-                        }), children: content }, key)));
-                }) })] }));
-});
-Tabs.Item = Item;
-
-function TreeList(props) {
-    const { data = [], depth = 0, round, style, className, parent, nodeProps, ...restProps } = props;
-    const contents = data.map((item, i) => {
-        const { type } = item;
-        const title = item[nodeProps.title];
-        const itemKey = item[nodeProps.key] ||
-            (parent?.key !== undefined ? `${parent.key}-${i}` : `${i}`);
-        item.key = itemKey;
-        item.parent = parent;
-        if (type === "title") {
-            return (jsx("div", { className: 'i-tree-group-title', children: title }, i));
-        }
-        if (type && type !== "item") {
-            return (jsx("div", { className: `i-tree-type-${type}`, children: title }, i));
-        }
-        return (jsx(TreeItem, { index: i, item: item, depth: depth, nodeProps: nodeProps, ...restProps }, itemKey));
-    });
-    if (depth > 0)
-        return jsx(Fragment, { children: contents });
-    return (jsx("div", { className: classNames("i-tree", className, {
-            "i-tree-round": round,
-        }), style: style, children: contents }));
-}
-const Header = (props) => {
-    const { as: Tag = "a", href, selected, children, ...restProps } = props;
-    const className = classNames("i-tree-item-header", {
-        "i-tree-item-selected": selected,
-    });
-    if (typeof Tag === "string") {
-        return (jsx(Tag, { href: href, className: className, ...restProps, children: children }));
-    }
-    return (jsx(Tag, { to: href || "", className: className, ...restProps, children: children }));
-};
-const TreeItem = (props) => {
-    const { item, depth = 0, index, selected, checked = [], partofs = {}, checkable, nodeProps, renderExtra, onItemClick, onItemSelect, onItemCheck, ...restProps } = props;
-    const { as, key = "", href, icon, title, expanded, disabled } = item;
-    const children = item[nodeProps.children];
-    const [expand, setExpand] = useState(expanded);
-    const handleExpand = useMemoizedFn((e, fromToggle) => {
-        if (fromToggle) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        if (disabled || !children?.length)
-            return;
-        setExpand((v) => !v);
-    });
-    const handleItemClick = useMemoizedFn((e) => {
-        if (disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        handleExpand(e);
-        onItemClick?.(item, e);
-        onItemSelect?.(key, item);
-    });
-    const handleItemCheck = (checked) => onItemCheck?.(item, checked, []);
-    const itemChecked = checked.includes(key);
-    return (jsxs("div", { className: classNames("i-tree-item", {
-            "i-tree-expand": expand,
-        }), children: [jsxs(Header, { as: as, href: href, style: { paddingLeft: `${depth * 1.5 + 0.5}em` }, selected: selected === key, onClick: handleItemClick, children: [checkable && (jsx(Checkbox.Item, { value: itemChecked, partof: !itemChecked && partofs[key], className: 'i-tree-checkbox', onChange: handleItemCheck, onClick: (e) => e.stopPropagation() })), icon && jsx("span", { className: 'i-tree-item-icon', children: icon }), jsx("span", { className: 'i-tree-item-title', children: title }), renderExtra?.(item), children && (jsx(Icon, { icon: jsx(KeyboardArrowDownRound, {}), className: 'i-tree-toggle', onClick: (e) => handleExpand(e, true) }))] }), children?.length && (jsx("div", { className: 'i-tree-item-content', children: jsx(TreeList, { data: children, depth: depth + 1, selected: selected, checkable: checkable, parent: item, partofs: partofs, checked: checked, nodeProps: nodeProps, renderExtra: renderExtra, onItemClick: onItemClick, onItemSelect: onItemSelect, onItemCheck: onItemCheck, ...restProps }) }))] }));
-};
-
-const defaultNodeProps = {
-    key: "key",
-    title: "title",
-    children: "children",
-};
-const Tree = forwardRef((props, ref) => {
-    const { data = [], selected, checked = [], disabledRelated, nodeProps, onItemSelect, onItemCheck, ...restProps } = props;
-    const state = useReactive({
-        selected,
-        checked,
-        partofs: {},
-        nodeMaps: new Map(),
-    });
-    const oNodeProps = Object.assign({}, defaultNodeProps, nodeProps);
-    const isChecked = (key) => state.checked.includes(key || "");
-    const checkItem = useMemoizedFn((item, checked, direction) => {
-        const { key = "", parent, children } = item;
-        const shouldChanged = { [key]: checked };
-        const partofs = { [key]: false };
-        if (disabledRelated)
-            return [shouldChanged];
-        if (checked) {
-            if (parent && direction !== "leaf") {
-                const hasUnchecked = parent.children?.some((o) => o.key !== key && !isChecked(o.key));
-                const [changes, parts] = checkItem(parent, true, "root");
-                if (!hasUnchecked) {
-                    Object.assign(shouldChanged, changes);
-                }
-                Object.assign(partofs, hasUnchecked ? parts : {}, {
-                    [parent.key]: true,
-                });
-            }
-            if (children?.length && direction !== "root") {
-                children.map((o) => {
-                    if (isChecked(o.key))
-                        return;
-                    const [changes] = checkItem(o, true, "leaf");
-                    Object.assign(shouldChanged, changes);
-                    partofs[o.key] = false;
-                });
-            }
-            return [shouldChanged, partofs];
-        }
-        if (parent && direction !== "leaf") {
-            const [changes, parts] = checkItem(parent, false, "root");
-            Object.assign(shouldChanged, changes);
-            const hasChecked = parent.children?.some((o) => isChecked(o.key) && o.key !== key);
-            Object.assign(partofs, hasChecked ? {} : parts, {
-                [parent.key]: hasChecked,
-                [key]: false,
-            });
-        }
-        if (children?.length && direction !== "root") {
-            children.map((o) => {
-                const [changes] = checkItem(o, false, "leaf");
-                if (!isChecked(o.key))
-                    return;
-                Object.assign(shouldChanged, changes);
-                partofs[o.key] = false;
-            });
-        }
-        return [shouldChanged, partofs];
-    });
-    const handleCheck = (item, checked) => {
-        const [shouldChanged, partofs] = checkItem(item, checked);
-        const changedKeys = Object.keys(shouldChanged);
-        state.checked = checked
-            ? Array.from(new Set([...state.checked, ...changedKeys]))
-            : state.checked.filter((k) => !changedKeys.includes(k));
-        Object.assign(state.partofs, partofs);
-        onItemCheck?.(item, checked, state.checked);
-    };
-    const handleSelect = (key, item) => {
-        if (!props.selectable)
-            return;
-        state.selected = key;
-        onItemSelect?.(key, item);
-    };
-    useEffect(() => {
-        if (selected === undefined)
-            return;
-        state.selected = selected;
-    }, [selected]);
-    useEffect(() => {
-        state.nodeMaps.clear();
-        const { key, children } = oNodeProps;
-        const recursive = (nodes) => {
-            nodes.map((o) => {
-                state.nodeMaps.set(o[key], o);
-                o[children]?.length > 0 && recursive(o[children]);
-            });
-        };
-        recursive(data);
-    }, [data]);
-    useImperativeHandle(ref, () => {
-        return {
-            getChecked: () => {
-                const items = [];
-                state.checked.map((k) => {
-                    const item = state.nodeMaps.get(k);
-                    items.push(item);
-                });
-                return [state.checked, items];
-            },
-            getSelected: () => {
-                const item = state.nodeMaps.get(state.selected);
-                return [state.selected, item];
-            },
-            getPartofs: () => {
-                const items = [];
-                const keys = Object.keys(state.partofs).filter((k) => {
-                    const indeterminate = state.partofs[k];
-                    if (indeterminate) {
-                        const item = state.nodeMaps.get(k);
-                        items.push(item);
-                    }
-                    return indeterminate;
-                });
-                return [keys, items];
-            },
-        };
-    });
-    return (jsx(TreeList, { data: data, selected: state.selected, checked: state.checked, partofs: state.partofs, nodeProps: oNodeProps, onItemCheck: handleCheck, onItemSelect: handleSelect, ...restProps }));
-});
-
-function RenderFile(props) {
-    const { mode, index, file, onRemove, onPreview } = props;
-    if (!file)
-        return "";
-    const { name, size, url, src } = file;
-    const type = getFileType(name, file.type);
-    const CloseBtn = (jsx(Helpericon, { active: true, className: 'i-upload-delete', onClick: (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            onRemove(index);
-        } }));
-    switch (mode) {
-        case "card":
-            let node = jsx(Fragment, {});
-            switch (type) {
-                case TFileType.IMAGE:
-                    node = (jsx(Image, { lazyload: true, src: url || src, fit: 'cover', usePreview: false }));
-                    break;
-                case TFileType.VIDEO:
-                    node = jsx("video", { src: url || src, preload: 'none' });
-                    break;
-                default:
-                    node = (jsxs(Fragment, { children: [jsx(Icon, { icon: jsx(ListAltRound, {}) }), jsx("span", { className: 'i-upload-file-name', children: title(name) })] }));
-                    break;
-            }
-            return (jsxs("div", { title: name, className: 'i-upload-item-card', onClick: () => onPreview?.(index), children: [node, CloseBtn] }));
-        default:
-            return (jsxs("div", { className: 'i-upload-item', onClick: () => onPreview?.(index), children: [jsx("span", { children: name }), jsx("i", { className: 'i-upload-size', children: formatBytes(size ?? 0) }), CloseBtn] }));
-    }
-}
-
-const Upload = forwardRef((props, ref) => {
-    const { label, labelInline, value, files = [], placeholder, status = "normal", message, className, style, children, mode = "default", cardSize = "4em", disabled, limit = props.multiple ? Infinity : 1, multiple, renderItem = RenderFile, shouldUpload = () => true, uploader, onChange, onFilesChange, onUpload, ...restProps } = props;
-    const state = useReactive({
-        files,
-        value,
-        status,
-        message,
-        update: 0,
-    });
-    const inputRef = useRef(null);
-    const preview = usePreview();
-    const trigger = useMemo(() => {
-        if (children)
-            return children;
-        switch (mode) {
-            case "card":
-                return (jsx(Button, { className: 'i-upload-card-btn color-5', square: true, flat: true, outline: true, disabled: disabled, children: jsx(Icon, { icon: jsx(PlusSharp, {}) }) }));
-            default:
-                return (jsxs(Button, { className: 'i-upload-btn', disabled: disabled, children: [jsx(Icon, { icon: jsx(CloudUploadTwotone, {}) }), " Upload"] }));
-        }
-    }, [mode, children]);
-    const handleChange = (e) => {
-        const files = Array.from(e.target.files || []);
-        const { files: before } = state;
-        const changed = [];
-        files.map((f) => {
-            const { name, size, type } = f;
-            const same = before.find((pf) => {
-                const { name: n, size: s, type: t } = pf;
-                return n === name && s === size && t === type;
-            });
-            const src = URL.createObjectURL(f);
-            f.src = src;
-            state.update += 1;
-            Object.assign(f, {
-                uid: uid(7),
-                src: f.src || f.name,
-            });
-            !same && changed.push(f);
-        });
-        const after = [...before, ...changed];
-        Object.assign(state, {
-            files: multiple ? after.slice(0, limit) : [after.at(-1)],
-            status,
-            message,
-        });
-        onFilesChange?.(state.files, changed, e);
-        onChange?.(state.files, e);
-        handleUpload(changed);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleRemove = (i) => {
-        const [...files] = state.files;
-        const changed = files.splice(i, 1);
-        URL.revokeObjectURL(changed[0]?.src || "");
-        state.files = files;
-        onFilesChange?.(files, changed);
-        onChange?.(files);
-        inputRef.current && (inputRef.current.value = "");
-    };
-    const handleUpload = async (files) => {
-        if (!uploader)
-            return;
-        files.forEach(async (file) => {
-            if (!shouldUpload(file))
-                return;
-            const result = await uploader(file);
-            const i = state.files.findIndex((f) => f.uid === result.uid);
-            i > -1 && (state.files[i] = result);
-            result?.status === "completed" && onUpload?.(result);
-        });
-    };
-    const handlePreview = (i) => {
-        preview({ items: state.files, initial: i });
-    };
-    useEffect(() => {
-        Object.assign(state, {
-            status,
-            message,
-        });
-    }, [status, message]);
-    useEffect(() => {
-        state.value = value;
-    }, [value]);
-    useImperativeHandle(ref, () => ({
-        getFileList: () => state.files,
-    }), []);
-    const { message: msg, files: currentFiles } = state;
-    return (jsxs(InputContainer, { label: label, labelInline: labelInline, className: classNames("i-input-label-file", className), style: style, children: [jsx("input", { ...restProps, disabled: disabled, ref: inputRef, type: 'file', className: 'i-input-file-hidden', multiple: multiple, onChange: handleChange }), jsxs("div", { className: classNames("i-upload-inner", {
-                    [`i-upload-${mode}`]: mode !== "default",
-                }), style: { ["--upload-card-size"]: cardSize }, children: [jsx("div", { className: 'i-upload-list', onClick: (e) => {
-                            e.stopPropagation();
-                            e.preventDefault();
-                        }, children: currentFiles?.map((file, i) => (jsx(Fragment$1, { children: RenderFile({
-                                index: i,
-                                file,
-                                mode,
-                                onRemove: handleRemove,
-                                onPreview: handlePreview,
-                            }) }, i))) }), msg && jsx("span", { className: 'i-upload-message', children: msg }), currentFiles.length < limit && trigger] })] }));
-});
-
-export { Affix, Badge, Button, Card, Checkbox, Collapse, Datagrid, Datepicker, Description, Drawer, Dropdown, Flex, Form, Icon, Image, Input, List$1 as List, Loading, message as Message, Modal, Pagination, Popconfirm, Popup, Progress, Radio, Select, Step, Swiper, Tabs, Tag, Text, Tree, Upload, Video, usePreview };
-//# sourceMappingURL=index.js.map