@canlooks/can-ui 0.0.1

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

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

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

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

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

@@ -0,0 +1,62 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { DraggableOptions } from '../../utils';
+import { ColorPropsValue, DIVProps } from '../../../types';
+import { TooltipProps } from '../tooltip';
+export interface MarkItem extends DIVProps {
+    label?: ReactNode;
+    /**
+     * label的位置
+     * {@link SliderBaseProps.orientation}为"horizontal"时，@default "bottom"
+     * {@link SliderBaseProps.orientation}为"vertical"时，@default "right"
+     */
+    labelPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    value: number;
+}
+interface SliderBaseProps extends Omit<DIVProps, 'defaultValue' | 'onChange' | 'prefix'> {
+    color?: ColorPropsValue;
+    orientation?: 'horizontal' | 'vertical';
+    /** variant只改变滑块的样式 */
+    variant?: 'filled' | 'outlined';
+    /** inset为true时，滑块整体会嵌入轨道，两侧都无法滑出轨道；否则会以滑块中心点为参考，两侧可能会超出轨道。@default false */
+    inset?: boolean;
+    /** 轨道 */
+    railSize?: number;
+    railProps?: DIVProps;
+    renderRail?(value: number, railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
+    renderRail?(value: [number, number], railProps: HTMLAttributes<HTMLDivElement>): ReactNode;
+    /** 滑块 */
+    handleSize?: number;
+    handleProps?: JSX.IntrinsicElements['button'];
+    /** 禁用默认的滑块外边框 */
+    disableHandleOutline?: boolean;
+    /** 渲染滑块，range模式时，改方法会触发两次 */
+    renderHandle?(value: number, handleProps: HTMLAttributes<HTMLElement>): ReactNode;
+    tooltipProps?: TooltipProps;
+    min?: number;
+    max?: number;
+    /** 滑块拖动每格的值，为null时必须配合marks使用，滑块只能在marks上 */
+    step?: number | null;
+    marks?: MarkItem[];
+    /** mark中的标签与滑动轨道的距离，@default 6 */
+    markLabelOffset?: number;
+    markSize?: number;
+    disableTrack?: boolean;
+    draggableOptions?: DraggableOptions;
+}
+export interface SliderSingleProps extends SliderBaseProps {
+    defaultValue?: number;
+    value?: number;
+    onChange?(value: number): void;
+    prefix?: ReactNode | ((value: number) => ReactNode);
+    suffix?: ReactNode | ((value: number) => ReactNode);
+}
+export interface SliderRangeProps extends SliderBaseProps {
+    defaultValue?: [number, number];
+    value?: [number, number];
+    onChange?(value: [number, number]): void;
+    prefix?: ReactNode | ((value: [number, number]) => ReactNode);
+    suffix?: ReactNode | ((value: [number, number]) => ReactNode);
+}
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+export declare const Slider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<(Omit<SliderSingleProps, "ref"> | Omit<SliderRangeProps, "ref">) & import("react").RefAttributes<HTMLDivElement>>>;
+export {};

package/dist/esm/components/slider/slider.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { classnames, cloneRef, isUnset, useControlled, useDraggableHandle } from '../../utils';
+import { classes, useStyle } from './slider.style';
+import { Tooltip } from '../tooltip';
+import { useTheme } from '../app';
+export const Slider = memo(forwardRef(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }, ref) => {
+    const { spacing } = useTheme();
+    markLabelOffset ??= inset ? spacing[1] : spacing[2];
+    const orderedMarks = useMemo(() => {
+        return marks ? [...marks].sort((a, b) => a.value - b.value) : void 0;
+    }, [marks]);
+    // 处理value，让滑块在合理的位置
+    const treatValue = (value) => {
+        const fn = (value) => {
+            value = Math.max(min, Math.min(max, value));
+            if (typeof step === 'number') {
+                // 算法：转成value，减去最小值，除以step，四舍五入，乘以step，加上最小值
+                return Math.round((value - min) / step) * step + min;
+            }
+            if (!marks?.length) {
+                return value;
+            }
+            // step为null时，滑块只能在mark上
+            if (value <= orderedMarks[0].value) {
+                return orderedMarks[0].value;
+            }
+            if (value >= orderedMarks[orderedMarks.length - 1].value) {
+                return orderedMarks[orderedMarks.length - 1].value;
+            }
+            const betweenIndex = orderedMarks.findIndex(mark => mark.value >= value);
+            if (value - orderedMarks[betweenIndex - 1].value < orderedMarks[betweenIndex].value - value) {
+                return orderedMarks[betweenIndex - 1].value;
+            }
+            return orderedMarks[betweenIndex].value;
+        };
+        return Array.isArray(value)
+            ? value.slice(0, 2).sort((a, b) => a - b).map(fn)
+            : fn(value);
+    };
+    const treatedDefaultValue = useMemo(() => {
+        return treatValue(defaultValue);
+    }, []);
+    const treatedValue = useMemo(() => {
+        return !isUnset(value) ? treatValue(value) : void 0;
+    }, [value]);
+    const [innerValue, _setInnerValue] = useControlled(treatedDefaultValue, treatedValue, onChange);
+    const setInnerValue = (value, index) => {
+        const newValue = treatValue(value);
+        if (Array.isArray(innerValue.current)) {
+            if (innerValue.current[index] !== newValue) {
+                innerValue.current[index] = index
+                    ? Math.max(innerValue.current[0], newValue)
+                    : Math.min(innerValue.current[1], newValue);
+                _setInnerValue([...innerValue.current]);
+            }
+        }
+        else {
+            innerValue.current !== newValue && _setInnerValue(newValue);
+        }
+    };
+    /**
+     * -----------------------------------------------------------------
+     * tooltip跟随滑块移动
+     */
+    const tooltipRefs = useRef([]);
+    useEffect(() => {
+        tooltipRefs.current[dragStartData.current?.handleIndex || 0]?.fit();
+    }, [innerValue.current]);
+    /**
+     * -----------------------------------------------------------------
+     * 百分比与数值的相互转换
+     */
+    const valueToPercent = (value) => {
+        return (value - min) / (max - min) * 100;
+    };
+    const percentToValue = (percent) => {
+        return (percent / 100) * (max - min) + min;
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 拖拽
+     */
+    const railRef = useRef(null);
+    const handleRefs = useRef([]);
+    const dragStartData = useRef();
+    const draggableHandle = useDraggableHandle({
+        ...draggableOptions,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            const railLength = orientation === 'horizontal' ? railRef.current.offsetWidth : railRef.current.offsetHeight;
+            let handleIndex = 0;
+            let percent;
+            if (e.currentTarget === railRef.current) {
+                // 点击轨道，需要直接滑动至点击处，并从点击处开始拖拽
+                let offset;
+                if (orientation === 'horizontal') {
+                    offset = e.clientX - railRef.current.getBoundingClientRect().x;
+                    if (Array.isArray(innerValue.current)) {
+                        const xArr = handleRefs.current.map(r => r.getBoundingClientRect().x);
+                        if (e.clientX <= xArr[0]) {
+                            handleIndex = 0;
+                        }
+                        else if (e.clientX >= xArr[1]) {
+                            handleIndex = 1;
+                        }
+                        else {
+                            handleIndex = e.clientX - xArr[0] < xArr[1] - e.clientX ? 0 : 1;
+                        }
+                    }
+                }
+                else {
+                    const { y, height } = railRef.current.getBoundingClientRect();
+                    offset = y + height - e.clientY;
+                    if (Array.isArray(innerValue.current)) {
+                        const yArr = handleRefs.current.map(r => r.getBoundingClientRect().y);
+                        if (e.clientY >= yArr[0]) {
+                            handleIndex = 0;
+                        }
+                        else if (e.clientY <= yArr[1]) {
+                            handleIndex = 1;
+                        }
+                        else {
+                            handleIndex = yArr[0] - e.clientY < e.clientY - yArr[1] ? 0 : 1;
+                        }
+                    }
+                }
+                percent = offset / railLength * 100;
+                setInnerValue(percentToValue(percent), handleIndex);
+                setTimeout(() => {
+                    handleRefs.current[handleIndex].focus();
+                });
+            }
+            else {
+                // 拖拽滑块
+                if (Array.isArray(innerValue.current)) {
+                    handleIndex = handleRefs.current.indexOf(e.currentTarget);
+                    percent = valueToPercent(innerValue.current[handleIndex]);
+                }
+                else {
+                    percent = valueToPercent(innerValue.current);
+                }
+            }
+            dragStartData.current = { railLength, percent, handleIndex };
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            const { percent, railLength, handleIndex } = dragStartData.current;
+            const delta = orientation === 'horizontal' ? info.deltaX : -info.deltaY;
+            setInnerValue(percentToValue(percent + delta / railLength * 100), handleIndex);
+        }
+    });
+    /**
+     * -----------------------------------------------------------------
+     * 渲染滑块
+     */
+    const valueIsArray = Array.isArray(innerValue.current);
+    const renderHandleFn = () => {
+        const fn = (value, index = 0) => {
+            const _handleProps = {
+                key: index,
+                ...handleProps,
+                ref: cloneRef(r => handleRefs.current[index] = r, handleProps?.ref),
+                className: classnames(classes.handle, handleProps?.className),
+                style: {
+                    width: handleSize,
+                    height: handleSize,
+                    ...orientation === 'horizontal'
+                        ? {
+                            top: '50%',
+                            left: valueToPercent(value) + '%'
+                        }
+                        : {
+                            bottom: valueToPercent(value) + '%',
+                            left: '50%'
+                        },
+                    ...handleProps?.style
+                },
+                onPointerDown(e) {
+                    e.stopPropagation();
+                    handleProps?.onPointerDown?.(e);
+                    draggableHandle.onPointerDown(e);
+                }
+            };
+            return renderHandle
+                ? renderHandle(value, _handleProps)
+                : _jsx(Tooltip, { popperRef: r => tooltipRefs.current[index] = r, title: valueIsArray ? innerValue.current[index] : innerValue.current, trigger: ['hover', 'focus'], placement: orientation === 'horizontal' ? 'top' : 'left', ...tooltipProps, children: _createElement("button", { ..._handleProps, key: index }) }, index);
+        };
+        return valueIsArray
+            ? innerValue.current.map(fn)
+            : fn(innerValue.current);
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 渲染轨道
+     */
+    const renderRailFn = () => {
+        const _railProps = {
+            ...railProps,
+            ref: railRef,
+            className: classnames(classes.rail, railProps?.className),
+            style: {
+                ...orientation === 'horizontal'
+                    ? {
+                        height: railSize,
+                        [inset ? 'padding' : 'margin']: `0 ${handleSize / 2}px`
+                    }
+                    : {
+                        width: railSize,
+                        [inset ? 'padding' : 'margin']: `${handleSize / 2}px 0`
+                    },
+                ...railProps?.style
+            },
+            onPointerDown: e => {
+                railProps?.onPointerDown?.(e);
+                draggableHandle.onPointerDown(e);
+            },
+            children: (_jsxs("div", { className: classes.railWrap, children: [!disableTrack &&
+                        _jsx("div", { className: classes.track, style: valueIsArray
+                                ? (orientation === 'horizontal'
+                                    ? {
+                                        width: valueToPercent(innerValue.current[1] - innerValue.current[0]) + '%',
+                                        inset: `0 auto 0 ${valueToPercent(innerValue.current[0])}%`
+                                    }
+                                    : {
+                                        height: valueToPercent(innerValue.current[1] - innerValue.current[0]) + '%',
+                                        inset: `auto 0 ${valueToPercent(innerValue.current[0])}% 0`
+                                    })
+                                : (orientation === 'horizontal'
+                                    ? {
+                                        width: valueToPercent(innerValue.current) + '%',
+                                        inset: '0 auto 0 0'
+                                    }
+                                    : {
+                                        height: valueToPercent(innerValue.current) + '%',
+                                        inset: 'auto 0 0 0'
+                                    }), children: inset && !valueIsArray &&
+                                _jsx("div", { className: classes.trackCorner, style: orientation === 'horizontal'
+                                        ? {
+                                            width: -railSize / 2
+                                        }
+                                        : { bottom: -railSize / 2 } }) }), marks?.map(({ value, label, labelPlacement = orientation === 'horizontal' ? 'bottom' : 'right', ...m }) => _createElement("div", { ...m, key: value, className: classes.mark, style: {
+                            ...orientation === 'horizontal'
+                                ? {
+                                    height: inset ? '8px' : 'calc(100% + 4px)',
+                                    top: '50%',
+                                    left: `${valueToPercent(value)}%`
+                                }
+                                : {
+                                    width: inset ? '8px' : 'calc(100% + 4px)',
+                                    bottom: `${valueToPercent(value)}%`,
+                                    left: '50%'
+                                },
+                            ...m.style
+                        }, "data-active": valueIsArray
+                            ? innerValue.current[0] <= value && value <= innerValue.current[1]
+                            : innerValue.current >= value },
+                        _jsx("div", { className: classes.label, style: {
+                                ...labelPlacement === 'bottom'
+                                    ? {
+                                        top: markLabelOffset + railSize / 2,
+                                        left: '50%',
+                                        transform: 'translateX(-50%)'
+                                    }
+                                    : {
+                                        top: '50%',
+                                        left: markLabelOffset + railSize / 2,
+                                        transform: 'translateY(-50%)'
+                                    }
+                            }, children: label }))), renderHandleFn()] }))
+        };
+        return renderRail ? renderRail(innerValue.current, _railProps) : _jsx("div", { ..._railProps });
+    };
+    /**
+     * -----------------------------------------------------------------
+     * 渲染前后缀
+     */
+    const renderExtra = (prop) => {
+        return typeof prop === 'function' ? prop(innerValue.current) : prop;
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-orientation": orientation, "data-variant": variant, "data-inset": inset, "data-disable-outline": disableHandleOutline, children: [!!prefix &&
+                _jsx("div", { className: classes.prefix, children: renderExtra(prefix) }), renderRailFn(), !!suffix &&
+                _jsx("div", { className: classes.suffix, children: renderExtra(suffix) })] }));
+}));

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

