@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,227 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+export const classes = defineClasses('input-base', [
+    'prefix',
+    'content',
+    'suffix',
+    'clear'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, background, divider, borderRadius, text, easing, gray }) => css `
+        display: flex;
+        gap: ${spacing[2]}px;
+        align-items: center;
+        cursor: text;
+        transition: border-color .2s ${easing.easeOut};
+        position: relative;
+
+        &[data-variant=outlined] {
+            background-color: ${background.card};
+        }
+
+        &[data-size=medium] {
+            min-height: 32px;
+            padding: 0 ${spacing[4]}px;
+        }
+
+        &[data-size=small] {
+            min-height: 24px;
+            padding: 0 ${spacing[3]}px;
+        }
+
+        &[data-size=large] {
+            min-height: 40px;
+            padding: 3px ${spacing[5]}px;
+        }
+
+        &[data-variant=outlined] {
+            border: 1px solid ${color === 'primary' ? divider : colorValue};
+            border-radius: ${borderRadius}px;
+
+            &:before,
+            &:after {
+                content: '';
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 2px;
+                border-radius: inherit;
+                position: absolute;
+                display: none;
+                pointer-events: none;
+                z-index: 3;
+            }
+    
+            &:before {
+                top: -1px;
+                right: -1px;
+                border-top-color: ${colorValue};
+                border-left-color: ${colorValue};
+            }
+    
+            &:after {
+                bottom: -1px;
+                left: -1px;
+                border-bottom-color: ${colorValue};
+                border-right-color: ${colorValue};
+            }
+    
+            &:not(:has([data-read-only=true])):not(:has([data-disabled=true])):hover {
+                ${color === 'primary' ? `border-color: ${gray(.5)};` : ''}
+            }
+    
+            &:not(:has([data-read-only=true]))[data-focused=true],
+            &:not(:has([data-read-only=true])):has(:focus) {
+                &:before, &:after {
+                    display: block;
+                    animation: ${borderAnim} .4s ${easing.easeOut} forwards;
+                }
+            }
+
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+            }
+        }
+        
+        &[data-variant=underlined] {
+            border-bottom: 1px solid ${divider};
+
+            &:not([data-disabled=true]):hover {
+                border-color: ${gray(.5)};
+            }
+
+            &:after {
+                content: '';
+                width: 0;
+                height: 2px;
+                background-color: ${colorValue};
+                position: absolute;
+                bottom: -1px;
+                left: 0;
+                transition: width .2s ${easing.easeOut};
+                z-index: 3;
+            }
+            
+            &[data-focused=true],
+            &:has(:focus) {
+                &:after {
+                    width: 100%;
+                }
+            }
+        }
+
+        &:has([data-disabled=true]) {
+            cursor: not-allowed;
+            background-color: ${gray(.1)};
+
+            [data-disabled=true] {
+                cursor: not-allowed;
+            }
+        }
+
+        &:has([data-read-only=true]) {
+            cursor: default;
+
+            [data-read-only=true] {
+                cursor: default;
+            }
+        }
+
+        .${classes.content} {
+            flex: 1;
+            min-width: 0;
+
+            input, textarea {
+                color: ${text.primary};
+
+                &::placeholder {
+                    color: ${text.placeholder};
+                }
+
+                &[data-hidden=true] {
+                    position: absolute;
+                    opacity: 0;
+                    inset: 0;
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &[data-compact=row] {
+            &:hover {
+                z-index: 1;
+            }
+    
+            &[data-focused=true],
+            &:has(:focus) {
+                z-index: 2;
+            }
+    
+            &:not([data-last=true]) {
+                &, &:before, &:after {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+    
+            &:not([data-first=true]) {
+                margin-left: -1px;
+    
+                &, &:before, &:after {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                }
+            }
+        }
+    
+        &[data-compact=column] {
+            &:hover {
+                z-index: 1;
+            }
+    
+            &[data-focused=true],
+            &:has(:focus) {
+                z-index: 2;
+            }
+    
+            &:not([data-last=true]) {
+                &, &:before, &:after {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+    
+            &:not([data-first=true]) {
+                margin-top: -1px;
+    
+                &, &:before, &:after {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
+        }
+
+        .${classes.prefix},
+        .${classes.suffix} {
+            color: ${text.secondary};
+        }
+    `, [colorValue]);
+}
+const borderAnim = keyframes `
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    50% {
+        width: calc(100% - 2px);
+        height: 0;
+    }
+
+    100% {
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+    }
+`;

package/dist/esm/components/loading/index.d.ts

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

package/dist/esm/components/loading/index.js

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

