@canlooks/can-ui 0.0.41 → 0.0.43

package/documentation/dist/components/slidableActions.md

@@ -0,0 +1,53 @@
+# SlidableActions 滑动操作
+
+## 示例
+
+```tsx
+import {SlidableActions} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <SlidableActions
+            style={{width: 400}}
+            leftActions={[
+                {
+                    label: '操作1',
+                    color: 'warning'
+                },
+                {
+                    label: '操作2',
+                    color: 'info'
+                }
+            ]}
+            rightActions={{
+                label: '删除',
+                color: 'error'
+            }}
+        >
+            <MenuItem label="左右滑动显示更多操作"/>
+        </SlidableActions>
+    )
+}
+```
+
+## Props
+
+| 属性                     | 类型                                        | 默认值        | 说明              |
+|------------------------|-------------------------------------------|------------|-----------------|
+| leftActions            | [ActionType](#ActionType) \| ActionType[] | -          |                 |
+| rightActions           | ActionType \| ActionType[]                | -          |                 |
+| autoReturn             | boolean                                   | true       | 点击action后是否自动归位 |
+| bounceElementTranslate | number                                    | 12         | 元素弹性移动距离        |
+| bounceDragDistance     | number                                    | 240        | 手指弹性拖拽距离        |
+| effectiveSpeed         | number                                    | 450 (px/s) | 滑动生效的速度         |
+| disabled               | boolean                                   | false      |                 |
+
+## ActionType
+
+| 属性          | 类型                                      | 默认值       | 说明                  |
+|-------------|-----------------------------------------|-----------|---------------------|
+| color       | string                                  | 'default' |                     |
+| label       | ReactNode                               | -         |                     |
+| icon        | ReactNode                               | -         |                     |
+| autoReturn  | boolean                                 | true      | 点击当前action后是否自动归位   |
+| buttonProps | [ButtonProps](/components/button#Props) | -         | 传递至`<Button/>`组件的属性 |

package/documentation/dist/guide/globalMethods.md

@@ -47,15 +47,15 @@ export default function Index() {
 | minWidth          | string \| number                     |                                      |                                                                |
 | maxWidth          | string \| number                     | 100%                                 |                                                                |
 | showClose         | boolean                              |                                      | 是否显示关闭按钮                                                       |
-| closeProps        | [ButtonProps](/components/button)    |                                      |                                                                |
+| closeProps        | [ButtonProps](/components/button#Props)    |                                      |                                                                |
 | showConfirm       | boolean                              | true                                 | 是否显示确定按钮                                                       |
 | confirmText       | ReactNode                            | '确定'                                 |                                                                |
-| confirmProps      | [ButtonProps](/components/button)    |                                      |                                                                |
+| confirmProps      | [ButtonProps](/components/button#Props)    |                                      |                                                                |
 | onConfirm         | (...args) => void                    |                                      |                                                                |
 | confirmLoading    | boolean                              |                                      | 确定按钮的加载状态                                                      |
 | showCancel        | boolean                              | true                                 | 取消按钮                                                           |
 | cancelText        | ReactNode                            | '取消'                                 |                                                                |
-| cancelProps       | [ButtonProps](/components/button)    |                                      |                                                                |
+| cancelProps       | [ButtonProps](/components/button#Props)    |                                      |                                                                |
 | onCancel          | (...args) => void                    |                                      |                                                                |
 | draggable         | boolean                              |                                      | 对话框是否可拖拽                                                       |
 | maskClosable      | boolean                              | true                                 | 是否可以点击遮罩层关闭                                                    |
@@ -188,7 +188,7 @@ export default function Index() {
 | 属性                | 类型                                   | 默认值                                   | 说明                                                             |
 |-------------------|--------------------------------------|---------------------------------------|----------------------------------------------------------------|
 | title             | ReactNode                            |                                       |                                                                |
-| actions           | ReactNode                            | [MenuItemProps](/components/menuItem) |                                                                |
+| actions           | ReactNode                            | [MenuItemProps](/components/menuItem#MenuItemProps) |                                                                |
 | placement         | 'top' \| 'bottom'                    | 'bottom'                              | 菜单弹出的位置                                                        |
 | maskClosable      | boolean                              | true                                  | 是否可以点击遮罩层关闭                                                    |
 | escapeClosable    | boolean                              | false                                 | 是否可以点击`ESC`关闭                                                  |
@@ -196,10 +196,10 @@ export default function Index() {
 | onConfirm         | (e: MouseEvent) => void              |                                       | 点击确定                                                           |
 | showConfirm       | boolean                              | true                                  | 是否显示确定选项，`actionSheet.confirm`方法有效                             |
 | confirmText       | ReactNode                            | '确定'                                  |                                                                |
-| confirmProps      | [ButtonProps](/components/button)    |                                       |                                                                |
+| confirmProps      | [ButtonProps](/components/button#Props)    |                                       |                                                                |
 | showCancel        | boolean                              | true                                  | 是否显示取消选项，`actionSheet.confirm`方法有效                             |
 | cancelText        | ReactNode                            | '取消'                                  |                                                                |
-| cancelProps       | [ButtonProps](/components/button)    |                                       |                                                                |
+| cancelProps       | [ButtonProps](/components/button#Props)    |                                       |                                                                |
 | onCancel          | (e: MouseEvent) => void              |                                       | 点击取消                                                           |
 | defaultOpen       | boolean                              |                                       | 打开状态                                                           |
 | open              | boolean                              |                                       | 受控的打开状态                                                        |

package/documentation/dist/index.html

@@ -5,7 +5,7 @@
     <link rel="shortcut icon" href="/logo.png">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Canlooks UI</title>
-  <script type="module" crossorigin src="/assets/index-B6FOULC1.js"></script>
+  <script type="module" crossorigin src="/assets/index-DXo4Z-bc.js"></script>
 </head>
 <body>
 <div id="app"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -39,12 +39,12 @@
     }
   },
   "scripts": {
-    "clean": "npx shx rm -rf dist",
-    "build": "npm run clean && tscup && npm run build:documentation",
-    "build:core": "npm run clean && tscup",
+    "clean": "npx shx rm -rf dist documentation/bootstrap.mjs documentation/vite.config.mjs",
+    "build:core": "tsc -m esnext --outDir dist/esm & tsc -m commonjs --outDir dist/cjs",
     "build:documentation": "vite build -c documentation/vite.config.mts && tsc -p documentation/tsconfig.bootstrap.json",
+    "rebuild": "npm run clean && npm run build:core && npm run build:documentation",
     "dev": "vite -c test/vite.config.mts",
-    "dev:documentation": "vite -c documentation/vite.config.mts",
+    "dev:documentation": "vite -c documentation/vite.config.mts --host",
     "test:unit": "npx ts-node test/unit.ts"
   },
   "dependencies": {
@@ -65,7 +65,6 @@
   "devDependencies": {
     "@ant-design/icons": "^6.0.0",
     "@canlooks/react-router": "^1.0.11",
-    "@canlooks/tscup": "^0.1.2",
     "@emotion/styled": "^11.14.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
@@ -80,6 +79,7 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "remark-gfm": "^4.0.1",
+    "ts-node": "^10.9.2",
     "typescript": "^5.8.3",
     "vite": "^6.2.5"
   }

package/dist/cjs/components/image/imagePreview.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImagePreview = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const modal_1 = require("../modal");
-const utils_1 = require("../../utils");
-const imagePreview_style_1 = require("./imagePreview.style");
-const button_1 = require("../button");
-const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
-const tooltip_1 = require("../tooltip");
-const __1 = require("../..");
-const faXmark_1 = require("@fortawesome/free-solid-svg-icons/faXmark");
-const faExpand_1 = require("@fortawesome/free-solid-svg-icons/faExpand");
-const faAngleLeft_1 = require("@fortawesome/free-solid-svg-icons/faAngleLeft");
-const faAngleRight_1 = require("@fortawesome/free-solid-svg-icons/faAngleRight");
-const faArrowRotateLeft_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateLeft");
-const faArrowRotateRight_1 = require("@fortawesome/free-solid-svg-icons/faArrowRotateRight");
-const faMagnifyingGlassPlus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus");
-const faMagnifyingGlassMinus_1 = require("@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus");
-exports.ImagePreview = (0, react_1.memo)(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, ...props }) => {
-    const srcArr = (0, utils_1.toArray)(src);
-    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
-    const [innerIndex, setInnerIndex] = (0, utils_1.useControlled)(defaultIndex, index, onIndexChange);
-    const innerTransformWrapperRef = (0, react_1.useRef)(null);
-    const imgLoaded = () => {
-        innerTransformWrapperRef.current.centerView();
-    };
-    const prev = (e) => {
-        e.stopPropagation();
-        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
-        innerTransformWrapperRef.current?.resetTransform();
-    };
-    const next = (e) => {
-        e.stopPropagation();
-        setInnerIndex(o => (o + 1) % srcArr.length);
-        innerTransformWrapperRef.current?.resetTransform();
-    };
-    const [rotate, setRotate] = (0, react_1.useState)(0);
-    const isPanning = (0, react_1.useRef)(false);
-    const commonControlProps = {
-        className: imagePreview_style_1.classes.button,
-        shape: 'circular',
-        size: 'large',
-        color: 'text'
-    };
-    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, css: imagePreview_style_1.style, className: (0, utils_1.clsx)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
-            ...props.maskProps,
-            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [renderControl, showRotation &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateLeft_1.faArrowRotateLeft }) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faArrowRotateRight_1.faArrowRotateRight }) }) })] }), showZoom &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.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, { ...commonControlProps, onClick: () => innerTransformWrapperRef.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, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faExpand_1.faExpand }) }) })] }), showClose &&
-                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faXmark_1.faXmark }) })] }), srcArr.length > 1 &&
-                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleLeft_1.faAngleLeft }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faAngleRight_1.faAngleRight }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
-        }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapperProps, ref: (0, utils_1.cloneRef)(transformWrapperProps?.ref, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
-                transformWrapperProps?.onPanning?.(ref, e);
-                isPanning.current = true;
-            }, onPanningStop: (ref, e) => {
-                transformWrapperProps?.onPanningStop?.(ref, e);
-                isPanning.current && setTimeout(() => isPanning.current = false);
-            }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: imagePreview_style_1.classes.imageWrapper, contentClass: imagePreview_style_1.classes.image, wrapperProps: {
-                    onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }, innerIndex.current) }) }) }));
-});

