@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { createElement as _createElement } from "@emotion/react";
+import { isValidElement, memo, useEffect, useRef, useState } from 'react';
+import { Collapse, Slide } from '../transitionBase';
+import { classnames, getEazyID, useColor } from '../../utils';
+import { classes, style } from './snackbarBase.style';
+import { TransitionGroup } from 'react-transition-group';
+import { StatusIcon, statusMapToIcon } from '../status';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button } from '../button';
+import { createPortal } from 'react-dom';
+export class SnackbarBaseMethods {
+    async info(_) { }
+    async success(_) { }
+    async warning(_) { }
+    async error(_) { }
+}
+// placement对应stacks的index
+const placementToIndex = {
+    topLeft: 0,
+    leftTop: 0,
+    top: 1,
+    topRight: 2,
+    rightTop: 2,
+    bottomLeft: 3,
+    leftBottom: 3,
+    bottom: 4,
+    bottomRight: 5,
+    rightBottom: 5
+};
+export const SnackbarBase = memo(({ methods, useTo, max = useTo === 'message' ? 5 : 4, container }) => {
+    const [stacks, setStacks] = useState([]);
+    const timers = useRef([]);
+    useEffect(() => () => {
+        timers.current.forEach(timer => clearTimeout(timer));
+    }, []);
+    const defineMethod = (type) => (props) => new Promise(resolve => {
+        const propsObject = typeof props === 'object' && !isValidElement(props)
+            ? props
+            : { content: props };
+        const { placement = useTo === 'message' ? 'top' : 'topRight', duration = useTo === 'message' ? 3000 : 5000, ...restProps } = propsObject;
+        const index = placementToIndex[placement];
+        let id = getEazyID('snackbar');
+        const onCloseButtonClick = () => {
+            setStacks(o => {
+                o[index] = o[index].filter(s => s.id !== id);
+                return [...o];
+            });
+        };
+        setStacks(o => {
+            const targetStack = o[index] ||= [];
+            targetStack.push({
+                ...restProps,
+                id,
+                type,
+                useTo,
+                resolve,
+                placement,
+                onCloseButtonClick
+            });
+            if (o[index].length > max) {
+                o[index].shift();
+            }
+            o[index] = [...o[index]];
+            return [...o];
+        });
+        if (duration) {
+            timers.current.push(setTimeout(() => {
+                restProps.onAutoClose?.();
+                onCloseButtonClick();
+            }, duration));
+        }
+    });
+    methods.info = defineMethod('info');
+    methods.success = defineMethod('success');
+    methods.warning = defineMethod('warning');
+    methods.error = defineMethod('error');
+    const css = style();
+    const containerEl = (typeof container === 'function' ? container() : container) || document.body;
+    return createPortal(stacks.flatMap((stack, i) => stack
+        ? _jsx(TransitionGroup, { css: css, className: classes.root, "data-place": i, "data-use-to": useTo, children: stack.map(p => _createElement(SnackbarBaseItem, { ...p, key: p.id })) }, i)
+        : []), containerEl);
+});
+/**
+ * ----------------------------------------------------------------------
+ * Item部分
+ */
+// placement对应的动画方向
+const placementToDirection = {
+    topLeft: 'right',
+    leftTop: 'right',
+    top: 'down',
+    topRight: 'left',
+    rightTop: 'left',
+    bottomLeft: 'right',
+    leftBottom: 'right',
+    bottom: 'up',
+    bottomRight: 'left',
+    rightBottom: 'left'
+};
+export const SnackbarBaseItem = memo(({ id, type, useTo, resolve, variant = 'plain', color = 'primary', icon, title, content, showClose = useTo === 'notification', placement, onCloseButtonClick, ...props }) => {
+    const onExited = () => {
+        props.onExited?.();
+        resolve();
+    };
+    const colorValue = useColor(color);
+    const Icon = statusMapToIcon[type];
+    const renderedIcon = icon ?? (variant === 'plain'
+        ? _jsx(StatusIcon, { status: type })
+        : _jsx(Icon, {}));
+    const closeHandler = (e) => {
+        e.stopPropagation();
+        onCloseButtonClick?.(e);
+    };
+    return (_jsx(Collapse, { in: props.in, className: classes.itemWrap, onExited: onExited, children: _jsxs(Slide, { direction: placementToDirection[placement], ...props, className: classnames(classes.item, props.className), style: {
+                backgroundColor: variant === 'filled' ? colorValue : void 0,
+                ...props.style
+            }, "data-variant": variant, "data-use-to": useTo, children: [!!renderedIcon &&
+                    _jsx("div", { className: classes.icon, children: renderedIcon }), !!(title || content) &&
+                    _jsxs("div", { className: classes.text, children: [!!title &&
+                                _jsx("div", { className: classes.title, children: title }), !!content &&
+                                _jsx("div", { className: classes.content, children: content })] }), showClose &&
+                    _jsx(Button, { variant: "text", shape: "circular", color: "disabled", size: "small", className: classes.close, onClick: closeHandler, children: _jsx(CloseOutlined, {}) })] }) }));
+});

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

