@canlooks/can-ui 0.0.1

package/dist/esm/components/highlight/highlight.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Fragment, memo } from 'react';
+import { Typography } from '../typography';
+import { useTheme } from '../app';
+export const Highlight = memo(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
+    const { colors } = useTheme();
+    if (!children) {
+        return children;
+    }
+    const keywordsSet = new Set(Array.isArray(keywords) ? keywords : [keywords]);
+    if (!keywordsSet.size) {
+        return children;
+    }
+    const ranges = [];
+    for (const w of keywordsSet) {
+        if (!w) {
+            return;
+        }
+        const iterator = children.matchAll(new RegExp(w, 'ig'));
+        for (const match of iterator) {
+            const start = match.index;
+            ranges.push([start, start + w.length]);
+        }
+    }
+    const ret = [];
+    let offset = 0;
+    ranges.sort((a, b) => a[0] - b[0]).forEach(([start, end], i) => {
+        if (start > offset) {
+            ret.push(children.substring(offset, start));
+        }
+        const highlightText = children.substring(start, offset = end);
+        ret.push(_jsx(Fragment, { children: renderHighlight?.(highlightText) ||
+                _jsx(Typography.mark, { className: highlightClassName, style: {
+                        color: colors.error,
+                        ...highlightStyle
+                    }, children: highlightText }) }, i));
+    });
+    ret.push(children.substring(offset));
+    return ret;
+});

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

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

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

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

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

@@ -0,0 +1,19 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DIVProps } from '../../../types';
+import { ImagePreviewProps } from './imagePreview';
+export interface ImageProps extends DIVProps {
+    src?: string;
+    fallback?: string;
+    onError?: React.ReactEventHandler;
+    alt?: string;
+    width?: string | number;
+    height?: string | number;
+    objectFit?: CSSProperties['objectFit'];
+    objectPosition?: CSSProperties['objectPosition'];
+    imgProps?: JSX.IntrinsicElements['img'];
+    actions?: ReactNode;
+    previewable?: boolean;
+    previewProps?: ImagePreviewProps;
+    onPreview?(e: React.MouseEvent<HTMLDivElement>): void;
+}
+export declare const Image: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/image/image.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes, style } from './image.style';
+import { classnames, useControlled, useDerivedState } from '../../utils';
+import { EyeOutlined } from '@ant-design/icons';
+import { ImagePreview } from './imagePreview';
+export const Image = memo(forwardRef(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }, ref) => {
+    const [failed, setFailed] = useDerivedState(() => !src, [src]);
+    const errorHandler = (e) => {
+        onError?.(e);
+        !failed.current && setFailed(true);
+    };
+    const [previewOpen, setPreviewOpen] = useControlled(!!previewProps?.defaultOpen, previewProps?.open, previewProps?.onOpenChange);
+    const previewHandler = (e) => {
+        onPreview?.(e);
+        if (e.defaultPrevented) {
+            return;
+        }
+        setPreviewOpen(true);
+    };
+    const renderedActions = (() => {
+        if (typeof actions === 'undefined' && previewable) {
+            return (_jsxs("div", { className: classes.previewButton, onClick: previewHandler, children: [_jsx(EyeOutlined, {}), _jsx("div", { children: "\u9884\u89C8" })] }));
+        }
+        return actions;
+    })();
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-error": failed.current, children: [props.children, _jsx("img", { className: classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
+                            objectFit,
+                            objectPosition,
+                            ...imgProps?.style
+                        }, onError: errorHandler }), !!renderedActions && !failed.current &&
+                        _jsx("div", { className: classes.mask, children: renderedActions })] }), previewable && src &&
+                _jsx(ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+}));

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

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

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

@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('image', [
+    'img',
+    'mask',
+    'previewButton'
+]);
+export const style = defineCss(({ background, easing, spacing }) => {
+    const maskBg = Color(background.card).alpha(.9).string();
+    return css `
+        display: inline-flex;
+        position: relative;
+        overflow: hidden;
+
+        .${classes.img} {
+            width: inherit;
+            height: inherit;
+        }
+
+        &[data-error=true] {
+            .${classes.img} {
+                opacity: 0;
+            }
+        }
+        
+        .${classes.mask} {
+            background-color: ${maskBg};
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity .2s ${easing.easeOut};
+
+            .${classes.previewButton} {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                gap: ${spacing[2]}px;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+            }
+        }
+
+        &:hover {
+            .${classes.mask} {
+                opacity: 1;
+            }
+        }
+    `;
+});