@@ -0,0 +1,17 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    prefix: string;
+    label: string;
+    mark: string;
+    track: string;
+    suffix: string;
+    rail: string;
+    railWrap: string;
+    trackCorner: string;
+    handle: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,183 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('slider', [
+    'rail',
+    'railWrap',
+    'track',
+    'trackCorner',
+    'mark',
+    'label',
+    'handle',
+    'prefix',
+    'suffix'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, mode, gray, divider, background, easing }) => {
+        const c = Color(colorValue);
+        const lighter = c.lighten(.1).hex();
+        const darker = c.darken(.1).hex();
+        const outlineColor = c.alpha(.15).string();
+        return css `
+            min-height: 24px;
+            display: flex;
+            align-items: center;
+            gap: ${spacing[2]}px;
+
+            &[data-inset=true] {
+                min-height: 0;
+            }
+
+            .${classes.rail} {
+                flex: 1;
+                border-radius: 1000em;
+                cursor: pointer;
+                background-color: ${gray(.1)};
+                transition: background-color .2s ${easing.easeOut};
+                touch-action: none;
+
+                &:hover {
+                    background-color: ${mode === 'light' ? divider : gray(.05)};
+                }
+
+                .${classes.railWrap} {
+                    height: 100%;
+                    position: relative;
+                    border-radius: inherit;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                min-height: auto;
+                height: 100%;
+                flex-direction: column;
+
+                .${classes.rail} {
+                    height: 100%;
+                }
+
+                .${classes.handle} {
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            .${classes.handle} {
+                cursor: pointer;
+                padding: 0;
+                border-radius: 50%;
+                border: 0 solid ${colorValue};
+                position: absolute;
+                z-index: 1;
+                transform: translate(-50%, -50%);
+            }
+    
+            &:not([data-disable-outline=true]) {
+                .${classes.handle} {
+                    outline: 0 solid ${outlineColor};
+                }
+            }
+    
+            &[data-variant=filled] {
+                .${classes.handle} {
+                    transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.easeOut};
+                    background-color: ${colorValue};
+                    
+                    &:hover {
+                        outline-width: 6px;
+                        background-color: ${lighter};
+                    }
+    
+                    &:active {
+                        transition: background-color 0s, outline-width .2s ${easing.swing};
+                        background-color: ${darker};
+                        outline-width: 9px;
+                    }
+    
+                    &:focus {
+                        transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.swing};
+                        outline-width: 9px;
+                    }
+                }
+            }
+    
+            &[data-variant=outlined] {
+                .${classes.handle} {
+                    transition: outline-width .2s ${easing.easeOut};
+                    background-color: ${background.card};
+                    border-width: 2px;
+    
+                    &:hover {
+                        outline-width: 6px;
+                    }
+    
+                    &:active,
+                    &:focus {
+                        transition: outline-width .2s ${easing.swing};
+                        outline-width: 9px;
+                    }
+                }
+            }
+
+            .${classes.track} {
+                position: absolute;
+                background-color: ${colorValue};
+
+                &:before {
+                    content: '';
+                    aspect-ratio: 1;
+                    border-radius: 50%;
+                    position: absolute;
+                    background-color: inherit;
+                }
+            }
+
+            &[data-orientation=horizontal] {
+                \.${classes.track}:before {
+                    height: 100%;
+                    top: 0;
+                    left: 0;
+                    transform: translateX(-50%);
+                }
+            }
+
+            &[data-orientation=vertical] {
+                \.${classes.track}:before {
+                    width: 100%;
+                    bottom: 0;
+                    left: 0;
+                    transform: translateY(50%);
+                }
+            }
+
+            .${classes.mark} {
+                aspect-ratio: 1;
+                border: 2px solid ${gray(mode === 'light' ? .2 : .1)};
+                border-radius: 50%;
+                background-color: ${background.card};
+                position: absolute;
+                transform: translate(-50%, -50%);
+
+                &[data-active=true] {
+                    border-color: ${colorValue};
+                }
+
+                .${classes.label} {
+                    position: absolute;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                .${classes.mark} {
+                    transform: translate(-50%, 50%);
+                }
+            }
+
+            &[data-inset=true] {
+                .${classes.mark} {
+                    z-index: 2;
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TransitionBaseProps } from '../transitionBase';
+import { BlockPlacement, ColorPropsValue, DefineElement } from '../../../types';
+export interface SnackbarBaseProps extends TransitionBaseProps<HTMLDivElement> {
+    variant?: 'filled' | 'plain';
+    color?: ColorPropsValue;
+    icon?: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
+    showClose?: ReactNode;
+    placement?: BlockPlacement;
+    /** 自动关闭的延迟，为0表示不自动关闭，@default 3000 (ms) */
+    duration?: number;
+    onAutoClose?(): void;
+    onCloseButtonClick?(e: React.MouseEvent<HTMLButtonElement>): void;
+}
+export declare class SnackbarBaseMethods<P extends SnackbarBaseProps = SnackbarBaseProps> {
+    info(content: ReactNode): Promise<void>;
+    info(props: P): Promise<void>;
+    success(content: ReactNode): Promise<void>;
+    success(props: P): Promise<void>;
+    warning(content: ReactNode): Promise<void>;
+    warning(props: P): Promise<void>;
+    error(content: ReactNode): Promise<void>;
+    error(props: P): Promise<void>;
+}
+export declare const SnackbarBase: import("react").MemoExoticComponent<({ methods, useTo, max, container }: {
+    methods: SnackbarBaseMethods;
+    useTo: "message" | "notification";
+    max?: number;
+    container?: DefineElement;
+}) => import("react").ReactPortal>;
+interface SnackbarBaseItemProps extends Omit<SnackbarBaseProps, 'duration' | 'onAutoClose'> {
+    id: string;
+    type: keyof SnackbarBaseMethods;
+    useTo: 'message' | 'notification';
+    resolve(): void;
+}
+export declare const SnackbarBaseItem: import("react").MemoExoticComponent<({ id, type, useTo, resolve, variant, color, icon, title, content, showClose, placement, onCloseButtonClick, ...props }: SnackbarBaseItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export {};