@canlooks/can-ui 0.0.24 → 0.0.26

package/documentation/dist/guide/startup.md

@@ -0,0 +1,23 @@
+# 开始
+## 安装
+
+```bash
+npm i @canlooks/can-ui
+```
+或使用脚手架程序
+```bash
+npx create-canlooks
+```
+
+## 使用
+你可以不进行任何配置就像使用其他`React`组件一样使用`CanUI`组件。
+
+```tsx
+import {Alert} from '@canlooks/can-ui'
+
+export default function Hello() {
+    return (
+        <Alert title="Hello Canlooks" status="success"/>
+    )
+}
+```

package/documentation/dist/guide/theme.md

@@ -0,0 +1,249 @@
+# 自定义主题
+
+## <ThemeProvider\/>
+
+如果你使用了[<App\/>](appComponent)（入口组件），则入口组件也包含了themeProvider的功能：
+
+```tsx no-preview
+import {App, ThemeDefinition} from '@canlooks/can-ui'
+
+export default function Index() {
+    const theme: ThemeDefinition = {
+        colors: {
+            primary: '#1E71EC'
+        }
+    }
+
+    return (
+        <App theme={theme}>
+            {/* ... */}
+        </App>
+    )
+}
+```
+
+## ThemeDefinition
+
+| 属性           | 类型                         |
+|--------------|----------------------------|
+| mode         | 'light' \| 'dark'          |
+| fontSize     | number                     |
+| fontFamily   | string                     |
+| size         | string                     |
+| borderRadius | number                     |
+| spacing      | number[]                   |
+| gap          | number[]                   |
+| gray         | (amount: number) => string |
+| divider      | string                     |
+| colors       | Object                     |
+| text         | Object                     |
+| background   | Object                     |
+| easing       | Object                     |
+| breakpoints  | Object                     |
+| boxShadow    | string[]                   |
+| zoom         | number                     |
+
+## 默认主题定义
+
+### light
+
+```tsx no-preview
+const defaultLightTheme: ThemeDefinition = {
+    mode: 'light',
+    fontSize: 14,
+    fontFamily: defaultFontFamily,
+    size: 'medium',
+    borderRadius: 6,
+    spacing: defaultSpacing,
+    gap: defaultSpacing[6],
+    gray,
+    /* divider: gray(.1), */
+    divider: '#e6e6e6',
+    colors: {
+        primary: '#1E71EC',
+        secondary: '#925CC1',
+        success: '#13C13C',
+        warning: '#ED9121',
+        error: '#DD3F3F',
+        info: '#52AEDF',
+    },
+    text: {
+        /* primary: gray(.9), */
+        primary: '#191919',
+        /* secondary: gray(.6), */
+        secondary: '#666666',
+        /* disabled: gray(.4), */
+        disabled: '#999999',
+        /* placeholder: gray(.3), */
+        placeholder: '#b3b3b3',
+        /* inverse: gray(0) */
+        inverse: '#ffffff'
+    },
+    background: {
+        content: '#ffffff',
+        /* body: gray(.04), */
+        body: '#f5f5f5',
+        fixed: 'rgba(0, 0, 0, .02)'
+    },
+    boxShadow: [
+        /* 通常用于弹框，气泡等 */
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        /* 通常用于抽屉等 */
+        '0 0 24px rgba(0, 0, 0, .2)',
+        '1px 2px 3px rgba(0, 0, 0, .2)',
+        '2px 4px 6px rgba(0, 0, 0, .2)',
+        '3px 6px 9px rgba(0, 0, 0, .2)',
+        '3px 6px 18px rgba(0, 0, 0, .2)',
+        '4px 8px 24px rgba(0, 0, 0, .2)'
+    ],
+    easing: {
+        linear: 'linear',
+        ease: 'ease',
+        easeIn: 'cubic-bezier(.3, 0, .6, 0)',
+        easeOut: 'cubic-bezier(.4, 1, .7, 1)',
+        easeInOut: 'cubic-bezier(.65, 0, .35, 1)',
+        bounce: 'cubic-bezier(.5, 2, .5, .7)',
+        swing: 'cubic-bezier(.5, 3, .5, .1)'
+    },
+    breakpoints: defaultBreakpoints,
+    zoom: 1
+}
+```
+
+### dark
+
+`dark`模式定义对象除以下属性外，其余属性继承于`light`模式
+
+```tsx no-preview
+const defaultDarkTheme: ThemeDefinition = {
+    mode: 'dark',
+    background: {
+        content: '#333333',
+        body: '#252525',
+        fixed: 'rgba(255, 255, 255, .06)'
+    },
+    gray: rGray,
+    divider: '#5c5c5c',
+    colors: {
+        primary: '#3780EE',
+        secondary: '#9A68C6',
+        success: '#14CD40',
+        warning: '#EE9830',
+        error: '#E04D4D',
+        info: '#5AB2E0'
+    },
+    text: {
+        primary: '#e6e6e6',
+        secondary: '#b3b3b3',
+        disabled: '#808080',
+        placeholder: '#737373',
+        inverse: '#000000'
+    }
+}
+```
+
+## 使用主题
+
+### useTheme()
+
+CanUI提供`useTheme()`hook，获取当前主题对象，
+
+**注意：使用时的`colors`对象与定义时不同**
+
+### Theme.Colors
+
+使用时，`colors`对象中的每个属性均支持数字`0-10`的索引，也支持`light`、`main`、`dark`3种预设：
+
+```tsx
+import {Flex, useTheme} from '@canlooks/can-ui'
+
+const height = 40
+const color = '#fff'
+
+export default function Index() {
+    const {colors: {primary}} = useTheme()
+    
+    return (
+        <Flex width="100%" direction="column" gap={12}>
+            <Flex gap={12}>
+                <Flex flex={1} style={{background: primary.light, height}}>light</Flex>
+                <Flex flex={1} style={{background: primary.main, height, color}}>main</Flex>
+                <Flex flex={1} style={{background: primary.dark, height, color}}>dark</Flex>
+            </Flex>
+            <Flex>
+                <Flex flex={1} style={{background: primary[0], height}}>[0]</Flex>
+                <Flex flex={1} style={{background: primary[1], height}}>[1]</Flex>
+                <Flex flex={1} style={{background: primary[2], height}}>[2]</Flex>
+                <Flex flex={1} style={{background: primary[3], height}}>[3]</Flex>
+                <Flex flex={1} style={{background: primary[4], height}}>[4]</Flex>
+                <Flex flex={1} style={{background: primary[5], height, color}}>[5]</Flex>
+                <Flex flex={1} style={{background: primary[6], height, color}}>[6]</Flex>
+                <Flex flex={1} style={{background: primary[7], height, color}}>[7]</Flex>
+                <Flex flex={1} style={{background: primary[8], height, color}}>[8]</Flex>
+                <Flex flex={1} style={{background: primary[9], height, color}}>[9]</Flex>
+                <Flex flex={1} style={{background: primary[10], height, color}}>[10]</Flex>
+            </Flex>
+        </Flex>
+    )
+}
+```
+
+## 动态更改主题
+
+### 使用useState()
+
+将[ThemeDefinition](#ThemeDefinition)使用`useState`控制即可
+
+```tsx
+import {Button, Card, ThemeDefinition, ThemeProvider} from '@canlooks/can-ui'
+
+const lightTheme = {
+    mode: 'light',
+    colors: {
+        primary: '#1E71EC'
+    }
+}
+
+const darkTheme = {
+    mode: 'dark',
+    colors: {
+        primary: '#9A68C6'
+    }
+}
+
+export default function Index() {
+    const [theme, setTheme] = React.useState<ThemeDefinition>(lightTheme)
+
+    const toggleHandler = () => {
+        setTheme(theme.mode === 'light' ? darkTheme : lightTheme)
+    }
+    
+    return (
+        <ThemeProvider theme={theme}>
+            <Card elevation={5}>
+                <Button onClick={toggleHandler}>Toggle</Button>
+            </Card>
+        </ThemeProvider>
+    )
+}
+```
+
+### 使用theme.update()
+
+`theme`对象内置`update()`方法
+
+```tsx no-preview
+export default function Index() {
+    const {update} = useTheme()
+
+    const changeTheme = () => {
+        update({
+            colors: {
+                primary: '#9A68C6'
+            }
+        })
+    }
+
+    // ...
+}
+```

package/documentation/dist/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <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-BViJjOmz.js"></script>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

package/extensions/curd.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);