package/dist/esm/components/image/imagePreview.d.ts

@@ -0,0 +1,10 @@
+import { ModalProps } from '../modal';
+import { ReactZoomPanPinchProps } from 'react-zoom-pan-pinch';
+export interface ImagePreviewProps extends ModalProps {
+    src?: string | string[];
+    defaultOpen?: boolean;
+    onOpenChange?(open: boolean): void;
+    closable?: boolean;
+    transformWrapper?: ReactZoomPanPinchProps;
+}
+export declare const ImagePreview: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<ImagePreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/image/imagePreview.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useRef, useState } from 'react';
+import { Modal } from '../modal';
+import { classnames, useControlled } from '../../utils';
+import { classes, style } from './imagePreview.style';
+import { CloseOutlined, FullscreenOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import { Button } from '../button';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import { Tooltip } from '../tooltip';
+export const ImagePreview = memo(forwardRef(({ src = [], defaultOpen = false, open, onOpenChange, closable = true, transformWrapper, ...props }, ref) => {
+    const srcArr = Array.isArray(src) ? src : [src];
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const transformWrapperRef = useRef(null);
+    const imgLoaded = () => {
+        transformWrapperRef.current.centerView();
+    };
+    const prev = (e) => {
+        e.stopPropagation();
+        setActiveIndex(o => (o - 1 + srcArr.length) % srcArr.length);
+        transformWrapperRef.current?.resetTransform();
+    };
+    const next = (e) => {
+        e.stopPropagation();
+        setActiveIndex(o => (o + 1) % srcArr.length);
+        transformWrapperRef.current?.resetTransform();
+    };
+    const [rotate, setRotate] = useState(0);
+    const isPanning = useRef(false);
+    const commonControlProps = {
+        className: classes.button,
+        shape: 'circular',
+        size: 'large',
+        color: 'text'
+    };
+    return (_jsx(Modal, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), open: innerOpen.current, maskProps: {
+            children: (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.control, children: [_jsx(Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: _jsx(RotateLeftOutlined, {}) }) }), _jsx(Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: _jsx(Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: _jsx(RotateRightOutlined, {}) }) }), _jsx(Tooltip, { title: "\u7F29\u5C0F", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomOut(), children: _jsx(ZoomOutOutlined, {}) }) }), _jsx(Tooltip, { title: "\u653E\u5927", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomIn(), children: _jsx(ZoomInOutlined, {}) }) }), _jsx(Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: _jsx(Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.resetTransform(), children: _jsx(FullscreenOutlined, {}) }) }), closable &&
+                                _jsx(Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: _jsx(CloseOutlined, {}) })] }), srcArr.length > 1 &&
+                        _jsxs(_Fragment, { children: [_jsxs("div", { className: classes.swap, children: [_jsx(Button, { ...commonControlProps, onClick: prev, children: _jsx(LeftOutlined, {}) }), _jsx(Button, { ...commonControlProps, onClick: next, children: _jsx(RightOutlined, {}) })] }), _jsxs("div", { className: classes.counter, children: [activeIndex + 1, " / ", srcArr.length] })] })] }))
+        }, children: _jsx(TransformWrapper, { smooth: false, ...transformWrapper, ref: transformWrapperRef, minScale: .2, onPanning: () => isPanning.current = true, onPanningStop: () => isPanning.current && setTimeout(() => isPanning.current = false), children: _jsx(TransformComponent, { wrapperClass: classes.imageWrapper, contentClass: classes.image, wrapperProps: {
+                    onClick: () => !isPanning.current && setInnerOpen(false)
+                }, children: _jsx("img", { src: srcArr[activeIndex], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded }) }) }) }));
+}));

package/dist/esm/components/image/imagePreview.style.d.ts

