@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,129 @@
+import { css } from '@emotion/react';
+import { defineCss, defineClasses } from '../../utils';
+import { spacing, zIndex } from '../app';
+import { style as appStyle } from '../app/app.style';
+export const classes = defineClasses('popper', [
+    'popper',
+]);
+export const style = defineCss(({ fontSize, easing }) => [
+    appStyle,
+    css `
+        font-size: ${fontSize}px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: ${zIndex.popper};
+        transition-property: transform, opacity;
+        transition-duration: .25s;
+
+        &[data-open=true] {
+            transition-timing-function: ${easing.bounce}, ${easing.easeOut};
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        &:not([data-open=true]) {
+            transition-timing-function: ${easing.easeIn};
+            opacity: 0;
+
+            &[data-variant=zoom] {
+                transform: scale(0);
+            }
+
+            &[data-variant=collapse] {
+                &[data-place-a=top], &[data-place-a=bottom] {
+                    transform: scaleY(0);
+                }
+
+                &[data-place-a=left], &[data-place-a=right] {
+                    transform: scaleX(0);
+                }
+            }
+        }
+    `
+]);
+/**
+ *  通用弹框箭头样式
+ * @param colorValue
+ * @param arrowSize
+ */
+export const popperArrowStyle = (colorValue, arrowSize = spacing(3.5)) => css `
+    [data-show-arrow=true]:before {
+        content: '';
+        position: absolute;
+        width: ${arrowSize}px;
+        height: ${arrowSize}px;
+        background-color: ${colorValue};
+    }
+    
+    &[data-place-a=top] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 0 0, 100% 0);
+            top: 100%;
+            left: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=bottom] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 100% 100%, 0 100%);
+            bottom: 100%;
+            left: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=left] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 0 0, 0 100%);
+            left: 100%;
+            top: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-a=right] {
+        [data-show-arrow=true]:before {
+            clip-path: polygon(50% 50%, 100% 100%, 100% 0);
+            right: 100%;
+            top: calc(50% - ${arrowSize / 2}px);
+        }
+    }
+    
+    &[data-place-b=Left] {
+        [data-show-arrow=true]:before {
+            left: 9px;
+        }
+    }
+    
+    &[data-place-b=Right] {
+        [data-show-arrow=true]:before {
+            left: auto;
+            right: 9px;
+        }
+    }
+    
+    &[data-place-b=Top] {
+        [data-show-arrow=true]:before {
+            top: 9px;
+        }
+    }
+    
+    &[data-place-b=Bottom] {
+        [data-show-arrow=true]:before {
+            top: auto;
+            bottom: 9px;
+        }
+    }
+`;
+/**
+ *  通用弹框样式
+ */
+export const popperStyleCallback = ({ background, borderRadius, boxShadow }) => css `
+    background-color: ${background.card};
+    border-radius: ${borderRadius}px;
+    box-shadow: ${boxShadow[0]};
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 4px;
+`;
+export const popperStyle = defineCss(popperStyleCallback);

package/dist/esm/components/popper/popperContext.d.ts

@@ -0,0 +1,22 @@
+import { SetStateAction } from 'react';
+export declare const popperContext: import("react").Context<{
+    autoClose: boolean;
+    open: boolean;
+    setOpen(open: SetStateAction<boolean>): void;
+    beforeOpenCallbacks: Set<() => void>;
+}>;
+export declare function usePopperContext(): {
+    autoClose: boolean;
+    open: boolean;
+    setOpen(open: SetStateAction<boolean>): void;
+    beforeOpenCallbacks: Set<() => void>;
+};
+/**
+ * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
+ * @param callback
+ */
+export declare function useBeforeOpen(callback: () => void): void;
+/**
+ * 当弹框打开时，滚动至已选项，返回一个ref
+ */
+export declare function useScrollToSelected<T extends Element>(): (r: T | null) => void;

package/dist/esm/components/popper/popperContext.js

