@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/cjs/components/upload/dropArea.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const dropArea_style_1 = require("./dropArea.style");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
+const __1 = require("../..");
+const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
 exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -26,11 +27,11 @@ exports.DropArea = (0, react_1.memo)(({ description = '将文件拖拽到这里'
         files.length && onDrop?.(files);
         setDraggingOver(false);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dropArea_style_1.style, className: (0, utils_1.classnames)(dropArea_style_1.classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, css: dropArea_style_1.style, className: (0, utils_1.clsx)(dropArea_style_1.classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
             props.onDragEnter?.(e);
             setDraggingOver(true);
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(icons_1.InboxOutlined, { className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
 });

package/dist/cjs/components/upload/fileItem.js

@@ -4,21 +4,25 @@ exports.FileItem = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const upload_style_1 = require("./upload.style");
-const icons_1 = require("@ant-design/icons");
 const loadingIndicator_1 = require("../loadingIndicator");
 const button_1 = require("../button");
 const progress_1 = require("../progress");
 const theme_1 = require("../theme");
 const itemStatus_1 = require("./itemStatus");
+const __1 = require("../..");
+const faCircleCheck_1 = require("@fortawesome/free-solid-svg-icons/faCircleCheck");
+const faCircleXmark_1 = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
+const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
+const faPaperclip_1 = require("@fortawesome/free-solid-svg-icons/faPaperclip");
 exports.FileItem = (0, react_1.memo)((props) => {
     const { status, progress } = (0, itemStatus_1.useItemStatus)(props);
     const { colors } = (0, theme_1.useTheme)();
     const statusToIcon = {
-        'default': (0, jsx_runtime_1.jsx)(icons_1.PaperClipOutlined, {}),
+        'default': (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPaperclip_1.faPaperclip }),
         uploading: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}),
-        success: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { style: { color: colors.success.main } }),
-        error: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { style: { color: colors.error.main } })
+        success: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleCheck_1.faCircleCheck, style: { color: colors.success.main } }),
+        error: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faCircleXmark_1.faCircleXmark, style: { color: colors.error.main } })
     };
     return ((0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.file, "data-status": status, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.icon, children: statusToIcon[status] }), (0, jsx_runtime_1.jsxs)("div", { className: upload_style_1.classes.info, children: [(0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.name, children: props.file.name }), status !== 'default' &&
-                        (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: upload_style_1.classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.control, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) }) })] }));
+                        (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: upload_style_1.classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.control, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "plain", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) }) })] }));
 });

package/dist/cjs/components/upload/imageItem.js

@@ -7,9 +7,11 @@ const itemStatus_1 = require("./itemStatus");
 const upload_style_1 = require("./upload.style");
 const image_1 = require("../image");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const progress_1 = require("../progress");
 const utils_1 = require("../../utils");
+const __1 = require("../..");
+const faTrashCan_1 = require("@fortawesome/free-regular-svg-icons/faTrashCan");
+const faEye_1 = require("@fortawesome/free-regular-svg-icons/faEye");
 exports.ImageItem = (0, react_1.memo)((props) => {
     const [previewOpen, setPreviewOpen] = (0, react_1.useState)(false);
     const { status, progress } = (0, itemStatus_1.useItemStatus)(props);
@@ -17,8 +19,8 @@ exports.ImageItem = (0, react_1.memo)((props) => {
                 open: previewOpen,
                 onOpenChange: setPreviewOpen
             }, actions: [
-                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: (0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}) }, "preview"),
-                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(icons_1.DeleteOutlined, {}) }, "delete")
+                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faEye_1.faEye }) }, "preview"),
+                (0, jsx_runtime_1.jsx)(button_1.Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faTrashCan_1.faTrashCan }) }, "delete")
             ], children: status !== 'default' &&
-                (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.classnames)(upload_style_1.classes.progress), children: (0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
+                (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.clsx)(upload_style_1.classes.progress), children: (0, jsx_runtime_1.jsx)(progress_1.Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
 });

