@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,14 @@
+export declare const classes: {
+    search: string;
+    prefix: string;
+    checkbox: string;
+    label: string;
+    icon: string;
+    suffix: string;
+    indent: string;
+    expand: string;
+    node: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,109 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('tree', [
+    'search',
+    'node',
+    'indent',
+    'expand',
+    'checkbox',
+    'icon',
+    'label',
+    'prefix',
+    'suffix'
+]);
+export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
+    const c = Color(colors.primary);
+    const hover = gray(mode === 'light' ? .05 : .2);
+    const active = gray(mode === 'light' ? .1 : .12);
+    const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
+    const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
+    const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
+    return css `
+        .${classes.search} {
+            margin-bottom: ${spacing[3]}px;
+        }
+
+        .${classes.node} {
+            display: flex;
+            align-items: center;
+            padding-right: ${spacing[2]}px;
+            margin-bottom: 1px;
+            cursor: pointer;
+            border-radius: ${borderRadius}px;
+            transition: background-color .2s ${easing.easeOut};
+
+            &[data-disabled=true] {
+                color: ${text.disabled};
+                cursor: not-allowed;
+            }
+
+            &[data-selected=true] {
+                background-color: ${selectedBg};
+
+                &:hover {
+                    background-color: ${selectedHover};
+                }
+
+                &:active {
+                    transition: background-color 0s;
+                    background-color: ${selectedActive};
+                }
+            }
+            
+            &:not([data-disabled=true]):not([data-selected=true]):hover {
+                background-color: ${hover};
+            }
+
+            &:not([data-disabled=true]):not([data-selected=true]):active {
+                transition: background-color 0s;
+                background-color: ${active};
+            }
+
+            .${classes.indent} {
+                align-self: stretch;
+                display: flex;
+            }
+
+            .${classes.expand} {
+                width: 29px;
+                align-self: stretch;
+                align-items: center;
+                justify-content: center;
+
+                .${classes.icon} > svg {
+                    transition: transform .2s ${easing.easeOut};
+                }
+            }
+
+            .${classes.checkbox} {
+                margin-right: ${spacing[3]}px;
+            }
+
+            .${classes.label} {
+                flex: 1;
+                padding: 5px 0;
+            }
+
+            .${classes.prefix} {
+                color: ${text.secondary};
+                margin-right: ${spacing[2]}px;
+            }
+
+            .${classes.suffix} {
+                color: ${text.disabled};
+                margin-left: ${spacing[2]}px;
+            }
+        }
+
+        &[data-show-line=true] {
+            \.${classes.indent}:after {
+                content: '';
+                width: 1px;
+                height: 100%;
+                margin-left: 14px;
+                background-color: ${divider};
+            }
+        }
+    `;
+});

package/dist/esm/components/tree/treeNode.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { DIVProps, Id } from '../../../types';
+export interface TreeNodeProps extends Omit<DIVProps, 'prefix'> {
+    value: Id;
+    label?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    disabled?: boolean;
+    /** @private 内部使用，表明该节点的层级 */
+    _level?: number;
+}
+export declare const TreeNode: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TreeNodeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/esm/components/tree/treeNode.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, memo } from 'react';
+import { classes } from './tree.style';
+import { classnames } from '../../utils';
+import { Collapse } from '../transitionBase';
+import { RightOutlined } from '@ant-design/icons';
+import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { useTreeContext } from './tree';
+import { useSelectionContext } from '../selectionContext';
+export const TreeNode = memo(forwardRef(({ value, label, prefix, suffix, disabled, _level = 0, ...props }, ref) => {
+    const { expandedSet = new Set(), toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
+    disabled ??= context.disabled;
+    const { selectionStatus, toggleSelected } = useSelectionContext();
+    const currentExpanded = expandedSet?.has(value);
+    const status = selectionStatus?.get(value);
+    const clickHandler = () => {
+        !readOnly && !disabled && toggleSelected(value);
+        clickLabelToExpand && toggleExpanded?.(value);
+    };
+    const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: ref, className: classnames(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, onClick: clickHandler, children: [Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i)), _jsx(Button, { className: classes.expand, variant: "plain", color: "text", onClick: e => {
+                            e.stopPropagation();
+                            toggleExpanded?.(value);
+                        }, children: renderExpandIcon
+                            ? renderExpandIcon(value, !!currentExpanded, [...expandedSet])
+                            : hasChildren &&
+                                _jsx(RightOutlined, { className: classes.icon, rotate: currentExpanded ? 90 : 0 }) }), showCheckbox &&
+                        _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
+                                e.stopPropagation();
+                                clickHandler();
+                            } }), !!prefix &&
+                        _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                        _jsx("div", { className: classes.suffix, children: suffix })] }), hasChildren &&
+                _jsx(Collapse, { in: currentExpanded, children: Children.map(props.children, child => {
+                        return isValidElement(child)
+                            ? cloneElement(child, { _level: _level + 1 })
+                            : child;
+                    }) })] }));
+}));

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+import { PopperProps, PopperRef } from '../popper';
+import { NodeType, TreeBaseProps, TreeMultipleProps, TreeNode, TreeSingleProps } from '../tree';
+import { Id } from '../../../types';
+interface TreeSelectBaseProps<N extends NodeType<V>, V extends Id = Id> extends TreeBaseProps<N, V> {
+    /** <select />内部由<input />实现 */
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    options?: N[];
+    sizeAdaptable?: boolean;
+    loading?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** 以下属性转发至<InputBase/> */
+    placeholder?: string;
+    autoFocus?: boolean;
+    clearable?: boolean;
+    onClear?(): void;
+}
+export interface TreeSelectSingleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeSingleProps<N, V> {
+    renderBackfill?(selectedValue: V): ReactNode;
+}
+export interface TreeSelectMultipleProps<N extends NodeType<V>, V extends Id = Id> extends TreeSelectBaseProps<N, V>, TreeMultipleProps<N, V> {
+    renderBackfill?(selectedValue: V[]): ReactNode;
+}
+export type TreeSelectProps<N extends NodeType<V>, V extends Id = Id> = TreeSelectSingleProps<N, V> | TreeSelectMultipleProps<N, V>;
+export declare const TreeSelect: {
+    <N extends NodeType<V>, V extends Id = Id>(props: TreeSelectProps<N, V>): ReactElement;
+    Option: typeof TreeNode;
+    Node: typeof TreeNode;
+};
+export {};