package/dist/esm/components/image/imagePreview.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { memo, useRef, useState } from 'react';
-import { Modal } from '../modal';
-import { clsx, cloneRef, toArray, useControlled } from '../../utils';
-import { classes, style } from './imagePreview.style';
-import { Button } from '../button';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import { Tooltip } from '../tooltip';
-import { Icon } from '../..';
-import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
-import { faArrowRotateLeft } from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft';
-import { faArrowRotateRight } from '@fortawesome/free-solid-svg-icons/faArrowRotateRight';
-import { faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassPlus';
-import { faMagnifyingGlassMinus } from '@fortawesome/free-solid-svg-icons/faMagnifyingGlassMinus';
-export const ImagePreview = memo(({ src = [], defaultIndex = 0, index, onIndexChange, defaultOpen = false, open, onOpenChange, showRotation = true, showZoom = true, showClose = true, renderControl, transformWrapperProps, ...props }) => {
-    const srcArr = toArray(src);
-    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const [innerIndex, setInnerIndex] = useControlled(defaultIndex, index, onIndexChange);
-    const innerTransformWrapperRef = useRef(null);
-    const imgLoaded = () => {
-        innerTransformWrapperRef.current.centerView();
-    };
-    const prev = (e) => {
-        e.stopPropagation();
-        setInnerIndex(o => (o - 1 + srcArr.length) % srcArr.length);
-        innerTransformWrapperRef.current?.resetTransform();
-    };
-    const next = (e) => {
-        e.stopPropagation();
-        setInnerIndex(o => (o + 1) % srcArr.length);
-        innerTransformWrapperRef.current?.resetTransform();
-    };
-    const [rotate, setRotate] = useState(0);
-    const isPanning = useRef(false);
-    const commonControlProps = {
-        className: classes.button,
-        shape: 'circular',
-        size: 'large',
-        color: 'text'
-    };
-    return (_jsx(Modal, { ...props, css: style, className: clsx(classes.root, props.className), open: innerOpen.current, maskProps: {
-            ...props.maskProps,
-            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [renderControl, showRotation &&
-                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(Icon, { icon: faArrowRotateLeft }) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(Icon, { icon: faArrowRotateRight }) }) })] }), showZoom &&
-                                _jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomOut(), children: _jsx(Icon, { icon: faMagnifyingGlassMinus }) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.zoomIn(), children: _jsx(Icon, { icon: faMagnifyingGlassPlus }) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => innerTransformWrapperRef.current.resetTransform(), children: _jsx(Icon, { icon: faExpand }) }) })] }), showClose &&
-                                _jsx(Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: _jsx(Icon, { icon: faXmark }) })] }), srcArr.length > 1 &&
-                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(Icon, { icon: faAngleLeft }) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(Icon, { icon: faAngleRight }) })] }), _jsxs("div", { className: classes.counter, children: [innerIndex.current + 1, " / ", srcArr.length] })] })] }))
-        }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapperProps, ref: cloneRef(transformWrapperProps?.ref, innerTransformWrapperRef), minScale: .2, onPanning: (ref, e) => {
-                transformWrapperProps?.onPanning?.(ref, e);
-                isPanning.current = true;
-            }, onPanningStop: (ref, e) => {
-                transformWrapperProps?.onPanningStop?.(ref, e);
-                isPanning.current && setTimeout(() => isPanning.current = false);
-            }, children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
-                    onClick: () => !isPanning.current && setInnerOpen(false)
-                }, children: _jsx("img", { src: srcArr[innerIndex.current], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded, alt: "" }, innerIndex.current) }) }) }));
-});