package/dist/esm/components/loading/loading.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps } from '../../../types';
+import { LoadingIndicatorProps } from '../loadingIndicator';
+import { ProgressProps } from '../progress';
+export interface LoadingProps extends DIVProps {
+    loading?: boolean;
+    text?: ReactNode;
+    /** 传入progress字段会显示进度条 */
+    progress?: number;
+    color?: ColorPropsValue;
+    indicatorProps?: LoadingIndicatorProps;
+    progressProps?: ProgressProps;
+}
+export declare const Loading: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/loading/loading.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classnames, useDerivedState } from '../../utils';
+import { classes, style } from './loading.style';
+import { LoadingIndicator } from '../loadingIndicator';
+import { Fade } from '../transitionBase';
+import { Progress } from '../progress';
+export const Loading = memo(forwardRef(({ loading = false, text = '加载中...', progress, indicatorProps, progressProps, color, ...props }, ref) => {
+    const [showMask, setShowMask] = useDerivedState((prevLoading) => {
+        // 只有第一次需要原样返回loading，之后showMask不会立即变为false，交由onTransitionEnd()处理
+        return typeof prevLoading === 'undefined' ? loading : true;
+    }, [loading]);
+    const onExited = () => {
+        // 动画结束后，loading为false才需要改变showMask
+        setShowMask(false);
+    };
+    const showProgress = typeof progress === 'number';
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-show-progress": showProgress, children: [_jsx("div", { className: classes.container, children: props.children }), (loading || showMask.current) &&
+                _jsxs(Fade, { in: loading, className: classes.mask, onExited: onExited, children: [_jsxs("div", { className: classes.indicator, children: [_jsx(LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), _jsx("div", { className: classes.text, children: text })] }), showProgress &&
+                            _jsx(Progress, { className: classes.progress, value: progress, ...progressProps })] })] }));
+}));

package/dist/esm/components/loading/loading.style.d.ts

@@ -0,0 +1,10 @@
+export declare const classes: {
+    text: string;
+    mask: string;
+    container: string;
+    progress: string;
+    indicator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,67 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+import { classes as progressClasses } from '../progress/progress.style';
+export const classes = defineClasses('loading', [
+    'container',
+    'mask',
+    'indicator',
+    'text',
+    'progress'
+]);
+export const style = defineCss(({ background, spacing, text }) => {
+    const maskColor = Color(background.card).alpha(.8).string();
+    return css `
+        & {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+            position: relative;
+            z-index: 0;
+        }
+
+        .${classes.container} {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            z-index: 0;
+        }
+
+        .${classes.mask} {
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            background-color: ${maskColor};
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
+            align-items: center;
+            justify-content: center;
+
+            .${classes.indicator} {
+                display: flex;
+                gap: ${spacing[2]}px;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                .${classes.text} {
+                    color: ${text.secondary};
+                }
+            }
+
+            .${classes.progress} {
+                width: calc(100% - 24px);
+                max-width: 300px;
+
+                .${progressClasses.track} {
+                    height: 4px;
+                }
+            }
+        }
+
+        &[data-show-progress=true] .${classes.indicator} {
+            flex-direction: row;
+        }
+    `;
+});

package/dist/esm/components/loadingIndicator/index.d.ts

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

package/dist/esm/components/loadingIndicator/index.js

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

package/dist/esm/components/loadingIndicator/loadingIndicator.d.ts

@@ -0,0 +1,7 @@
+import { ColorPropsValue, DIVProps } from '../../../types';
+export interface LoadingIndicatorProps extends DIVProps {
+    size?: number;
+    width?: number;
+    color?: ColorPropsValue;
+}
+export declare const LoadingIndicator: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/loadingIndicator/loadingIndicator.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { classnames } from '../../utils';
+import { classes, useStyle } from './loadingIndicator.style';
+import { forwardRef, memo } from 'react';
+export const LoadingIndicator = memo(forwardRef(({ size, width = 2, color = 'primary', ...props }, ref) => {
+    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color, width }), className: classnames(classes.root, props.className), style: {
+            width: size ?? '1em',
+            height: size ?? '1em',
+            ...props.style
+        }, children: _jsx("div", { className: classes.indicator }) }));
+}));

package/dist/esm/components/loadingIndicator/loadingIndicator.style.d.ts

