@ioca/react 1.5.3 → 1.5.5

package/lib/cjs/components/editor/memtion.js

@@ -0,0 +1,171 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var server = require('react-dom/server');
+var list = require('../list/list.js');
+
+const MEMTION_TAG_CLASS_NAME = "i-memtion-tag";
+const escapeHtmlAttr = (value) => value
+    .replaceAll("&", "&")
+    .replaceAll('"', """)
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+const getInsertNode = (memtion, option) => memtion?.insert?.(option) ?? option.value;
+const getInsertText = (memtion, option) => {
+    const nextNode = getInsertNode(memtion, option);
+    if (typeof nextNode === "string" || typeof nextNode === "number") {
+        return `${String(nextNode)} `;
+    }
+    return `${String(option.value)} `;
+};
+const getInsertHtml = (memtion, option, sanitizeValue) => {
+    const nextNode = getInsertNode(memtion, option);
+    if (nextNode === null || nextNode === undefined || nextNode === false) {
+        return "";
+    }
+    const content = sanitizeValue(server.renderToStaticMarkup(jsxRuntime.jsx(jsxRuntime.Fragment, { children: nextNode })));
+    return `<span class="${MEMTION_TAG_CLASS_NAME}" contenteditable="false" data-memtion-value="${escapeHtmlAttr(String(option.value))}">${content}</span>`;
+};
+const getSelectionRect = (range) => {
+    if (!range)
+        return null;
+    const rect = range.getBoundingClientRect();
+    if (rect.width || rect.height) {
+        return rect;
+    }
+    return range.getClientRects()[0] ?? rect;
+};
+const insertMemtionOption = ({ editor, range, mode, memtion, option, sanitizeValue, }) => {
+    if (!editor || !range)
+        return null;
+    const browserSelection = window.getSelection();
+    if (!browserSelection)
+        return null;
+    const nextRange = range.cloneRange();
+    browserSelection.removeAllRanges();
+    browserSelection.addRange(nextRange);
+    editor.focus();
+    nextRange.deleteContents();
+    if (mode === "plaintext") {
+        const text = document.createTextNode(getInsertText(memtion, option));
+        nextRange.insertNode(text);
+        nextRange.setStartAfter(text);
+    }
+    else {
+        const html = getInsertHtml(memtion, option, sanitizeValue);
+        const fragment = nextRange.createContextualFragment(html);
+        const lastNode = fragment.lastChild;
+        const spacing = document.createTextNode(" ");
+        nextRange.insertNode(fragment);
+        if (lastNode) {
+            nextRange.setStartAfter(lastNode);
+            nextRange.collapse(true);
+        }
+        nextRange.insertNode(spacing);
+        nextRange.setStartAfter(spacing);
+    }
+    nextRange.collapse(true);
+    browserSelection.removeAllRanges();
+    browserSelection.addRange(nextRange);
+    return nextRange;
+};
+const getMemtionText = (triggerRange, selectionRange) => {
+    if (!triggerRange || !selectionRange)
+        return "";
+    const range = triggerRange.cloneRange();
+    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);
+    return range.toString();
+};
+const getMemtionReplaceRange = (triggerRange, selectionRange) => {
+    if (!triggerRange || !selectionRange)
+        return null;
+    const range = triggerRange.cloneRange();
+    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);
+    return range;
+};
+const filterMemtionOptions = (options, keyword) => {
+    const normalizedKeyword = keyword.trim().toLowerCase();
+    if (!normalizedKeyword) {
+        return options;
+    }
+    return options.filter((option) => String(option.value).toLowerCase().includes(normalizedKeyword));
+};
+const isMemtionTag = (node) => node instanceof HTMLElement &&
+    node.classList.contains(MEMTION_TAG_CLASS_NAME);
+const getAdjacentMemtionTag = (range, direction) => {
+    const { startContainer, startOffset } = range;
+    if (startContainer.nodeType === Node.TEXT_NODE) {
+        const textNode = startContainer;
+        if (direction === "backward" && startOffset === 0) {
+            return isMemtionTag(textNode.previousSibling)
+                ? textNode.previousSibling
+                : null;
+        }
+        if (direction === "forward" && startOffset === textNode.data.length) {
+            return isMemtionTag(textNode.nextSibling)
+                ? textNode.nextSibling
+                : null;
+        }
+        return null;
+    }
+    const element = startContainer;
+    const targetIndex = direction === "backward" ? startOffset - 1 : startOffset;
+    const targetNode = element.childNodes.item(targetIndex);
+    return isMemtionTag(targetNode) ? targetNode : null;
+};
+const removeAdjacentMemtionTag = (editor, key) => {
+    if (!editor)
+        return false;
+    const selection = window.getSelection();
+    if (!selection?.rangeCount || !selection.isCollapsed)
+        return false;
+    const activeRange = selection.getRangeAt(0);
+    const tag = getAdjacentMemtionTag(activeRange, key === "Backspace" ? "backward" : "forward");
+    if (!tag || !tag.parentNode)
+        return false;
+    const parent = tag.parentNode;
+    const nextSibling = tag.nextSibling;
+    const index = Array.prototype.indexOf.call(parent.childNodes, tag);
+    if (nextSibling?.nodeType === Node.TEXT_NODE) {
+        const textNode = nextSibling;
+        if (textNode.data.startsWith(" ")) {
+            textNode.deleteData(0, 1);
+            if (!textNode.data.length) {
+                nextSibling.remove();
+            }
+        }
+    }
+    tag.remove();
+    const range = document.createRange();
+    range.setStart(parent, Math.min(index, parent.childNodes.length));
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    editor.focus();
+    return true;
+};
+const Memtion$1 = (props) => {
+    const { visible, rect, options, activeIndex, onActiveChange, onSelect } = props;
+    if (!visible || !rect || !options?.length) {
+        return null;
+    }
+    return (jsxRuntime.jsx(list.default, { className: "i-editor-memtion", type: "option", style: {
+            position: "fixed",
+            top: rect.bottom,
+            left: rect.left,
+        }, children: options.map((option, i) => (jsxRuntime.jsx(list.default.Item, { type: "option", active: i === activeIndex, onMouseDown: (e) => e.preventDefault(), onMouseEnter: () => onActiveChange?.(i), onClick: () => onSelect?.(option), children: option.label }, `${option.value}-${i}`))) }));
+};
+var Memtion = react.memo(Memtion$1);
+
+exports.MEMTION_TAG_CLASS_NAME = MEMTION_TAG_CLASS_NAME;
+exports.default = Memtion;
+exports.filterMemtionOptions = filterMemtionOptions;
+exports.getMemtionReplaceRange = getMemtionReplaceRange;
+exports.getMemtionText = getMemtionText;
+exports.getSelectionRect = getSelectionRect;
+exports.insertMemtionOption = insertMemtionOption;
+exports.removeAdjacentMemtionTag = removeAdjacentMemtionTag;
+//# sourceMappingURL=memtion.js.map

package/lib/cjs/components/editor/memtion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"memtion.js","sources":["../../../../packages/components/editor/memtion.tsx"],"sourcesContent":["import { memo, ReactNode } from \"react\";\r\nimport { renderToStaticMarkup } from \"react-dom/server\";\r\nimport List from \"../list\";\r\nimport { IEditorMemtion, IEditorMemtionOption } from \"./type\";\r\n\r\nexport const MEMTION_TAG_CLASS_NAME = \"i-memtion-tag\";\r\n\nconst escapeHtmlAttr = (value: string) =>\n    value\n        .replaceAll(\"&\", \"&amp;\")\n        .replaceAll('\"', \"&quot;\")\n        .replaceAll(\"<\", \"&lt;\")\n        .replaceAll(\">\", \"&gt;\");\n\r\ninterface IMemtionProps {\r\n    visible?: boolean;\r\n    rect?: DOMRect | null;\r\n    options?: IEditorMemtionOption[];\r\n    activeIndex?: number;\r\n    onActiveChange?: (index: number) => void;\r\n    onSelect?: (option: IEditorMemtionOption) => void;\r\n}\r\n\r\ninterface IInsertMemtionOptionParams {\r\n    editor: HTMLDivElement | null;\r\n    range: Range | null;\r\n    mode: \"rich\" | \"plaintext\";\r\n    memtion?: IEditorMemtion;\r\n    option: IEditorMemtionOption;\r\n    sanitizeValue: (value: string) => string;\r\n}\r\n\r\nconst getInsertNode = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => memtion?.insert?.(option) ?? option.value;\r\n\r\nconst getInsertText = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (typeof nextNode === \"string\" || typeof nextNode === \"number\") {\r\n        return `${String(nextNode)} `;\r\n    }\r\n\r\n    return `${String(option.value)} `;\r\n};\r\n\r\nconst getInsertHtml = (\r\n    memtion: IEditorMemtion | undefined,\r\n    option: IEditorMemtionOption,\r\n    sanitizeValue: (value: string) => string,\r\n) => {\r\n    const nextNode = getInsertNode(memtion, option);\r\n\r\n    if (nextNode === null || nextNode === undefined || nextNode === false) {\r\n        return \"\";\r\n    }\r\n\r\n    const content = sanitizeValue(\r\n        renderToStaticMarkup(<>{nextNode as ReactNode}</>),\r\n    );\r\n\r\n    return `<span class=\"${MEMTION_TAG_CLASS_NAME}\" contenteditable=\"false\" data-memtion-value=\"${escapeHtmlAttr(String(option.value))}\">${content}</span>`;\n};\r\n\r\nexport const getSelectionRect = (range: Range | null) => {\r\n    if (!range) return null;\r\n\r\n    const rect = range.getBoundingClientRect();\r\n\r\n    if (rect.width || rect.height) {\r\n        return rect;\r\n    }\r\n\r\n    return range.getClientRects()[0] ?? rect;\r\n};\r\n\r\nexport const insertMemtionOption = ({\r\n    editor,\r\n    range,\r\n    mode,\r\n    memtion,\r\n    option,\r\n    sanitizeValue,\r\n}: IInsertMemtionOptionParams) => {\r\n    if (!editor || !range) return null;\r\n\r\n    const browserSelection = window.getSelection();\r\n    if (!browserSelection) return null;\r\n\r\n    const nextRange = range.cloneRange();\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n    editor.focus();\r\n    nextRange.deleteContents();\r\n\r\n    if (mode === \"plaintext\") {\r\n        const text = document.createTextNode(getInsertText(memtion, option));\r\n        nextRange.insertNode(text);\r\n        nextRange.setStartAfter(text);\r\n    } else {\r\n        const html = getInsertHtml(memtion, option, sanitizeValue);\r\n        const fragment = nextRange.createContextualFragment(html);\r\n        const lastNode = fragment.lastChild;\r\n        const spacing = document.createTextNode(\" \");\r\n\r\n        nextRange.insertNode(fragment);\r\n\r\n        if (lastNode) {\r\n            nextRange.setStartAfter(lastNode);\r\n            nextRange.collapse(true);\r\n        }\r\n\r\n        nextRange.insertNode(spacing);\r\n        nextRange.setStartAfter(spacing);\r\n    }\r\n\r\n    nextRange.collapse(true);\r\n    browserSelection.removeAllRanges();\r\n    browserSelection.addRange(nextRange);\r\n\r\n    return nextRange;\r\n};\r\n\r\nexport const getMemtionText = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return \"\";\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range.toString();\r\n};\r\n\r\nexport const getMemtionReplaceRange = (\r\n    triggerRange: Range | null,\r\n    selectionRange: Range | null,\r\n) => {\r\n    if (!triggerRange || !selectionRange) return null;\r\n\r\n    const range = triggerRange.cloneRange();\r\n    range.setEnd(selectionRange.endContainer, selectionRange.endOffset);\r\n\r\n    return range;\r\n};\r\n\r\nexport const filterMemtionOptions = (\r\n    options: IEditorMemtionOption[],\r\n    keyword: string,\r\n) => {\r\n    const normalizedKeyword = keyword.trim().toLowerCase();\r\n\r\n    if (!normalizedKeyword) {\r\n        return options;\r\n    }\r\n\r\n    return options.filter((option) =>\r\n        String(option.value).toLowerCase().includes(normalizedKeyword),\r\n    );\r\n};\r\n\r\nconst isMemtionTag = (node: Node | null) =>\r\n    node instanceof HTMLElement &&\r\n    node.classList.contains(MEMTION_TAG_CLASS_NAME);\r\n\r\nconst getAdjacentMemtionTag = (\r\n    range: Range,\r\n    direction: \"backward\" | \"forward\",\r\n) => {\r\n    const { startContainer, startOffset } = range;\r\n\r\n    if (startContainer.nodeType === Node.TEXT_NODE) {\r\n        const textNode = startContainer as Text;\r\n\r\n        if (direction === \"backward\" && startOffset === 0) {\r\n            return isMemtionTag(textNode.previousSibling)\r\n                ? (textNode.previousSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        if (direction === \"forward\" && startOffset === textNode.data.length) {\r\n            return isMemtionTag(textNode.nextSibling)\r\n                ? (textNode.nextSibling as HTMLElement)\r\n                : null;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    const element = startContainer as Element;\r\n    const targetIndex =\r\n        direction === \"backward\" ? startOffset - 1 : startOffset;\r\n    const targetNode = element.childNodes.item(targetIndex);\r\n\r\n    return isMemtionTag(targetNode) ? (targetNode as HTMLElement) : null;\r\n};\r\n\r\nexport const removeAdjacentMemtionTag = (\r\n    editor: HTMLDivElement | null,\r\n    key: \"Backspace\" | \"Delete\",\r\n) => {\r\n    if (!editor) return false;\r\n\r\n    const selection = window.getSelection();\r\n    if (!selection?.rangeCount || !selection.isCollapsed) return false;\r\n\r\n    const activeRange = selection.getRangeAt(0);\r\n    const tag = getAdjacentMemtionTag(\r\n        activeRange,\r\n        key === \"Backspace\" ? \"backward\" : \"forward\",\r\n    );\r\n\r\n    if (!tag || !tag.parentNode) return false;\r\n\r\n    const parent = tag.parentNode;\r\n    const nextSibling = tag.nextSibling;\r\n    const index = Array.prototype.indexOf.call(parent.childNodes, tag);\r\n\r\n    if (nextSibling?.nodeType === Node.TEXT_NODE) {\r\n        const textNode = nextSibling as Text;\r\n\r\n        if (textNode.data.startsWith(\" \")) {\r\n            textNode.deleteData(0, 1);\r\n\r\n            if (!textNode.data.length) {\r\n                nextSibling.remove();\r\n            }\r\n        }\r\n    }\r\n\r\n    tag.remove();\r\n\r\n    const range = document.createRange();\r\n    range.setStart(parent, Math.min(index, parent.childNodes.length));\r\n    range.collapse(true);\r\n    selection.removeAllRanges();\r\n    selection.addRange(range);\r\n    editor.focus();\r\n\r\n    return true;\r\n};\r\n\r\nconst Memtion = (props: IMemtionProps) => {\r\n    const { visible, rect, options, activeIndex, onActiveChange, onSelect } =\r\n        props;\r\n\r\n    if (!visible || !rect || !options?.length) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <List\r\n            className=\"i-editor-memtion\"\r\n            type=\"option\"\r\n            style={{\r\n                position: \"fixed\",\r\n                top: rect.bottom,\r\n                left: rect.left,\r\n            }}\r\n        >\r\n            {options.map((option, i) => (\r\n                <List.Item\r\n                    key={`${option.value}-${i}`}\r\n                    type=\"option\"\r\n                    active={i === activeIndex}\r\n                    onMouseDown={(e) => e.preventDefault()}\r\n                    onMouseEnter={() => onActiveChange?.(i)}\r\n                    onClick={() => onSelect?.(option)}\r\n                >\r\n                    {option.label}\r\n                </List.Item>\r\n            ))}\r\n        </List>\r\n    );\r\n};\r\n\r\nexport default memo(Memtion);\r\n"],"names":["renderToStaticMarkup","_jsx","_Fragment","Memtion","List","memo"],"mappings":"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"}

package/lib/cjs/components/image/image.js

@@ -14,23 +14,30 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
+const STATUS_LOADING = "loading";
+const STATUS_ERROR = "error";
 const Image = (props) => {
     const { src, thumb, round, size, height, width, ratio, initSize, lazyload, fallback, fit, style, className, cover, coverClass, usePreview: previewable, onLoad, onError, onClick, ...restProps } = props;
     const state = hooks.useReactive({
-        status: "loading",
+        status: STATUS_LOADING,
     });
     const ref = react.useRef(null);
     const { observe, unobserve } = hooks.useIntersectionObserver();
     const preview = index.default();
-    const handleError = (err) => {
+    const setStatus = react.useCallback((status) => {
+        if (state.status === status)
+            return;
+        state.status = status;
+    }, [state]);
+    const handleError = react.useCallback((err) => {
         onError?.(err);
-        state.status = "error";
-    };
-    const handleLoad = (e) => {
+        setStatus(STATUS_ERROR);
+    }, [onError, setStatus]);
+    const handleLoad = react.useCallback((e) => {
         onLoad?.(e);
-        state.status = undefined;
-    };
-    const handleClick = (e) => {
+        setStatus(undefined);
+    }, [onLoad, setStatus]);
+    const handleClick = react.useCallback((e) => {
         onClick?.(e);
         if (!previewable || !src)
             return;
@@ -44,44 +51,53 @@ const Image = (props) => {
                 },
             ],
         });
-    };
+    }, [onClick, preview, previewable, src]);
     react.useEffect(() => {
         if (!src || typeof window === "undefined")
             return;
         const img = ref.current;
+        if (!img)
+            return;
         const hasSrcAttr = img?.getAttribute("src");
         const canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));
-        if (canSyncStatus && img?.complete) {
-            state.status = img.naturalWidth > 0 ? undefined : "error";
+        if (canSyncStatus && img.complete) {
+            setStatus(img.naturalWidth > 0 ? undefined : STATUS_ERROR);
         }
-        if (!ref.current?.complete && observe && lazyload) {
-            state.status = "loading";
+        if (!img.complete && observe && lazyload) {
+            setStatus(STATUS_LOADING);
         }
-        if (!lazyload || !ref.current || !observe)
+        if (!lazyload || !observe)
             return;
-        observe(ref.current, (tar, visible) => {
+        observe(img, (tar, visible) => {
             if (!visible)
                 return;
             tar.setAttribute("src", tar.dataset.src || "");
             unobserve(tar);
         });
         return () => {
-            ref.current && unobserve(ref.current);
+            unobserve(img);
         };
-    }, [src]);
-    restProps[lazyload ? "data-src" : "src"] = thumb ?? src;
-    const iSize = state.status === "loading" ? initSize : undefined;
-    return (jsxRuntime.jsx("div", { style: {
-            width: width ?? size ?? iSize,
-            height: height ?? size ?? iSize,
-            aspectRatio: ratio,
-            ...style,
-        }, className: classNames__default("i-image", className, {
-            rounded: round,
-            [`i-image-${state.status}`]: state.status,
-        }), onClick: handleClick, children: state.status === "error" ? ((fallback ?? null)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [src && (jsxRuntime.jsx("img", { ref: ref, style: { objectFit: fit }, ...restProps, onLoad: handleLoad, onError: handleError })), src && state.status === "loading" && jsxRuntime.jsx(loading.default, { absolute: true }), cover && (jsxRuntime.jsx("div", { className: classNames__default("i-image-cover", coverClass), children: cover }))] })) }));
+    }, [lazyload, observe, setStatus, src, unobserve]);
+    const imageStatus = state.status;
+    const iSize = imageStatus === STATUS_LOADING ? initSize : undefined;
+    const wrapperStyle = react.useMemo(() => ({
+        width: width ?? size ?? iSize,
+        height: height ?? size ?? iSize,
+        aspectRatio: ratio,
+        ...style,
+    }), [height, iSize, ratio, size, style, width]);
+    const wrapperClassName = react.useMemo(() => classNames__default("i-image", className, {
+        rounded: round,
+        [`i-image-${imageStatus}`]: imageStatus,
+    }), [className, imageStatus, round]);
+    const imageStyle = react.useMemo(() => ({ objectFit: fit }), [fit]);
+    const imageSrcProps = lazyload
+        ? { "data-src": thumb ?? src }
+        : { src: thumb ?? src };
+    return (jsxRuntime.jsx("div", { style: wrapperStyle, className: wrapperClassName, onClick: handleClick, children: imageStatus === STATUS_ERROR ? ((fallback ?? null)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [src && (jsxRuntime.jsx("img", { ref: ref, style: imageStyle, ...imageSrcProps, ...restProps, onLoad: handleLoad, onError: handleError })), src && imageStatus === STATUS_LOADING && (jsxRuntime.jsx(loading.default, { absolute: true })), cover && (jsxRuntime.jsx("div", { className: classNames__default("i-image-cover", coverClass), children: cover }))] })) }));
 };
-Image.List = list.default;
+const MemoImage = react.memo(Image);
+MemoImage.List = list.default;
 
-exports.default = Image;
+exports.default = MemoImage;
 //# sourceMappingURL=image.js.map

package/lib/cjs/components/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useIntersectionObserver, useReactive } from \"../../js/hooks\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport Loading from \"../loading\";\r\nimport \"./index.css\";\r\nimport List from \"./list\";\r\nimport type { CompositionImage, IImage } from \"./type\";\r\n\r\nconst Image = (props: IImage) => {\r\n\tconst {\r\n\t\tsrc,\r\n\t\tthumb,\r\n\t\tround,\r\n\t\tsize,\r\n\t\theight,\r\n\t\twidth,\r\n\t\tratio,\r\n\t\tinitSize,\r\n\t\tlazyload,\r\n\t\tfallback,\r\n\t\tfit,\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\tcover,\r\n\t\tcoverClass,\r\n\t\tusePreview: previewable,\r\n\t\tonLoad,\r\n\t\tonError,\r\n\t\tonClick,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst state = useReactive<{ status?: string }>({\r\n\t\tstatus: \"loading\",\r\n\t});\r\n\tconst ref = useRef<HTMLImageElement>(null);\r\n\r\n\tconst { observe, unobserve } = useIntersectionObserver();\r\n\tconst preview = usePreview();\r\n\r\n\tconst handleError = (err) => {\r\n\t\tonError?.(err);\r\n\t\tstate.status = \"error\";\r\n\t};\r\n\r\n\tconst handleLoad = (e) => {\r\n\t\tonLoad?.(e);\r\n\t\tstate.status = undefined;\r\n\t};\r\n\r\n\tconst handleClick = (e) => {\r\n\t\tonClick?.(e);\r\n\r\n\t\tif (!previewable || !src) return;\r\n\r\n\t\tconst previewConfigs =\r\n\t\t\ttypeof previewable === \"boolean\" ? {} : previewable;\r\n\r\n\t\tpreview({\r\n\t\t\t...previewConfigs,\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tsrc,\r\n\t\t\t\t\ttype: \"IMAGE\",\r\n\t\t\t\t},\r\n\t\t\t],\r\n\t\t});\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!src || typeof window === \"undefined\") return;\r\n\r\n\t\tconst img = ref.current;\r\n\t\tconst hasSrcAttr = img?.getAttribute(\"src\");\r\n\t\tconst canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));\r\n\t\tif (canSyncStatus && img?.complete) {\r\n\t\t\tstate.status = img.naturalWidth > 0 ? undefined : \"error\";\r\n\t\t}\r\n\r\n\t\tif (!ref.current?.complete && observe && lazyload) {\r\n\t\t\tstate.status = \"loading\";\r\n\t\t}\r\n\r\n\t\tif (!lazyload || !ref.current || !observe) return;\r\n\r\n\t\tobserve(ref.current, (tar: HTMLElement, visible: boolean) => {\r\n\t\t\tif (!visible) return;\r\n\r\n\t\t\ttar.setAttribute(\"src\", tar.dataset.src || \"\");\r\n\t\t\tunobserve(tar);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tref.current && unobserve(ref.current);\r\n\t\t};\r\n\t}, [src]);\r\n\r\n\trestProps[lazyload ? \"data-src\" : \"src\"] = thumb ?? src;\r\n\tconst iSize = state.status === \"loading\" ? initSize : undefined;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={{\r\n\t\t\t\twidth: width ?? size ?? iSize,\r\n\t\t\t\theight: height ?? size ?? iSize,\r\n\t\t\t\taspectRatio: ratio,\r\n\t\t\t\t...style,\r\n\t\t\t}}\r\n\t\t\tclassName={classNames(\"i-image\", className, {\r\n\t\t\t\trounded: round,\r\n\t\t\t\t[`i-image-${state.status}`]: state.status,\r\n\t\t\t})}\r\n\t\t\tonClick={handleClick}\r\n\t\t>\r\n\t\t\t{state.status === \"error\" ? (\r\n\t\t\t\t(fallback ?? null)\r\n\t\t\t) : (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{src && (\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tref={ref}\r\n\t\t\t\t\t\t\tstyle={{ objectFit: fit }}\r\n\t\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t\t\tonLoad={handleLoad}\r\n\t\t\t\t\t\t\tonError={handleError}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t{src && state.status === \"loading\" && <Loading absolute />}\r\n\r\n\t\t\t\t\t{cover && (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclassName={classNames(\"i-image-cover\", coverClass)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{cover}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nImage.List = List;\r\n\r\nexport default Image as CompositionImage;\r\n"],"names":["useReactive","useRef","useIntersectionObserver","usePreview","useEffect","_jsx","classNames","_jsxs","_Fragment","Loading","List"],"mappings":"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"}
+{"version":3,"file":"image.js","sources":["../../../../packages/components/image/image.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { memo, useCallback, useEffect, useMemo, useRef } from \"react\";\r\nimport { useIntersectionObserver, useReactive } from \"../../js/hooks\";\r\nimport usePreview from \"../../js/usePreview\";\r\nimport Loading from \"../loading\";\r\nimport \"./index.css\";\r\nimport List from \"./list\";\r\nimport type { CompositionImage, IImage } from \"./type\";\r\n\r\nconst STATUS_LOADING = \"loading\";\r\nconst STATUS_ERROR = \"error\";\r\n\r\nconst Image = (props: IImage) => {\r\n    const {\r\n        src,\r\n        thumb,\r\n        round,\r\n        size,\r\n        height,\r\n        width,\r\n        ratio,\r\n        initSize,\r\n        lazyload,\r\n        fallback,\r\n        fit,\r\n        style,\r\n        className,\r\n        cover,\r\n        coverClass,\r\n        usePreview: previewable,\r\n        onLoad,\r\n        onError,\r\n        onClick,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const state = useReactive<{ status?: string }>({\r\n        status: STATUS_LOADING,\r\n    });\r\n    const ref = useRef<HTMLImageElement>(null);\r\n\r\n    const { observe, unobserve } = useIntersectionObserver();\r\n    const preview = usePreview();\r\n\r\n    const setStatus = useCallback(\r\n        (status?: string) => {\r\n            if (state.status === status) return;\r\n            state.status = status;\r\n        },\r\n        [state],\r\n    );\r\n\r\n    const handleError = useCallback(\r\n        (err) => {\r\n            onError?.(err);\r\n            setStatus(STATUS_ERROR);\r\n        },\r\n        [onError, setStatus],\r\n    );\r\n\r\n    const handleLoad = useCallback(\r\n        (e) => {\r\n            onLoad?.(e);\r\n            setStatus(undefined);\r\n        },\r\n        [onLoad, setStatus],\r\n    );\r\n\r\n    const handleClick = useCallback(\r\n        (e) => {\r\n            onClick?.(e);\r\n\r\n            if (!previewable || !src) return;\r\n\r\n            const previewConfigs =\r\n                typeof previewable === \"boolean\" ? {} : previewable;\r\n\r\n            preview({\r\n                ...previewConfigs,\r\n                items: [\r\n                    {\r\n                        src,\r\n                        type: \"IMAGE\",\r\n                    },\r\n                ],\r\n            });\r\n        },\r\n        [onClick, preview, previewable, src],\r\n    );\r\n\r\n    useEffect(() => {\r\n        if (!src || typeof window === \"undefined\") return;\r\n\r\n        const img = ref.current;\r\n        if (!img) return;\r\n\r\n        const hasSrcAttr = img?.getAttribute(\"src\");\r\n        const canSyncStatus = Boolean(img && (!lazyload || hasSrcAttr));\r\n        if (canSyncStatus && img.complete) {\r\n            setStatus(img.naturalWidth > 0 ? undefined : STATUS_ERROR);\r\n        }\r\n\r\n        if (!img.complete && observe && lazyload) {\r\n            setStatus(STATUS_LOADING);\r\n        }\r\n\r\n        if (!lazyload || !observe) return;\r\n\r\n        observe(img, (tar: HTMLElement, visible: boolean) => {\r\n            if (!visible) return;\r\n\r\n            tar.setAttribute(\"src\", tar.dataset.src || \"\");\r\n            unobserve(tar);\r\n        });\r\n\r\n        return () => {\r\n            unobserve(img);\r\n        };\r\n    }, [lazyload, observe, setStatus, src, unobserve]);\r\n\r\n    const imageStatus = state.status;\r\n    const iSize = imageStatus === STATUS_LOADING ? initSize : undefined;\r\n\r\n    const wrapperStyle = useMemo(\r\n        () => ({\r\n            width: width ?? size ?? iSize,\r\n            height: height ?? size ?? iSize,\r\n            aspectRatio: ratio,\r\n            ...style,\r\n        }),\r\n        [height, iSize, ratio, size, style, width],\r\n    );\r\n\r\n    const wrapperClassName = useMemo(\r\n        () =>\r\n            classNames(\"i-image\", className, {\r\n                rounded: round,\r\n                [`i-image-${imageStatus}`]: imageStatus,\r\n            }),\r\n        [className, imageStatus, round],\r\n    );\r\n\r\n    const imageStyle = useMemo(() => ({ objectFit: fit }), [fit]);\r\n    const imageSrcProps = lazyload\r\n        ? { \"data-src\": thumb ?? src }\r\n        : { src: thumb ?? src };\r\n\r\n    return (\r\n        <div\r\n            style={wrapperStyle}\r\n            className={wrapperClassName}\r\n            onClick={handleClick}\r\n        >\r\n            {imageStatus === STATUS_ERROR ? (\r\n                (fallback ?? null)\r\n            ) : (\r\n                <>\r\n                    {src && (\r\n                        <img\r\n                            ref={ref}\r\n                            style={imageStyle}\r\n                            {...imageSrcProps}\r\n                            {...restProps}\r\n                            onLoad={handleLoad}\r\n                            onError={handleError}\r\n                        />\r\n                    )}\r\n\r\n                    {src && imageStatus === STATUS_LOADING && (\r\n                        <Loading absolute />\r\n                    )}\r\n\r\n                    {cover && (\r\n                        <div\r\n                            className={classNames(\"i-image-cover\", coverClass)}\r\n                        >\r\n                            {cover}\r\n                        </div>\r\n                    )}\r\n                </>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nconst MemoImage = memo(Image) as unknown as CompositionImage;\r\n\r\nMemoImage.List = List;\r\n\r\nexport default MemoImage;\r\n"],"names":["useReactive","useRef","useIntersectionObserver","usePreview","useCallback","useEffect","useMemo","classNames","_jsx","_jsxs","Loading","memo","List"],"mappings":"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"}

package/lib/cjs/components/input/textarea.js

@@ -12,16 +12,19 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 
 const Textarea = (props) => {
-    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, onChange, onEnter, ...restProps } = props;
+    const { ref, label, name, value = "", labelInline, className, status = "normal", message, tip, autoSize, border, width, style, resize, onChange, onEnter, ...restProps } = props;
     const [textareaValue, setTextareaValue] = react.useState(value);
     const refTextarea = react.useRef(null);
+    const syncTextareaHeight = () => {
+        const ta = refTextarea.current;
+        if (!autoSize || !ta)
+            return;
+        ta.style.height = "auto";
+        ta.style.height = `${ta.scrollHeight}px`;
+    };
     const handleChange = (e) => {
         const v = e.target.value;
         setTextareaValue(v);
-        const ta = refTextarea.current;
-        if (autoSize && ta) {
-            ta.style.height = `${ta.scrollHeight}px`;
-        }
         onChange?.(v, e);
     };
     const handleKeydown = (e) => {
@@ -33,6 +36,9 @@ const Textarea = (props) => {
     react.useEffect(() => {
         setTextareaValue(value);
     }, [value]);
+    react.useEffect(() => {
+        syncTextareaHeight();
+    }, [autoSize, textareaValue]);
     react.useImperativeHandle(ref, () => {
         return {
             input: refTextarea.current,
@@ -43,6 +49,7 @@ const Textarea = (props) => {
         name,
         value: textareaValue,
         className: "i-input i-textarea",
+        style: resize === false ? { resize: "none" } : undefined,
         onChange: handleChange,
         onKeyDown: handleKeydown,
         ...restProps,

package/lib/cjs/components/input/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../../packages/components/input/textarea.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport {\r\n\tChangeEvent,\r\n\tuseEffect,\r\n\tuseImperativeHandle,\r\n\tuseRef,\r\n\tuseState,\r\n\ttype KeyboardEvent,\r\n} from \"react\";\r\nimport \"../../css/input.css\";\r\nimport InputContainer from \"./container\";\r\nimport type { ITextarea } from \"./type\";\r\n\r\nconst Textarea = (props: ITextarea) => {\r\n\tconst {\r\n\t\tref,\r\n\t\tlabel,\r\n\t\tname,\r\n\t\tvalue = \"\",\r\n\t\tlabelInline,\r\n\t\tclassName,\r\n\t\tstatus = \"normal\",\r\n\t\tmessage,\r\n\t\ttip,\r\n\t\tautoSize,\r\n\t\tborder,\r\n\t\twidth,\r\n\t\tstyle,\r\n\t\tonChange,\r\n\t\tonEnter,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst [textareaValue, setTextareaValue] = useState(value);\r\n\tconst refTextarea = useRef<HTMLTextAreaElement>(null);\r\n\r\n\tconst handleChange = (\r\n\t\te: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\r\n\t) => {\r\n\t\tconst v = e.target.value;\r\n\r\n\t\tsetTextareaValue(v);\r\n\r\n\t\tconst ta = refTextarea.current as HTMLElement;\r\n\t\tif (autoSize && ta) {\r\n\t\t\tta.style.height = `${ta.scrollHeight}px`;\r\n\t\t}\r\n\r\n\t\tonChange?.(v, e);\r\n\t};\r\n\r\n\tconst handleKeydown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\r\n\t\tif (e.code !== \"Enter\") return;\r\n\r\n\t\te.stopPropagation();\r\n\t\tonEnter?.(e);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetTextareaValue(value);\r\n\t}, [value]);\r\n\r\n\tuseImperativeHandle(ref, () => {\r\n\t\treturn {\r\n\t\t\tinput: refTextarea.current,\r\n\t\t};\r\n\t});\r\n\r\n\tconst inputProps = {\r\n\t\tref: refTextarea,\r\n\t\tname,\r\n\t\tvalue: textareaValue,\r\n\t\tclassName: \"i-input i-textarea\",\r\n\t\tonChange: handleChange,\r\n\t\tonKeyDown: handleKeydown,\r\n\t\t...restProps,\r\n\t};\r\n\r\n\treturn (\r\n\t\t<InputContainer\r\n\t\t\tlabel={label}\r\n\t\t\tlabelInline={labelInline}\r\n\t\t\tclassName={className}\r\n\t\t\tstyle={{ width, ...style }}\r\n\t\t\ttip={message ?? tip}\r\n\t\t\tstatus={status}\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tclassName={classNames(\"i-input-item\", {\r\n\t\t\t\t\t[`i-input-${status}`]: status !== \"normal\",\r\n\t\t\t\t\t\"i-input-borderless\": !border,\r\n\t\t\t\t})}\r\n\t\t\t>\r\n\t\t\t\t<textarea {...inputProps} />\r\n\t\t\t</div>\r\n\t\t</InputContainer>\r\n\t);\r\n};\r\n\r\nexport default Textarea;\r\n"],"names":["useState","useRef","useEffect","useImperativeHandle","_jsx","InputContainer","classNames"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AACrC,IAAA,MAAM,EACL,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACZ,GAAG,KAAK;IAET,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAsB,IAAI,CAAC;AAErD,IAAA,MAAM,YAAY,GAAG,CACpB,CAAsD,KACnD;AACH,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAExB,gBAAgB,CAAC,CAAC,CAAC;AAEnB,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAsB;AAC7C,QAAA,IAAI,QAAQ,IAAI,EAAE,EAAE;YACnB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI;QACzC;AAEA,QAAA,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;AACjB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAqC,KAAI;AAC/D,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE;QAExB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,OAAO,GAAG,CAAC,CAAC;AACb,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACd,gBAAgB,CAAC,KAAK,CAAC;AACxB,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,IAAAC,yBAAmB,CAAC,GAAG,EAAE,MAAK;QAC7B,OAAO;YACN,KAAK,EAAE,WAAW,CAAC,OAAO;SAC1B;AACF,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AAClB,QAAA,GAAG,EAAE,WAAW;QAChB,IAAI;AACJ,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,GAAG,SAAS;KACZ;AAED,IAAA,QACCC,cAAA,CAACC,iBAAc,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC1B,GAAG,EAAE,OAAO,IAAI,GAAG,EACnB,MAAM,EAAE,MAAM,YAEdD,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAEE,mBAAU,CAAC,cAAc,EAAE;AACrC,gBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;gBAC1C,oBAAoB,EAAE,CAAC,MAAM;AAC7B,aAAA,CAAC,YAEFF,cAAA,CAAA,UAAA,EAAA,EAAA,GAAc,UAAU,GAAI,EAAA,CACvB,EAAA,CACU;AAEnB;;;;"}
+{"version":3,"file":"textarea.js","sources":["../../../../packages/components/input/textarea.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport {\r\n    ChangeEvent,\r\n    useEffect,\r\n    useImperativeHandle,\r\n    useRef,\r\n    useState,\r\n    type KeyboardEvent,\r\n} from \"react\";\r\nimport \"../../css/input.css\";\r\nimport InputContainer from \"./container\";\r\nimport type { ITextarea } from \"./type\";\r\n\r\nconst Textarea = (props: ITextarea) => {\r\n    const {\r\n        ref,\r\n        label,\r\n        name,\r\n        value = \"\",\r\n        labelInline,\r\n        className,\r\n        status = \"normal\",\r\n        message,\r\n        tip,\r\n        autoSize,\r\n        border,\r\n        width,\r\n        style,\r\n        resize,\r\n        onChange,\r\n        onEnter,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const [textareaValue, setTextareaValue] = useState(value);\r\n    const refTextarea = useRef<HTMLTextAreaElement>(null);\r\n\r\n    const syncTextareaHeight = () => {\r\n        const ta = refTextarea.current;\r\n        if (!autoSize || !ta) return;\r\n\r\n        ta.style.height = \"auto\";\r\n        ta.style.height = `${ta.scrollHeight}px`;\r\n    };\r\n\r\n    const handleChange = (\r\n        e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\r\n    ) => {\r\n        const v = e.target.value;\r\n\r\n        setTextareaValue(v);\r\n\r\n        onChange?.(v, e);\r\n    };\r\n\r\n    const handleKeydown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (e.code !== \"Enter\") return;\r\n\r\n        e.stopPropagation();\r\n        onEnter?.(e);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setTextareaValue(value);\r\n    }, [value]);\r\n\r\n    useEffect(() => {\r\n        syncTextareaHeight();\r\n    }, [autoSize, textareaValue]);\r\n\r\n    useImperativeHandle(ref, () => {\r\n        return {\r\n            input: refTextarea.current,\r\n        };\r\n    });\r\n\r\n    const inputProps = {\r\n        ref: refTextarea,\r\n        name,\r\n        value: textareaValue,\r\n        className: \"i-input i-textarea\",\r\n        style: resize === false ? { resize: \"none\" as const } : undefined,\r\n        onChange: handleChange,\r\n        onKeyDown: handleKeydown,\r\n        ...restProps,\r\n    };\r\n\r\n    return (\r\n        <InputContainer\r\n            label={label}\r\n            labelInline={labelInline}\r\n            className={className}\r\n            style={{ width, ...style }}\r\n            tip={message ?? tip}\r\n            status={status}\r\n        >\r\n            <div\r\n                className={classNames(\"i-input-item\", {\r\n                    [`i-input-${status}`]: status !== \"normal\",\r\n                    \"i-input-borderless\": !border,\r\n                })}\r\n            >\r\n                <textarea {...inputProps} />\r\n            </div>\r\n        </InputContainer>\r\n    );\r\n};\r\n\r\nexport default Textarea;\r\n"],"names":["useState","useRef","useEffect","useImperativeHandle","_jsx","InputContainer","classNames"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AAClC,IAAA,MAAM,EACF,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,QAAQ,EACjB,OAAO,EACP,GAAG,EACH,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACf,GAAG,KAAK;IAET,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACzD,IAAA,MAAM,WAAW,GAAGC,YAAM,CAAsB,IAAI,CAAC;IAErD,MAAM,kBAAkB,GAAG,MAAK;AAC5B,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE;YAAE;AAEtB,QAAA,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;QACxB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAA,EAAA,CAAI;AAC5C,IAAA,CAAC;AAED,IAAA,MAAM,YAAY,GAAG,CACjB,CAAsD,KACtD;AACA,QAAA,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAExB,gBAAgB,CAAC,CAAC,CAAC;AAEnB,QAAA,QAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,CAAqC,KAAI;AAC5D,QAAA,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO;YAAE;QAExB,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,OAAO,GAAG,CAAC,CAAC;AAChB,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACX,gBAAgB,CAAC,KAAK,CAAC;AAC3B,IAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEXA,eAAS,CAAC,MAAK;AACX,QAAA,kBAAkB,EAAE;AACxB,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAE7B,IAAAC,yBAAmB,CAAC,GAAG,EAAE,MAAK;QAC1B,OAAO;YACH,KAAK,EAAE,WAAW,CAAC,OAAO;SAC7B;AACL,IAAA,CAAC,CAAC;AAEF,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,GAAG,EAAE,WAAW;QAChB,IAAI;AACJ,QAAA,KAAK,EAAE,aAAa;AACpB,QAAA,SAAS,EAAE,oBAAoB;AAC/B,QAAA,KAAK,EAAE,MAAM,KAAK,KAAK,GAAG,EAAE,MAAM,EAAE,MAAe,EAAE,GAAG,SAAS;AACjE,QAAA,QAAQ,EAAE,YAAY;AACtB,QAAA,SAAS,EAAE,aAAa;AACxB,QAAA,GAAG,SAAS;KACf;AAED,IAAA,QACIC,cAAA,CAACC,iBAAc,IACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAC1B,GAAG,EAAE,OAAO,IAAI,GAAG,EACnB,MAAM,EAAE,MAAM,YAEdD,cAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEE,mBAAU,CAAC,cAAc,EAAE;AAClC,gBAAA,CAAC,WAAW,MAAM,CAAA,CAAE,GAAG,MAAM,KAAK,QAAQ;gBAC1C,oBAAoB,EAAE,CAAC,MAAM;AAChC,aAAA,CAAC,YAEFF,cAAA,CAAA,UAAA,EAAA,EAAA,GAAc,UAAU,GAAI,EAAA,CAC1B,EAAA,CACO;AAEzB;;;;"}

package/lib/cjs/components/modal/hookModal.js

@@ -17,7 +17,7 @@ const HookModal = (props) => {
         },
         close: () => {
             state.visible = false;
-            if (mergedProps.closable)
+            if (mergedProps.closable ?? true)
                 return;
             Promise.resolve().then(() => {
                 state.visible = true;

package/lib/cjs/components/modal/hookModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"hookModal.js","sources":["../../../../packages/components/modal/hookModal.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\r\nimport { useImperativeHandle } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Modal from \"./modal\";\r\nimport type { IModal, RefHookModal } from \"./type\";\r\n\r\nconst HookModal = (\r\n\tprops: IModal & { ref?: RefObject<RefHookModal | null> }\r\n) => {\r\n\tconst { ref, ...restProps } = props;\r\n\tconst state = useReactive<IModal>({});\r\n\r\n\tconst mergedProps = Object.assign({}, restProps, state);\r\n\r\n\tuseImperativeHandle(ref, () => ({\r\n\t\tupdate: (config: IModal = {}) => {\r\n\t\t\tObject.assign(state, config);\r\n\t\t},\r\n\r\n\t\tclose: () => {\r\n\t\t\tstate.visible = false;\r\n\r\n\t\t\tif (mergedProps.closable) return;\r\n\t\t\tPromise.resolve().then(() => {\r\n\t\t\t\tstate.visible = true;\r\n\t\t\t});\r\n\t\t},\r\n\t}));\r\n\r\n\treturn <Modal {...mergedProps} />;\r\n};\r\n\r\nexport default HookModal;\r\n"],"names":["useReactive","useImperativeHandle","_jsx","Modal"],"mappings":";;;;;;;;;AAMA,MAAM,SAAS,GAAG,CACjB,KAAwD,KACrD;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACnC,IAAA,MAAM,KAAK,GAAGA,iBAAW,CAAS,EAAE,CAAC;AAErC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC;AAEvD,IAAAC,yBAAmB,CAAC,GAAG,EAAE,OAAO;AAC/B,QAAA,MAAM,EAAE,CAAC,MAAA,GAAiB,EAAE,KAAI;AAC/B,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;QAC7B,CAAC;QAED,KAAK,EAAE,MAAK;AACX,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;YAErB,IAAI,WAAW,CAAC,QAAQ;gBAAE;AAC1B,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AAC3B,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;AACrB,YAAA,CAAC,CAAC;QACH,CAAC;AACD,KAAA,CAAC,CAAC;AAEH,IAAA,OAAOC,cAAA,CAACC,aAAK,EAAA,EAAA,GAAK,WAAW,GAAI;AAClC;;;;"}
+{"version":3,"file":"hookModal.js","sources":["../../../../packages/components/modal/hookModal.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\r\nimport { useImperativeHandle } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Modal from \"./modal\";\r\nimport type { IModal, RefHookModal } from \"./type\";\r\n\r\nconst HookModal = (\r\n    props: IModal & { ref?: RefObject<RefHookModal | null> },\r\n) => {\r\n    const { ref, ...restProps } = props;\r\n    const state = useReactive<IModal>({});\r\n\r\n    const mergedProps = Object.assign({}, restProps, state);\r\n\r\n    useImperativeHandle(ref, () => ({\r\n        update: (config: IModal = {}) => {\r\n            Object.assign(state, config);\r\n        },\r\n\r\n        close: () => {\r\n            state.visible = false;\r\n\r\n            if (mergedProps.closable ?? true) return;\r\n            Promise.resolve().then(() => {\r\n                state.visible = true;\r\n            });\r\n        },\r\n    }));\r\n\r\n    return <Modal {...mergedProps} />;\r\n};\r\n\r\nexport default HookModal;\r\n"],"names":["useReactive","useImperativeHandle","_jsx","Modal"],"mappings":";;;;;;;;;AAMA,MAAM,SAAS,GAAG,CACd,KAAwD,KACxD;IACA,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACnC,IAAA,MAAM,KAAK,GAAGA,iBAAW,CAAS,EAAE,CAAC;AAErC,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC;AAEvD,IAAAC,yBAAmB,CAAC,GAAG,EAAE,OAAO;AAC5B,QAAA,MAAM,EAAE,CAAC,MAAA,GAAiB,EAAE,KAAI;AAC5B,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC;QAChC,CAAC;QAED,KAAK,EAAE,MAAK;AACR,YAAA,KAAK,CAAC,OAAO,GAAG,KAAK;AAErB,YAAA,IAAI,WAAW,CAAC,QAAQ,IAAI,IAAI;gBAAE;AAClC,YAAA,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,MAAK;AACxB,gBAAA,KAAK,CAAC,OAAO,GAAG,IAAI;AACxB,YAAA,CAAC,CAAC;QACN,CAAC;AACJ,KAAA,CAAC,CAAC;AAEH,IAAA,OAAOC,cAAA,CAACC,aAAK,EAAA,EAAA,GAAK,WAAW,GAAI;AACrC;;;;"}

package/lib/cjs/components/picker/colors/footer.js

@@ -31,7 +31,7 @@ function Footer(props) {
         setInputValue(value);
         setColorType(type);
     }, [value, type]);
-    return (jsxRuntime.jsxs("div", { className: 'i-colorpicker-footer', children: [jsxRuntime.jsx(select.default, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange }), jsxRuntime.jsx(input.default, { placeholder: 'color', value: inputValue, onChange: handleChange }), jsxRuntime.jsx(button.default, { square: true, onClick: onOk, children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CheckRound, {}) }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "i-colorpicker-footer", children: [jsxRuntime.jsx(select.default, { readOnly: true, hideClear: true, hideArrow: true, style: { width: "5.6em" }, options: ["RGB", "HEX", "HSB"], value: colorType, onChange: handleTypeChange, popupProps: { fitSize: false } }), jsxRuntime.jsx(input.default, { placeholder: "color", value: inputValue, onChange: handleChange }), jsxRuntime.jsx(button.default, { square: true, onClick: onOk, children: jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.CheckRound, {}) }) })] }));
 }
 
 exports.ColorMethods = ColorMethods;

package/lib/cjs/components/picker/colors/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\r\nimport { useEffect, useState } from \"react\";\r\nimport Button from \"../../button\";\r\nimport Icon from \"../../icon\";\r\nimport Input from \"../../input\";\r\nimport Select from \"../../select\";\r\n\r\nexport const ColorMethods = {\r\n\tHEX: \"toHexString\",\r\n\tRGB: \"toRgbString\",\r\n\tHSB: \"toHsbString\",\r\n};\r\n\r\nexport default function Footer(props) {\r\n\tconst { value, type, onTypeChange, onChange, onOk } = props;\r\n\tconst [inputValue, setInputValue] = useState(value);\r\n\tconst [colorType, setColorType] = useState(type);\r\n\r\n\tconst handleChange = (v) => {\r\n\t\tsetInputValue(v);\r\n\t\tonChange(v);\r\n\t};\r\n\r\n\tconst handleTypeChange = (t) => {\r\n\t\tsetColorType(t);\r\n\t\tonTypeChange(t);\r\n\t};\r\n\r\n\tuseEffect(() => {\r\n\t\tsetInputValue(value);\r\n\t\tsetColorType(type);\r\n\t}, [value, type]);\r\n\r\n\treturn (\r\n\t\t<div className='i-colorpicker-footer'>\r\n\t\t\t<Select\r\n\t\t\t\treadOnly\r\n\t\t\t\thideClear\r\n\t\t\t\thideArrow\r\n\t\t\t\tstyle={{ width: \"5.6em\" }}\r\n\t\t\t\toptions={[\"RGB\", \"HEX\", \"HSB\"]}\r\n\t\t\t\tvalue={colorType}\r\n\t\t\t\tonChange={handleTypeChange}\r\n\t\t\t/>\r\n\t\t\t<Input\r\n\t\t\t\tplaceholder='color'\r\n\t\t\t\tvalue={inputValue}\r\n\t\t\t\tonChange={handleChange}\r\n\t\t\t/>\r\n\t\t\t<Button square onClick={onOk}>\r\n\t\t\t\t<Icon icon={<CheckRound />} />\r\n\t\t\t</Button>\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"names":["useState","useEffect","_jsxs","_jsx","Select","Input","Button","Icon","CheckRound"],"mappings":";;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG;AAC3B,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;;AAGL,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,KAAI;QAC1B,aAAa,CAAC,CAAC,CAAC;QAChB,QAAQ,CAAC,CAAC,CAAC;AACZ,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAC,KAAI;QAC9B,YAAY,CAAC,CAAC,CAAC;QACf,YAAY,CAAC,CAAC,CAAC;AAChB,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACd,aAAa,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC;AACnB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,aACpCC,cAAA,CAACC,cAAM,EAAA,EACN,QAAQ,QACR,SAAS,EAAA,IAAA,EACT,SAAS,EAAA,IAAA,EACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAAA,CACzB,EACFD,cAAA,CAACE,aAAK,EAAA,EACL,WAAW,EAAC,OAAO,EACnB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EAAA,CACrB,EACFF,cAAA,CAACG,cAAM,EAAA,EAAC,MAAM,QAAC,OAAO,EAAE,IAAI,EAAA,QAAA,EAC3BH,eAACI,YAAI,EAAA,EAAC,IAAI,EAAEJ,eAACK,mBAAU,EAAA,EAAA,CAAG,GAAI,EAAA,CACtB,CAAA,EAAA,CACJ;AAER;;;;;"}
+{"version":3,"file":"footer.js","sources":["../../../../../packages/components/picker/colors/footer.tsx"],"sourcesContent":["import { CheckRound } from \"@ricons/material\";\r\nimport { useEffect, useState } from \"react\";\r\nimport Button from \"../../button\";\r\nimport Icon from \"../../icon\";\r\nimport Input from \"../../input\";\r\nimport Select from \"../../select\";\r\n\r\nexport const ColorMethods = {\r\n    HEX: \"toHexString\",\r\n    RGB: \"toRgbString\",\r\n    HSB: \"toHsbString\",\r\n};\r\n\r\nexport default function Footer(props) {\r\n    const { value, type, onTypeChange, onChange, onOk } = props;\r\n    const [inputValue, setInputValue] = useState(value);\r\n    const [colorType, setColorType] = useState(type);\r\n\r\n    const handleChange = (v: string) => {\r\n        setInputValue(v);\r\n        onChange(v);\r\n    };\r\n\r\n    const handleTypeChange = (t: string) => {\r\n        setColorType(t);\r\n        onTypeChange(t);\r\n    };\r\n\r\n    useEffect(() => {\r\n        setInputValue(value);\r\n        setColorType(type);\r\n    }, [value, type]);\r\n\r\n    return (\r\n        <div className=\"i-colorpicker-footer\">\r\n            <Select\r\n                readOnly\r\n                hideClear\r\n                hideArrow\r\n                style={{ width: \"5.6em\" }}\r\n                options={[\"RGB\", \"HEX\", \"HSB\"]}\r\n                value={colorType}\r\n                onChange={handleTypeChange}\r\n                popupProps={{ fitSize: false }}\r\n            />\r\n            <Input\r\n                placeholder=\"color\"\r\n                value={inputValue}\r\n                onChange={handleChange}\r\n            />\r\n            <Button square onClick={onOk}>\r\n                <Icon icon={<CheckRound />} />\r\n            </Button>\r\n        </div>\r\n    );\r\n}\r\n"],"names":["useState","useEffect","_jsxs","_jsx","Select","Input","Button","Icon","CheckRound"],"mappings":";;;;;;;;;;;;AAOO,MAAM,YAAY,GAAG;AACxB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;AAClB,IAAA,GAAG,EAAE,aAAa;;AAGR,SAAU,MAAM,CAAC,KAAK,EAAA;AAChC,IAAA,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,IAAI,CAAC;AAEhD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAS,KAAI;QAC/B,aAAa,CAAC,CAAC,CAAC;QAChB,QAAQ,CAAC,CAAC,CAAC;AACf,IAAA,CAAC;AAED,IAAA,MAAM,gBAAgB,GAAG,CAAC,CAAS,KAAI;QACnC,YAAY,CAAC,CAAC,CAAC;QACf,YAAY,CAAC,CAAC,CAAC;AACnB,IAAA,CAAC;IAEDC,eAAS,CAAC,MAAK;QACX,aAAa,CAAC,KAAK,CAAC;QACpB,YAAY,CAAC,IAAI,CAAC;AACtB,IAAA,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAEjB,IAAA,QACIC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAA,CACjCC,eAACC,cAAM,EAAA,EACH,QAAQ,EAAA,IAAA,EACR,SAAS,EAAA,IAAA,EACT,SAAS,QACT,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,EAC9B,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,GAChC,EACFD,cAAA,CAACE,aAAK,EAAA,EACF,WAAW,EAAC,OAAO,EACnB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,YAAY,EAAA,CACxB,EACFF,cAAA,CAACG,cAAM,IAAC,MAAM,EAAA,IAAA,EAAC,OAAO,EAAE,IAAI,YACxBH,cAAA,CAACI,YAAI,IAAC,IAAI,EAAEJ,eAACK,mBAAU,EAAA,EAAA,CAAG,GAAI,EAAA,CACzB,CAAA,EAAA,CACP;AAEd;;;;;"}

package/lib/cjs/components/popconfirm/popconfirm.js

@@ -15,10 +15,10 @@ const defaultOk = {
 };
 const defaultCancel = {
     children: "取消",
-    secondary: true,
+    flat: true,
 };
 const Popconfirm = (props) => {
-    const { trigger = "click", visible, icon: icon$1 = jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.InfoOutlined, {}), className: 'error', size: '1.2em' }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
+    const { trigger = "click", visible, icon: icon$1 = jsxRuntime.jsx(icon.default, { icon: jsxRuntime.jsx(material.InfoOutlined, {}), className: "error", size: "1.2em" }), content, okButtonProps, cancelButtonProps, children, align, position = "top", offset = 12, extra, onOk, onClose, ...restProps } = props;
     const state = hooks.useReactive({
         loading: false,
         visible,
@@ -49,7 +49,7 @@ const Popconfirm = (props) => {
         await onClose?.();
         state.visible = false;
     };
-    const popconfirmContent = (jsxRuntime.jsxs("div", { className: 'i-popconfirm', children: [jsxRuntime.jsxs(flex.default, { gap: '.5em', children: [icon$1, jsxRuntime.jsx("div", { className: 'i-popconfirm-content', children: content })] }), jsxRuntime.jsxs(flex.default, { gap: 12, justify: 'flex-end', className: 'i-popconfirm-footer', children: [cancelButtonProps !== null && (jsxRuntime.jsx(button.default, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsxRuntime.jsx(button.default, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
+    const popconfirmContent = (jsxRuntime.jsxs("div", { className: "i-popconfirm", children: [jsxRuntime.jsxs(flex.default, { gap: ".5em", children: [icon$1, jsxRuntime.jsx("div", { className: "i-popconfirm-content", children: content })] }), jsxRuntime.jsxs(flex.default, { gap: 12, justify: "flex-end", className: "i-popconfirm-footer", children: [cancelButtonProps !== null && (jsxRuntime.jsx(button.default, { ...cancel, onClick: handleCancel })), extra, okButtonProps !== null && (jsxRuntime.jsx(button.default, { loading: state.loading, ...ok, onClick: handleOk }))] })] }));
     return (jsxRuntime.jsx(popup.default, { content: popconfirmContent, ...restProps, trigger: trigger, visible: state.visible, align: align, offset: offset, position: position, onVisibleChange: handleVisibleChange, children: children }));
 };
 

package/lib/cjs/components/popconfirm/popconfirm.js.map

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\r\nimport { MouseEvent } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Flex from \"../flex\";\r\nimport Icon from \"../icon\";\r\nimport Popup from \"../popup\";\r\nimport \"./index.css\";\r\nimport { IPopconfirm } from \"./type\";\r\n\r\nconst defaultOk = {\r\n\tchildren: \"确定\",\r\n};\r\n\r\nconst defaultCancel = {\r\n\tchildren: \"取消\",\r\n\tsecondary: true,\r\n};\r\n\r\nconst Popconfirm = (props: IPopconfirm) => {\r\n\tconst {\r\n\t\ttrigger = \"click\",\r\n\t\tvisible,\r\n\t\ticon = <Icon icon={<InfoOutlined />} className='error' size='1.2em' />,\r\n\t\tcontent,\r\n\t\tokButtonProps,\r\n\t\tcancelButtonProps,\r\n\t\tchildren,\r\n\t\talign,\r\n\t\tposition = \"top\",\r\n\t\toffset = 12,\r\n\t\textra,\r\n\t\tonOk,\r\n\t\tonClose,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst state = useReactive({\r\n\t\tloading: false,\r\n\t\tvisible,\r\n\t});\r\n\r\n\tconst ok: IButton = okButtonProps\r\n\t\t? Object.assign({}, defaultOk, okButtonProps)\r\n\t\t: defaultOk;\r\n\tconst cancel: IButton = cancelButtonProps\r\n\t\t? Object.assign({}, defaultCancel, cancelButtonProps)\r\n\t\t: defaultCancel;\r\n\r\n\tconst handleVisibleChange = (v: boolean) => {\r\n\t\tstate.visible = v;\r\n\t\trestProps.onVisibleChange?.(v);\r\n\t};\r\n\r\n\tconst handleOk = async (e: MouseEvent<HTMLElement>) => {\r\n\t\tstate.loading = true;\r\n\t\tok.onClick?.(e);\r\n\t\ttry {\r\n\t\t\tawait onOk?.();\r\n\t\t\tstate.visible = false;\r\n\t\t} finally {\r\n\t\t\tstate.loading = false;\r\n\t\t}\r\n\t};\r\n\r\n\tconst handleCancel = async (e: MouseEvent<HTMLElement>) => {\r\n\t\tcancel.onClick?.(e);\r\n\t\tawait onClose?.();\r\n\t\tstate.visible = false;\r\n\t};\r\n\r\n\tconst popconfirmContent = (\r\n\t\t<div className='i-popconfirm'>\r\n\t\t\t<Flex gap='.5em'>\r\n\t\t\t\t{icon}\r\n\t\t\t\t<div className='i-popconfirm-content'>{content}</div>\r\n\t\t\t</Flex>\r\n\r\n\t\t\t<Flex gap={12} justify='flex-end' className='i-popconfirm-footer'>\r\n\t\t\t\t{cancelButtonProps !== null && (\r\n\t\t\t\t\t<Button {...cancel} onClick={handleCancel} />\r\n\t\t\t\t)}\r\n\t\t\t\t{extra}\r\n\t\t\t\t{okButtonProps !== null && (\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tloading={state.loading}\r\n\t\t\t\t\t\t{...ok}\r\n\t\t\t\t\t\tonClick={handleOk}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\t\t\t</Flex>\r\n\t\t</div>\r\n\t);\r\n\r\n\treturn (\r\n\t\t<Popup\r\n\t\t\tcontent={popconfirmContent}\r\n\t\t\t{...restProps}\r\n\t\t\ttrigger={trigger}\r\n\t\t\tvisible={state.visible}\r\n\t\t\talign={align}\r\n\t\t\toffset={offset}\r\n\t\t\tposition={position}\r\n\t\t\tonVisibleChange={handleVisibleChange}\r\n\t\t>\r\n\t\t\t{children}\r\n\t\t</Popup>\r\n\t);\r\n};\r\n\r\nexport default Popconfirm;\r\n"],"names":["icon","_jsx","Icon","InfoOutlined","useReactive","_jsxs","Flex","Button","Popup"],"mappings":"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"}
+{"version":3,"file":"popconfirm.js","sources":["../../../../packages/components/popconfirm/popconfirm.tsx"],"sourcesContent":["import { InfoOutlined } from \"@ricons/material\";\r\nimport { MouseEvent } from \"react\";\r\nimport { useReactive } from \"../../js/hooks\";\r\nimport Button from \"../button\";\r\nimport { IButton } from \"../button/type\";\r\nimport Flex from \"../flex\";\r\nimport Icon from \"../icon\";\r\nimport Popup from \"../popup\";\r\nimport \"./index.css\";\r\nimport { IPopconfirm } from \"./type\";\r\n\r\nconst defaultOk = {\r\n    children: \"确定\",\r\n};\r\n\r\nconst defaultCancel = {\r\n    children: \"取消\",\r\n    flat: true,\r\n};\r\n\r\nconst Popconfirm = (props: IPopconfirm) => {\r\n    const {\r\n        trigger = \"click\",\r\n        visible,\r\n        icon = <Icon icon={<InfoOutlined />} className=\"error\" size=\"1.2em\" />,\r\n        content,\r\n        okButtonProps,\r\n        cancelButtonProps,\r\n        children,\r\n        align,\r\n        position = \"top\",\r\n        offset = 12,\r\n        extra,\r\n        onOk,\r\n        onClose,\r\n        ...restProps\r\n    } = props;\r\n\r\n    const state = useReactive({\r\n        loading: false,\r\n        visible,\r\n    });\r\n\r\n    const ok: IButton = okButtonProps\r\n        ? Object.assign({}, defaultOk, okButtonProps)\r\n        : defaultOk;\r\n    const cancel: IButton = cancelButtonProps\r\n        ? Object.assign({}, defaultCancel, cancelButtonProps)\r\n        : defaultCancel;\r\n\r\n    const handleVisibleChange = (v: boolean) => {\r\n        state.visible = v;\r\n        restProps.onVisibleChange?.(v);\r\n    };\r\n\r\n    const handleOk = async (e: MouseEvent<HTMLElement>) => {\r\n        state.loading = true;\r\n        ok.onClick?.(e);\r\n        try {\r\n            await onOk?.();\r\n            state.visible = false;\r\n        } finally {\r\n            state.loading = false;\r\n        }\r\n    };\r\n\r\n    const handleCancel = async (e: MouseEvent<HTMLElement>) => {\r\n        cancel.onClick?.(e);\r\n        await onClose?.();\r\n        state.visible = false;\r\n    };\r\n\r\n    const popconfirmContent = (\r\n        <div className=\"i-popconfirm\">\r\n            <Flex gap=\".5em\">\r\n                {icon}\r\n                <div className=\"i-popconfirm-content\">{content}</div>\r\n            </Flex>\r\n\r\n            <Flex gap={12} justify=\"flex-end\" className=\"i-popconfirm-footer\">\r\n                {cancelButtonProps !== null && (\r\n                    <Button {...cancel} onClick={handleCancel} />\r\n                )}\r\n                {extra}\r\n                {okButtonProps !== null && (\r\n                    <Button\r\n                        loading={state.loading}\r\n                        {...ok}\r\n                        onClick={handleOk}\r\n                    />\r\n                )}\r\n            </Flex>\r\n        </div>\r\n    );\r\n\r\n    return (\r\n        <Popup\r\n            content={popconfirmContent}\r\n            {...restProps}\r\n            trigger={trigger}\r\n            visible={state.visible}\r\n            align={align}\r\n            offset={offset}\r\n            position={position}\r\n            onVisibleChange={handleVisibleChange}\r\n        >\r\n            {children}\r\n        </Popup>\r\n    );\r\n};\r\n\r\nexport default Popconfirm;\r\n"],"names":["icon","_jsx","Icon","InfoOutlined","useReactive","_jsxs","Flex","Button","Popup"],"mappings":"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"}