package/dist/esm/components/treeSelect/treeSelect.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Children, forwardRef, isValidElement, memo, useMemo } from 'react';
+import { Popper } from '../popper';
+import { Tree, TreeNode } from '../tree';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { useControlled, toArray, classnames, cloneRef } from '../../utils';
+import { InputBase } from '../inputBase';
+import { LoadingIndicator } from '../loadingIndicator';
+import { popperStyle } from '../popper/popper.style';
+import { Tag } from '../tag';
+import { classes, style } from './treeSelect.style';
+import { useTreeSelect } from '../selectionContext/selectionHook';
+export const TreeSelect = memo(forwardRef(({ inputProps, inputRef, popperProps, popperRef, nodes, options, defaultValue, value, onChange, sizeAdaptable, loading, defaultOpen, open, onOpenChange, renderBackfill, 
+// 以下属性转发至<InputBase/>
+placeholder = '请选择', autoFocus, clearable, onClear, ...props }, ref) => {
+    props.labelKey ??= 'label';
+    const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const openChangeHandler = (open) => {
+        popperProps?.onOpenChange?.(open);
+        setInnerOpen(open);
+    };
+    const actualOptions = useMemo(() => {
+        if (options) {
+            return options;
+        }
+        if (nodes) {
+            return nodes;
+        }
+        const fn = (arr) => {
+            return arr?.map(node => {
+                if (isValidElement(node)) {
+                    const { props } = node;
+                    return {
+                        ...props,
+                        children: fn(Children.toArray(props.children))
+                    };
+                }
+                return node;
+            });
+        };
+        return fn(Children.toArray(props.children));
+    }, [options, nodes, props.children]);
+    const { innerValue, setInnerValue, toggleSelected, optionsMap } = useTreeSelect({
+        options: actualOptions,
+        primaryKey: props.primaryKey ?? 'value',
+        childrenKey: props.childrenKey ?? 'children',
+        clearable: !!props.multiple,
+        multiple: props.multiple,
+        defaultValue: defaultValue,
+        value,
+        onChange
+    });
+    useMemo(() => {
+        // 单选模式下，选中一次就自动关闭弹框
+        !props.multiple && setInnerOpen(false);
+    }, [innerValue.current, props.multiple]);
+    const clearHandler = () => {
+        onClear?.();
+        setInnerValue(props.multiple ? [] : void 0);
+    };
+    const renderBackfillFn = () => {
+        if (renderBackfill) {
+            return renderBackfill(innerValue.current);
+        }
+        if (props.multiple) {
+            return toArray(innerValue.current)?.map(v => _jsx(Tag, { closable: true, onClose: () => toggleSelected(v), children: optionsMap.get(v)?.[props.labelKey] ?? v }, v));
+        }
+        return (_jsx("div", { className: classes.backfillWrap, children: optionsMap.get(innerValue.current)?.[props.labelKey] ?? innerValue.current }));
+    };
+    return (_jsx(Popper, { css: popperStyle, open: innerOpen.current, onOpenChange: openChangeHandler, placement: "bottom", variant: "collapse", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, sizeAdaptable: sizeAdaptable, content: _jsx(Tree, { ...props, nodes: options, value: innerValue.current, onChange: setInnerValue }), ...popperProps, popperRef: popperRef, onPointerDown: e => {
+            popperProps?.onPointerDown?.(e);
+            e.preventDefault();
+        }, children: _jsx(InputBase, { clearable: !!props.multiple, ref: ref, css: style, className: classnames(classes.root, props.className), "data-focused": open, value: innerValue.current, onClear: clearHandler, placeholder: placeholder, autoFocus: autoFocus, disabled: props.disabled, readOnly: props.readOnly, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!toArray(innerValue.current)?.length
+                        ? _jsx("div", { className: classes.placeholder, children: placeholder })
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { size: 1, ...rest, ...inputProps, ref: cloneRef(ref, inputRef), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": open, children: loading
+                            ? _jsx(LoadingIndicator, {})
+                            : _jsx(CaretDownOutlined, {}) })] }) }) }));
+}));
+TreeSelect.Option = TreeSelect.Node = TreeNode;

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

