@canlooks/can-ui 0.0.1

package/dist/cjs/utils/utils.d.ts

@@ -0,0 +1,123 @@
+import { MutableRefObject, Ref, ReactNode } from 'react';
+import { Id } from '../../types';
+/**
+ * 生成最简易的随机ID
+ * @param namespace
+ */
+export declare function getEazyID(namespace?: string): string;
+/**
+ * 获取任意长度由随机字母组成的ID
+ * @param length
+ */
+export declare function getShortID(length?: number): string;
+/**
+ * 拼接元素的类名
+ * @param classes
+ */
+export declare function classnames(...classes: any[]): string;
+/**
+ * 驼峰转分隔
+ * @param str
+ * @param separator
+ */
+export declare function humpToSegmented(str: string, separator?: string): string;
+/**
+ * 将某个值统一转换成数组或undefined
+ * @param value
+ */
+export declare function toArray<T>(value: undefined | null | T | T[]): T[] | null;
+/**
+ * 判断某个值是否为已选中
+ * @param value 需要判断的值
+ * @param selectedValue 已选中的值，可能为undefined | V | V[]
+ */
+export declare function isSelected<V extends Id>(value: V | undefined, selectedValue: V | V[] | undefined): boolean;
+/**
+ * 对象深复制
+ */
+export declare function cloneDeep<T>(target: T): T;
+/**
+ * 深度合并对象
+ */
+export declare function mergeDeep<T extends {}, U>(target: T, source: U): T & U;
+export declare function mergeDeep<T extends {}, U, V>(target: T, source: U, source2: V): T & U & V;
+export declare function mergeDeep<T extends {}, U, V, W>(target: T, source: U, source2: V, source3: W): T & U & V & W;
+export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U, source2: V, source3: W, source4: X): T & U & V & W & X;
+export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
+export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
+export declare function mergeDeep(target: object, ...sources: any[]): any;
+/**
+ * 判断元素是否完全在目标容器内，用于Popper组件
+ * @param el
+ * @param container
+ */
+export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
+/**
+ * 下一个事件循环
+ * @param callback
+ */
+export declare function nextTick(callback?: () => void): Promise<void>;
+/**
+ * 克隆Ref
+ * @param refs
+ */
+export declare function cloneRef<T>(...refs: (Ref<T> | MutableRefObject<T | null> | undefined)[]): (r: T | null) => void;
+/**
+ * 判断变量是否为undefined或null
+ * @param it
+ */
+export declare function isUnset(it: any): it is undefined | null;
+/**
+ * 判断变量是否为Promise
+ * @param it
+ */
+export declare function isPromise<T>(it: any): it is Promise<T>;
+/**
+ * 获取promise的状态
+ * @param promise
+ */
+export declare function getPromiseState(promise: Promise<any>): Promise<'pending' | 'fulfilled' | 'rejected'>;
+/**
+ * 将节点用某个分隔符拼接起来，通常用于渲染多选项
+ * @param arr
+ * @param callback
+ * @param seperator
+ */
+export declare function joinNodes<T>(arr: T[], callback: (item: T, index: number) => ReactNode, seperator?: ReactNode): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal | null | undefined)[];
+/**
+ * 修复数字输入框的值，包括最大值最小值限制，以及小数点精度
+ * @param value
+ * @param param
+ */
+export type FixInputNumberParam = {
+    min?: number;
+    max?: number;
+    precision?: number;
+};
+export declare function fixInputNumber(value: string, { min, max, precision }: FixInputNumberParam): string;
+/**
+ * 判断某个元素是否为另一个元素的子元素
+ * @param target
+ * @param container
+ */
+export declare function isChildOf(target: Element | null, container?: Element | null): boolean;
+/**
+ * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * @param target
+ * @param callback
+ */
+export declare function fineParent(target: Element, callback: (el: Element) => any): HTMLElement | null;
+/**
+ * 将数值限制在某个范围内
+ * @param value
+ * @param {[min, max]}
+ */
+export declare function range(value: number, min?: number, max?: number): number;
+/**
+ * 对象深度查找，也可赋值
+ * @param obj
+ * @param keyPath
+ * @param setValue
+ * @param separator
+ */
+export declare function queryDeep<T extends object = any, U = any>(obj: T, keyPath: Id | Id[], setValue?: (oldValue: any) => U, separator?: string): U;

