@canlooks/can-ui 0.0.25 → 0.0.26

package/dist/esm/components/typography/typography.style.js

@@ -13,7 +13,6 @@ export const classes = defineClasses('typography', [
 export function useStyle({ color }) {
     const colorValue = useColor(color);
     return useCss(({ mode, colors, gray, borderRadius, easing }) => {
-        const lighter = Color(colorValue).lighten(.1).hex();
         return css `
             color: ${colorValue};
 
@@ -30,33 +29,33 @@ export function useStyle({ color }) {
                 margin-top: 1em;
                 margin-bottom: 0.5em;
             }
-            
+
             &[data-component=h1] {
                 font-size: ${38 / 14}em;
             }
-            
+
             &[data-component=h2] {
                 font-size: ${30 / 14}em;
             }
-            
+
             &[data-component=h3] {
                 font-size: ${24 / 14}em;
             }
-            
+
             &[data-component=h4] {
                 font-size: ${20 / 14}em;
             }
-            
+
             &[data-component=h5] {
                 font-size: ${17 / 14}em;
             }
-            
+
             &[data-component=h6] {
                 font-size: 1em;
             }
 
             &[data-component=mark] {
-                background-color: ${Color(colors.warning.main).lighten(.2).hex()};
+                background-color: ${Color(colors.warning.main).lighten(.5).hex()};
             }
 
             &[data-component=kbd] {
@@ -71,25 +70,27 @@ export function useStyle({ color }) {
             }
 
             &[data-component=code] {
-                background-color: ${gray(.08)};
-                border: 1px solid ${gray(.3)};
+                background-color: ${gray(.06)};
                 font-size: ${13 / 14}em;
+                font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
                 padding: 3px 6px;
                 border-radius: .15em;
-                margin: 0 3px;
+                margin: 0 4px;
+                outline: none;
             }
 
             &[data-component=a] {
                 color: ${colors.primary.main};
-                transition: color .2s ${easing.easeOut};
+                transition: color .25s ${easing.easeOut};
+                -webkit-tap-highlight-color: transparent;
 
                 &:hover {
-                    color: ${lighter};
+                    color: ${colors.primary.light};
                 }
 
                 &:active {
                     transition: color 0s;
-                    color: ${lighter};
+                    color: ${colors.primary.dark};
                 }
             }
 
@@ -135,7 +136,7 @@ export function useStyle({ color }) {
             .${classes.copied} {
                 align-items: center;
                 color: ${colors.success.main};
-                animation: ${copyCheckAnim} .2s ${easing.swing};
+                animation: ${copyCheckAnim} .3s ${easing.swing};
             }
         `;
     }, [colorValue]);

package/dist/esm/components/upload/dropArea.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { DIVProps } from '../../types';
-export interface DropAreaProps extends Omit<DIVProps, 'onDrop'> {
+import { DivProps } from '../../types';
+export interface DropAreaProps extends Omit<DivProps, 'onDrop'> {
     description?: ReactNode;
     onDrop?(files: FileList): void;
 }

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
 import { classes, style } from './dropArea.style';
-import { classnames } from '../../utils';
-import { InboxOutlined } from '@ant-design/icons';
+import { clsx } from '../../utils';
+import { Icon } from '../..';
+import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
 export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);
     useEffect(() => {
@@ -23,11 +24,11 @@ export const DropArea = memo(({ description = '将文件拖拽到这里', onDrop
         files.length && onDrop?.(files);
         setDraggingOver(false);
     };
-    return (_jsxs("div", { ...props, css: style, className: classnames(classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
+    return (_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-over": draggingOver, onDragEnter: e => {
             props.onDragEnter?.(e);
             setDraggingOver(true);
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [_jsx(InboxOutlined, { className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
 });

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

@@ -1,21 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
 import { classes } from './upload.style';
-import { CheckCircleFilled, CloseCircleFilled, CloseOutlined, PaperClipOutlined } from '@ant-design/icons';
 import { LoadingIndicator } from '../loadingIndicator';
 import { Button } from '../button';
 import { Progress } from '../progress';
 import { useTheme } from '../theme';
 import { useItemStatus } from './itemStatus';
+import { Icon } from '../..';
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons/faCircleCheck';
+import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
+import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
+import { faPaperclip } from '@fortawesome/free-solid-svg-icons/faPaperclip';
 export const FileItem = memo((props) => {
     const { status, progress } = useItemStatus(props);
     const { colors } = useTheme();
     const statusToIcon = {
-        'default': _jsx(PaperClipOutlined, {}),
+        'default': _jsx(Icon, { icon: faPaperclip }),
         uploading: _jsx(LoadingIndicator, {}),
-        success: _jsx(CheckCircleFilled, { style: { color: colors.success.main } }),
-        error: _jsx(CloseCircleFilled, { style: { color: colors.error.main } })
+        success: _jsx(Icon, { icon: faCircleCheck, style: { color: colors.success.main } }),
+        error: _jsx(Icon, { icon: faCircleXmark, style: { color: colors.error.main } })
     };
     return (_jsxs("div", { className: classes.file, "data-status": status, children: [_jsx("div", { className: classes.icon, children: statusToIcon[status] }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.name, children: props.file.name }), status !== 'default' &&
-                        _jsx(Progress, { className: classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), _jsx("div", { className: classes.control, children: _jsx(Button, { variant: "plain", color: "error", onClick: props.onRemove, children: _jsx(CloseOutlined, {}) }) })] }));
+                        _jsx(Progress, { className: classes.progress, barWidth: 2, showInfo: false, value: progress, status: status === 'uploading' ? 'processing' : status })] }), _jsx("div", { className: classes.control, children: _jsx(Button, { variant: "plain", color: "error", onClick: props.onRemove, children: _jsx(Icon, { icon: faXmark }) }) })] }));
 });

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

@@ -4,9 +4,11 @@ import { useItemStatus } from './itemStatus';
 import { classes } from './upload.style';
 import { Image } from '../image';
 import { Button } from '../button';
-import { DeleteOutlined, EyeOutlined } from '@ant-design/icons';
 import { Progress } from '../progress';
-import { classnames } from '../../utils';
+import { clsx } from '../../utils';
+import { Icon } from '../..';
+import { faTrashCan } from '@fortawesome/free-regular-svg-icons/faTrashCan';
+import { faEye } from '@fortawesome/free-regular-svg-icons/faEye';
 export const ImageItem = memo((props) => {
     const [previewOpen, setPreviewOpen] = useState(false);
     const { status, progress } = useItemStatus(props);
@@ -14,8 +16,8 @@ export const ImageItem = memo((props) => {
                 open: previewOpen,
                 onOpenChange: setPreviewOpen
             }, actions: [
-                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: _jsx(EyeOutlined, {}) }, "preview"),
-                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: _jsx(DeleteOutlined, {}) }, "delete")
+                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "text", onClick: () => setPreviewOpen(true), children: _jsx(Icon, { icon: faEye }) }, "preview"),
+                _jsx(Button, { size: "small", variant: "text", shape: "circular", color: "error", onClick: props.onRemove, children: _jsx(Icon, { icon: faTrashCan }) }, "delete")
             ], children: status !== 'default' &&
-                _jsx("div", { className: classnames(classes.progress), children: _jsx(Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
+                _jsx("div", { className: clsx(classes.progress), children: _jsx(Progress, { variant: "circular", showInfo: status !== 'uploading', value: progress, status: status === 'uploading' ? 'processing' : status }) }) }) }));
 });