@@ -0,0 +1,7 @@
+import { LoadingIndicatorProps } from './loadingIndicator';
+export declare const classes: {
+    indicator: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color, width }: Required<Pick<LoadingIndicatorProps, 'color' | 'width'>>): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,29 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('loading-indicator', [
+    'indicator'
+]);
+export function useStyle({ color, width }) {
+    const colorValue = useColor(color);
+    const borderWidth = width;
+    return useCss(({ mode }) => {
+        const borderColor = mode === 'light' ? Color(colorValue).alpha(.6).string() : colorValue;
+        return css `
+            .${classes.indicator} {
+                width: 100%;
+                height: 100%;
+                aspect-ratio: 1;
+                border-radius: 50%;
+                border: ${borderWidth}px solid;
+                border-color: ${borderColor} transparent;
+                animation: ${spinning} 1.2s infinite;
+            }
+        `;
+    }, [colorValue, borderWidth]);
+}
+const spinning = keyframes `
+    100% {
+        transform: rotate(1.5turn)
+    }
+`;

package/dist/esm/components/menu/index.d.ts

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

package/dist/esm/components/menu/index.js

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

package/dist/esm/components/menu/menu.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id, Obj, Size } from '../../../types';
+import { MenuItemProps } from '../menuItem';
+export type ForwardProps = {
+    size?: Size;
+    showCheckbox?: boolean;
+    ellipsis?: boolean;
+    indent?: number;
+};
+export interface ItemPropType extends Omit<MenuItemProps, 'children'>, Obj {
+    children?: ItemPropType[];
+}
+interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends ForwardProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    items?: I[];
+    primaryKey?: keyof I;
+    labelKey?: keyof I;
+    childrenKey?: keyof I;
+    defaultExpanded?: V[];
+    expanded?: V[];
+    onExpandedChange?(expanded: V[], itemValue: V, isExpand: boolean): void;
+}
+interface MenuSingleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+interface MenuMultipleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuSingleProps<I, V> | MenuMultipleProps<I, V>;
+interface MenuContext<V extends Id = Id> extends ForwardProps {
+    inMenu?: boolean;
+    expandedSet?: Set<V>;
+    setExpanded?(key: V, expanded: boolean): void;
+    multiple?: boolean;
+    selected?: V | V[];
+    toggleSelected?(key: V): void;
+}
+export declare function useMenuContext<V extends Id = Id>(): MenuContext<V>;
+export declare const Menu: <I extends ItemPropType, V extends Id = Id>(props: MenuProps<I, V>) => ReactElement;
+export {};