package/dist/cjs/components/upload/upload.d.ts

@@ -1,5 +1,5 @@
-import React, { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
-import { DIVProps } from '../../types';
+import { Dispatch, ReactElement, ReactNode, SetStateAction, JSX } from 'react';
+import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
 export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
@@ -14,9 +14,8 @@ export interface UploadSharedProps<R, A extends any[]> {
     type?: 'file' | 'image';
     onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
-export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DIVProps, 'defaultValue' | 'onChange'> {
-    inputProps?: React.JSX.IntrinsicElements['input'];
-    inputRef?: Ref<HTMLInputElement>;
+export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+    inputProps?: JSX.IntrinsicElements['input'];
     accept?: string;
     max?: number;
     /**

package/dist/cjs/components/upload/upload.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const upload_style_1 = require("./upload.style");
 const utils_1 = require("../../utils");
 const button_1 = require("../button");
-const icons_1 = require("@ant-design/icons");
 const fileItem_1 = require("./fileItem");
 const react_transition_group_1 = require("react-transition-group");
 const transitionBase_1 = require("../transitionBase");
@@ -15,6 +14,9 @@ const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const sortableItem_1 = require("../sortableItem");
 const dropArea_1 = require("./dropArea");
+const __1 = require("../..");
+const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
+const faUpload_1 = require("@fortawesome/free-solid-svg-icons/faUpload");
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
@@ -22,7 +24,7 @@ const markFileId = (files) => {
         }
     }
 };
-exports.Upload = (0, react_1.memo)(({ inputProps, inputRef, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
+exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type === 'image' ? 'image/*' : void 0, max = Infinity, showButton = true, buttonProps, buttonText = '选择文件', variant = 'square', sortable, droppable, defaultValue = [], value, onChange, onUpload, ...props }) => {
     const wrapperRef = (0, react_1.useRef)(null);
     const itemRefs = (0, react_1.useRef)(new Map());
     (0, react_1.useImperativeHandle)(props.ref, () => {
@@ -93,19 +95,17 @@ exports.Upload = (0, react_1.memo)(({ inputProps, inputRef, type = 'file', accep
         const newValue = (0, utils_1.onDndDragEnd)(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.classnames)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputRef), className: (0, utils_1.classnames)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: wrapperRef, css: upload_style_1.style, className: (0, utils_1.clsx)(upload_style_1.classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: (0, utils_1.cloneRef)(innerInputRef, inputProps?.ref), className: (0, utils_1.clsx)(upload_style_1.classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showButton &&
-                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
-                                                itemRefs.current.set(file.id, r);
-                                                return () => {
-                                                    itemRefs.current.delete(file.id);
-                                                };
+                                    (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faUpload_1.faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.files, children: innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, children: (0, jsx_runtime_1.jsx)(fileItem_1.FileItem, { ref: r => {
+                                                r
+                                                    ? itemRefs.current.set(file.id, r)
+                                                    : itemRefs.current.delete(file.id);
                                             }, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }) }, file.id)) })] })
-                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(icons_1.PlusOutlined, {}) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
-                                            itemRefs.current.set(file.id, r);
-                                            return () => {
-                                                itemRefs.current.delete(file.id);
-                                            };
+                        : (0, jsx_runtime_1.jsxs)(react_transition_group_1.TransitionGroup, { className: upload_style_1.classes.images, children: [(0, jsx_runtime_1.jsx)(transitionBase_1.Grow, { children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.imageWrap, "data-clickable": "true", children: (0, jsx_runtime_1.jsx)("div", { className: upload_style_1.classes.image, onClick: () => innerInputRef.current.click(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus }) }) }) }), innerValue.current.map(file => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { component: transitionBase_1.Collapse, className: upload_style_1.classes.sortable, id: file.id, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(imageItem_1.ImageItem, { ref: r => {
+                                            r
+                                                ? itemRefs.current.set(file.id, r)
+                                                : itemRefs.current.delete(file.id);
                                         }, type: type, file: file, onRemove: () => removeHandler(file.id), onUpload: onUpload }, file.id) }, file.id))] }) }) })] }));
 });
 exports.Upload.DropArea = dropArea_1.DropArea;

package/dist/cjs/components/upload/upload.style.d.ts

@@ -3,12 +3,12 @@ export declare const classes: {
     input: string;
     progress: string;
     image: string;
-    name: string;
     icon: string;
+    name: string;
     file: string;
-    control: string;
     files: string;
     images: string;
+    control: string;
     imageWrap: string;
     sortable: string;
 } & {

package/dist/cjs/components/upload/upload.style.js

@@ -108,7 +108,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadiu
 
                 &[data-clickable=true] {
                     cursor: pointer;
-                    transition: border-color .2s ${easing.easeOut}, color .2s ${easing.easeOut};
+                    transition: border-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
 
                     &:hover {
                         border-color: ${colors.primary.main};

package/dist/cjs/components/waterfall/waterfall.js

@@ -33,13 +33,12 @@ function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, r
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(ref, container), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => {
+    return ((0, jsx_runtime_1.jsx)(transportStyle_1.TransportStyle, { ...props, ref: (0, utils_1.cloneRef)(ref, container), css: (0, waterfall_style_1.useStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.clsx)(waterfall_style_1.classes.root, props.className), children: react_1.Children.map(props.children, (child, i) => {
             const key = (0, react_1.isValidElement)(child) ? child.key ?? i : i;
             return ((0, jsx_runtime_1.jsx)("div", { ref: r => {
-                    items.current.set(key, r);
-                    return () => {
-                        items.current.delete(key);
-                    };
+                    r
+                        ? items.current.set(key, r)
+                        : items.current.delete(key);
                 }, className: waterfall_style_1.classes.item, children: child }, key));
         }) }));
 }

package/dist/cjs/components/waterfall/waterfall.style.js

@@ -9,7 +9,7 @@ exports.classes = (0, utils_1.defineClasses)('waterfall', [
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {
     return (0, utils_1.useCss)(theme => (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(theme, k => `
+        ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
             ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -10,11 +10,12 @@ const svgViewer_1 = require("./svgViewer");
 const mime_1 = tslib_1.__importDefault(require("mime"));
 const placeholder_1 = require("../../components/placeholder");
 const button_1 = require("../../components/button");
-const icons_1 = require("@ant-design/icons");
 const documentViewer_style_1 = require("./documentViewer.style");
 const utils_1 = require("../../utils");
 const pdfViewer_1 = require("./pdfViewer");
 const image_1 = require("../../components/image");
+const __1 = require("../..");
+const faDownload_1 = require("@fortawesome/free-solid-svg-icons/faDownload");
 exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = (0, react_1.useMemo)(() => {
         if (!src) {
@@ -40,7 +41,7 @@ exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, exte
             a.click();
         }
     };
-    const empty = ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(icons_1.DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
+    const empty = ((0, jsx_runtime_1.jsx)(placeholder_1.Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outlined", prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faDownload_1.faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
     if (!mimeType) {
         return empty;
     }

package/dist/cjs/extensions/documentViewer/pdfViewer.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { JSX } from 'react';
 import { DocumentViewerBaseProps } from './documentViewer';
-export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<React.JSX.IntrinsicElements['iframe'], 'onError'> {
+export interface PdfViewerProps extends DocumentViewerBaseProps, Omit<JSX.IntrinsicElements['iframe'], 'onError'> {
 }
-export declare const PdfViewer: React.MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const PdfViewer: import("react").MemoExoticComponent<({ src, filename, onError, setDocumentTitle, ...props }: PdfViewerProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/extensions/documentViewer/svgViewer.js

@@ -6,7 +6,6 @@ const react_1 = require("react");
 const documentViewer_style_1 = require("./documentViewer.style");
 const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
 const utils_1 = require("../../utils");
-const icons_1 = require("@ant-design/icons");
 const button_1 = require("../../components/button");
 const tooltip_1 = require("../../components/tooltip");
 const divider_1 = require("../../components/divider");
@@ -14,6 +13,16 @@ const switch_1 = require("../../components/switch");
 const theme_1 = require("../../components/theme");
 const loading_1 = require("../../components/loading");
 const documentViewer_1 = require("./documentViewer");
+const __1 = require("../..");
+const faDiagramProject_1 = require("@fortawesome/free-solid-svg-icons/faDiagramProject");
+const faDownload_1 = require("@fortawesome/free-solid-svg-icons/faDownload");
+const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
+const faMoon_1 = require("@fortawesome/free-solid-svg-icons/faMoon");
+const faSun_1 = require("@fortawesome/free-solid-svg-icons/faSun");
+const faRotateLeft_1 = require("@fortawesome/free-solid-svg-icons/faRotateLeft");
+const faRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faRotateRight");
+const faMagnifyingGlassMinus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus");
+const faMagnifyingGlassPlus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus");
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
@@ -69,7 +78,7 @@ src, filename, onError, setDocumentTitle, ...props }) {
     const objectOnLoad = () => {
         transformWrapperRef.current.centerView();
     };
-    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: documentViewer_style_1.svgStyle, className: (0, utils_1.classnames)(documentViewer_style_1.classes.svgViewer, props.className), loading: loading, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgTitle, children: [(0, jsx_runtime_1.jsx)(icons_1.BranchesOutlined, { className: documentViewer_style_1.classes.svgIcon }), (0, jsx_runtime_1.jsx)("div", { children: filename })] }), (0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbarRight, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) }), themeSwitchable &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checkedLabel: (0, jsx_runtime_1.jsx)(icons_1.SunFilled, {}), unCheckedLabel: (0, jsx_runtime_1.jsx)(icons_1.MoonFilled, {}), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(icons_1.DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: documentViewer_style_1.classes.svgContainer, contentClass: documentViewer_style_1.classes.svgContent, children: (0, jsx_runtime_1.jsx)("object", { className: documentViewer_style_1.classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(loading_1.Loading, { ...props, css: documentViewer_style_1.svgStyle, className: (0, utils_1.clsx)(documentViewer_style_1.classes.svgViewer, props.className), open: loading, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbar, children: [(0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgTitle, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faDiagramProject_1.faDiagramProject, className: documentViewer_style_1.classes.svgIcon }), (0, jsx_runtime_1.jsx)("div", { children: filename })] }), (0, jsx_runtime_1.jsxs)("div", { className: documentViewer_style_1.classes.svgToolbarRight, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateLeft_1.faRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faRotateRight_1.faRotateRight }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassMinus_1.faMagnifyingGlassMinus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMagnifyingGlassPlus_1.faMagnifyingGlassPlus }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faExpand_1.faExpand }) }) }), themeSwitchable &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checkedLabel: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faSun_1.faSun }), unCheckedLabel: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faMoon_1.faMoon }), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: documentViewer_style_1.classes.svgDivider, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(button_1.Button, { prefix: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faDownload_1.faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: documentViewer_style_1.classes.svgContainer, contentClass: documentViewer_style_1.classes.svgContent, children: (0, jsx_runtime_1.jsx)("object", { className: documentViewer_style_1.classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
 }

package/dist/cjs/extensions/textFormatter/textFormatter.d.ts

@@ -1,5 +1,4 @@
-import { DIVProps } from '../../types';
-export interface TextFormatterProps extends Omit<DIVProps, 'children'> {
-    text?: string;
-}
-export declare const TextFormatter: import("react").MemoExoticComponent<({ text, ...props }: TextFormatterProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+/**
+ * TODO 这个组件尚未完成
+ */
+export declare const TextFormatter: import("react").MemoExoticComponent<(props: any) => any>;

package/dist/cjs/extensions/textFormatter/textFormatter.js

@@ -1,37 +1,10 @@
 "use strict";
+/**
+ * TODO 这个组件尚未完成
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextFormatter = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const textFormatter_style_1 = require("./textFormatter.style");
-const utils_1 = require("../../utils");
-const markdown_it_1 = tslib_1.__importDefault(require("markdown-it"));
-const markdown_it_katex_1 = tslib_1.__importDefault(require("@traptitech/markdown-it-katex"));
-const markdown_it_link_attributes_1 = tslib_1.__importDefault(require("markdown-it-link-attributes"));
-const highlight_js_1 = tslib_1.__importDefault(require("highlight.js"));
-const md = new markdown_it_1.default({
-    linkify: true,
-    breaks: true,
-    highlight(str, lang) {
-        let content = str;
-        if (lang && highlight_js_1.default.getLanguage(lang)) {
-            try {
-                content = highlight_js_1.default.highlight(str, { language: lang, ignoreIllegals: true }).value;
-            }
-            catch (e) {
-                console.error(e);
-                return str;
-            }
-        }
-        else {
-            content = md.utils.escapeHtml(str);
-        }
-        return `<pre>${content}</pre>`;
-    }
-});
-md.use(markdown_it_katex_1.default, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
-md.use(markdown_it_link_attributes_1.default, { attrs: { target: '_blank', rel: 'noopener' } });
-exports.TextFormatter = (0, react_1.memo)(({ text, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { ...props, css: textFormatter_style_1.style, className: (0, utils_1.classnames)(textFormatter_style_1.classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
+exports.TextFormatter = (0, react_1.memo)((props) => {
+    return props.children;
 });

package/dist/cjs/extensions/textFormatter/textFormatter.style.js

@@ -5,24 +5,4 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineClasses)('text-formatter');
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    line-height: 1.5;
-        
-    ol {
-        counter-reset: li;
-        
-        li {
-            list-style: none;
-            position: relative;
-            padding-left: ${spacing[8]}px;
-            
-            &:before {
-                font-weight: bold;
-                font-family: Consolas, sans-serif;
-                content: counter(li)".";
-                counter-increment: li;
-                position: absolute;
-                left: 0;
-            }
-        }
-    }
 `);

package/dist/cjs/index.d.ts

@@ -1,7 +1,9 @@
+export * from './utils';
+export { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 export * from './components/accordion';
 export * from './components/actionSheet';
 export * from './components/alert';
-export * from './components/anchor';
+export * from './components/anchorList';
 export * from './components/app';
 export * from './components/autocomplete';
 export * from './components/avatar';
@@ -56,6 +58,7 @@ export * from './components/progress';
 export * from './components/radio';
 export * from './components/rating';
 export * from './components/resizable';
+export * from './components/scrollbar';
 export * from './components/segmented';
 export * from './components/select';
 export * from './components/selectedList';
@@ -85,4 +88,3 @@ export * from './components/treeSelect';
 export * from './components/typography';
 export * from './components/upload';
 export * from './components/waterfall';
-export * from './utils';

package/dist/cjs/index.js

@@ -1,10 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./utils"), exports);
+var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_fontawesome_1.FontAwesomeIcon; } });
 tslib_1.__exportStar(require("./components/accordion"), exports);
 tslib_1.__exportStar(require("./components/actionSheet"), exports);
 tslib_1.__exportStar(require("./components/alert"), exports);
-tslib_1.__exportStar(require("./components/anchor"), exports);
+tslib_1.__exportStar(require("./components/anchorList"), exports);
 tslib_1.__exportStar(require("./components/app"), exports);
 tslib_1.__exportStar(require("./components/autocomplete"), exports);
 tslib_1.__exportStar(require("./components/avatar"), exports);
@@ -59,6 +63,7 @@ tslib_1.__exportStar(require("./components/progress"), exports);
 tslib_1.__exportStar(require("./components/radio"), exports);
 tslib_1.__exportStar(require("./components/rating"), exports);
 tslib_1.__exportStar(require("./components/resizable"), exports);
+tslib_1.__exportStar(require("./components/scrollbar"), exports);
 tslib_1.__exportStar(require("./components/segmented"), exports);
 tslib_1.__exportStar(require("./components/select"), exports);
 tslib_1.__exportStar(require("./components/selectedList"), exports);
@@ -88,4 +93,3 @@ tslib_1.__exportStar(require("./components/treeSelect"), exports);
 tslib_1.__exportStar(require("./components/typography"), exports);
 tslib_1.__exportStar(require("./components/upload"), exports);
 tslib_1.__exportStar(require("./components/waterfall"), exports);
-tslib_1.__exportStar(require("./utils"), exports);

package/dist/cjs/types.d.ts

@@ -1,8 +1,17 @@
-import React, { ComponentType } from 'react';
+import { ComponentPropsWithRef, ElementType, JSX, ReactElement } from 'react';
+/**
+ * ----------------------------------------------------------------------------------
+ * Helpers
+ */
 export type Id = string | number;
 export type Obj<T = any> = {
     [p: Id]: T;
 };
+export type ToRequired<T, K extends keyof T> = Required<Pick<T, K>> & Partial<Omit<T, K>>;
+/**
+ * ----------------------------------------------------------------------------------
+ * Enums
+ */
 export type ThemeEasingName = 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'bounce' | 'swing';
 export type Status = 'success' | 'error' | 'warning' | 'info';
 export type ColorPresets = 'primary' | 'secondary' | Status;
@@ -13,15 +22,37 @@ export type CornerPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRig
 export type BlockPlacement = CornerPlacement | 'top' | 'bottom';
 export type Placement = BlockPlacement | 'left' | 'right';
 export type DefineElement<T = Element | null | undefined> = T | (() => T);
+/**
+ * ----------------------------------------------------------------------------------
+ * Responsive
+ */
 export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
 export type ResponsiveValue<T = number> = {
     [P in Breakpoints]: T;
 };
 export type ResponsiveProp<T = number> = T | ResponsiveValue<T>;
-export type DIVProps = React.JSX.IntrinsicElements['div'];
-export type OverridableProps<T> = {
-    component?: T;
-} & (T extends ComponentType<infer P> ? P : T extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[T] : {});
+/**
+ * ----------------------------------------------------------------------------------
+ * Override props
+ */
+export type DivProps = JSX.IntrinsicElements['div'];
+export type MergeProps<P, OverrideProps> = P & Omit<OverrideProps, keyof P>;
+export type OverridableProps<P, C extends ElementType> = {
+    component?: C;
+} & MergeProps<P, ComponentPropsWithRef<C>>;
+export type OverridableComponent<P, DefaultElement extends ElementType = 'div'> = <C extends ElementType = DefaultElement>(props: OverridableProps<P, C>) => ReactElement;
+export type SlotsAndProps<Default extends Record<string, any>> = {
+    slots?: {
+        [P in keyof Default]?: ElementType;
+    };
+    slotProps?: {
+        [P in keyof Default]?: Default[P] & Obj;
+    };
+};
+/**
+ * ----------------------------------------------------------------------------------
+ * Common select props
+ */
 export type SelectableSingleProps<T> = {
     multiple?: false;
     defaultValue?: T;

package/dist/cjs/utils/curd.js

@@ -23,7 +23,7 @@ function columnsToFormItem(columns, row) {
 }
 function columnsTransfer(columns, type = 'filter', row) {
     return columns
-        ?.flatMap(col => {
+        ?.flatMap((col, i) => {
         if (typeof col === 'symbol') {
             return [];
         }
@@ -31,7 +31,7 @@ function columnsTransfer(columns, type = 'filter', row) {
         if ((0, utils_1.isUnset)(item)) {
             return [];
         }
-        const key = (0, dataGrid_1.setDefaultColumnKey)(col);
+        const key = (0, dataGrid_1.setDefaultColumnKey)(col, i);
         if ((0, react_1.isValidElement)(item)) {
             return item.key ? item : (0, react_1.cloneElement)(item, { key });
         }

package/dist/cjs/utils/dataGrid.d.ts

@@ -3,8 +3,9 @@ import { ColumnType, DataGridProps, RowType } from '../components/dataGrid';
 /**
  * 为列添加key
  * @param col
+ * @param index
  */
-export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>): string | number | undefined;
+export declare function setDefaultColumnKey<R extends Obj>(col: Pick<ColumnType<R>, 'key' | 'field'>, index: number): string | number;
 /**
  * 索引列
  * @param columns

package/dist/cjs/utils/dataGrid.js

@@ -11,9 +11,10 @@ const utils_1 = require("./utils");
 /**
  * 为列添加key
  * @param col
+ * @param index
  */
-function setDefaultColumnKey(col) {
-    return col._key ??= col.key ?? (col.field ? (0, form_1.stringifyField)(col.field) : void 0);
+function setDefaultColumnKey(col, index) {
+    return col._key ??= col.key ?? (col.field ? (0, form_1.stringifyField)(col.field) : index);
 }
 /**
  * 索引列
@@ -22,9 +23,9 @@ function setDefaultColumnKey(col) {
 function useColumnMap(columns) {
     return (0, react_1.useMemo)(() => {
         const map = new Map();
-        columns?.forEach(col => {
+        columns?.forEach((col, i) => {
             if (typeof col !== 'symbol') {
-                const _key = setDefaultColumnKey(col);
+                const _key = setDefaultColumnKey(col, i);
                 !(0, utils_1.isUnset)(_key) && map.set(_key, col);
             }
         });

package/dist/cjs/utils/dnd.d.ts

@@ -12,16 +12,16 @@ export declare function useDndSensors(): import("@dnd-kit/core").SensorDescripto
  * @param primaryKey 索引用的主键
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
-export type DraggableOptions<T extends Element = Element> = {
+export type DraggableOptions<T extends Element = Element, D = any> = {
+    disabled?: boolean;
     /** 按下后经过一段时间才触发拖拽事件，单位ms */
     delay?: number;
     /** 拖拽一段距离后才触发拖拽事件，单位px */
     distance?: number;
-    disabled?: boolean;
-    onDragStart?(e: React.PointerEvent<T>): void;
-    onDrag?(info: DragInfo, e: PointerEvent): void;
-    onDragEnd?(info: DragEndInfo): void;
-    onDragCancel?(info: DragEndInfo): void;
+    onDragStart?(e: React.PointerEvent<T>): D;
+    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
+    onDragEnd?(info: DragEndInfo<D>): void;
+    onDragCancel?(info: DragEndInfo<D>): void;
     /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用 */
     disableNativeTouchMove?: boolean;
     /** 托管原有的onPointerDown、onTouchStart、onClick事件 */
@@ -31,7 +31,7 @@ export type DraggableOptions<T extends Element = Element> = {
     /** 若拖拽节点受zoom样式的影响，可传入zoom值修正 */
     zoom?: number;
 };
-export type DragInfo = {
+export type DragInfo<T> = {
     /** 开始位置 */
     startX: number;
     startY: number;
@@ -41,8 +41,10 @@ export type DragInfo = {
     /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
     deltaX: number;
     deltaY: number;
+    /** `onDragStart`的返回值 */
+    startData: T | undefined;
 };
-export interface DragEndInfo extends DragInfo {
+export interface DragEndInfo<T> extends DragInfo<T> {
     /** 从按下到抬起经过的时长（ms） */
     duration: number;
     /** 拖拽速度（px/ms） */
@@ -50,4 +52,4 @@ export interface DragEndInfo extends DragInfo {
     speedY: number;
 }
 export type HandleProps<T extends Element> = Required<Pick<HTMLAttributes<T>, 'onPointerDown' | 'onTouchStart' | 'onClick' | 'onDragStart'>>;
-export declare function useDraggableHandle<T extends Element>(options?: DraggableOptions<T>): HandleProps<T>;
+export declare function useDraggableHandle<T extends Element, D = any>(options?: DraggableOptions<T, D>): HandleProps<T>;