@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,107 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('dialog', [
+    'card',
+    'icon',
+    'content',
+    'titleRow',
+    'title',
+    'close',
+    'body',
+    'bodyWrap',
+    'prefix',
+    'suffix',
+    'footer'
+]);
+export const style = defineCss(({ background, borderRadius, boxShadow, spacing, colors, divider }) => css `
+    .${classes.card} {
+        max-height: 100%;
+        display: flex;
+        background-color: ${background.card};
+        border-radius: ${borderRadius}px;
+        box-shadow: ${boxShadow[0]};
+    }
+
+    .${classes.icon} {
+        color: ${colors.primary};
+        font-size: ${21 / 14}em;
+        padding: ${spacing[6]}px 0 ${spacing[6]}px ${spacing[8]}px;
+
+        & + .${classes.content} {
+            padding-left: ${spacing[4]}px;
+        }
+    }
+
+    .${classes.content} {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0 ${spacing[8]}px;
+    }
+
+    .${classes.titleRow} {
+        display: flex;
+        align-items: center;
+        font-size: ${16 / 14}em;
+        font-weight: bold;
+        margin-right: -${spacing[8]}px;
+        
+        .${classes.title} {
+            flex: 1;
+            padding: ${spacing[6]}px 0 ${spacing[3]}px;
+        }
+
+        .${classes.close} {
+            margin: ${spacing[3]}px ${spacing[4]}px;
+        }
+
+        & + .${classes.body} {
+            padding-top: ${spacing[3]}px;
+        }
+    }
+
+    &[data-draggable=true] {
+        .${classes.titleRow} {
+            cursor: move;
+            touch-action: none;
+        }
+    }
+
+    .${classes.body} {
+        overflow: hidden auto;
+        padding: ${spacing[6]}px 0;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+        display: flex;
+        gap: ${spacing[6]}px;
+
+        &:has(+ .${classes.footer}) {
+            padding-bottom: 0;
+        }
+
+        &[data-border-top=true] {
+            border-top-color: ${divider};
+        }
+
+        &[data-border-bottom=true] {
+            border-bottom-color: ${divider};
+        }
+
+        .${classes.bodyWrap} {
+            flex: 1;
+        }
+
+        .${classes.prefix}, .${classes.suffix} {
+            max-height: 100%;
+            overflow: auto;
+        }
+    }
+
+    .${classes.footer} {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: ${spacing[3]}px;
+        padding: ${spacing[4]}px 0 ${spacing[6]}px;
+    }
+`);

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { DIVProps } from '../../../types';
+export interface DividerProps extends DIVProps {
+    textAlign?: 'start' | 'center' | 'end';
+    alignMargin?: number | string;
+    orientation?: 'horizontal' | 'vertical';
+    margin?: number | string;
+}
+export declare const Divider: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<DividerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/divider/divider.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes, style } from './divider.style';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+export const Divider = memo(forwardRef(({ textAlign = 'center', alignMargin = 36, orientation = 'horizontal', margin, ...props }, ref) => {
+    const { spacing } = useTheme();
+    margin ??= orientation === 'horizontal' ? spacing[5] : spacing[4];
+    if (typeof margin === 'number') {
+        margin += 'px';
+    }
+    const styleProp = orientation === 'horizontal' ? 'width' : 'height';
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+            margin: orientation === 'horizontal' ? `${margin} 0` : `0 ${margin}`,
+            ...props.style
+        }, "data-orientation": orientation, children: [_jsx("div", { className: `${classes.line} ${classes.beforeLine}`, style: {
+                    flex: !props.children || textAlign !== 'start' ? 1 : void 0,
+                    [styleProp]: textAlign === 'start' ? alignMargin : void 0
+                } }), !!props.children &&
+                _jsx("div", { className: classes.content, children: props.children }), !!props.children &&
+                _jsx("div", { className: `${classes.line} ${classes.afterLine}`, style: {
+                        flex: textAlign !== 'end' ? 1 : void 0,
+                        [styleProp]: textAlign === 'end' ? alignMargin : void 0
+                    } })] }));
+}));

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