package/dist/esm/components/menu/menu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, forwardRef, memo, useContext, useMemo } from 'react';
+import { style } from './menu.style';
+import { MenuItem } from '../menuItem';
+import { useControlled, useControlledSelect } from '../../utils';
+import { useTheme } from '../app';
+const menuContext = createContext({});
+export function useMenuContext() {
+    const theme = useTheme();
+    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = useContext(menuContext);
+    return { size, ellipsis, indent, ...context };
+}
+export const Menu = memo(forwardRef(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+// 以下属性传递给<MenuItem />
+size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded);
+    const expandedSet = useMemo(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const setExpanded = (key, isExpand) => {
+        setInnerExpanded(o => {
+            const newExpanded = isExpand ? [...o, key] : o.filter(k => k !== key);
+            onExpandedChange?.(newExpanded, key, isExpand);
+            return newExpanded;
+        });
+    };
+    const [innerValue, toggleSelected] = useControlledSelect({ multiple, defaultValue, value, onChange });
+    const renderItems = (items) => {
+        return items?.map((p, i) => _jsx(MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
+    };
+    return (_jsx("div", { ...props, ref: ref, css: style, children: _jsx(menuContext.Provider, { value: useMemo(() => ({
+                inMenu: true,
+                expandedSet, setExpanded, multiple, selected: innerValue.current, toggleSelected,
+                size, showCheckbox, ellipsis, indent
+            }), [
+                expandedSet, multiple, innerValue.current,
+                size, showCheckbox, ellipsis, indent
+            ]), children: props.children ?? renderItems(items) }) }));
+}));

package/dist/esm/components/menu/menu.style.d.ts

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,7 @@
+import { css } from '@emotion/react';
+import { defineClasses } from '../../utils';
+import { menuListPadding } from '../menuItem/menuItem.style';
+export const classes = defineClasses('menu');
+export const style = css `
+    padding: ${menuListPadding}px;
+`;

package/dist/esm/components/menuItem/index.d.ts

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

package/dist/esm/components/menuItem/index.js

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

package/dist/esm/components/menuItem/menuItem.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+import { CheckboxProps } from '../checkbox';
+export interface MenuItemProps extends Omit<DIVProps, 'prefix'> {
+    value?: string | number;
+    size?: Size;
+    color?: ColorPropsValue;
+    /**
+     * 是否强调颜色，@default false
+     * 如果设置有{@link color}，建议同时设置emphasized为true
+     */
+    emphasized?: boolean;
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    showCheckbox?: boolean;
+    checkboxProps?: CheckboxProps;
+    ellipsis?: boolean;
+    prefix?: ReactNode;
+    label?: ReactNode;
+    suffix?: ReactNode;
+    /** 当label不为string时，该字段会取代label用来搜索 */
+    searchToken?: string;
+    /** @private 内部使用，缩进的层级 */
+    _level?: number;
+    indent?: number;
+    expandIcon?: ReactNode | ((expanded: boolean) => ReactNode);
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?(expanded: boolean): void;
+}
+export declare const MenuItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/menuItem/menuItem.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { menuListPadding, childrenStyle, classes, paddingHorizontal, useStyle } from './menuItem.style';
+import { classnames, isUnset, toArray, useControlled } from '../../utils';
+import { Checkbox } from '../checkbox';
+import { usePopperContext } from '../popper';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { useMenuContext } from '../menu';
+import { Collapse } from '../transitionBase';
+export const MenuItem = memo(forwardRef(({ value, size, color = 'primary', emphasized = false, selected, focused = false, disabled = false, showCheckbox, checkboxProps, ellipsis, prefix, label, suffix, searchToken, _level = 0, indent, expandIcon, defaultExpanded = false, expanded, onExpandedChange, ...props }, ref) => {
+    const context = useMenuContext();
+    size ??= context.size;
+    showCheckbox ??= context.showCheckbox;
+    ellipsis ??= context.ellipsis;
+    indent ??= context.indent;
+    if (context.inMenu && !isUnset(value)) {
+        expanded ??= context.expandedSet?.has(value);
+        const oldOnExpandedChange = onExpandedChange;
+        onExpandedChange = exp => {
+            oldOnExpandedChange?.(exp);
+            context.setExpanded(value, exp);
+        };
+        selected ??= toArray(context.selected)?.includes(value);
+    }
+    const { autoClose, setOpen } = usePopperContext();
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded, onExpandedChange);
+    const clickHandler = (e) => {
+        if (disabled) {
+            return;
+        }
+        props.onClick?.(e);
+        props.children
+            ? setInnerExpanded(o => !o)
+            : !isUnset(value) && context.toggleSelected?.(value);
+        autoClose && setOpen(false);
+    };
+    const renderExpandIcon = () => {
+        if (!props.children) {
+            return;
+        }
+        if (!expandIcon) {
+            return (_jsx("div", { className: classes.arrow, "data-open": innerExpanded.current, children: _jsx(CaretDownOutlined, {}) }));
+        }
+        if (typeof expandIcon === 'function') {
+            return expandIcon(innerExpanded.current);
+        }
+        return expandIcon;
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), style: {
+                    paddingLeft: _level > 0
+                        ? _level * indent + paddingHorizontal[size] - menuListPadding
+                        : void 0,
+                    ...props.style
+                }, "data-size": size, "data-emphasized": emphasized, "data-selected": selected, "data-focused": focused, "data-disabled": disabled, "data-ellipsis": ellipsis, onClick: clickHandler, children: [showCheckbox &&
+                        _jsx("div", { className: classes.checkbox, children: _jsx(Checkbox, { checked: selected, ...checkboxProps }) }), !!prefix &&
+                        _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: label }), !!suffix &&
+                        _jsx("div", { className: classes.suffix, children: suffix }), renderExpandIcon()] }), !!props.children &&
+                _jsx(Collapse, { css: childrenStyle, className: classes.children, in: innerExpanded.current, children: _jsx("div", { className: classes.childrenWrap, children: Children.map(props.children, child => isValidElement(child)
+                            ? cloneElement(child, {
+                                _level: _level + 1
+                            })
+                            : child) }) })] }));
+}));

package/dist/esm/components/menuItem/menuItem.style.d.ts

@@ -0,0 +1,20 @@
+import { MenuItemProps } from './menuItem';
+export declare const classes: {
+    children: string;
+    content: string;
+    prefix: string;
+    checkbox: string;
+    suffix: string;
+    childrenWrap: string;
+    arrow: string;
+} & {
+    root: string;
+};
+export declare const paddingHorizontal: {
+    small: number;
+    medium: number;
+    large: number;
+};
+export declare function useStyle({ color }: Required<Pick<MenuItemProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare const menuListPadding = 4;
+export declare const childrenStyle: () => import("@emotion/react").SerializedStyles;