@@ -0,0 +1,10 @@
+export declare const classes: {
+    placeholder: string;
+    arrow: string;
+    contentWrap: string;
+    backfill: string;
+    backfillWrap: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,56 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { classes as tagClasses } from '../tag/tag.style';
+export const classes = defineClasses('tree-select', [
+    'contentWrap',
+    'placeholder',
+    'backfill',
+    'backfillWrap',
+    'arrow'
+]);
+export const style = defineCss(({ spacing, text, easing }) => css `
+    cursor: pointer;
+    position: relative;
+
+    .${classes.contentWrap} {
+        display: flex;
+        align-items: center;
+        gap: ${spacing[1]}px;
+    }
+
+    .${classes.placeholder} {
+        flex: 1;
+        color: ${text.placeholder};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .${classes.backfill} {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${spacing[1]}px;
+
+        .${tagClasses.root} {
+            min-width: 0;
+        }
+
+        .${tagClasses.content},
+        .${classes.backfillWrap} {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+
+    .${classes.arrow} {
+        color: ${text.placeholder};
+        transition: transform .2s ${easing.easeOut};
+
+        &[data-open=true] {
+            transform: rotate(180deg);
+        }
+    }
+`);

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

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

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

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

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

@@ -0,0 +1,36 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ColorPropsValue, OverridableProps } from '../../../types';
+import { ButtonProps } from '../button';
+import { InputProps } from '../input';
+import { TextareaProps } from '../textarea';
+export type TypographyProps = {
+    color?: ColorPropsValue;
+    editable?: boolean;
+    onEditFinish?(text: string): void;
+    copyable?: boolean;
+    onCopy?(text: string): void;
+    editComponentProps?: InputProps | TextareaProps;
+    ellipsisRows?: number;
+    wordBreak?: CSSProperties['wordBreak'];
+    expandable?: boolean;
+    expandButtonProps?: ButtonProps;
+};
+export type OverridedTypographyProps<C> = TypographyProps & Omit<OverridableProps<C>, 'onCopy'>;
+type TypographyComponent<C extends keyof JSX.IntrinsicElements = 'p'> = (props: OverridedTypographyProps<C>) => ReactNode;
+export declare const Typography: TypographyComponent & {
+    h1: TypographyComponent<"h1">;
+    h2: TypographyComponent<"h2">;
+    h3: TypographyComponent<"h3">;
+    h4: TypographyComponent<"h4">;
+    h5: TypographyComponent<"h5">;
+    h6: TypographyComponent<"h6">;
+    mark: TypographyComponent<"mark">;
+    code: TypographyComponent<"code">;
+    kbd: TypographyComponent<"kbd">;
+    a: TypographyComponent<"a">;
+    i: TypographyComponent<"i">;
+    b: TypographyComponent<"b">;
+    u: TypographyComponent<"u">;
+    del: TypographyComponent<"del">;
+};
+export {};