@@ -0,0 +1,13 @@
+export declare const classes: {
+    text: string;
+    title: string;
+    content: string;
+    icon: string;
+    titleRow: string;
+    close: string;
+    itemWrap: string;
+    item: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,144 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { zIndex } from '../app';
+import { style as appStyle } from '../app/app.style';
+export const classes = defineClasses('snackbar-base', [
+    'itemWrap',
+    'item',
+    'icon',
+    'text',
+    'titleRow',
+    'title',
+    'close',
+    'content'
+]);
+export const style = defineCss(({ text, fontSize, spacing, background, borderRadius }) => [
+    appStyle,
+    css `
+        color: ${text.primary};
+        font-size: ${fontSize}px;
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        padding: ${spacing[5]}px;
+        position: fixed;
+        z-index: ${zIndex.snackbar};
+        pointer-events: none;
+
+        &[data-use-to=notification] {
+            flex-direction: column-reverse;
+        }
+
+        .${classes.itemWrap} {
+            display: flex;
+            align-items: flex-start;
+            overflow: visible;
+        }
+
+        &[data-place="0"], &[data-place="1"], &[data-place="2"] {
+            top: 0;
+        }
+
+        &[data-place="3"], &[data-place="4"], &[data-place="5"] {
+            bottom: 0;
+        }
+
+        &[data-place="0"],
+        &[data-place="3"] {
+            left: 0;
+
+            .${classes.itemWrap} {
+                justify-content: flex-start;
+            }
+        }
+
+        &[data-place="1"],
+        &[data-place="4"] {
+            left: 50%;
+            transform: translateX(-50%);
+
+            .${classes.itemWrap} {
+                justify-content: center;
+            }
+        }
+
+        &[data-place="2"],
+        &[data-place="5"] {
+            right: 0;
+
+            .${classes.itemWrap} {
+                justify-content: flex-end;
+            }
+        }
+
+        &[data-place="1"] .${classes.item} {
+            transform-origin: left top;
+        }
+
+        &[data-place="2"] .${classes.item} {
+            transform-origin: top;
+        }
+
+        &[data-place="3"] .${classes.item} {
+            transform-origin: right top;
+        }
+
+        &[data-place="4"] .${classes.item} {
+            transform-origin: left bottom;
+        }
+
+        &[data-place="5"] .${classes.item} {
+            transform-origin: bottom;
+        }
+
+        &[data-place="6"] .${classes.item} {
+            transform-origin: right bottom;
+        }
+
+        .${classes.item} {
+            pointer-events: all;
+            max-width: 60%;
+            display: flex;
+            gap: ${spacing[4]}px;
+            box-shadow: 2px 4px 18px rgba(0, 0, 0, .16);
+            padding: ${spacing[3]}px ${spacing[4]}px;
+            margin-bottom: ${spacing[4]}px;
+            border-radius: ${borderRadius}px;
+            background-color: ${background.card};
+            
+            &[data-variant=filled] {
+                color: #ffffff;
+            }
+            
+            .${classes.icon} {
+                line-height: 20px;
+                font-size: ${17 / 14}em;
+            }
+
+            .${classes.text} {
+                flex: 1;
+                
+                .${classes.title} {
+                    flex: 1;
+                    font-weight: bold;
+                    font-size: ${15 / 14}em;
+
+                    & + .${classes.content} {
+                        margin-top: 4px;
+                    }
+                }
+            }
+
+            .${classes.close} {
+                margin: -4px -4px 0 0;
+            }
+        }
+
+        &[data-use-to=notification] {
+            .${classes.item} {
+                width: 360px;
+            }
+        }
+    `
+]);

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ReactElement, Ref } from 'react';
+import { Arguments } from '@dnd-kit/sortable/dist/hooks/useSortable';
+export type SortableItemProps<P> = Omit<P, 'component' | 'id' | 'disabled' | 'sortableArguments'> & {
+    component?: any;
+    id: string | number;
+    disabled?: boolean;
+    sortableArguments?: Arguments;
+};
+export declare const SortableItem: <P>(props: SortableItemProps<P> & {
+    ref?: Ref<any>;
+}) => ReactElement;

