@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+export const classes = defineClasses('rate', [
+    'star',
+    'starBefore',
+    'starAfter'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, mode, gray, easing }) => css `
+        display: inline-flex;
+        gap: ${spacing[3]}px;
+
+        .${classes.star} {
+            font-size: ${20 / 14}em;
+            color: ${mode === 'light' ? gray(.14) : '#000000'};
+            display: flex;
+            position: relative;
+
+            [data-active=true] {
+                position: absolute;
+                color: ${colorValue};
+
+                &[data-half=true] {
+                    width: 50%;
+                    overflow: hidden;
+                }
+            }
+
+            .${classes.starBefore},
+            .${classes.starAfter} {
+                width: 50%;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+            }
+
+            .${classes.starBefore} {
+                left: 0;
+            }
+
+            .${classes.starAfter} {
+                right: 0;
+            }
+        }
+
+        &[data-size=small] {
+            .${classes.star} {
+                font-size: ${16 / 14}em;
+            }
+        }
+
+        &[data-size=large] {
+            .${classes.star} {
+                font-size: ${24 / 14}em;
+            }
+        }
+
+        &:not([data-read-only=true]) {
+            .${classes.star} {
+                cursor: pointer;
+                transition: transform .2s ${easing.easeOut};
+    
+                &:hover {
+                    transform: scale(1.2);
+                }
+
+                &:active {
+                    transition: transform 0s;
+                    transform: scale(.9);
+                }
+            }
+        }
+
+        &[data-disabled=true] {
+            &, .${classes.star} {
+                cursor: not-allowed;
+            }
+        }
+    `, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { ColorPropsValue, DIVProps, Placement } from '../../../types';
+import { DraggableOptions } from '../../utils';
+export type Handle = Placement | 't' | 'r' | 'b' | 'l' | 'tl' | 'tr' | 'br' | 'bl' | 'lt' | 'rt' | 'lb' | 'rb';
+export interface ResizableProps extends Omit<DIVProps, 'onResize'> {
+    /** @default "mouse" */
+    variant?: 'mouse' | 'touch';
+    /** 使用的拖拽把手，默认全部生效。注意：使用“角把手”会同时渲染对应的两个“边把手”。 */
+    handles?: Handle | Handle[];
+    /**
+     * 拖拽把手的尺寸
+     * {@link variant}为"mouse"时，@default 8
+     * {@link variant}为"touch"时，@default 12
+     */
+    handleSize?: number;
+    /** 拖拽把手颜色，@default "secondary" */
+    handleColor?: ColorPropsValue;
+    /** {@link variant}为"touch"时生效，@default "outside" */
+    handlePosition?: 'outside' | 'inside';
+    /** 是否固定长宽比例，@default false */
+    fixedRatio?: boolean;
+    onResize?(width: number, height: number): void;
+    onResizeEnd?(width: number, height: number): void;
+    draggableOptions?: DraggableOptions<HTMLDivElement>;
+}
+export declare const Resizable: import("react").ForwardRefExoticComponent<Omit<ResizableProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/resizable/resizable.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from 'react';
+import { classnames, cloneRef, toArray, useDraggableHandle, useSync, useSyncState } from '../../utils';
+import { classes, handleCursors, useStyle } from './resizable.style';
+const handleUnification = {
+    t: 't',
+    r: 'r',
+    b: 'b',
+    l: 'l',
+    tl: 'tl',
+    lt: 'tl',
+    tr: 'tr',
+    rt: 'tr',
+    br: 'br',
+    rb: 'br',
+    bl: 'bl',
+    lb: 'bl',
+    top: 't',
+    right: 'r',
+    bottom: 'b',
+    left: 'l',
+    topLeft: 'tl',
+    leftTop: 'tl',
+    topRight: 'tr',
+    rightTop: 'tr',
+    bottomLeft: 'bl',
+    leftBottom: 'bl',
+    bottomRight: 'br',
+    rightBottom: 'br'
+};
+export const Resizable = forwardRef(({ variant = 'mouse', handles = ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'], handleSize = variant === 'mouse' ? 8 : 12, handleColor = 'secondary', handlePosition = 'outside', fixedRatio, onResize, onResizeEnd, draggableOptions, ...props }, ref) => {
+    const abbrHandles = useMemo(() => {
+        let abbr = toArray(handles).flatMap((h) => {
+            if (h.length === 1) {
+                return handleUnification[h];
+            }
+            // 使用角把手必须同时渲染对应的两个边把手
+            return [
+                handleUnification[h],
+                ...h.split('').map(_h => handleUnification[_h])
+            ];
+        });
+        return [...new Set(abbr)];
+    }, [handles]);
+    const innerRef = useRef(null);
+    const [width, setWidth] = useSyncState();
+    const [height, setHeight] = useSyncState();
+    const [dragStartState, setDragStartState] = useState();
+    const syncProps = useSync({ onResize, onResizeEnd });
+    const draggableHandle = useDraggableHandle({
+        ...draggableOptions,
+        onDragStart(e) {
+            draggableOptions?.onDragStart?.(e);
+            const handleType = e.currentTarget.dataset.handle;
+            setDragStartState({
+                width: innerRef.current.offsetWidth,
+                height: innerRef.current.offsetHeight,
+                handleType,
+                includeL: handleType.includes('l'),
+                includeR: handleType.includes('r'),
+                includeT: handleType.includes('t'),
+                includeB: handleType.includes('b')
+            });
+            document.body.style.cursor = handleCursors[handleType] || '';
+        },
+        onDrag(info, e) {
+            draggableOptions?.onDrag?.(info, e);
+            let { deltaX, deltaY } = info;
+            const { width, height, includeL, includeR, includeT, includeB } = dragStartState;
+            if (includeL) {
+                deltaX *= -1;
+            }
+            if (includeT) {
+                deltaY *= -1;
+            }
+            if (includeL || includeR) {
+                setWidth(width + deltaX);
+            }
+            if (includeT || includeB) {
+                setHeight(height + deltaY);
+            }
+        },
+        onDragEnd(info) {
+            draggableOptions?.onDragEnd?.(info);
+            setDragStartState(void 0);
+            document.body.style.cursor = '';
+            syncProps.current?.onResizeEnd?.(innerRef.current.offsetWidth, innerRef.current.offsetHeight);
+        }
+    });
+    return (_jsxs("div", { ...props, ref: cloneRef(ref, innerRef), css: useStyle({ variant, handleSize, handleColor }), className: classnames(classes.root, props.className), "data-dragging": !!dragStartState, "data-handle-position": handlePosition, style: {
+            ...props.style,
+            ...typeof width.current === 'number' && { width: width.current },
+            ...typeof height.current === 'number' && { height: height.current }
+        }, children: [_jsx("div", { className: classes.container, children: props.children }), abbrHandles.map(h => _jsx("div", { className: h.length === 1 ? classes.edge : classes.corner, "data-handle": h, "data-dragging": dragStartState?.handleType === h, ...draggableHandle }, h))] }));
+});

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

@@ -0,0 +1,12 @@
+import { Handle, ResizableProps } from './resizable';
+export declare const classes: {
+    container: string;
+    edge: string;
+    corner: string;
+} & {
+    root: string;
+};
+export declare const handleCursors: {
+    [P in Handle]?: string;
+};
+export declare function useStyle({ variant, handleSize, handleColor }: Required<Pick<ResizableProps, 'variant' | 'handleSize' | 'handleColor'>>): import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,338 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('resizable', [
+    'container',
+    'edge',
+    'corner'
+]);
+export const handleCursors = {
+    t: 'n-resize',
+    r: 'e-resize',
+    b: 's-resize',
+    l: 'w-resize',
+    tl: 'nw-resize',
+    tr: 'ne-resize',
+    bl: 'sw-resize',
+    br: 'se-resize'
+};
+export function useStyle({ variant, handleSize, handleColor }) {
+    const color = useColor(handleColor);
+    return useCss(({ divider, easing }) => {
+        const ret = [
+            css `
+                position: relative;
+
+                .${classes.container} {
+                    width: 100%;
+                    height: 100%;
+                    position: relative;
+                    z-index: 0;
+                }
+
+                .${classes.edge}, .${classes.corner} {
+                    touch-action: none;
+                    position: absolute;
+                }
+
+                .${classes.edge} {
+                    z-index: 1;
+        
+                    &[data-handle=t], &[data-handle=b] {
+                        width: 100%;
+                        height: ${handleSize}px;
+                        left: 0;
+                        cursor: ${handleCursors.t};
+                    }
+                    
+                    &[data-handle=l], &[data-handle=r] {
+                        width: ${handleSize}px;
+                        height: 100%;
+                        top: 0;
+                        cursor: ${handleCursors.l};
+                    }
+                }
+
+                .${classes.corner} {
+                    width: ${handleSize}px;
+                    height: ${handleSize}px;
+                    z-index: 2;
+
+                    &[data-handle=tl] {
+                        cursor: ${handleCursors.tl};
+                    }
+        
+                    &[data-handle=tr] {
+                        cursor: ${handleCursors.tr};
+                    }
+        
+                    &[data-handle=bl] {
+                        cursor: ${handleCursors.bl};
+                    }
+        
+                    &[data-handle=br] {
+                        cursor: ${handleCursors.br};
+                    }
+                }
+
+                &:has([data-dragging=true]) {
+                    .${classes.edge}, .${classes.corner} {
+                        cursor: inherit;
+                    }
+                }
+            `
+        ];
+        const linkEdge = (hoverStyle, type) => {
+            let style = '';
+            const fn = (handle) => {
+                style += `
+                    &:has(.${classes.corner}[data-handle=${handle}]:${type}),
+                    &:has(.${classes.corner}[data-handle=${handle}][data-dragging=true]) {
+                        .${classes.edge} {
+                            &[data-handle=${handle[0]}], &[data-handle=${handle[1]}] {
+                                ${hoverStyle}
+                            }
+                        }
+                    }
+                `;
+            };
+            fn('tl');
+            fn('tr');
+            fn('bl');
+            fn('br');
+            return style;
+        };
+        if (variant === 'mouse') {
+            const hoverStyle = `
+                &:before {
+                    transition: background-color 1s ${easing.easeOut};
+                    background-color: ${color};
+                }
+            `;
+            ret.push(css `
+                .${classes.edge} {
+                    &:before {
+                        content: '';
+                        position: absolute;
+                    }
+
+                    &:hover, &[data-dragging=true] {
+                        ${hoverStyle}
+                    }
+
+                    &[data-handle=t], &[data-handle=b] {
+                        &:before {
+                            width: 100%;
+                            height: 1px;
+                            top: 50%;
+                            left: 0;
+                        }
+                    }
+
+                    &[data-handle=t] {
+                        top: ${-handleSize / 2}px;
+                    }
+                    
+                    &[data-handle=b] {
+                        bottom: ${-handleSize / 2}px;
+                    }
+
+                    &[data-handle=l], &[data-handle=r] {
+                        &:before {
+                            width: 1px;
+                            height: 100%;
+                            top: 0;
+                            left: 50%;
+                        }
+                    }
+
+                    &[data-handle=l] {
+                        left: ${-handleSize / 2}px;
+                    }
+                    
+                    &[data-handle=r] {
+                        right: ${-handleSize / 2}px;
+                    }
+                }
+
+                .${classes.corner} {
+                    &[data-handle=tl] {
+                        top: ${-handleSize / 2}px;
+                        left: ${-handleSize / 2}px;
+                    }
+
+                    &[data-handle=tr] {
+                        top: ${-handleSize / 2}px;
+                        right: ${-handleSize / 2}px;
+                    }
+
+                    &[data-handle=bl] {
+                        bottom: ${-handleSize / 2}px;
+                        left: ${-handleSize / 2}px;
+                    }
+
+                    &[data-handle=br] {
+                        bottom: ${-handleSize / 2}px;
+                        right: ${-handleSize / 2}px;
+                    }
+                }
+
+                ${linkEdge(hoverStyle, 'hover')}
+            `);
+        }
+        else {
+            // variant === 'touch'
+            const hoverColor = Color(color).alpha(.2).string();
+            const hoverStyle = `
+                background-color: ${hoverColor};
+
+                &:before {
+                    background-color: #ffffff;
+                }
+            `;
+            ret.push(css `
+                .${classes.edge}, .${classes.corner} {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    overflow: hidden;
+
+                    &:active, &[data-dragging=true] {
+                        ${hoverStyle}
+                    }
+                }
+
+                &[data-handle-position=outside] {
+                    .${classes.edge} {
+                        &[data-handle=t] {
+                            top: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=b] {
+                            bottom: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=l] {
+                            left: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=r] {
+                            right: ${-handleSize}px;
+                        }
+                    }
+
+                    .${classes.corner} {
+                        &[data-handle=tl] {
+                            top: ${-handleSize}px;
+                            left: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=tr] {
+                            top: ${-handleSize}px;
+                            right: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=bl] {
+                            bottom: ${-handleSize}px;
+                            left: ${-handleSize}px;
+                        }
+        
+                        &[data-handle=br] {
+                            bottom: ${-handleSize}px;
+                            right: ${-handleSize}px;
+                        }
+                    }
+                }
+
+                &[data-handle-position=inside] {
+                    .${classes.edge} {
+                        &[data-handle=t] {
+                            top: 0;
+                        }
+        
+                        &[data-handle=b] {
+                            bottom: 0;
+                        }
+        
+                        &[data-handle=l] {
+                            left: 0;
+                        }
+        
+                        &[data-handle=r] {
+                            right: 0;
+                        }
+                    }
+
+                    .${classes.corner} {
+                        &[data-handle=tl] {
+                            top: 0;
+                            left: 0;
+                        }
+        
+                        &[data-handle=tr] {
+                            top: 0;
+                            right: 0;
+                        }
+        
+                        &[data-handle=bl] {
+                            bottom: 0;
+                            left: 0;
+                        }
+        
+                        &[data-handle=br] {
+                            bottom: 0;
+                            right: 0;
+                        }
+                    }
+                }
+
+                .${classes.edge} {
+                    &:before {
+                        content: '';
+                        background-color: ${divider};
+                        border-radius: 2px;
+                    }
+    
+                    &[data-handle=t], &[data-handle=b] {
+                        &:before {
+                            width: 40px;
+                            height: 3px;
+                        }
+                    }
+    
+                    &[data-handle=l], &[data-handle=r] {
+                        &:before {
+                            width: 3px;
+                            height: 40px;
+                        }
+                    }
+                }
+    
+                .${classes.corner} {
+                    &:before {
+                        content: '';
+                        width: ${Math.sqrt(handleSize * handleSize)}px;
+                        height: 3px;
+                        background-color: ${divider};
+                        border-radius: 2px;
+                    }
+    
+                    &[data-handle=tl], &[data-handle=br] {
+                        &:before {
+                            transform: rotate(-45deg);
+                        }
+                    }
+    
+                    &[data-handle=tr], &[data-handle=bl] {
+                        &:before {
+                            transform: rotate(45deg)
+                        }
+                    }
+                }
+
+                ${linkEdge(hoverStyle, 'active')}
+            `);
+        }
+        return ret;
+    }, [variant, handleSize, color]);
+}

package/dist/esm/components/segmented/SegmentedOption.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+export interface SegmentedOptionProps extends Omit<DIVProps, 'prefix'> {
+    orientation?: 'horizontal' | 'vertical';
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    value?: Id;
+    label?: ReactNode;
+    disabled?: ReactNode;
+}
+export declare const SegmentedOption: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<SegmentedOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/segmented/SegmentedOption.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classnames } from '../../utils';
+import { classes } from './segmented.style';
+export const SegmentedOption = memo(forwardRef(({ orientation, prefix, suffix, value, label, disabled, ...props }, ref) => {
+    return (_jsxs("div", { ...props, ref: ref, className: classnames(classes.option, props.className), "data-orientation": orientation, "data-disabled": disabled, onClick: e => {
+            !disabled && props.onClick?.(e);
+        }, children: [!!prefix &&
+                _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                _jsx("div", { className: classes.suffix, children: suffix })] }));
+}));

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id, Obj, Size } from '../../../types';
+import { SegmentedOption, SegmentedOptionProps } from './SegmentedOption';
+export type SegmentedOption = SegmentedOptionProps & Obj;
+export interface SegmentedProps<O extends SegmentedOption> extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    options?: O[];
+    orientation?: 'horizontal' | 'vertical';
+    size?: Size;
+    labelKey?: keyof O;
+    primaryKey?: keyof O;
+    fullWidth?: boolean;
+    defaultValue?: Id;
+    value?: Id;
+    onChange?(value: Id): void;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export declare const Segmented: {
+    <O extends SegmentedOption>(props: SegmentedProps<O>): ReactElement;
+    Option: typeof SegmentedOption;
+};