package/extensions/curd.d.ts

@@ -1 +1 @@
-export * from '../dist/esm/extensions/curd';
+export * from '../dist/esm/extensions/curd'

package/extensions/curd.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);
+export * from '../dist/esm/extensions/curd'

package/extensions/documentViewer.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);

package/extensions/documentViewer.d.ts

@@ -1 +1 @@
-export * from '../dist/esm/extensions/documentViewer';
+export * from '../dist/esm/extensions/documentViewer'

package/extensions/documentViewer.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);
+export * from '../dist/esm/extensions/documentViewer'

package/extensions/textFormatter.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-nocheck
+tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);

package/extensions/textFormatter.d.ts

@@ -1 +1 @@
-export * from '../dist/esm/extensions/textFormatter';
+export * from '../dist/esm/extensions/textFormatter'

package/extensions/textFormatter.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// @ts-nocheck
-tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);
+export * from '../dist/esm/extensions/textFormatter'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -20,57 +20,66 @@
     "url": "https://gitee.com/canlooks/c_canui/issues",
     "email": "canlooks@gmail.com"
   },
+  "bin": {
+    "can-ui-doc": "documentation/bootstrap.mjs"
+  },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/esm/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts"
+      "require": "./dist/cjs/index.js"
     },
     "./extensions/*": {
-      "import": "./extensions/*.mjs",
-      "require": "./extensions/*.js",
-      "types": "./extensions/*.d.ts"
+      "types": "./extensions/*.d.ts",
+      "import": "./extensions/*.js",
+      "require": "./extensions/*.cjs"
     }
   },
   "scripts": {
     "clean": "npx shx rm -rf dist",
-    "build": "npm run clean && tscup",
-    "test": "vite -c test/vite.config.mts",
-    "test:build": "vite build -c test/vite.config.mts",
+    "build": "npm run clean && tscup && npm run build:documentation",
+    "build:documentation": "vite build -c documentation/vite.config.mts && tsc -p documentation/tsconfig.bootstrap.json",
+    "dev": "vite -c test/vite.config.mts",
+    "dev:documentation": "vite -c documentation/vite.config.mts",
     "test:unit": "npx ts-node test/unit.ts"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.5.2",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@types/react-transition-group": "^4.4.12",
-    "color": "^4.2.3",
+    "color": "^5.0.0",
     "dayjs": "^1.11.13",
     "react-transition-group": "^4.4.5",
-    "react-zoom-pan-pinch": "^3.6.1",
+    "react-zoom-pan-pinch": "^3.7.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@canlooks/react-router": "^1.0.11",
     "@canlooks/tscup": "^0.1.2",
-    "@mui/icons-material": "^6.2.0",
-    "@traptitech/markdown-it-katex": "^3.6.0",
-    "@types/color": "^4.2.0",
-    "@types/katex": "^0.16.7",
-    "@types/markdown-it": "^14.1.2",
-    "@types/markdown-it-link-attributes": "^3.0.5",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
-    "highlight.js": "^11.11.0",
-    "markdown-it": "^14.1.0",
-    "markdown-it-link-attributes": "^4.0.1",
-    "mime": "^4.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.3"
+    "@emotion/styled": "^11.14.0",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
+    "@mui/icons-material": "^7.0.1",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "mime": "^4.0.7",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "remark-gfm": "^4.0.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.5"
   }
 }

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