package/dist/esm/components/sortableItem/sortableItem.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cloneRef } from '../../utils';
+export const SortableItem = forwardRef(({ component: Component = 'div', id, disabled, sortableArguments, ...props }, ref) => {
+    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+        ...sortableArguments,
+        disabled,
+        id
+    });
+    const preventDefaultCallback = useRef();
+    const onPointerUp = useCallback(() => {
+        removeListener();
+    }, []);
+    const onTouchStart = useCallback(() => {
+        addEventListener('touchmove', preventDefaultCallback.current = e => {
+            e.cancelable && e.preventDefault();
+        }, { passive: false });
+        addEventListener('pointerup', onPointerUp);
+    }, []);
+    const removeListener = () => {
+        if (preventDefaultCallback.current) {
+            removeEventListener('touchmove', preventDefaultCallback.current);
+            preventDefaultCallback.current = void 0;
+        }
+        removeEventListener('pointerup', onPointerUp);
+    };
+    useEffect(() => removeListener, []);
+    return (_jsx(Component, { style: {
+            transform: CSS.Transform.toString(transform),
+            transition
+        }, ...attributes, ...listeners, "data-dragging": isDragging, ...props, ref: cloneRef(ref, setNodeRef), onTouchStart: disabled ? void 0 : onTouchStart }));
+});

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
+import { ReactNode } from 'react';
+import { DIVProps, Status as IStatus } from '../../../types';
+export type StatusType = IStatus | 'confirm' | 'unknown';
+export declare const statusMapToIcon: {
+    info: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    success: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    warning: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    error: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    confirm: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    unknown: import("react").ForwardRefExoticComponent<Omit<AntdIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+export interface StatusIconProps extends AntdIconProps {
+    icon?: ReactNode;
+    status?: StatusType;
+}
+export declare const StatusIcon: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StatusIconProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>>;
+export interface StatusProps extends DIVProps {
+    icon?: ReactNode;
+    status?: StatusType;
+    /** @default "icon" */
+    variant?: 'icon' | 'dot';
+    label?: ReactNode;
+    /** 是否播放动画，@default false */
+    animation?: boolean;
+}
+export declare const Status: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StatusProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/status/status.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { InfoCircleFilled, CheckCircleFilled, ExclamationCircleFilled, CloseCircleFilled, QuestionCircleFilled } from '@ant-design/icons';
+import { cloneElement, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { classes, style } from './status.style';
+import { classnames, useStatusColor } from '../../utils';
+export const statusMapToIcon = {
+    info: InfoCircleFilled,
+    success: CheckCircleFilled,
+    warning: ExclamationCircleFilled,
+    error: CloseCircleFilled,
+    confirm: QuestionCircleFilled,
+    unknown: QuestionCircleFilled
+};
+export const StatusIcon = memo(forwardRef(({ icon, status = 'unknown', ...props }, ref) => {
+    const DefaultIcon = statusMapToIcon[status];
+    const statusColor = useStatusColor(status);
+    const iconProps = {
+        ...props,
+        ref,
+        className: classnames(classes.icon, props.className),
+        style: useMemo(() => ({
+            color: statusColor,
+            ...props.style
+        }), [statusColor, props.style])
+    };
+    if (typeof icon !== 'undefined') {
+        return isValidElement(icon)
+            ? cloneElement(icon, iconProps)
+            : icon;
+    }
+    return _jsx(DefaultIcon, { ...iconProps });
+}));
+const defaultLabel = {
+    unknown: '未知',
+    confirm: '确认',
+    info: '信息',
+    success: '成功',
+    warning: '警告',
+    error: '错误'
+};
+export const Status = memo(forwardRef(({ icon, status = 'unknown', variant = 'icon', label = defaultLabel[status], animation, ...props }, ref) => {
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-animation": animation, children: [variant === 'icon'
+                ? _jsx(StatusIcon, { icon: icon, status: status })
+                : _jsx("div", { className: classes.dot, style: { backgroundColor: useStatusColor(status) } }), _jsx("div", { className: classes.label, children: label })] }));
+}));

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