package/dist/esm/components/segmented/segmented.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, memo, useEffect, useRef, useState } from 'react';
+import { classes, style } from './segmented.style';
+import { classnames, cloneRef, isUnset, useControlled, useDerivedState } from '../../utils';
+import { SegmentedOption } from './SegmentedOption';
+import { useTheme } from '../app';
+export const Segmented = memo(forwardRef(({ options, orientation = 'horizontal', size, labelKey = 'label', primaryKey = 'value', fullWidth, defaultValue, value, onChange, readOnly, disabled, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const [animating, setAnimating] = useState(false);
+    const [innerValue, _setInnerValue] = useControlled(defaultValue, value, onChange);
+    const setInnerValue = (value) => {
+        if (!readOnly && !disabled) {
+            setAnimating(true);
+            _setInnerValue(value);
+        }
+    };
+    const optionRefs = useRef(new Map());
+    /**
+     * 计算指示器的位置
+     */
+    const fitIndicatorRect = () => {
+        const activeOption = !isUnset(innerValue.current) && optionRefs.current.get(innerValue.current);
+        if (activeOption) {
+            return {
+                width: activeOption.offsetWidth,
+                height: activeOption.offsetHeight,
+                left: activeOption.offsetLeft,
+                top: activeOption.offsetTop
+            };
+        }
+        return {
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0
+        };
+    };
+    const [indicatorRect, setIndicatorRect] = useDerivedState(fitIndicatorRect, [innerValue.current]);
+    useEffect(() => {
+        // 仅首次渲染需要计算
+        setIndicatorRect(fitIndicatorRect());
+    }, []);
+    const renderOptions = () => {
+        if (options) {
+            return options.map((p, i) => {
+                const v = p[primaryKey];
+                const active = !isUnset(v) && v === innerValue.current;
+                return (_jsx(SegmentedOption, { orientation: p.orientation, prefix: p.prefix, suffix: p.suffix, disabled: p.disabled, ref: r => optionRefs.current.set(v, r), value: v, label: p[labelKey], onClick: e => {
+                        p.onClick?.(e);
+                        setInnerValue(v);
+                    }, "data-active": active }, p.key ?? v ?? i));
+            });
+        }
+        return Children.map(props.children, c => {
+            if (isValidElement(c)) {
+                const { value } = c.props;
+                const active = !isUnset(value) && value === innerValue.current;
+                return cloneElement(c, {
+                    ref: cloneRef(c.ref, (r) => {
+                        !isUnset(value) && optionRefs.current.set(value, r);
+                    }),
+                    onClick(e) {
+                        c.props.onClick?.(e);
+                        !isUnset(value) && setInnerValue(value);
+                    },
+                    'data-active': active
+                });
+            }
+            return c;
+        });
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-full-width": fullWidth, "data-animating": animating, "data-orientation": orientation, "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: indicatorRect.current }), renderOptions()] }));
+}));
+Segmented.Option = SegmentedOption;