@@ -0,0 +1,9 @@
+export declare const classes: {
+    content: string;
+    line: string;
+    beforeLine: string;
+    afterLine: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('divider', [
+    'line',
+    'beforeLine',
+    'afterLine',
+    'content'
+]);
+export const style = defineCss(({ spacing, divider }) => css `
+    gap: ${spacing[4]}px;
+    align-items: center;
+
+    .${classes.line} {
+        background-color: ${divider};
+    }
+
+    &[data-orientation=horizontal] {
+        display: flex;
+
+        .${classes.line} {
+            height: 1px;
+        }
+    }
+
+    &[data-orientation=vertical] {
+        display: inline-flex;
+        flex-direction: column;
+
+        .${classes.line} {
+            width: 1px;
+        }
+    }
+`);

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { DraggableOptions, HandleProps } from '../../utils';
+import { DefineElement } from '../../../types';
+export type DraggableTargetProps = {
+    style: {
+        translate: string;
+    };
+};
+export interface DraggableProps<H extends Element = Element> extends DraggableOptions<H> {
+    translateLimit?(translate: [number, number]): [number, number];
+    container?: DefineElement;
+    children: ReactElement | ((targetProps: DraggableTargetProps, handleProps: HandleProps<H>) => ReactElement);
+}
+export declare function Draggable<H extends Element = Element>({ translateLimit, container, children, ...draggableOptions }: DraggableProps<H>): ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/esm/components/draggable/draggable.js

@@ -0,0 +1,53 @@
+import { cloneElement, isValidElement, useMemo, useRef, useState } from 'react';
+import { range, useDraggableHandle, useSync } from '../../utils';
+export function Draggable({ translateLimit, container, children, ...draggableOptions }) {
+    const syncOptions = useSync(draggableOptions);
+    const syncTranslateLimit = useSync(translateLimit);
+    const syncContainer = useSync(container);
+    const [translate, setTranslate] = useState([0, 0]);
+    const startTranslate = useRef([0, 0]);
+    const props = children.props;
+    const draggableHandle = useDraggableHandle({
+        ...draggableOptions,
+        onDragStart(e) {
+            syncOptions.current.onDragStart?.(e);
+            startTranslate.current = [...translate];
+        },
+        onDrag(info, e) {
+            syncOptions.current.onDrag?.(info, e);
+            const { deltaX, deltaY } = info;
+            const [startX, startY] = startTranslate.current;
+            let newX = startX + deltaX;
+            let newY = startY + deltaY;
+            if (syncTranslateLimit.current) {
+                [newX, newY] = syncTranslateLimit.current([newX, newY]);
+            }
+            else {
+                const containerEl = typeof syncContainer.current === 'function' ? syncContainer.current() : syncContainer.current;
+                if (containerEl) {
+                    const { clientWidth, clientHeight } = containerEl;
+                    newX = range(startX + deltaX, -clientWidth / 2, clientWidth / 2);
+                    newY = range(startY + deltaY, -clientHeight / 2, clientHeight / 2);
+                }
+            }
+            setTranslate([newX, newY]);
+        },
+        onPointerDown: props?.onPointerDown,
+        onTouchStart: props?.onTouchStart,
+        onClick: props?.onClick
+    });
+    const style = useMemo(() => ({
+        translate: `${translate[0]}px ${translate[1]}px`,
+        ...props?.style
+    }), [translate, props?.style]);
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            style,
+            ...draggableHandle
+        });
+    }
+    if (typeof children === 'function') {
+        return children({ style: { translate: `${translate[0]}px ${translate[1]}px` } }, draggableHandle);
+    }
+    return children;
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { OverlayBaseProps } from '../overlayBase';
+import { ResponsiveProp } from '../../../types';
+import { TransitionBaseProps } from '../transitionBase';
+export interface DrawerProps extends Omit<OverlayBaseProps, 'title'> {
+    title?: ReactNode;
+    footer?: ReactNode;
+    showClose?: ReactNode;
+    size?: ResponsiveProp<string | number>;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    /** 是否可通过点击遮罩层关闭对话框，@default true */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    defaultOpen?: boolean;
+    onClose?(reason: DrawerCloseReason): void;
+    slideProps?: TransitionBaseProps<HTMLDivElement>;
+}
+export type DrawerCloseReason = 'escape' | 'closed' | 'maskClicked';
+export declare const Drawer: import("react").ForwardRefExoticComponent<Omit<DrawerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/drawer/drawer.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useEffect, useRef } from 'react';
+import { classes, useStyle } from './drawer.style';
+import { classnames, useControlled } from '../../utils';
+import { OverlayBase } from '../overlayBase';
+import { Button } from '../button';
+import { DoubleRightOutlined } from '@ant-design/icons';
+import { Slide } from '../transitionBase';
+const placementToDirection = {
+    left: 'right',
+    right: 'left',
+    top: 'down',
+    bottom: 'up'
+};
+export const Drawer = forwardRef(({ title, footer, showClose = true, size = { xs: '100%', sm: '75%', md: '50%', lg: '25%' }, placement = 'right', maskClosable = true, escapeClosable = true, defaultOpen = false, open, onClose, slideProps, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
+    const close = (reason) => {
+        onClose?.(reason);
+        setInnerOpen(false);
+    };
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        maskClosable && close('maskClicked');
+    };
+    const closeHandler = () => {
+        close('closed');
+    };
+    /**
+     * ---------------------------------------------------------------------
+     * 长内容滚动
+     */
+    const bodyRef = useRef(null);
+    const bodyWrapRef = useRef(null);
+    const onScroll = () => {
+        const el = bodyRef.current;
+        el.dataset.bordered = (el.scrollHeight > el.clientHeight && el.scrollTop > 0).toString();
+    };
+    useEffect(() => {
+        if (innerOpen.current) {
+            const resizeObserver = new ResizeObserver(onScroll);
+            resizeObserver.observe(bodyWrapRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+        return;
+    }, [innerOpen.current]);
+    return (_jsx(OverlayBase, { ...props, ref: ref, css: useStyle({ size: typeof size === 'object' ? size : { xs: size } }), className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsx(Slide, { direction: placementToDirection[placement], ...slideProps, in: innerOpen.current, className: classnames(classes.drawer, slideProps?.className), children: _jsxs("div", { className: classes.drawerWrap, children: [!!(title || showClose) &&
+                        _jsxs("div", { className: classes.titleRow, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
+                                    _jsx(Button, { className: classes.close, shape: "circular", variant: "text", color: "text", onClick: closeHandler, children: _jsx(DoubleRightOutlined, { rotate: {
+                                                left: 180,
+                                                right: 0,
+                                                top: -90,
+                                                bottom: 90
+                                            }[placement] }) })] }), _jsx("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }) })] }) }) }));
+});

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

@@ -0,0 +1,15 @@
+import { ResponsiveValue } from '../../../types';
+export declare const classes: {
+    body: string;
+    title: string;
+    titleRow: string;
+    close: string;
+    bodyWrap: string;
+    drawer: string;
+    drawerWrap: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ size }: {
+    size: ResponsiveValue<string | number>;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,120 @@
+import { css } from '@emotion/react';
+import { defineClasses, responsiveVariables, useCss } from '../../utils';
+export const classes = defineClasses('drawer', [
+    'drawer',
+    'drawerWrap',
+    'titleRow',
+    'title',
+    'close',
+    'body',
+    'bodyWrap'
+]);
+export function useStyle({ size }) {
+    const variables = responsiveVariables(k => {
+        let _size = size[k];
+        if (typeof _size === 'undefined') {
+            return '';
+        }
+        if (typeof _size === 'number') {
+            _size = _size + 'px';
+        }
+        return `--drawer-size: ${_size};`;
+    });
+    return useCss(({ spacing, background, boxShadow, borderRadius, divider }) => {
+        return css `
+            ${variables}
+
+            .${classes.drawer} {
+                position: absolute;
+                padding: ${spacing[2]}px;
+            }
+        
+            &[data-placement=top] {
+                .${classes.drawer} {
+                    height: var(--drawer-size);
+                    transform-origin: top;
+                    inset: 0 0 auto;
+                }
+            }
+        
+            &[data-placement=bottom] {
+                .${classes.drawer} {
+                    height: var(--drawer-size);
+                    transform-origin: bottom;
+                    inset: auto 0 0;
+                }
+            }
+        
+            &[data-placement=left] {
+                .${classes.drawer} {
+                    width: var(--drawer-size);
+                    transform-origin: left;
+                    inset: 0 auto 0 0;
+                }
+            }
+        
+            &[data-placement=right] {
+                .${classes.drawer} {
+                    width: var(--drawer-size);
+                    transform-origin: right;
+                    inset: 0 0 0 auto;
+                }
+            }
+
+            .${classes.drawerWrap} {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                background-color: ${background.card};
+                box-shadow: ${boxShadow[1]};
+                border-radius: ${borderRadius}px;
+            }
+        
+            .${classes.titleRow} {
+                font-size: ${16 / 14}em;
+                font-weight: bold;
+                display: flex;
+                align-items: center;
+                padding: 0 ${spacing[2]}px;
+        
+                .${classes.title} {
+                    flex: 1;
+                    padding: ${spacing[5]}px ${spacing[6]}px;
+                }
+        
+                .${classes.close} {
+                    margin: ${spacing[3]}px;
+                }
+
+                & + .${classes.body} {
+                    padding-top: 0;
+                }
+            }
+
+            &[data-placement=right] {
+                \.${classes.title}:has(+ .${classes.close}) {
+                    padding-left: 0;
+                }
+            }
+        
+            &[data-placement=right] {
+                .${classes.titleRow} {
+                    flex-direction: row-reverse;
+                }
+            }
+        
+            .${classes.body} {
+                flex: 1;
+                overflow: auto;
+                padding: ${spacing[6]}px ${spacing[8]}px;
+                border-top: 1px solid transparent;
+                border-bottom: 1px solid transparent;
+
+                &[data-bordered=true] {
+                    border-top-color: ${divider};
+                }
+            }
+        `;
+    }, [variables]);
+}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { PopperProps } from '../popper';
+export interface DropdownProps extends PopperProps {
+    showArrow?: boolean;
+}
+export declare const Dropdown: import("react").ForwardRefExoticComponent<Omit<DropdownProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/esm/components/dropdown/dropdown.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Popper } from '../popper';
+import { classes, style } from './dropdown.style';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+export const Dropdown = forwardRef(({ showArrow, ...props }, ref) => {
+    const { spacing } = useTheme();
+    props.autoClose ??= true;
+    props.trigger ??= 'click';
+    props.placement ??= 'bottom';
+    props.offset ??= showArrow ? spacing[3] : spacing[2];
+    return (_jsx(Popper, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), content: _jsx("div", { className: classes.content, "data-show-arrow": showArrow, children: props.content }) }));
+});

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

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

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

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { zIndex } from '../app';
+import { popperArrowStyle } from '../popper/popper.style';
+export const classes = defineClasses('dropdown', [
+    'content'
+]);
+export const style = defineCss(({ background, boxShadow, borderRadius }) => css `
+    z-index: ${zIndex.dropdown};
+
+    .${classes.content} {
+        background-color: ${background.card};
+        box-shadow: ${boxShadow[0]};
+        border-radius: ${borderRadius}px;
+        padding: 4px;
+    }
+
+    ${popperArrowStyle(background.card)}
+`);

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+import { TransportStyleProps } from '../transportStyle';
+export interface FlexProps extends TransportStyleProps {
+    inline?: boolean;
+    /** 排列方式，@default "row" */
+    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    /** 换行方式 */
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    gap?: CSSProperties['gap'];
+    columnGap?: CSSProperties['columnGap'];
+    rowGap?: CSSProperties['rowGap'];
+    /** 当compact为true时，gap无效，而且会清除子元素的圆角，让他们拼接起来 */
+    compact?: boolean;
+}
+export declare const Flex: import("react").ForwardRefExoticComponent<Omit<FlexProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/flex/flex.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { classes } from './flex.style';
+import { classnames } from '../../utils';
+export const Flex = forwardRef(({ inline, direction = 'row', wrap, gap = 0, columnGap, rowGap, compact, ...props }, ref) => {
+    const childrenCount = Children.count(props.children);
+    return (_jsx("div", { ...props, ref: ref, className: classnames(classes.root, props.className), style: {
+            display: inline ? 'inline-flex' : 'flex',
+            flexDirection: direction,
+            flexWrap: wrap, gap, columnGap, rowGap,
+            ...props.style
+        }, children: compact
+            ? Children.map(props.children, (child, index) => {
+                if (!isValidElement(child)) {
+                    return child;
+                }
+                return cloneElement(child, {
+                    ...index === 0 && { 'data-first': true },
+                    ...index === childrenCount - 1 && { 'data-last': true },
+                    ...{ 'data-compact': direction.split('-')[0] }
+                });
+            })
+            : props.children }));
+});

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

@@ -0,0 +1,3 @@
+export declare const classes: {
+    root: string;
+};

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

@@ -0,0 +1,2 @@
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('flex');

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

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

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

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