@canlooks/can-ui 0.0.21 → 0.0.23

package/dist/esm/utils/style.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { breakpoints, useTheme } from '../components/app';
+import { useTheme } from '../components/theme';
 import { humpToSegmented, isUnset } from './utils';
 import Color from 'color';
 /**
@@ -47,16 +47,20 @@ export function useCss(callback, deps) {
  * @param theme
  */
 export function colorTransfer(colorPropsValue, theme) {
-    const { colors, text, divider } = theme;
-    return colors[colorPropsValue]
-        || {
-            text: text.secondary,
-            disabled: text.disabled,
-            placeholder: text.placeholder,
-            inverse: text.inverse,
-            divider
-        }[colorPropsValue]
-        || colorPropsValue;
+    const { colors, text } = theme;
+    if (colorPropsValue in colors) {
+        return colors[colorPropsValue].main;
+    }
+    if (colorPropsValue.startsWith('text')) {
+        if (colorPropsValue === 'text') {
+            return text.primary;
+        }
+        const [, member] = colorPropsValue.split('.');
+        if (member in text) {
+            return text[member];
+        }
+    }
+    return colorPropsValue;
 }
 /**
  * 将useCss()与colorTransfer()方法结合封装
@@ -73,7 +77,9 @@ export function useColor(colorPropsValue) {
  */
 export function useTouchRipple(colorPropsValue) {
     const theme = useTheme();
-    const outlineColor = Color(useColor(colorPropsValue)).alpha(.6).string();
+    const outlineColor = useMemo(() => {
+        return Color(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
+    }, [colorPropsValue, theme]);
     return (element) => {
         typeof element.animate === 'function' && element.animate([
             {
@@ -82,7 +88,7 @@ export function useTouchRipple(colorPropsValue) {
                 outlineColor
             },
             {
-                outlineWidth: theme.spacing[2] + 'px',
+                outlineWidth: '6px',
                 outlineStyle: 'solid',
                 outlineColor: 'transparent'
             },
@@ -94,32 +100,40 @@ export function useTouchRipple(colorPropsValue) {
 }
 /**
  * 生成响应式样式
+ * @param theme
  * @param callback
  */
-export function responsiveVariables(callback) {
+export function responsiveVariables(theme, callback) {
+    const { breakpoints } = theme;
     let ret = '';
     for (const k in breakpoints) {
-        const v = breakpoints[k];
-        ret += `
-            ${v ? `@media (min-width: ${v}px) {` : ''}
-                ${callback(k) || ''}
-            ${v ? '}' : ''}
-        `;
+        const px = breakpoints[k];
+        if (px) {
+            ret += `
+                @media (min-width: ${px}px) {
+                    ${callback(k, px) || ''}
+                }                
+            `;
+        }
+        else {
+            ret += callback(k, px) || '';
+        }
     }
     return ret;
 }
-export function responsiveValue(prop) {
+export function toResponsiveValue(prop) {
     if (isUnset(prop)) {
         return;
     }
     return typeof prop === 'object' ? prop : { xs: prop };
 }
 /**
- * 使用hooks监听响应式值的变化
+ * 使用hooks监听响应式值的变化，通常用于css不能满足需求的情况
  * @param prop
  */
 export function useResponsiveValue(prop) {
-    const responsiveObj = responsiveValue(prop);
+    const responsiveObj = toResponsiveValue(prop);
+    const { breakpoints } = useTheme();
     const fn = () => {
         let maxBreakpoint = 'xs';
         for (const k in breakpoints) {
@@ -150,8 +164,11 @@ export function useResponsiveValue(prop) {
  */
 export function useStatusColor(status = 'unknown') {
     const { colors, text } = useTheme();
-    return status === 'unknown' ? text.disabled
-        : colors[status === 'info' ? 'primary'
-            : status === 'confirm' ? 'warning'
-                : status];
+    if (status === 'unknown') {
+        return text.disabled;
+    }
+    if (status === 'confirm') {
+        status = 'warning';
+    }
+    return colors[status].main;
 }

package/dist/esm/utils/tree.d.ts

@@ -1,4 +1,4 @@
-import { Id, Obj } from '../../types';
+import { Id, Obj } from '../types';
 /**
  * ------------------------------------------------------------------------
  * 统一处理树形搜索
@@ -20,7 +20,7 @@ export declare function useTreeSearch<N extends Obj, V extends Id = Id>({ nodes,
     expandedSet: Set<V>;
     setInnerExpanded: import("react").Dispatch<import("react").SetStateAction<V[]>>;
     toggleExpanded: (value: V) => void;
-    innerSearchValue: import("react").MutableRefObject<string>;
+    innerSearchValue: import("react").RefObject<string>;
     deferredSearchValue: string;
     setInnerSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;
     filteredTreeData: N[] | undefined;

package/dist/esm/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import { MutableRefObject, Ref, ReactNode } from 'react';
-import { Id } from '../../types';
+import { RefObject, Ref, ReactNode } from 'react';
+import { Id } from '../types';
 /**
  * 生成最简易的随机ID
  * @param namespace
@@ -61,7 +61,7 @@ export declare function nextTick(callback?: () => void): Promise<void>;
  * 克隆Ref
  * @param refs
  */
-export declare function cloneRef<T>(...refs: (Ref<T> | MutableRefObject<T | null> | undefined)[]): (r: T | null) => void;
+export declare function cloneRef<T>(...refs: (Ref<T> | RefObject<T | null> | undefined)[]): (r: T | null) => void;
 /**
  * 判断变量是否为undefined或null
  * @param it
@@ -83,7 +83,7 @@ export declare function getPromiseState(promise: Promise<any>): Promise<'pending
  * @param callback
  * @param seperator
  */
-export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined)[];
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined)[];
 /**
  * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
  * @param value

package/dist/esm/utils/utils.js

@@ -103,7 +103,7 @@ export function mergeDeep(target, ...sources) {
         if (source && typeof source === 'object') {
             for (const k in source) {
                 const v = source[k];
-                if (v && typeof v === 'object') {
+                if (typeof v === 'object' && v) {
                     target[k] ||= Array.isArray(v) ? [] : {};
                     mergeDeep(target[k], v);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",
@@ -36,18 +36,18 @@
     }
   },
   "scripts": {
-    "clean": "tscup clean",
-    "build": "tscup",
+    "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",
-    "test:unit": "ts-node test/unit.ts"
+    "test:unit": "npx ts-node test/unit.ts"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.5.1",
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@types/react-transition-group": "^4.4.11",
-    "@emotion/react": "^11.13.3",
+    "@ant-design/icons": "^5.5.2",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@emotion/react": "^11.14.0",
+    "@types/react-transition-group": "^4.4.12",
     "color": "^4.2.3",
     "dayjs": "^1.11.13",
     "react-transition-group": "^4.4.5",
@@ -55,24 +55,22 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@canlooks/tscup": "^0.0.8",
-    "@mui/icons-material": "^6.1.6",
+    "@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": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "highlight.js": "^11.10.0",
+    "@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": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "shx": "^0.3.4",
-    "ts-node": "^10.9.2",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }

package/dist/cjs/components/app/theme.d.ts

@@ -1,81 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { ColorPresets, TextColorPresets, ThemeEasingName, Size, Breakpoints } from '../../../types';
-/**
- * 获取不同程度的灰色
- * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
- */
-export declare function gray(amount: number): string;
-export declare function rGray(amount: number): string;
-/**
- * ---------------------------------------------------------------------
- * 以3的倍数统一处理间距
- */
-export declare const spacing: {
-    (amount: number): number;
-    0: number;
-    1: number;
-    2: number;
-    3: number;
-    4: number;
-    5: number;
-    6: number;
-    7: number;
-    8: number;
-    9: number;
-    10: number;
-};
-export declare const zIndex: {
-    overlay: number;
-    popper: number;
-    bubbleConfirm: number;
-    dropdown: number;
-    snackbar: number;
-    tooltip: number;
-};
-export declare const breakpoints: {
-    [P in Breakpoints]: number;
-};
-export type ThemeColor = {
-    [P in ColorPresets]: string;
-};
-export type ThemeTextColor = {
-    [P in TextColorPresets]: string;
-};
-export type ThemeBackgroundColor = {
-    card: string;
-    body: string;
-    fixed: string;
-};
-export type ThemeEasings = {
-    [P in ThemeEasingName]: string;
-};
-export type Theme = {
-    mode: 'light' | 'dark';
-    fontSize: number;
-    fontFamily: string;
-    size: Size;
-    borderRadius: number;
-    /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
-    spacing: typeof spacing;
-    gap: number;
-    gray: typeof gray;
-    divider: string;
-    colors: ThemeColor;
-    text: ThemeTextColor;
-    background: ThemeBackgroundColor;
-    boxShadow: string[];
-    easing: ThemeEasings;
-    /** @private 是否为最顶层的主题提供者 */
-    _isTop: boolean;
-    update: Dispatch<SetStateAction<PartialTheme>>;
-};
-/** Theme对象的深度Partial，使所有子属性全部变成可选 */
-export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing'>> & {
-    colors?: Partial<ThemeColor>;
-    text?: Partial<ThemeTextColor>;
-    background?: Partial<ThemeBackgroundColor>;
-    easing?: Partial<ThemeEasings>;
-};
-export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
-export declare const defaultLightTheme: Theme;
-export declare const defaultDarkTheme: PartialTheme;

package/dist/cjs/components/app/theme.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultDarkTheme = exports.defaultLightTheme = exports.defaultFontFamily = exports.breakpoints = exports.zIndex = exports.spacing = void 0;
-exports.gray = gray;
-exports.rGray = rGray;
-const tslib_1 = require("tslib");
-const color_1 = tslib_1.__importDefault(require("color"));
-/**
- * 获取不同程度的灰色
- * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
- */
-function gray(amount) {
-    return rGray(1 - amount);
-}
-function rGray(amount) {
-    return (0, color_1.default)(`hsl(0, 0%, ${amount * 100}%)`, 'hsl').hex();
-}
-/**
- * ---------------------------------------------------------------------
- * 以3的倍数统一处理间距
- */
-const spacing = (amount) => amount * 3;
-exports.spacing = spacing;
-exports.spacing[0] = (0, exports.spacing)(0);
-exports.spacing[1] = (0, exports.spacing)(1);
-exports.spacing[2] = (0, exports.spacing)(2);
-exports.spacing[3] = (0, exports.spacing)(3);
-exports.spacing[4] = (0, exports.spacing)(4);
-exports.spacing[5] = (0, exports.spacing)(5);
-exports.spacing[6] = (0, exports.spacing)(6);
-exports.spacing[7] = (0, exports.spacing)(7);
-exports.spacing[8] = (0, exports.spacing)(8);
-exports.spacing[9] = (0, exports.spacing)(9);
-exports.spacing[10] = (0, exports.spacing)(10);
-exports.zIndex = {
-    overlay: 1000,
-    popper: 1100,
-    bubbleConfirm: 1200,
-    dropdown: 1300,
-    snackbar: 1400,
-    tooltip: 1500
-};
-exports.breakpoints = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536
-};
-exports.defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif`;
-exports.defaultLightTheme = {
-    mode: 'light',
-    fontSize: 14,
-    fontFamily: exports.defaultFontFamily,
-    size: 'medium',
-    borderRadius: 6,
-    spacing: exports.spacing,
-    gap: exports.spacing[6],
-    get gray() {
-        return gray;
-    },
-    /** divider: gray(.15), */
-    divider: '#d9d9d9',
-    colors: {
-        primary: '#1e71ec',
-        secondary: '#925CC1',
-        success: '#13C13C',
-        warning: '#ED9121',
-        error: '#DD3F3F',
-        info: '#52AEDF'
-    },
-    text: {
-        /* primary: gray(1), */
-        primary: '#000000',
-        /* secondary: gray(.6), */
-        secondary: '#666666',
-        /* disabled: gray(.4), */
-        disabled: '#999999',
-        /* placeholder: gray(.3), */
-        placeholder: '#b3b3b3',
-        /* inverse: gray(0) */
-        inverse: '#ffffff'
-    },
-    background: {
-        card: '#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: 'ease-in-out',
-        bounce: 'cubic-bezier(.5, 2, .5, .7)',
-        swing: 'cubic-bezier(.5, 3, .5, .1)'
-    },
-    _isTop: true,
-    update: () => { }
-};
-exports.defaultDarkTheme = {
-    mode: 'dark',
-    background: {
-        /* body: rGray(.15), */
-        body: '#252525',
-        /* card: rGray(.2), */
-        card: '#333333',
-        fixed: 'rgba(255, 255, 255, .06)'
-    },
-    get gray() {
-        return rGray;
-    },
-    /* divider: rGray(.36), */
-    divider: '#5c5c5c',
-    colors: {
-        /* primary: Color('#1e71ec').lighten(.1).hex(), */
-        primary: '#3780ee',
-        /* success: Color('#13C13C').lighten(.06).hex(), */
-        success: '#14cd40',
-        /* error: Color('#DD3F3F').lighten(.06).hex(), */
-        error: '#E04D4D'
-    },
-    text: {
-        /* primary: rGray(1), */
-        primary: '#ffffff',
-        /* secondary: rGray(.7), */
-        secondary: '#b3b3b3',
-        /* disabled: rGray(.5), */
-        disabled: '#808080',
-        /* placeholder: rGray(.45), */
-        placeholder: '#737373',
-        /* inverse: rGray(0) */
-        inverse: '#000000'
-    }
-};

package/dist/cjs/components/app/themeContext.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-import { PartialTheme, Theme } from './theme';
-export declare const themeContext: import("react").Context<Theme>;
-export declare function useTheme(): Theme;
-export declare function useThemeProvider(theme?: PartialTheme): Theme;
-export declare function ThemeProvider(props: {
-    theme?: PartialTheme;
-    children?: ReactNode;
-}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/app/themeContext.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.themeContext = void 0;
-exports.useTheme = useTheme;
-exports.useThemeProvider = useThemeProvider;
-exports.ThemeProvider = ThemeProvider;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const react_1 = require("react");
-const theme_1 = require("./theme");
-const utils_1 = require("../../utils");
-exports.themeContext = (0, react_1.createContext)(theme_1.defaultLightTheme);
-function useTheme() {
-    return (0, react_1.useContext)(exports.themeContext);
-}
-function useThemeProvider(theme) {
-    const defaultTheme = useTheme();
-    const mergeTheme = (theme) => {
-        const newTheme = typeof theme === 'function' ? theme(themeValue) : theme;
-        return (0, utils_1.mergeDeep)({}, defaultTheme, newTheme?.mode === 'dark' && theme_1.defaultDarkTheme, newTheme);
-    };
-    const [themeValue, setThemeValue] = (0, react_1.useState)(() => mergeTheme(theme));
-    themeValue.update = theme => {
-        setThemeValue(mergeTheme(theme));
-    };
-    return themeValue;
-}
-function ThemeProvider(props) {
-    return ((0, jsx_runtime_1.jsx)(exports.themeContext.Provider, { value: useThemeProvider(props.theme), children: props.children }));
-}

package/dist/esm/components/app/theme.d.ts

@@ -1,81 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { ColorPresets, TextColorPresets, ThemeEasingName, Size, Breakpoints } from '../../../types';
-/**
- * 获取不同程度的灰色
- * @param amount 0 至 1，数值越小越靠近背景颜色，数值越大越靠近文字颜色（mode改变后数组会倒转）
- */
-export declare function gray(amount: number): string;
-export declare function rGray(amount: number): string;
-/**
- * ---------------------------------------------------------------------
- * 以3的倍数统一处理间距
- */
-export declare const spacing: {
-    (amount: number): number;
-    0: number;
-    1: number;
-    2: number;
-    3: number;
-    4: number;
-    5: number;
-    6: number;
-    7: number;
-    8: number;
-    9: number;
-    10: number;
-};
-export declare const zIndex: {
-    overlay: number;
-    popper: number;
-    bubbleConfirm: number;
-    dropdown: number;
-    snackbar: number;
-    tooltip: number;
-};
-export declare const breakpoints: {
-    [P in Breakpoints]: number;
-};
-export type ThemeColor = {
-    [P in ColorPresets]: string;
-};
-export type ThemeTextColor = {
-    [P in TextColorPresets]: string;
-};
-export type ThemeBackgroundColor = {
-    card: string;
-    body: string;
-    fixed: string;
-};
-export type ThemeEasings = {
-    [P in ThemeEasingName]: string;
-};
-export type Theme = {
-    mode: 'light' | 'dark';
-    fontSize: number;
-    fontFamily: string;
-    size: Size;
-    borderRadius: number;
-    /** 间隙大小，如内边距、外边距等，是控制界面整体紧凑程度的主要参数 */
-    spacing: typeof spacing;
-    gap: number;
-    gray: typeof gray;
-    divider: string;
-    colors: ThemeColor;
-    text: ThemeTextColor;
-    background: ThemeBackgroundColor;
-    boxShadow: string[];
-    easing: ThemeEasings;
-    /** @private 是否为最顶层的主题提供者 */
-    _isTop: boolean;
-    update: Dispatch<SetStateAction<PartialTheme>>;
-};
-/** Theme对象的深度Partial，使所有子属性全部变成可选 */
-export type PartialTheme = Partial<Omit<Theme, 'colors' | 'text' | 'background' | 'easing'>> & {
-    colors?: Partial<ThemeColor>;
-    text?: Partial<ThemeTextColor>;
-    background?: Partial<ThemeBackgroundColor>;
-    easing?: Partial<ThemeEasings>;
-};
-export declare const defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',\n    'Segoe UI Symbol', 'Noto Color Emoji', 'Microsoft YaHei UI', sans-serif";
-export declare const defaultLightTheme: Theme;
-export declare const defaultDarkTheme: PartialTheme;