@@ -0,0 +1,11 @@
+export declare const classes: {
+    button: string;
+    image: string;
+    counter: string;
+    control: string;
+    swap: string;
+    imageWrapper: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/esm/components/image/imagePreview.style.js

@@ -0,0 +1,85 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as modalClasses } from '../modal/modal.style';
+export const classes = defineClasses('image-preview', [
+    'button',
+    'control',
+    'swap',
+    'counter',
+    'imageWrapper',
+    'image'
+]);
+export const style = defineCss(({ spacing, easing }) => css `
+    .${classes.control} {
+        display: flex;
+        gap: ${spacing[4]}px;
+        position: absolute;
+        top: ${spacing[10]}px;
+        right: ${spacing[10]}px;
+        z-index: 1;
+    }
+
+    .${classes.swap} {
+        width: 100%;
+        height: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 ${spacing[8]}px;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        z-index: 1;
+    }
+
+    .${classes.counter} {
+        line-height: 40px;
+        padding: 0 24px;
+        border-radius: 1000em;
+        color: #ffffff;
+        background-color: rgba(0, 0, 0, .3);
+        position: absolute;
+        bottom: ${spacing[10]}px;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 1;
+    }
+
+    .${classes.button} {
+        background-image: none !important;
+        background-color: rgba(0, 0, 0, .4);
+        transition: background-color .2s ${easing.easeOut};
+    
+        &:hover {
+            background-color: rgba(0, 0, 0, .3);
+        }
+    
+        &:active {
+            transition: background-color 0s;
+            background-color: rgba(0, 0, 0, .5);
+        }
+
+        &:last-of-type {
+            margin-left: ${spacing[4]}px;
+        }
+    }
+
+    .${modalClasses.modal} {
+        padding: 0;
+    }
+
+    .${classes.imageWrapper} {
+        width: 100%;
+        height: 100%;
+
+        .${classes.image} {
+            padding: 40px;
+            
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                transition: rotate .4s ${easing.easeOut};
+            }
+        }
+    }
+`);

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Ref } from 'react';
+import { InputBaseProps } from '../inputBase';
+export interface InputProps extends Omit<InputBaseProps<'input'>, 'children'> {
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    /** 是否根据内容自动调整宽度 */
+    widthAdaptable?: boolean;
+}
+export declare const Input: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/input/input.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { classnames, cloneRef } from '../../utils';
+import { classes, style } from './input.style';
+import { forwardRef, memo } from 'react';
+import { InputBase } from '../inputBase';
+export const Input = memo(forwardRef(({ inputProps, inputRef, widthAdaptable, ...props }, ref) => {
+    return (_jsx(InputBase, { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
+            return (_jsxs(_Fragment, { children: [_jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), className: classnames(classes.input, inputProps?.className) }), widthAdaptable &&
+                        _jsx("span", { className: classes.adaptable, children: rest.value })] }));
+        } }));
+}));

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

@@ -0,0 +1,8 @@
+export declare const classes: {
+    input: string;
+    adaptable: string;
+} & {
+    root: string;
+};
+export declare const commonNativeInputStyle: import("@emotion/react").SerializedStyles;
+export declare const style: import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,50 @@
+import { css } from '@emotion/react';
+import { defineClasses } from '../../utils';
+export const classes = defineClasses('input', [
+    'input',
+    'adaptable'
+]);
+export const commonNativeInputStyle = css `
+    width: 100%;
+    height: 22px;
+    flex: 1;
+    border: none;
+    outline: none;
+    padding: 0;
+    background-color: transparent;
+    font-size: 1em;
+`;
+export const style = css `
+    position: relative;
+
+    .${classes.input} {
+        ${commonNativeInputStyle}
+    
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    
+        &::-ms-clear,
+        &::-webkit-search-cancel-button {
+            display: none;
+        }
+    
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            width: 12px;
+        }
+    }
+
+    &[data-adaptable=true] {
+        .${classes.input} {
+            height: 100%;
+            position: absolute;
+            inset: 0;
+        }
+    }
+
+    .${classes.adaptable} {
+        opacity: 0;
+        pointer-events: none;
+    }
+`;

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { ColorPropsValue, DIVProps, Size } from '../../../types';
+export interface InputBaseProps<T extends 'input' | 'textarea'> extends Omit<DIVProps, 'prefix' | 'onChange' | 'children'> {
+    variant?: 'outlined' | 'underlined' | 'plain';
+    size?: Size;
+    shape?: 'square' | 'rounded';
+    color?: ColorPropsValue;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    clearable?: boolean;
+    onClear?(): void;
+    loading?: boolean;
+    type?: T extends 'input' ? JSX.IntrinsicElements[T]['type'] : never;
+    min?: T extends 'input' ? JSX.IntrinsicElements[T]['min'] : never;
+    max?: T extends 'input' ? JSX.IntrinsicElements[T]['max'] : never;
+    step?: T extends 'input' ? JSX.IntrinsicElements[T]['step'] : never;
+    precision?: T extends 'input' ? number : never;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    autoFocus?: JSX.IntrinsicElements[T]['autoFocus'];
+    defaultValue?: JSX.IntrinsicElements[T]['defaultValue'];
+    value?: JSX.IntrinsicElements[T]['value'];
+    onChange?: JSX.IntrinsicElements[T]['onChange'];
+    children(childProps: Omit<JSX.IntrinsicElements[T], 'ref'> & {
+        ref?: Ref<T extends 'textarea' ? HTMLTextAreaElement : HTMLInputElement>;
+    }): ReactNode;
+}
+export declare const InputBase: <T extends "input" | "textarea">(props: InputBaseProps<T>) => ReactElement;