@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-type AnchorContextBaseProps = {
-    scrollIntoViewOptions?: ScrollIntoViewOptions;
-};
-export interface AnchorContextProps extends AnchorContextBaseProps {
-    thresholds?: [number, number];
-    container?: Element | (() => Element);
-    children?: ReactNode;
-}
-export interface AnchorContextType extends AnchorContextBaseProps {
-    targets: Map<string, Element | null>;
-    activeId: string | null;
-}
-export declare const InnerAnchorContext: import("react").Context<AnchorContextType>;
-export declare function useAnchorContext(): AnchorContextType;
-export declare function AnchorContext({ thresholds, container, children, ...props }: AnchorContextProps): import("@emotion/react/jsx-runtime").JSX.Element;
-/**
- * 在链接按钮组件内使用
- * @param id
- */
-export declare function useAnchorLinkProps(id: string): {
-    active: boolean;
-    onClick: () => void;
-};
-/**
- * 在需要滚动到的目标元素上使用
- * @param id
- */
-export declare function useAnchorTargetRef<T extends Element>(id: string): import("react").RefObject<T | null>;
-export {};

package/dist/cjs/components/anchor/anchor.js

@@ -1,100 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerAnchorContext = void 0;
-exports.useAnchorContext = useAnchorContext;
-exports.AnchorContext = AnchorContext;
-exports.useAnchorLinkProps = useAnchorLinkProps;
-exports.useAnchorTargetRef = useAnchorTargetRef;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("../../utils");
-exports.InnerAnchorContext = (0, react_1.createContext)({
-    targets: new Map(),
-    activeId: null
-});
-function useAnchorContext() {
-    return (0, react_1.useContext)(exports.InnerAnchorContext);
-}
-function AnchorContext({ thresholds, container, children, ...props }) {
-    const targets = (0, react_1.useRef)(new Map());
-    const [activeId, setActiveId] = (0, react_1.useState)(null);
-    const syncThresholds = (0, utils_1.useSync)(thresholds);
-    (0, react_1.useEffect)(() => {
-        const containerEl = typeof container === 'function' ? container() : container;
-        const scroll = () => {
-            let enter = syncThresholds.current?.[0];
-            if (typeof enter === 'undefined') {
-                const containerHeight = containerEl?.offsetHeight ?? window.innerHeight;
-                enter = containerHeight / 2;
-            }
-            const leave = syncThresholds.current?.[1] || 0;
-            let found = false;
-            for (const [id, el] of targets.current) {
-                if (el) {
-                    const { y, height } = el.getBoundingClientRect();
-                    if (y <= enter && y + height >= leave) {
-                        setActiveId(id);
-                        found = true;
-                        break;
-                    }
-                }
-            }
-            !found && setActiveId(null);
-        };
-        scroll();
-        if (containerEl) {
-            containerEl.addEventListener('scroll', scroll);
-        }
-        else {
-            addEventListener('scroll', scroll);
-            document.body.addEventListener('scroll', scroll);
-        }
-        return () => {
-            if (containerEl) {
-                containerEl.removeEventListener('scroll', scroll);
-            }
-            else {
-                removeEventListener('scroll', scroll);
-                document.body.removeEventListener('scroll', scroll);
-            }
-        };
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.InnerAnchorContext, { value: (0, react_1.useMemo)(() => ({
-            ...props,
-            targets: targets.current,
-            activeId
-        }), [activeId]), children: children }));
-}
-/**
- * 在链接按钮组件内使用
- * @param id
- */
-function useAnchorLinkProps(id) {
-    const { activeId, targets, scrollIntoViewOptions } = useAnchorContext();
-    const onClick = (0, react_1.useCallback)(() => {
-        targets.get(id)?.scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            ...scrollIntoViewOptions
-        });
-    }, [id]);
-    return {
-        active: activeId === id,
-        onClick
-    };
-}
-/**
- * 在需要滚动到的目标元素上使用
- * @param id
- */
-function useAnchorTargetRef(id) {
-    const { targets } = useAnchorContext();
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        targets.set(id, ref.current);
-        return () => {
-            targets.delete(id);
-        };
-    });
-    return ref;
-}

package/dist/cjs/components/anchor/index.d.ts

@@ -1 +0,0 @@
-export * from './anchor';

package/dist/cjs/components/button/button.style.b.d.ts

@@ -1,11 +0,0 @@
-import { ColorPropsValue } from '../../types';
-export declare const classes: {
-    content: string;
-    prefix: string;
-    suffix: string;
-} & {
-    root: string;
-};
-export declare function useStyle({ color }: {
-    color: ColorPropsValue;
-}): import("@emotion/react").SerializedStyles;