@canlooks/can-ui 0.0.1

package/dist/cjs/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/cjs/components/progress/progress.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Progress = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const progress_style_1 = require("./progress.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+const app_1 = require("../app");
+const react_2 = require("@emotion/react");
+exports.Progress = (0, react_1.memo)((0, react_1.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 } } = (0, app_1.useTheme)();
+    const isSucceed = status === 'success' || (status !== 'error' && value === 100 && variant !== 'gauge');
+    const renderInfo = () => {
+        if (isSucceed) {
+            return (0, jsx_runtime_1.jsx)(icons_1.CheckCircleFilled, { className: progress_style_1.classes.icon, style: { color: success } });
+        }
+        if (status === 'error') {
+            return (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, { className: progress_style_1.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 = (0, react_1.useRef)(null);
+    const cssAnimation = (0, react_1.useMemo)(() => {
+        if (variant === 'circular' && indeterminate) {
+            const dasharray = commonCircleProps.r * 10;
+            const anim = (0, react_2.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 (0, react_2.css)({ animation: `${anim} 1.4s linear infinite` });
+        }
+        return;
+    }, [indeterminate, variant, strokeLinecap, size, barWidth]);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, progress_style_1.useStyle)({ color, variant }), className: (0, utils_1.classnames)(progress_style_1.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'
+            ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.track, style: {
+                            height: barWidth,
+                            ...props.style
+                        }, children: (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.bar, style: indeterminate
+                                ? void 0
+                                : { width: value + '%' } }) }), showInfo && !indeterminate &&
+                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfo() })] })
+            : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: progress_style_1.classes.svg, width: size, height: size, viewBox: `0 0 ${size} ${size}`, style: {
+                            transform: variant === 'gauge'
+                                ? `rotate(${90 + gapDegree / 2}deg)`
+                                : void 0
+                        }, children: [(0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, className: progress_style_1.classes.track, strokeDasharray: variant === 'gauge' ? strokeDasharray : void 0, strokeDashoffset: variant === 'gauge' ? strokeDasharray * gapDegree / 360 : void 0 }), (0, jsx_runtime_1.jsx)("circle", { ...commonCircleProps, ref: barRef, css: cssAnimation, className: progress_style_1.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 &&
+                        (0, jsx_runtime_1.jsx)("div", { className: progress_style_1.classes.info, children: renderInfo() })] }) }));
+}));