package/dist/esm/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/esm/components/upload/upload.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useImperativeHandle, useRef } from 'react';
 import { classes, style } from './upload.style';
-import { classnames, cloneRef, getShortID, onDndDragEnd, useControlled, useDndSensors } from '../../utils';
+import { clsx, cloneRef, getShortID, onDndDragEnd, useControlled, useDndSensors } from '../../utils';
 import { Button } from '../button';
-import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import { FileItem } from './fileItem';
 import { TransitionGroup } from 'react-transition-group';
 import { Collapse, Grow } from '../transitionBase';
@@ -12,6 +11,9 @@ import { DndContext } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import { SortableItem } from '../sortableItem';
 import { DropArea } from './dropArea';
+import { Icon } from '../..';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 const markFileId = (files) => {
     if (files) {
         for (const file of files) {
@@ -19,7 +21,7 @@ const markFileId = (files) => {
         }
     }
 };
-export const Upload = 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 }) => {
+export const Upload = 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 = useRef(null);
     const itemRefs = useRef(new Map());
     useImperativeHandle(props.ref, () => {
@@ -90,19 +92,17 @@ export const Upload = memo(({ inputProps, inputRef, type = 'file', accept = type
         const newValue = onDndDragEnd(e, innerValue.current);
         newValue && setInnerValue(newValue);
     };
-    return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: classnames(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputRef), className: classnames(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
+    return (_jsxs("div", { ...props, ref: wrapperRef, css: style, className: clsx(classes.root, props.className), "data-file-type": type, "data-variant": variant, "data-sortable": sortable, children: [_jsx("input", { type: "file", accept: accept, multiple: max !== 1, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onChange: inputChangeHandler, "data-hidden": "true" }), _jsx(DndContext, { sensors: useDndSensors(), onDragEnd: dragEndHandler, children: _jsx(SortableContext, { items: innerValue.current, disabled: !sortable, children: type === 'file'
                         ? _jsxs(_Fragment, { children: [showButton &&
-                                    _jsx(Button, { variant: "outlined", prefix: _jsx(UploadOutlined, {}), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(FileItem, { ref: r => {
-                                                itemRefs.current.set(file.id, r);
-                                                return () => {
-                                                    itemRefs.current.delete(file.id);
-                                                };
+                                    _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faUpload }), ...buttonProps, onClick: buttonClick, children: buttonText }), _jsx(TransitionGroup, { className: classes.files, children: innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, children: _jsx(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)) })] })
-                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(PlusOutlined, {}) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(ImageItem, { ref: r => {
-                                            itemRefs.current.set(file.id, r);
-                                            return () => {
-                                                itemRefs.current.delete(file.id);
-                                            };
+                        : _jsxs(TransitionGroup, { className: classes.images, children: [_jsx(Grow, { children: _jsx("div", { className: classes.imageWrap, "data-clickable": "true", children: _jsx("div", { className: classes.image, onClick: () => innerInputRef.current.click(), children: _jsx(Icon, { icon: faPlus }) }) }) }), innerValue.current.map(file => _jsx(SortableItem, { component: Collapse, className: classes.sortable, id: file.id, orientation: "horizontal", children: _jsx(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))] }) }) })] }));
 });
 Upload.DropArea = DropArea;

package/dist/esm/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/esm/components/upload/upload.style.js

@@ -104,7 +104,7 @@ export const style = defineCss(({ spacing, mode, text, gray, borderRadius, color
 
                 &[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/esm/components/waterfall/waterfall.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Children, isValidElement, useLayoutEffect, useRef } from 'react';
 import { classes, useStyle } from './waterfall.style';
-import { classnames, cloneRef, toResponsiveValue, useResponsiveValue } from '../../utils';
+import { clsx, cloneRef, toResponsiveValue, useResponsiveValue } from '../../utils';
 import { TransportStyle } from '../transportStyle';
 export function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, columnGap, rowGap, ...props }) {
     columnCount = toResponsiveValue(columnCount);
@@ -30,13 +30,12 @@ export function Waterfall({ ref, columnCount = { xs: 4 }, gap = { xs: 0 }, colum
             resizeObserver.disconnect();
         };
     }, [props.children, columnCountNum]);
-    return (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: classnames(classes.root, props.className), children: Children.map(props.children, (child, i) => {
+    return (_jsx(TransportStyle, { ...props, ref: cloneRef(ref, container), css: useStyle({ columnCount, columnGap, rowGap }), className: clsx(classes.root, props.className), children: Children.map(props.children, (child, i) => {
             const key = isValidElement(child) ? child.key ?? i : i;
             return (_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: classes.item, children: child }, key));
         }) }));
 }

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

@@ -5,7 +5,7 @@ export const classes = defineClasses('waterfall', [
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {
     return useCss(theme => css `
-        ${responsiveVariables(theme, k => `
+        ${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/esm/extensions/documentViewer/documentViewer.js

@@ -4,11 +4,12 @@ import { SvgViewer } from './svgViewer';
 import mime from 'mime';
 import { Placeholder } from '../../components/placeholder';
 import { Button } from '../../components/button';
-import { DownloadOutlined } from '@ant-design/icons';
 import { iframeStyle } from './documentViewer.style';
 import { useDerivedState, useLoading } from '../../utils';
 import { PdfViewer } from './pdfViewer';
 import { ImagePreview } from '../../components/image';
+import { Icon } from '../..';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 export const DocumentViewer = memo(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
     const mimeType = useMemo(() => {
         if (!src) {
@@ -34,7 +35,7 @@ export const DocumentViewer = memo(({ src, filename, onError, type, extension, s
             a.click();
         }
     };
-    const empty = (_jsx(Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: _jsx(Button, { variant: "outlined", prefix: _jsx(DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
+    const empty = (_jsx(Placeholder, { description: "\u8BE5\u6587\u4EF6\u6682\u4E0D\u652F\u6301\u9884\u89C8", extra: _jsx(Button, { variant: "outlined", prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" }) }));
     if (!mimeType) {
         return empty;
     }

package/dist/esm/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/esm/extensions/documentViewer/svgViewer.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 import { memo, useMemo, useRef, useState } from 'react';
 import { classes, svgStyle } from './documentViewer.style';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
-import { classnames } from '../../utils';
-import { BranchesOutlined, DownloadOutlined, FullscreenOutlined, MoonFilled, RotateLeftOutlined, RotateRightOutlined, SunFilled, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { clsx } from '../../utils';
 import { Button } from '../../components/button';
 import { Tooltip } from '../../components/tooltip';
 import { Divider } from '../../components/divider';
@@ -11,6 +10,16 @@ import { Switch } from '../../components/switch';
 import { ThemeProvider, useTheme } from '../../components/theme';
 import { Loading } from '../../components/loading';
 import { useBlob, useDocumentTitle } from './documentViewer';
+import { Icon } from '../..';
+import { faDiagramProject } from '@fortawesome/free-solid-svg-icons/faDiagramProject';
+import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
+import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
+import { faMoon } from '@fortawesome/free-solid-svg-icons/faMoon';
+import { faSun } from '@fortawesome/free-solid-svg-icons/faSun';
+import { faRotateLeft } from '@fortawesome/free-solid-svg-icons/faRotateLeft';
+import { faRotateRight } from '@fortawesome/free-solid-svg-icons/faRotateRight';
+import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
+import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
 const commonButtonProps = {
     variant: 'text',
     shape: 'circular'
@@ -66,7 +75,7 @@ src, filename, onError, setDocumentTitle, ...props }) {
     const objectOnLoad = () => {
         transformWrapperRef.current.centerView();
     };
-    return (_jsxs(Loading, { ...props, css: svgStyle, className: classnames(classes.svgViewer, props.className), loading: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(BranchesOutlined, { className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) }), themeSwitchable &&
-                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Switch, { checkedLabel: _jsx(SunFilled, {}), unCheckedLabel: _jsx(MoonFilled, {}), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
-                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(DownloadOutlined, {}), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: _jsx(TransformComponent, { wrapperClass: classes.svgContainer, contentClass: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
+    return (_jsxs(Loading, { ...props, css: svgStyle, className: clsx(classes.svgViewer, props.className), open: loading, children: [_jsxs("div", { className: classes.svgToolbar, children: [_jsxs("div", { className: classes.svgTitle, children: [_jsx(Icon, { icon: faDiagramProject, className: classes.svgIcon }), _jsx("div", { children: filename })] }), _jsxs("div", { className: classes.svgToolbarRight, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonButtonProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faRotateRight }) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonButtonProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(Icon, { icon: faExpand }) }) }), themeSwitchable &&
+                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Switch, { checkedLabel: _jsx(Icon, { icon: faSun }), unCheckedLabel: _jsx(Icon, { icon: faMoon }), checked: mode === 'light', onChange: themeChangeHandler })] }), showDownload &&
+                                _jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.svgDivider, orientation: "vertical" }), _jsx(Button, { prefix: _jsx(Icon, { icon: faDownload }), onClick: downloadHandler, children: "\u4E0B\u8F7D" })] })] })] }), _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: transformWrapperRef, minScale: .2, children: _jsx(TransformComponent, { wrapperClass: classes.svgContainer, contentClass: classes.svgContent, children: _jsx("object", { className: classes.object, data: data, style: { rotate: `${rotate}deg` }, onLoad: objectOnLoad, onError: onError }) }) })] }));
 }

package/dist/esm/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/esm/extensions/textFormatter/textFormatter.js

@@ -1,33 +1,7 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+/**
+ * TODO 这个组件尚未完成
+ */
 import { memo } from 'react';
-import { classes, style } from './textFormatter.style';
-import { classnames } from '../../utils';
-import MarkdownIt from 'markdown-it';
-import mdKatex from '@traptitech/markdown-it-katex';
-import mila from 'markdown-it-link-attributes';
-import hljs from 'highlight.js';
-const md = new MarkdownIt({
-    linkify: true,
-    breaks: true,
-    highlight(str, lang) {
-        let content = str;
-        if (lang && hljs.getLanguage(lang)) {
-            try {
-                content = hljs.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(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' });
-md.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
-export const TextFormatter = memo(({ text, ...props }) => {
-    return (_jsx("div", { ...props, css: style, className: classnames(classes.root, props.className), dangerouslySetInnerHTML: typeof text === 'string' ? { __html: md.render(text) } : void 0 }));
+export const TextFormatter = memo((props) => {
+    return props.children;
 });

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

@@ -2,24 +2,4 @@ import { css } from '@emotion/react';
 import { defineClasses, defineCss } from '../../utils';
 export const classes = defineClasses('text-formatter');
 export const style = defineCss(({ spacing }) => 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/esm/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/esm/index.js

@@ -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/esm/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/esm/utils/curd.js

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