package/dist/esm/components/inputBase/inputBase.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { classes, useStyle } from './inputBase.style';
+import { classnames, fixInputNumber, useControlled } from '../../utils';
+import { useTheme } from '../app';
+import { CloseCircleFilled } from '@ant-design/icons';
+import { Button } from '../button';
+import { LoadingIndicator } from '../loadingIndicator';
+export const InputBase = forwardRef(({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+// 以下属性传递给<input />
+min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const innerInputRef = useRef(null);
+    const wrapClickHandler = (e) => {
+        props.onClick?.(e);
+        // 点击包裹元素时，聚焦到内部的input元素
+        !disabled && innerInputRef.current && innerInputRef.current !== document.activeElement && innerInputRef.current.focus();
+    };
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value);
+    const changeHandler = (e) => {
+        onChange?.(e);
+        setInnerValue(e.target.value);
+    };
+    const clear = (e) => {
+        // 阻止冒泡，防止触发clickAway事件，如输入框在popper内的情况
+        e.stopPropagation();
+        if (innerInputRef.current) {
+            innerInputRef.current.value = '';
+            e.target = e.currentTarget = innerInputRef.current;
+            onClear?.();
+            changeHandler(e);
+            innerInputRef.current.focus();
+        }
+    };
+    const blurHandler = (e) => {
+        if (type !== 'number') {
+            return;
+        }
+        const value = fixInputNumber(e.target.value, { min, max, precision });
+        if (e.target.value !== value) {
+            e.target.value = value;
+            changeHandler(e);
+        }
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+        // 防止点击wrap时，输入框失去焦点
+        onPointerDown: e => {
+            props.onPointerDown?.(e);
+            const tagName = e.target?.tagName;
+            tagName !== 'TEXTAREA' && tagName !== 'INPUT' && e.preventDefault();
+        }, children: [!!prefix &&
+                _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.content, children: children({
+                    ref: innerInputRef,
+                    type,
+                    min,
+                    max,
+                    step,
+                    precision,
+                    placeholder,
+                    disabled,
+                    readOnly,
+                    autoFocus,
+                    // 复制disabled与readOnly属性用于定义样式
+                    'data-disabled': !!disabled + '',
+                    'data-read-only': !!readOnly + '',
+                    value: innerValue.current ?? '',
+                    onChange: changeHandler,
+                    onBlur: blurHandler,
+                    onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
+                }) }), loading &&
+                _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
+                _jsx(Button, { className: classes.clear, variant: "plain", color: "disabled", onClick: clear, children: _jsx(CloseCircleFilled, {}) }), !!suffix &&
+                _jsx("div", { className: classes.suffix, children: suffix })] }));
+});

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

@@ -0,0 +1,10 @@
+import { InputBaseProps } from './inputBase';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    clear: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<InputBaseProps<any>, 'color'>>): import("@emotion/react").SerializedStyles;