package/dist/cjs/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/cjs/components/progress/progress.style.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('progress', [
+    'info',
+    'icon',
+    'bar',
+    'svg',
+    'track'
+]);
+function useStyle({ color, variant }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, gray, easing, colors }) => {
+        const indeterminateBg = (0, color_1.default)(colorValue).alpha(.3).string();
+        return variant === 'linear'
+            ? (0, react_1.css) `
+                display: flex;
+                gap: ${spacing[3]}px;
+                align-items: center;
+
+                .${exports.classes.track} {
+                    flex: 1;
+                    background-color: ${gray(.1)};
+                    border-radius: 1000em;
+                    overflow: hidden;
+                    position: relative;
+
+                    &:before, .${exports.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] {
+                    .${exports.classes.track} {
+                        background-color: ${indeterminateBg};
+                        
+                        &:before {
+                            animation: ${indeterminateAnim2} 2.2s ${easing.linear} infinite 1.1s;
+                        }
+                        
+                        .${exports.classes.bar} {
+                            animation: ${indeterminateAnim1} 2.2s ${easing.linear} infinite;
+                        }
+                    }
+                }
+
+                .${exports.classes.info} {
+                    line-height: 1;
+
+                    .${exports.classes.icon} {
+                        animation: ${iconAnim} .2s ${easing.swing}
+                    }
+                }
+
+                &[data-success=true] {
+                    .${exports.classes.bar} {
+                        background-color: ${colors.success};
+                    }
+                }
+
+                &[data-error=true] {
+                    .${exports.classes.bar} {
+                        background-color: ${colors.error};
+                    }
+                }
+
+                &[data-processing=true] {
+                    .${exports.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'
+            : (0, react_1.css) `
+                display: inline-flex;
+                position: relative;
+
+                .${exports.classes.svg} {
+                    transform: rotate(-90deg);
+                }
+
+                .${exports.classes.track} {
+                    stroke: ${gray(.1)};
+                    fill: transparent;
+                }
+
+                .${exports.classes.bar} {
+                    stroke: ${colorValue};
+                    fill: transparent;
+                    transition: stroke-dashoffset .2s ${easing.easeOut};
+                }
+
+                &[data-success=true] {
+                    .${exports.classes.bar} {
+                        stroke: ${colors.success};
+                    }
+                }
+
+                &[data-error=true] {
+                    .${exports.classes.bar} {
+                        stroke: ${colors.error};
+                    }
+                }
+
+                .${exports.classes.info} {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    inset: 0;
+
+                    .${exports.classes.icon} {
+                        animation: ${iconAnim} .2s ${easing.swing}
+                    }
+                }
+
+                &[data-indeterminate=true] {
+                    .${exports.classes.svg} {
+                        animation: ${indeterminateAnim3} 1.6s ${easing.linear} infinite;
+                    }
+
+                    .${exports.classes.track} {
+                        stroke: none;
+                    }
+                }
+
+                &[data-variant=gauge] {
+                    
+                }
+            `;
+    }, [colorValue, variant]);
+}
+const processingAnim = (0, react_1.keyframes) `
+    0% {
+        left: 0;
+        right: 100%;
+        opacity: 1;
+    }
+
+    50% {
+        left: 0;
+        right: 0;
+        opacity: 1;
+    }
+
+    100% {
+        left: 100%;
+        right: 0;
+        opacity: 0;
+    }
+`;
+const iconAnim = (0, react_1.keyframes) `
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+`;
+const indeterminateAnim1 = (0, react_1.keyframes) `
+    0% {
+        left: 0;
+        right: 100%;
+    }
+
+    10% {
+        left: 0;
+        right: 60%;
+    }
+
+    30% {
+        left: 40%;
+        right: 0;
+    }
+
+    50%,
+    100% {
+        left: 100%;
+        right: 0;
+    }
+`;
+const indeterminateAnim2 = (0, react_1.keyframes) `
+    0% {
+        left: 0;
+        right: 100%;
+    }
+
+    15% {
+        left: 0;
+        right: 10%;
+    }
+
+    30% {
+        left: 70%;
+        right: 0;
+    }
+
+    50%,
+    100% {
+        left: 100%;
+        right: 0;
+    }
+`;
+const indeterminateAnim3 = (0, react_1.keyframes) `
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+`;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./radio"), exports);

package/dist/cjs/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/cjs/components/radio/radio.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = exports.Radio = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const checkboxBase_1 = require("../checkboxBase");
+const checkboxBaseGroup_1 = require("../checkboxBaseGroup");
+exports.Radio = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(checkboxBase_1.CheckboxBase, { ...props, ref: ref, _type: "radio" });
+});
+exports.RadioGroup = (0, react_1.forwardRef)((props, ref) => {
+    return (0, jsx_runtime_1.jsx)(checkboxBaseGroup_1.CheckboxBaseGroup, { ...props, ref: ref });
+});

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./rating"), exports);

package/dist/cjs/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/cjs/components/rating/rating.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const rating_style_1 = require("./rating.style");
+const icons_1 = require("@ant-design/icons");
+const app_1 = require("../app");
+exports.Rating = (0, react_1.memo)((0, react_1.forwardRef)(({ color = '#FFCC00', size, count = 5, renderStar = (0, jsx_runtime_1.jsx)(icons_1.StarFilled, {}), allowHalf, highlightSelectedOnly, defaultValue = 0, value, onChange, readOnly, disabled, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const [hovering, setHovering] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: rating_style_1.classes.star, children: [characterIsFunction
+                        ? renderStar({ index })
+                        : (0, react_1.isValidElement)(renderStar)
+                            ? (0, react_1.cloneElement)(renderStar, { index })
+                            : renderStar, isActive && (characterIsFunction
+                        ? renderStar({
+                            index,
+                            active: true,
+                            half: isHalf
+                        })
+                        : (0, react_1.isValidElement)(renderStar)
+                            ? (0, react_1.cloneElement)(renderStar, {
+                                index,
+                                'data-active': true,
+                                'data-half': isHalf
+                            })
+                            : renderStar), (0, jsx_runtime_1.jsx)("div", { className: rating_style_1.classes.starBefore, onPointerEnter: () => enterHandler(index, true), onClick: () => clickHandler(index, true) }), (0, jsx_runtime_1.jsx)("div", { className: rating_style_1.classes.starAfter, onPointerEnter: () => enterHandler(index, false), onClick: () => clickHandler(index, false) })] }, index));
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, rating_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(rating_style_1.classes.root, props.className), "data-size": size, "data-read-only": readOnly, "data-disabled": disabled, onPointerLeave: leaveHandler, children: renderStarFn() }));
+}));

package/dist/cjs/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;

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('rate', [
+    'star',
+    'starBefore',
+    'starAfter'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, mode, gray, easing }) => (0, react_1.css) `
+        display: inline-flex;
+        gap: ${spacing[3]}px;
+
+        .${exports.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;
+                }
+            }
+
+            .${exports.classes.starBefore},
+            .${exports.classes.starAfter} {
+                width: 50%;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+            }
+
+            .${exports.classes.starBefore} {
+                left: 0;
+            }
+
+            .${exports.classes.starAfter} {
+                right: 0;
+            }
+        }
+
+        &[data-size=small] {
+            .${exports.classes.star} {
+                font-size: ${16 / 14}em;
+            }
+        }
+
+        &[data-size=large] {
+            .${exports.classes.star} {
+                font-size: ${24 / 14}em;
+            }
+        }
+
+        &:not([data-read-only=true]) {
+            .${exports.classes.star} {
+                cursor: pointer;
+                transition: transform .2s ${easing.easeOut};
+    
+                &:hover {
+                    transform: scale(1.2);
+                }
+
+                &:active {
+                    transition: transform 0s;
+                    transform: scale(.9);
+                }
+            }
+        }
+
+        &[data-disabled=true] {
+            &, .${exports.classes.star} {
+                cursor: not-allowed;
+            }
+        }
+    `, [colorValue]);
+}

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

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./resizable"), exports);

package/dist/cjs/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>>;