@canlooks/can-ui 0.0.1

package/dist/cjs/components/grid/grid.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { ResponsiveProp } from '../../../types';
+import { GridItem } from './gridItem';
+import { TransportStyleProps } from '../transportStyle';
+export interface GridProps extends TransportStyleProps {
+    inline?: boolean;
+    /** 网格列数，@default {xs: 12} */
+    columnCount?: ResponsiveProp;
+    gap?: ResponsiveProp;
+    columnGap?: ResponsiveProp;
+    rowGap?: ResponsiveProp;
+}
+export declare const Grid: {
+    (props: GridProps): ReactElement;
+    Item: typeof GridItem;
+};

package/dist/cjs/components/grid/grid.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const grid_style_1 = require("./grid.style");
+const gridItem_1 = require("./gridItem");
+const utils_1 = require("../../utils");
+exports.Grid = (0, react_1.forwardRef)(({ inline, columnCount = { xs: 12 }, gap = { xs: 0 }, columnGap, rowGap, ...props }, ref) => {
+    columnCount = (0, utils_1.responsiveValue)(columnCount);
+    gap = (0, utils_1.responsiveValue)(gap);
+    columnGap = (0, utils_1.responsiveValue)(columnGap) ?? gap;
+    rowGap = (0, utils_1.responsiveValue)(rowGap) ?? gap;
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, grid_style_1.containerStyle)({ columnCount, columnGap, rowGap }), className: (0, utils_1.classnames)(grid_style_1.classes.root, props.className), style: {
+            display: inline ? 'inline-flex' : 'flex',
+            ...props.style
+        } }));
+});
+exports.Grid.Item = gridItem_1.GridItem;

package/dist/cjs/components/grid/grid.style.d.ts

@@ -0,0 +1,15 @@
+import { ResponsiveValue } from '../../../types';
+export declare const classes: {
+    item: string;
+} & {
+    root: string;
+};
+export declare function containerStyle({ columnCount, columnGap, rowGap }: {
+    columnCount: ResponsiveValue;
+    columnGap: ResponsiveValue;
+    rowGap: ResponsiveValue;
+}): import("@emotion/react").SerializedStyles;
+export declare function itemStyle({ span, offset }: {
+    span: ResponsiveValue;
+    offset: ResponsiveValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.containerStyle = containerStyle;
+exports.itemStyle = itemStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('grid', [
+    'item'
+]);
+function containerStyle({ columnCount, columnGap, rowGap }) {
+    return (0, react_1.css) `
+        ${(0, utils_1.responsiveVariables)(k => `
+            ${k in columnCount ? `--grid-columnCount: ${columnCount[k]}` : ''};
+            ${k in columnGap ? `--grid-column-gap: ${columnGap[k]}px` : ''};
+            ${k in rowGap ? `--grid-row-gap: ${rowGap[k]}px` : ''};
+        `)}
+
+        flex-wrap: wrap;
+        gap: var(--grid-row-gap) var(--grid-column-gap);
+    `;
+}
+function itemStyle({ span, offset }) {
+    return (0, react_1.css) `
+        ${(0, utils_1.responsiveVariables)(k => `
+            ${k in span ? `--grid-item-span: ${span[k]}` : ''};
+            ${k in offset ? `--grid-item-offset: ${offset[k]}` : ''};
+        `)}
+
+        --grid-item-width: calc((100% - var(--grid-column-gap) * (var(--grid-columnCount) - 1)) / var(--grid-columnCount));
+
+        width: calc(var(--grid-item-width) * var(--grid-item-span) + var(--grid-column-gap) * (var(--grid-item-span) - 1));
+        margin-left: calc(var(--grid-item-width) * var(--grid-item-offset) + var(--grid-column-gap) * var(--grid-item-offset));
+    `;
+}

package/dist/cjs/components/grid/gridItem.d.ts

@@ -0,0 +1,7 @@
+import { ResponsiveProp } from '../../../types';
+import { TransportStyleProps } from '../transportStyle';
+export interface GridItemProps extends TransportStyleProps {
+    span?: ResponsiveProp;
+    offset?: ResponsiveProp;
+}
+export declare const GridItem: import("react").ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/components/grid/gridItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const grid_style_1 = require("./grid.style");
+exports.GridItem = (0, react_1.forwardRef)(({ span = { xs: 1 }, offset = { xs: 0 }, ...props }, ref) => {
+    span = (0, utils_1.responsiveValue)(span);
+    offset = (0, utils_1.responsiveValue)(offset);
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, grid_style_1.itemStyle)({ span, offset }), className: (0, utils_1.classnames)(grid_style_1.classes.item, props.className) }));
+});

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

@@ -0,0 +1,2 @@
+export * from './grid';
+export * from './gridItem';

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

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