@@ -0,0 +1,46 @@
+import { createContext, useContext, useLayoutEffect, useRef, useCallback } from 'react';
+export const popperContext = createContext({
+    autoClose: false,
+    open: false,
+    setOpen(open) { },
+    beforeOpenCallbacks: new Set()
+});
+export function usePopperContext() {
+    return useContext(popperContext);
+}
+/**
+ * 弹框打开之前会触发callback，通常用于scrollIntoView等需要计算弹框尺寸的操作
+ * @param callback
+ */
+export function useBeforeOpen(callback) {
+    const { beforeOpenCallbacks } = usePopperContext();
+    useLayoutEffect(() => {
+        beforeOpenCallbacks.add(callback);
+        return () => {
+            beforeOpenCallbacks.delete(callback);
+        };
+    }, [callback]);
+}
+/**
+ * 当弹框打开时，滚动至已选项，返回一个ref
+ */
+export function useScrollToSelected() {
+    const ref = useRef();
+    const isFirst = useRef(true);
+    const isMultiple = useRef(false);
+    useBeforeOpen(() => {
+        ref.current?.scrollIntoView({
+            block: isMultiple.current ? 'start' : 'center',
+            inline: isMultiple.current ? 'start' : 'center'
+        });
+    });
+    return useCallback((r) => {
+        if (isFirst.current) {
+            ref.current = r;
+            isFirst.current = false;
+        }
+        else {
+            isMultiple.current = true;
+        }
+    }, []);
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { ColorPropsValue, DIVProps } from '../../../types';
+export interface ProgressProps extends DIVProps {
+    showInfo?: boolean;
+    color?: ColorPropsValue;
+    status?: 'default' | 'processing' | 'success' | 'error';
+    variant?: 'linear' | 'circular' | 'gauge';
+    /** {@link variant}为"gauge"时有效，下方缺口的角度，@default 90 */
+    gapDegree?: number;
+    /** {@link variant}为"circular"时有效，表示圆圈的大小 */
+    size?: number;
+    /**
+     * {@link variant}为"linear"时，表示进度条粗细
+     * {@link variant}为"circular"或"gauge"时，表示圆环的宽度
+     * @default 4
+     */
+    barWidth?: number;
+    /** 若indeterminate为true，则会一直播放动画，@default false */
+    indeterminate?: boolean;
+    strokeLinecap?: React.SVGAttributes<SVGCircleElement>['strokeLinecap'];
+    value?: number;
+}
+export declare const Progress: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/progress/progress.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useMemo, useRef } from 'react';
+import { classes, useStyle } from './progress.style';
+import { classnames } from '../../utils';
+import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
+import { useTheme } from '../app';
+import { css, keyframes } from '@emotion/react';
+export const Progress = memo(forwardRef(({ showInfo = true, color = 'primary', status = 'default', variant = 'linear', gapDegree = 90, size = 60, indeterminate = false, barWidth = 4, strokeLinecap = variant === 'gauge' ? 'butt' : 'round', value = 0, ...props }, ref) => {
+    const { colors: { success, error } } = useTheme();
+    const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
+    const renderInfo = () => {
+        if (isSucceed) {
+            return _jsx(CheckCircleFilled, { className: classes.icon, style: { color: success } });
+        }
+        if (status === 'error') {
+            return _jsx(CloseCircleFilled, { className: classes.icon, style: { color: error } });
+        }
+        return value + '%';
+    };
+    const commonCircleProps = {
+        strokeLinecap,
+        r: size / 2 - barWidth / 2,
+        cx: size / 2,
+        cy: size / 2,
+        strokeWidth: barWidth
+    };
+    const strokeDasharray = Math.PI * 2 * commonCircleProps.r;
+    const barRef = useRef(null);
+    const cssAnimation = useMemo(() => {
+        if (variant === 'circular' && indeterminate) {
+            const dasharray = commonCircleProps.r * 10;
+            const anim = keyframes `
+                    0% {
+                        stroke-dasharray: 1px ${dasharray}px;
+                        stroke-dashoffset: 0;
+                    }
+                    50% {
+                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                        stroke-dashoffset: -${dasharray / 2 * .15}px;
+                    }
+                    100% {
+                        stroke-dasharray: ${dasharray / 2}px ${dasharray}px;
+                        stroke-dashoffset: -${dasharray / 2 * 1.25}px;
+                    }
+                `;
+            return css({ animation: `${anim} 1.4s linear infinite` });
+        }
+        return;
+    }, [indeterminate, variant, strokeLinecap, size, barWidth]);
+    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color, variant }), className: classnames(classes.root, props.className), "data-variant": variant, "data-indeterminate": indeterminate, "data-processing": value < 100 && status === 'processing', "data-success": isSucceed, "data-error": status === 'error', children: variant === 'linear'
+            ? _jsxs(_Fragment, { children: [_jsx("div", { className: classes.track, style: {
+                            height: barWidth,
+                            ...props.style
+                        }, children: _jsx("div", { className: classes.bar, style: indeterminate
+                                ? void 0
+                                : { width: value + '%' } }) }), showInfo && !indeterminate &&
+                        _jsx("div", { className: classes.info, children: renderInfo() })] })
+            : _jsxs(_Fragment, { children: [_jsxs("svg", { className: classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
+                            transform: variant === 'gauge'
+                                ? `rotate(${90 + gapDegree / 2}deg)`
+                                : void 0
+                        }, children: [_jsx("circle", { ...commonCircleProps, className: classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), _jsx("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: classes.bar, strokeDasharray: strokeDasharray, strokeDashoffset: variant === 'circular'
+                                    ? strokeDasharray * (1 - value / 100)
+                                    : strokeDasharray * (1 - Math.max(0, Math.min(100, value)) / 100 * (1 - gapDegree / 360)) })] }), showInfo && !indeterminate &&
+                        _jsx("div", { className: classes.info, children: renderInfo() })] }) }));
+}));

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