@@ -0,0 +1,8 @@
+export declare const classes: {
+    label: string;
+    icon: string;
+    dot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,40 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('status', [
+    'icon',
+    'label',
+    'dot'
+]);
+export const style = defineCss(({ spacing, easing }) => css `
+    display: inline-flex;
+    align-items: center;
+    gap: ${spacing[2]}px;
+
+    .${classes.dot} {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+    }
+
+    &[data-animation=true] {
+        .${classes.icon} {
+            animation: ${statusAnim} .8s ${easing.easeInOut} infinite;
+        }
+    }
+`);
+const statusAnim = keyframes `
+    0% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    80% {
+        transform: scale(1.4);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1.8);
+    }
+`;

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

@@ -0,0 +1,2 @@
+export * from './stepper';
+export * from './step';

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

@@ -0,0 +1,2 @@
+export * from './stepper';
+export * from './step';

package/dist/esm/components/stepper/step.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { StepStatus, StepperSharedProps } from './stepper';
+export type RenderStepInner = ReactNode | ((params: {
+    step: number;
+    status: StepStatus;
+}) => ReactNode);
+export interface StepProps extends StepperSharedProps {
+    indicator?: RenderStepInner;
+    title?: RenderStepInner;
+    prefix?: RenderStepInner;
+    suffix?: RenderStepInner;
+    description?: RenderStepInner;
+    /** @private 该步骤的序号，通常由<Stepper/>组件自动传递 */
+    step?: number;
+}
+export declare const Step: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<StepProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/stepper/step.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classnames } from '../../utils';
+import { classes, useStyle } from './step.style';
+import { CheckOutlined, CloseOutlined, InfoOutlined, MinusOutlined } from '@ant-design/icons';
+import { useStepperContext } from './stepper';
+import { useTheme } from '../app';
+export const Step = memo(forwardRef(({ indicator, title, prefix, suffix, description, step = 0, 
+// 共享属性，从StepperSharedProps继承而来
+size, gap, color, variant, labelPlacement, clickable, status = 'waiting', ...props }, ref) => {
+    const theme = useTheme();
+    const context = useStepperContext();
+    size ??= context.size ?? theme.size;
+    gap ??= context.gap ?? theme.spacing[5];
+    color ??= context.color ?? 'primary';
+    variant ??= context.variant ?? 'number';
+    labelPlacement ??= context.labelPlacement;
+    clickable ??= context.clickable;
+    const renderInner = (prop) => {
+        return typeof prop === 'function' ? prop({ step, status }) : prop;
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color, gap }), className: classnames(classes.root, props.className), "data-size": size, "data-status": status, "data-variant": variant, "data-label-placement": labelPlacement, "data-clickable": clickable, children: [indicator
+                ? renderInner(indicator)
+                : _jsx("div", { className: classes.indicatorWrap, children: _jsx("div", { className: classes.indicator, children: (() => {
+                            if (variant === 'dot') {
+                                return null;
+                            }
+                            switch (status) {
+                                case 'waiting':
+                                case 'processing':
+                                    return step + 1;
+                                case 'finished':
+                                    return _jsx(CheckOutlined, {});
+                                case 'warning':
+                                    return _jsx(InfoOutlined, {});
+                                case 'error':
+                                    return _jsx(CloseOutlined, {});
+                                case 'skipped':
+                                    return _jsx(MinusOutlined, {});
+                            }
+                        })() }) }), _jsxs("div", { className: classes.label, children: [_jsx("div", { className: classes.title, children: _jsx("div", { className: classes.titleText, children: renderInner(title) }) }), _jsx("div", { className: classes.description, children: renderInner(description) })] })] }));
+}));

package/dist/esm/components/stepper/step.style.d.ts

@@ -0,0 +1,12 @@
+import { StepProps } from './step';
+export declare const classes: {
+    title: string;
+    label: string;
+    indicator: string;
+    description: string;
+    indicatorWrap: string;
+    titleText: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color, gap }: Required<Pick<StepProps, 'color' | 'gap'>>): import("@emotion/react").SerializedStyles;