package/dist/cjs/utils/utils.js

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getEazyID = getEazyID;
+exports.getShortID = getShortID;
+exports.classnames = classnames;
+exports.humpToSegmented = humpToSegmented;
+exports.toArray = toArray;
+exports.isSelected = isSelected;
+exports.cloneDeep = cloneDeep;
+exports.mergeDeep = mergeDeep;
+exports.isElementVisibleCompletely = isElementVisibleCompletely;
+exports.nextTick = nextTick;
+exports.cloneRef = cloneRef;
+exports.isUnset = isUnset;
+exports.isPromise = isPromise;
+exports.getPromiseState = getPromiseState;
+exports.joinNodes = joinNodes;
+exports.fixInputNumber = fixInputNumber;
+exports.isChildOf = isChildOf;
+exports.fineParent = fineParent;
+exports.range = range;
+exports.queryDeep = queryDeep;
+/**
+ * 生成最简易的随机ID
+ * @param namespace
+ */
+function getEazyID(namespace = '') {
+    return `${namespace}${Date.now()}${Math.random()}`;
+}
+const randomIdAlphabet = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
+/**
+ * 获取任意长度由随机字母组成的ID
+ * @param length
+ */
+function getShortID(length = 8) {
+    const { length: alphabetLength } = randomIdAlphabet;
+    let id = '';
+    while (length--) {
+        id += randomIdAlphabet[Math.floor(Math.random() * alphabetLength)];
+    }
+    return id;
+}
+/**
+ * 拼接元素的类名
+ * @param classes
+ */
+function classnames(...classes) {
+    const ret = [];
+    for (let i = 0, { length } = classes; i < length; i++) {
+        const cls = classes[i];
+        if (!cls) {
+            continue;
+        }
+        if (typeof cls === 'object') {
+            if (Array.isArray(cls)) {
+                cls.length && ret.push(classnames(...cls));
+            }
+            else {
+                for (const k in cls) {
+                    cls[k] && ret.push(k);
+                }
+            }
+        }
+        else {
+            ret.push(cls);
+        }
+    }
+    return ret.join(' ');
+}
+/**
+ * 驼峰转分隔
+ * @param str
+ * @param separator
+ */
+function humpToSegmented(str, separator = '-') {
+    return str.replace(/([A-Z])/g, (_, $1, index) => {
+        return index ? separator + $1.toLowerCase() : $1;
+    });
+}
+/**
+ * 将某个值统一转换成数组或undefined
+ * @param value
+ */
+function toArray(value) {
+    return isUnset(value)
+        ? null
+        : Array.isArray(value) ? value : [value];
+}
+/**
+ * 判断某个值是否为已选中
+ * @param value 需要判断的值
+ * @param selectedValue 已选中的值，可能为undefined | V | V[]
+ */
+function isSelected(value, selectedValue) {
+    return isUnset(value) || isUnset(selectedValue)
+        ? false
+        : Array.isArray(selectedValue)
+            ? selectedValue.includes(value)
+            : selectedValue === value;
+}
+/**
+ * 对象深复制
+ */
+function cloneDeep(target) {
+    if (typeof structuredClone === 'function') {
+        return structuredClone(target);
+    }
+    if (!target || typeof target !== 'object') {
+        return target;
+    }
+    if (Array.isArray(target)) {
+        return target.map(v => {
+            return cloneDeep(v);
+        });
+    }
+    const res = {};
+    for (const k in target) {
+        res[k] = cloneDeep(target[k]);
+    }
+    return res;
+}
+function mergeDeep(target, ...sources) {
+    for (let i = 0, { length } = sources; i < length; i++) {
+        const source = sources[i];
+        if (source && typeof source === 'object') {
+            for (const k in source) {
+                const v = source[k];
+                if (v && typeof v === 'object') {
+                    target[k] ||= Array.isArray(v) ? [] : {};
+                    mergeDeep(target[k], v);
+                }
+                else {
+                    target[k] = v;
+                }
+            }
+        }
+    }
+    return target;
+}
+/**
+ * 判断元素是否完全在目标容器内，用于Popper组件
+ * @param el
+ * @param container
+ */
+function isElementVisibleCompletely(target, container) {
+    const { left, top, right, bottom } = target.getBoundingClientRect();
+    if (container) {
+        const { left: containerLeft, top: containerTop, right: containerRight, bottom: containerBottom } = container.getBoundingClientRect();
+        return left >= containerLeft && top >= containerTop && right <= containerRight && bottom <= containerBottom;
+    }
+    const vWidth = window.innerWidth || document.documentElement.clientWidth;
+    const vHeight = window.innerHeight || document.documentElement.clientHeight;
+    return left >= 0 && top >= 0 && right <= vWidth && bottom <= vHeight;
+}
+/**
+ * 下一个事件循环
+ * @param callback
+ */
+function nextTick(callback) {
+    return new Promise(resolve => {
+        queueMicrotask(() => {
+            callback?.();
+            resolve();
+        });
+    });
+}
+/**
+ * 克隆Ref
+ * @param refs
+ */
+function cloneRef(...refs) {
+    return (r) => {
+        refs.forEach(ref => {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(r);
+                }
+                else {
+                    ref.current = r;
+                }
+            }
+        });
+    };
+}
+/**
+ * 判断变量是否为undefined或null
+ * @param it
+ */
+function isUnset(it) {
+    return typeof it === 'undefined' || it === null;
+}
+/**
+ * 判断变量是否为Promise
+ * @param it
+ */
+function isPromise(it) {
+    return it instanceof Promise || typeof it?.then === 'function';
+}
+function getPromiseState(promise) {
+    const s = Symbol();
+    return Promise.race([promise, s]).then(res => {
+        return res === s ? 'pending' : 'fulfilled';
+    }).catch(() => 'rejected');
+}
+/**
+ * 将节点用某个分隔符拼接起来，通常用于渲染多选项
+ * @param arr
+ * @param callback
+ * @param seperator
+ */
+function joinNodes(arr, callback, seperator = ' / ') {
+    return arr.flatMap((item, index) => {
+        return index > 0
+            ? [seperator, callback(item, index)]
+            : callback(item, index);
+    });
+}
+function fixInputNumber(value, { min = -Infinity, max = Infinity, precision }) {
+    let num = +value;
+    if (isNaN(num)) {
+        return '';
+    }
+    num = Math.max(min, Math.min(max, num));
+    if (typeof precision === 'number') {
+        return num.toFixed(precision);
+    }
+    return num + '';
+}
+/**
+ * 判断某个元素是否为另一个元素的子元素
+ * @param target
+ * @param container
+ */
+function isChildOf(target, container) {
+    if (!container) {
+        return false;
+    }
+    while (target) {
+        if (target === container) {
+            return true;
+        }
+        target = target.parentElement;
+    }
+    return false;
+}
+/**
+ * 从某个元素开始，一直向上查找，返回true表示找到，会停止递归
+ * @param target
+ * @param callback
+ */
+function fineParent(target, callback) {
+    while (target) {
+        const { parentElement } = target;
+        if (!parentElement || callback(parentElement)) {
+            return parentElement;
+        }
+        target = parentElement;
+    }
+    return null;
+}
+/**
+ * 将数值限制在某个范围内
+ * @param value
+ * @param {[min, max]}
+ */
+function range(value, min = -Infinity, max = Infinity) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * 对象深度查找，也可赋值
+ * @param obj
+ * @param keyPath
+ * @param setValue
+ * @param separator
+ */
+function queryDeep(obj, keyPath, setValue, separator = '.') {
+    if (Array.isArray(keyPath)) {
+        let result = obj;
+        for (let i = 0, { length } = keyPath; i < length; i++) {
+            if (typeof result !== 'object' || !result) {
+                result = void 0;
+                break;
+            }
+            const k = keyPath[i];
+            if (setValue) {
+                if (i === length - 1) {
+                    result[k] = setValue(result[k]);
+                }
+                else if (!(k in result)) {
+                    result[k] = typeof keyPath[i + 1] === 'number' ? [] : {};
+                }
+            }
+            result = result[k];
+        }
+        return result;
+    }
+    if (typeof keyPath === 'string' && keyPath.includes(separator)) {
+        return queryDeep(obj, keyPath.split(separator), setValue);
+    }
+    if (setValue) {
+        obj[keyPath] = setValue(obj[keyPath]);
+    }
+    return obj[keyPath];
+}

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { DIVProps, Size } from '../../../types';
+export interface AccordionProps extends Omit<DIVProps, 'title' | 'prefix'> {
+    size?: Size;
+    title?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    expandIcon?: ReactNode | ((expanded: boolean) => ReactNode);
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?(expanded: boolean): void;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export declare const Accordion: import("react").ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/accordion/accordion.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classes, style } from './accordion.style';
+import { classnames, useControlled } from '../../utils';
+import { CaretRightOutlined } from '@ant-design/icons';
+import { useTheme } from '../app';
+import { Collapse } from '../transitionBase';
+export const Accordion = forwardRef(({ size, title, prefix, suffix, expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const [innerExpanded, setInnerExpanded] = useControlled(defaultExpanded, expanded, onExpandedChange);
+    const toggleExpanded = () => {
+        !readOnly && !disabled && setInnerExpanded(o => !o);
+    };
+    const renderExpandIcon = () => {
+        if (!expandIcon) {
+            return _jsx(CaretRightOutlined, { className: classes.expandIcon });
+        }
+        if (typeof expandIcon === 'function') {
+            return expandIcon(innerExpanded.current);
+        }
+        return expandIcon;
+    };
+    return (_jsxs("div", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-expanded": innerExpanded.current, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsxs("div", { className: classes.titleRow, onClick: toggleExpanded, children: [renderExpandIcon(), !!prefix && _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.title, children: title }), !!suffix && _jsx("div", { className: classes.suffix, children: suffix })] }), !!props.children &&
+                _jsx(Collapse, { in: innerExpanded.current, children: _jsx("div", { className: classes.content, children: props.children }) })] }));
+});

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