package/dist/cjs/components/highlight/highlight.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactNode } from 'react';
+export type HighlightProps = {
+    keywords?: string | string[];
+    highlightClassName?: string;
+    highlightStyle?: CSSProperties;
+    renderHighlight?: (text: string) => ReactNode;
+    children?: string;
+};
+export declare const Highlight: import("react").MemoExoticComponent<({ keywords, highlightClassName, highlightStyle, renderHighlight, children }: HighlightProps) => string | ReactNode[] | undefined>;

package/dist/cjs/components/highlight/highlight.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Highlight = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const typography_1 = require("../typography");
+const app_1 = require("../app");
+exports.Highlight = (0, react_1.memo)(({ keywords, highlightClassName, highlightStyle, renderHighlight, children }) => {
+    const { colors } = (0, app_1.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((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderHighlight?.(highlightText) ||
+                (0, jsx_runtime_1.jsx)(typography_1.Typography.mark, { className: highlightClassName, style: {
+                        color: colors.error,
+                        ...highlightStyle
+                    }, children: highlightText }) }, i));
+    });
+    ret.push(children.substring(offset));
+    return ret;
+});

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

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

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const image_style_1 = require("./image.style");
+const utils_1 = require("../../utils");
+const icons_1 = require("@ant-design/icons");
+const imagePreview_1 = require("./imagePreview");
+exports.Image = (0, react_1.memo)((0, react_1.forwardRef)(({ src, fallback, onError, alt = '', width, height, objectFit = 'cover', objectPosition = 'center', imgProps, actions, previewable = true, previewProps, onPreview, ...props }, ref) => {
+    const [failed, setFailed] = (0, utils_1.useDerivedState)(() => !src, [src]);
+    const errorHandler = (e) => {
+        onError?.(e);
+        !failed.current && setFailed(true);
+    };
+    const [previewOpen, setPreviewOpen] = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: image_style_1.classes.previewButton, onClick: previewHandler, children: [(0, jsx_runtime_1.jsx)(icons_1.EyeOutlined, {}), (0, jsx_runtime_1.jsx)("div", { children: "\u9884\u89C8" })] }));
+        }
+        return actions;
+    })();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: image_style_1.style, className: (0, utils_1.classnames)(image_style_1.classes.root, props.className), "data-error": failed.current, children: [props.children, (0, jsx_runtime_1.jsx)("img", { className: image_style_1.classes.img, src: failed.current ? fallback : src, alt: alt, width: width, height: height, ...imgProps, style: {
+                            objectFit,
+                            objectPosition,
+                            ...imgProps?.style
+                        }, onError: errorHandler }), !!renderedActions && !failed.current &&
+                        (0, jsx_runtime_1.jsx)("div", { className: image_style_1.classes.mask, children: renderedActions })] }), previewable && src &&
+                (0, jsx_runtime_1.jsx)(imagePreview_1.ImagePreview, { src: [src], ...previewProps, open: previewOpen.current, onOpenChange: setPreviewOpen })] }));
+}));

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+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)('image', [
+    'img',
+    'mask',
+    'previewButton'
+]);
+exports.style = (0, utils_1.defineCss)(({ background, easing, spacing }) => {
+    const maskBg = (0, color_1.default)(background.card).alpha(.9).string();
+    return (0, react_1.css) `
+        display: inline-flex;
+        position: relative;
+        overflow: hidden;
+
+        .${exports.classes.img} {
+            width: inherit;
+            height: inherit;
+        }
+
+        &[data-error=true] {
+            .${exports.classes.img} {
+                opacity: 0;
+            }
+        }
+        
+        .${exports.classes.mask} {
+            background-color: ${maskBg};
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity .2s ${easing.easeOut};
+
+            .${exports.classes.previewButton} {
+                position: absolute;
+                inset: 0;
+                display: flex;
+                gap: ${spacing[2]}px;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+            }
+        }
+
+        &:hover {
+            .${exports.classes.mask} {
+                opacity: 1;
+            }
+        }
+    `;
+});

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePreview = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const modal_1 = require("../modal");
+const utils_1 = require("../../utils");
+const imagePreview_style_1 = require("./imagePreview.style");
+const icons_1 = require("@ant-design/icons");
+const button_1 = require("../button");
+const react_zoom_pan_pinch_1 = require("react-zoom-pan-pinch");
+const tooltip_1 = require("../tooltip");
+exports.ImagePreview = (0, react_1.memo)((0, react_1.forwardRef)(({ src = [], defaultOpen = false, open, onOpenChange, closable = true, transformWrapper, ...props }, ref) => {
+    const srcArr = Array.isArray(src) ? src : [src];
+    const [innerOpen, setInnerOpen] = (0, utils_1.useControlled)(defaultOpen, open, onOpenChange);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
+    const transformWrapperRef = (0, react_1.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] = (0, react_1.useState)(0);
+    const isPanning = (0, react_1.useRef)(false);
+    const commonControlProps = {
+        className: imagePreview_style_1.classes.button,
+        shape: 'circular',
+        size: 'large',
+        color: 'text'
+    };
+    return ((0, jsx_runtime_1.jsx)(modal_1.Modal, { ...props, ref: ref, css: imagePreview_style_1.style, className: (0, utils_1.classnames)(imagePreview_style_1.classes.root, props.className), open: innerOpen.current, maskProps: {
+            children: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.control, children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C-90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate - 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateLeftOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u65CB\u8F6C90\u00B0", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setRotate(rotate + 90), children: (0, jsx_runtime_1.jsx)(icons_1.RotateRightOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u7F29\u5C0F", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomOut(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomOutOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u653E\u5927", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.zoomIn(), children: (0, jsx_runtime_1.jsx)(icons_1.ZoomInOutlined, {}) }) }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { title: "\u9002\u5E94\u5C4F\u5E55", children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => transformWrapperRef.current.resetTransform(), children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenOutlined, {}) }) }), closable &&
+                                (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: () => setInnerOpen(false), children: (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}) })] }), srcArr.length > 1 &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.swap, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: prev, children: (0, jsx_runtime_1.jsx)(icons_1.LeftOutlined, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...commonControlProps, onClick: next, children: (0, jsx_runtime_1.jsx)(icons_1.RightOutlined, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: imagePreview_style_1.classes.counter, children: [activeIndex + 1, " / ", srcArr.length] })] })] }))
+        }, children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformWrapper, { smooth: false, ...transformWrapper, ref: transformWrapperRef, minScale: .2, onPanning: () => isPanning.current = true, onPanningStop: () => isPanning.current && setTimeout(() => isPanning.current = false), children: (0, jsx_runtime_1.jsx)(react_zoom_pan_pinch_1.TransformComponent, { wrapperClass: imagePreview_style_1.classes.imageWrapper, contentClass: imagePreview_style_1.classes.image, wrapperProps: {
+                    onClick: () => !isPanning.current && setInnerOpen(false)
+                }, children: (0, jsx_runtime_1.jsx)("img", { src: srcArr[activeIndex], style: { rotate: rotate + 'deg' }, onLoad: imgLoaded }) }) }) }));
+}));

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const modal_style_1 = require("../modal/modal.style");
+exports.classes = (0, utils_1.defineClasses)('image-preview', [
+    'button',
+    'control',
+    'swap',
+    'counter',
+    'imageWrapper',
+    'image'
+]);
+exports.style = (0, utils_1.defineCss)(({ spacing, easing }) => (0, react_1.css) `
+    .${exports.classes.control} {
+        display: flex;
+        gap: ${spacing[4]}px;
+        position: absolute;
+        top: ${spacing[10]}px;
+        right: ${spacing[10]}px;
+        z-index: 1;
+    }
+
+    .${exports.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;
+    }
+
+    .${exports.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;
+    }
+
+    .${exports.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;
+        }
+    }
+
+    .${modal_style_1.classes.modal} {
+        padding: 0;
+    }
+
+    .${exports.classes.imageWrapper} {
+        width: 100%;
+        height: 100%;
+
+        .${exports.classes.image} {
+            padding: 40px;
+            
+            img {
+                max-width: 100%;
+                max-height: 100%;
+                transition: rotate .4s ${easing.easeOut};
+            }
+        }
+    }
+`);

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const input_style_1 = require("./input.style");
+const react_1 = require("react");
+const inputBase_1 = require("../inputBase");
+exports.Input = (0, react_1.memo)((0, react_1.forwardRef)(({ inputProps, inputRef, widthAdaptable, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, ref: ref, css: input_style_1.style, className: (0, utils_1.classnames)(input_style_1.classes.root, props.className), "data-adaptable": widthAdaptable, children: ({ ref, ...rest }) => {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { size: 1, ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputRef), className: (0, utils_1.classnames)(input_style_1.classes.input, inputProps?.className) }), widthAdaptable &&
+                        (0, jsx_runtime_1.jsx)("span", { className: input_style_1.classes.adaptable, children: rest.value })] }));
+        } }));
+}));

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.commonNativeInputStyle = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('input', [
+    'input',
+    'adaptable'
+]);
+exports.commonNativeInputStyle = (0, react_1.css) `
+    width: 100%;
+    height: 22px;
+    flex: 1;
+    border: none;
+    outline: none;
+    padding: 0;
+    background-color: transparent;
+    font-size: 1em;
+`;
+exports.style = (0, react_1.css) `
+    position: relative;
+
+    .${exports.classes.input} {
+        ${exports.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] {
+        .${exports.classes.input} {
+            height: 100%;
+            position: absolute;
+            inset: 0;
+        }
+    }
+
+    .${exports.classes.adaptable} {
+        opacity: 0;
+        pointer-events: none;
+    }
+`;

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

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

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

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

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