@@ -0,0 +1,11 @@
+import { ProgressProps } from './progress';
+export declare const classes: {
+    info: string;
+    track: string;
+    svg: string;
+    icon: string;
+    bar: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color, variant }: Required<Pick<ProgressProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,230 @@
+import { css, keyframes } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('progress', [
+    'info',
+    'icon',
+    'bar',
+    'svg',
+    'track'
+]);
+export function useStyle({ color, variant }) {
+    const colorValue = useColor(color);
+    return useCss(({ spacing, gray, easing, colors }) => {
+        const indeterminateBg = Color(colorValue).alpha(.3).string();
+        return variant === 'linear'
+            ? css `
+                display: flex;
+                gap: ${spacing[3]}px;
+                align-items: center;
+
+                .${classes.track} {
+                    flex: 1;
+                    background-color: ${gray(.1)};
+                    border-radius: 1000em;
+                    overflow: hidden;
+                    position: relative;
+
+                    &:before, .${classes.bar} {
+                        background-color: ${colorValue};
+                        border-radius: inherit;
+                        transition: width .2s ${easing.easeOut};
+                        position: absolute;
+                        inset: 0 auto 0 0;
+                    }
+    
+                    &:before {
+                        content: '';
+                    }
+                }
+
+                &[data-indeterminate=true] {
+                    .${classes.track} {
+                        background-color: ${indeterminateBg};
+                        
+                        &:before {
+                            animation: ${indeterminateAnim2} 2.2s ${easing.linear} infinite 1.1s;
+                        }
+                        
+                        .${classes.bar} {
+                            animation: ${indeterminateAnim1} 2.2s ${easing.linear} infinite;
+                        }
+                    }
+                }
+
+                .${classes.info} {
+                    line-height: 1;
+
+                    .${classes.icon} {
+                        animation: ${iconAnim} .2s ${easing.swing}
+                    }
+                }
+
+                &[data-success=true] {
+                    .${classes.bar} {
+                        background-color: ${colors.success};
+                    }
+                }
+
+                &[data-error=true] {
+                    .${classes.bar} {
+                        background-color: ${colors.error};
+                    }
+                }
+
+                &[data-processing=true] {
+                    .${classes.bar} {
+                        &:after {
+                            content: '';
+                            background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
+                            border-radius: inherit;
+                            position: absolute;
+                            inset: 0;
+                            animation: ${processingAnim} 2s infinite ${easing.easeOut};
+                        }
+                    }
+                }
+            `
+            // variant === 'circular' || variant === 'gauge'
+            : css `
+                display: inline-flex;
+                position: relative;
+
+                .${classes.svg} {
+                    transform: rotate(-90deg);
+                }
+
+                .${classes.track} {
+                    stroke: ${gray(.1)};
+                    fill: transparent;
+                }
+
+                .${classes.bar} {
+                    stroke: ${colorValue};
+                    fill: transparent;
+                    transition: stroke-dashoffset .2s ${easing.easeOut};
+                }
+
+                &[data-success=true] {
+                    .${classes.bar} {
+                        stroke: ${colors.success};
+                    }
+                }
+
+                &[data-error=true] {
+                    .${classes.bar} {
+                        stroke: ${colors.error};
+                    }
+                }
+
+                .${classes.info} {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    inset: 0;
+
+                    .${classes.icon} {
+                        animation: ${iconAnim} .2s ${easing.swing}
+                    }
+                }
+
+                &[data-indeterminate=true] {
+                    .${classes.svg} {
+                        animation: ${indeterminateAnim3} 1.6s ${easing.linear} infinite;
+                    }
+
+                    .${classes.track} {
+                        stroke: none;
+                    }
+                }
+
+                &[data-variant=gauge] {
+                    
+                }
+            `;
+    }, [colorValue, variant]);
+}
+const processingAnim = keyframes `
+    0% {
+        left: 0;
+        right: 100%;
+        opacity: 1;
+    }
+
+    50% {
+        left: 0;
+        right: 0;
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        right: 0;
+        opacity: 0;
+    }
+`;
+const iconAnim = keyframes `
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+`;
+const indeterminateAnim1 = keyframes `
+    0% {
+        left: 0;
+        right: 100%;
+    }
+
+    10% {
+        left: 0;
+        right: 60%;
+    }
+
+    30% {
+        left: 40%;
+        right: 0;
+    }
+
+    50%,
+    100% {
+        left: 100%;
+        right: 0;
+    }
+`;
+const indeterminateAnim2 = keyframes `
+    0% {
+        left: 0;
+        right: 100%;
+    }
+
+    15% {
+        left: 0;
+        right: 10%;
+    }
+
+    30% {
+        left: 70%;
+        right: 0;
+    }
+
+    50%,
+    100% {
+        left: 100%;
+        right: 0;
+    }
+`;
+const indeterminateAnim3 = keyframes `
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+`;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { CheckboxBaseProps } from '../checkboxBase';
+import { CheckboxBaseGroupSingleProps, ItemType } from '../checkboxBaseGroup';
+import { Id } from '../../../types';
+export interface RadioProps extends Omit<CheckboxBaseProps, '_type' | 'indeterminate'> {
+}
+export declare const Radio: {
+    (props: RadioProps): ReactElement;
+    Group: typeof RadioGroup;
+};
+export interface RadioGroupProps<I extends ItemType, V extends Id = Id> extends Omit<CheckboxBaseGroupSingleProps<I, V>, 'multiple'> {
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Omit<RadioGroupProps<ItemType, Id>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/radio/radio.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { CheckboxBase } from '../checkboxBase';
+import { CheckboxBaseGroup } from '../checkboxBaseGroup';
+export const Radio = forwardRef((props, ref) => {
+    return _jsx(CheckboxBase, { ...props, ref: ref, _type: "radio" });
+});
+export const RadioGroup = forwardRef((props, ref) => {
+    return _jsx(CheckboxBaseGroup, { ...props, ref: ref });
+});

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+export type CharacterProps = {
+    index: number;
+    active?: true;
+    half?: boolean;
+};
+export interface RatingProps extends Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    color?: ColorPropsValue;
+    size?: Size;
+    /** 星星的数量，@default 5 */
+    count?: number;
+    renderStar?: ReactNode | ((characterProps: CharacterProps) => ReactNode);
+    /** 允许选中半颗星 */
+    allowHalf?: boolean;
+    /** 为true时只高亮选中的星星，否则从第一颗开始高亮至选中，@default false */
+    highlightSelectedOnly?: boolean;
+    defaultValue?: number;
+    value?: number;
+    onChange?(value: number): void;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export declare const Rating: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<RatingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { cloneElement, forwardRef, isValidElement, memo, useState } from 'react';
+import { classnames, useControlled } from '../../utils';
+import { classes, useStyle } from './rating.style';
+import { StarFilled } from '@ant-design/icons';
+import { useTheme } from '../app';
+export const Rating = memo(forwardRef(({ color = '#FFCC00', size, count = 5, renderStar = _jsx(StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const [hovering, setHovering] = useState(0);
+    const enterHandler = (index, isHalf) => {
+        if (readOnly || disabled) {
+            return;
+        }
+        allowHalf
+            ? setHovering(isHalf ? index + .5 : index + 1)
+            : setHovering(index + 1);
+    };
+    const leaveHandler = (e) => {
+        props.onPointerOut?.(e);
+        setHovering(0);
+    };
+    const clickHandler = (index, isHalf) => {
+        if (readOnly || disabled) {
+            return;
+        }
+        allowHalf
+            ? setInnerValue(isHalf ? index + .5 : index + 1)
+            : setInnerValue(index + 1);
+    };
+    const renderStarFn = () => {
+        const characterIsFunction = typeof renderStar === 'function';
+        return Array(count).fill(void 0).map((_, index) => {
+            const refer = hovering || innerValue.current;
+            const isActive = highlightSelectedOnly
+                ? index === refer - 1
+                : index < refer;
+            const isHalf = !highlightSelectedOnly && isActive && index > refer - 1;
+            return (_jsxs("div", { className: classes.star, children: [characterIsFunction
+                        ? renderStar({ index })
+                        : isValidElement(renderStar)
+                            ? cloneElement(renderStar, { index })
+                            : renderStar, isActive && (characterIsFunction
+                        ? renderStar({
+                            index,
+                            active: true,
+                            half: isHalf
+                        })
+                        : isValidElement(renderStar)
+                            ? cloneElement(renderStar, {
+                                index,
+                                'data-active': true,
+                                'data-half': isHalf
+                            })
+                            : renderStar), _jsx("div", { className: classes.starBefore, onPointerEnter: () => enterHandler(index, true), onClick: () => clickHandler(index, true) }), _jsx("div", { className: classes.starAfter, onPointerEnter: () => enterHandler(index, false), onClick: () => clickHandler(index, false) })] }, index));
+        });
+    };
+    return (_jsx("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
+}));

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

@@ -0,0 +1,11 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    star: string;
+    starBefore: string;
+    starAfter: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;