@@ -0,0 +1,11 @@
+export declare const classes: {
+    title: string;
+    content: string;
+    prefix: string;
+    titleRow: string;
+    suffix: string;
+    expandIcon: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,129 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('accordion', [
+    'titleRow',
+    'expandIcon',
+    'title',
+    'prefix',
+    'suffix',
+    'content'
+]);
+export const style = defineCss(({ divider, borderRadius, background, spacing, text, gray, easing }) => css `
+    border: 1px solid ${divider};
+    border-radius: ${borderRadius}px;
+    background-color: ${background.card};
+    transition: margin .2s ${easing.easeOut};
+
+    .${classes.titleRow} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[2]}px;
+        padding: 9px ${spacing[5]}px;
+        transition: padding .2s ${easing.easeOut};
+
+        .${classes.expandIcon} {
+            color: ${text.disabled};
+            transition: transform .2s ${easing.easeOut};
+        }
+
+        .${classes.title} {
+            flex: 1;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        .${classes.prefix},
+        .${classes.suffix} {
+            color: ${text.secondary};
+        }
+    }
+
+    &:not([data-read-only=true]):not([data-disabled=true]) {
+        .${classes.titleRow} {
+            cursor: pointer;
+        }
+    }
+
+    &[data-disabled=true] {
+        background-color: ${gray(.1)};
+
+        .${classes.titleRow} {
+            cursor: not-allowed;
+        }
+    }
+
+    &[data-expanded=true] {
+        .${classes.titleRow} {
+            padding: 15px ${spacing[5]}px;
+        }
+
+        .${classes.expandIcon} {
+            transform: rotate(90deg);
+        }
+    }
+
+    .${classes.content} {
+        padding: 0 ${spacing[5]}px ${spacing[5]}px;
+    }
+
+    &[data-size=small] {
+        .${classes.titleRow} {
+            padding: 6px ${spacing[5]}px;
+        }
+
+        &[data-expanded=true] {
+            .${classes.titleRow} {
+                padding: 11px ${spacing[5]}px;
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.titleRow} {
+            padding: 12px ${spacing[5]}px;
+        }
+
+        &[data-expanded=true] {
+            .${classes.titleRow} {
+                padding: 17px ${spacing[5]}px;
+            }
+        }
+    }
+
+    &[data-compact=column] {
+        &:not([data-first=true]) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            margin-top: -1px;
+        }
+    
+        &:not([data-last=true]) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+        
+        &[data-expanded=true] {
+            &:not([data-first=true]) {
+                margin-top: ${spacing[3]}px;
+            }
+
+            &:not([data-last=true]):not(:has(+ [data-expanded=true])) {
+                margin-bottom: ${spacing[3]}px
+            }
+        }
+    }
+
+    &[data-compact=row] {
+        &:not([data-first=true]) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            margin-left: -1px;
+        }
+    
+        &:not([data-last=true]) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+`);

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

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

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

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

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

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+import { OverlayBaseProps } from '../overlayBase';
+import { TransitionBaseProps } from '../transitionBase';
+import { MenuItemProps } from '../menuItem';
+import { Obj } from '../../../types';
+export type ActionSheetCloseReason = 'escape' | 'canceled' | 'confirmed' | 'maskClicked' | 'action';
+export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<OverlayBaseProps, 'title'> {
+    title?: ReactNode;
+    actions?: A[];
+    placement?: 'top' | 'bottom';
+    /** 是否可通过点击遮罩层关闭对话框，@default false */
+    maskClosable?: boolean;
+    /** 是否可通过键盘的【ESC】键关闭对话框，@default true */
+    escapeClosable?: boolean;
+    /** 点击选项 */
+    onAction?(action: A): void;
+    onConfirm?(e: React.MouseEvent<HTMLDivElement>): void;
+    onCancel?(e: React.MouseEvent<HTMLButtonElement | HTMLDivElement> | KeyboardEvent): void;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onClose?(reason: ActionSheetCloseReason): void;
+    /** 是否显示确定按钮，@default false */
+    showConfirm?: boolean;
+    confirmText?: ReactNode;
+    confirmProps?: MenuItemProps;
+    /** 是否显示取消按钮，@default true */
+    showCancel?: boolean;
+    cancelText?: ReactNode;
+    cancelProps?: MenuItemProps;
+    slideProps?: TransitionBaseProps<HTMLDivElement>;
+}
+export declare const ActionSheet: <A extends MenuItemProps & Obj>(props: ActionSheetProps<A>) => ReactElement;

package/dist/esm/components/actionSheet/actionSheet.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classes, style } from './actionSheet.style';
+import { classnames, cloneRef, useControlled, useEscapeClosable } from '../../utils';
+import { OverlayBase } from '../overlayBase';
+import { Slide } from '../transitionBase';
+import { MenuItem } from '../menuItem';
+const placementToDirection = {
+    top: 'down',
+    bottom: 'up'
+};
+export const ActionSheet = memo(forwardRef(({ title, actions, placement = 'bottom', maskClosable, escapeClosable = true, onAction, onConfirm, onCancel, defaultOpen = false, open, onClose, showConfirm, confirmText = '确 定', confirmProps, showCancel = true, cancelText = '取 消', cancelProps, slideProps, ...props }, ref) => {
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open);
+    const close = (reason) => {
+        onClose?.(reason);
+        setInnerOpen(false);
+    };
+    const overlayRef = useEscapeClosable({ escapeClosable, close }, onCancel);
+    const onMaskClick = (e) => {
+        props.onMaskClick?.(e);
+        maskClosable && close('maskClicked');
+    };
+    const cancelHandler = (e) => {
+        onCancel?.(e);
+        close('canceled');
+    };
+    return (_jsx(OverlayBase, { ...props, ref: cloneRef(ref, overlayRef), css: style, className: classnames(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-placement": placement, children: _jsxs(Slide, { direction: placementToDirection[placement], ...slideProps, className: classnames(classes.sheet, slideProps?.className), in: innerOpen.current, children: [!!(title || showConfirm || actions?.length) &&
+                    _jsxs("div", { className: classes.card, children: [!!title &&
+                                _jsx("div", { className: classes.title, children: title }), showConfirm &&
+                                _jsx(MenuItem, { className: classes.action, size: "large", label: confirmText, ...confirmProps, onClick: e => {
+                                        confirmProps?.onClick?.(e);
+                                        onConfirm?.(e);
+                                        close('confirmed');
+                                    } }), actions?.map((menuItemProps, i) => _jsx(MenuItem, { className: classnames(classes.action, menuItemProps.className), size: "large", ...menuItemProps, onClick: e => {
+                                    menuItemProps.onClick?.(e);
+                                    onAction?.(menuItemProps);
+                                    close('action');
+                                } }, i))] }), showCancel &&
+                    _jsx("div", { className: classes.card, children: _jsx(MenuItem, { color: "error", emphasized: true, size: "large", label: cancelText, ...cancelProps, onClick: cancelHandler }) })] }) }));
+}));