package/dist/esm/components/typography/typography.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo, useLayoutEffect, useRef, useState } from 'react';
+import { classnames, cloneRef, useUnmounted } from '../../utils';
+import { useStyle, classes, editStyle } from './typography.style';
+import { Button } from '../button';
+import { CheckOutlined, CopyOutlined, EditOutlined } from '@ant-design/icons';
+import { Tooltip } from '../tooltip';
+import { Input } from '../input';
+import { Textarea } from '../textarea';
+export const Typography = memo(forwardRef(({ component: Component = 'p', color = 'text', editable, onEditFinish, copyable, onCopy, editComponentProps, ellipsisRows = 0, wordBreak = 'break-all', expandable, expandButtonProps, ...props }, ref) => {
+    /**
+     * -------------------------------------------------------------------
+     * 编辑
+     */
+    const [editing, setEditing] = useState(false);
+    const [multipleRows, setMultipleRows] = useState(false);
+    const [originHeight, setOriginHeight] = useState(0);
+    const [defaultText, setDefaultText] = useState('');
+    const innerRef = useRef(null);
+    const editHandler = () => {
+        const { height, lineHeight, marginTop, marginBottom } = getComputedStyle(innerRef.current);
+        const heightNum = parseFloat(height);
+        setOriginHeight(heightNum + parseFloat(marginTop) + parseFloat(marginBottom));
+        setDefaultText(innerRef.current.innerText);
+        setMultipleRows(heightNum >= parseFloat(lineHeight) * 2);
+        setEditing(true);
+    };
+    const blurHandler = (e) => {
+        setEditing(false);
+        onEditFinish?.(e.target.value);
+    };
+    /**
+     * -------------------------------------------------------------------
+     * 复制
+     */
+    const textRef = useRef(null);
+    const [copied, setCopied] = useState(false);
+    const unmounted = useUnmounted();
+    const copyHandler = () => {
+        if (copied) {
+            return;
+        }
+        const text = textRef.current.innerText;
+        navigator.clipboard.writeText(text);
+        onCopy?.(text);
+        setCopied(true);
+        setTimeout(() => {
+            !unmounted.current && setCopied(false);
+        }, 3000);
+    };
+    /**
+     * -------------------------------------------------------------------
+     * 省略
+     */
+    const [expanded, setExpanded] = useState(false);
+    useLayoutEffect(() => {
+        if (textRef.current && ellipsisRows > 1) {
+            const { lineHeight } = getComputedStyle(textRef.current);
+            textRef.current.style.height = parseFloat(lineHeight) * ellipsisRows + 'px';
+        }
+    });
+    const style = useStyle({ color });
+    const EditComponent = multipleRows ? Textarea : Input;
+    return editing
+        ? _jsx("div", { css: editStyle, className: classes.editWrap, style: { height: originHeight }, children: _jsx(EditComponent, { ...editComponentProps, className: classnames(classes.editComponent, editComponentProps?.className), autoFocus: true, defaultValue: defaultText, onBlur: blurHandler, fullWidth: multipleRows ? true : void 0 }) })
+        : _jsxs(Component, { "data-component": typeof Component === 'string' ? Component : '', ...props, ref: cloneRef(ref, innerRef), css: style, className: classnames(classes.root, props.className), "data-ellipsis-rows": expanded ? '0' : ellipsisRows, children: [_jsx("span", { ref: textRef, className: classes.text, style: {
+                        WebkitLineClamp: ellipsisRows > 1 ? ellipsisRows : void 0,
+                        wordBreak
+                    }, children: props.children }), !expanded && expandable && ellipsisRows > 0 &&
+                    _jsx(Button, { ...expandButtonProps, className: classnames(classes.expand, classes.action, expandButtonProps?.className), variant: "plain", onClick: () => setExpanded(true), children: "\u5C55\u5F00" }), editable &&
+                    _jsx(Tooltip, { title: "\u7F16\u8F91", children: _jsx(Button, { className: classes.action, variant: "plain", onClick: editHandler, children: _jsx(EditOutlined, {}) }) }), copyable && (copied
+                    ? _jsx("div", { className: classes.copied, children: _jsx(CheckOutlined, {}) })
+                    : _jsx(Tooltip, { title: "\u590D\u5236", children: _jsx(Button, { className: classes.action, variant: "plain", onClick: copyHandler, children: _jsx(CopyOutlined, {}) }) }))] });
+}));
+Typography.h1 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h1" })));
+Typography.h2 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h2" })));
+Typography.h3 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h3" })));
+Typography.h4 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h4" })));
+Typography.h5 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h5" })));
+Typography.h6 = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "h6" })));
+Typography.mark = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "mark" })));
+Typography.code = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "code" })));
+Typography.kbd = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "kbd" })));
+Typography.a = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "a" })));
+Typography.i = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "i" })));
+Typography.b = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "b" })));
+Typography.u = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "u" })));
+Typography.del = memo(forwardRef((props, ref) => _jsx(Typography, { ...props, ref: ref, component: "del" })));

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

@@ -0,0 +1,14 @@
+import { TypographyProps } from './typography';
+export declare const classes: {
+    text: string;
+    ellipsis: string;
+    action: string;
+    expand: string;
+    copied: string;
+    editWrap: string;
+    editComponent: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<TypographyProps, 'color'>>): import("@emotion/react").SerializedStyles;
+export declare const editStyle: import("@emotion/react").SerializedStyles;