@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { zIndex } from '../app';
+import { popperArrowStyle } from '../popper/popper.style';
+export const classes = defineClasses('bubble', [
+    'content'
+]);
+export const style = defineCss(({ background, boxShadow, borderRadius }) => css `
+    z-index: ${zIndex.dropdown};
+
+    .${classes.content} {
+        background-color: ${background.card};
+        box-shadow: ${boxShadow[0]};
+        border-radius: ${borderRadius}px;
+        padding: 4px;
+    }
+
+    ${popperArrowStyle(background.card)}
+`);

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { PopperProps } from '../popper';
+export interface BubbleConfirmProps extends Omit<PopperProps, 'title'> {
+    icon?: ReactNode;
+    title?: ReactNode;
+    footer?: ReactNode;
+    showArrow?: boolean;
+    loading?: boolean;
+    onConfirm?(e: React.MouseEvent<HTMLButtonElement>): any;
+}
+export declare const BubbleConfirm: import("react").ForwardRefExoticComponent<Omit<BubbleConfirmProps, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/esm/components/bubbleConfirm/bubbleConfirm.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Popper } from '../popper';
+import { classes, style } from './bubbleConfirm.style';
+import { classnames, useControlled, useLoading } from '../../utils';
+import { QuestionCircleFilled } from '@ant-design/icons';
+import { Button } from '../button';
+import { useTheme } from '../app';
+export const BubbleConfirm = forwardRef(({ icon = _jsx(QuestionCircleFilled, {}), title, footer, showArrow = true, offset, loading = false, onConfirm, defaultOpen = false, open, onOpenChange, ...props }, ref) => {
+    const { spacing } = useTheme();
+    offset ??= showArrow ? spacing[3] : spacing[2];
+    const [innerOpen, _setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
+    const setInnerOpen = (open) => {
+        // loading过程中不能开关弹框
+        !innerLoading.current && _setInnerOpen(open);
+    };
+    const [innerLoading, confirmHandler] = useLoading(async (e) => {
+        await onConfirm?.(e);
+        _setInnerOpen(false);
+    }, loading);
+    return (_jsx(Popper, { trigger: "click", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), offset: offset, open: innerOpen.current, onOpenChange: setInnerOpen, content: _jsxs("div", { className: classes.bubble, "data-show-arrow": showArrow, children: [_jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.info, children: [_jsx("div", { className: classes.title, children: title }), _jsx("div", { className: classes.content, children: props.content }), _jsx("div", { className: classes.footer, children: footer ??
+                                _jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => setInnerOpen(false), children: "\u53D6\u6D88" }), _jsx(Button, { size: "small", loading: innerLoading.current, onClick: confirmHandler, children: "\u786E\u5B9A" })] }) })] })] }) }));
+});

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

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

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

@@ -0,0 +1,58 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+import { zIndex } from '../app';
+import { popperArrowStyle } from '../popper/popper.style';
+export const classes = defineClasses('bubble-confirm', [
+    'bubble',
+    'icon',
+    'info',
+    'title',
+    'content',
+    'footer'
+]);
+export const style = defineCss(({ boxShadow, borderRadius, background, spacing, colors, text }) => css `
+    min-width: 180px;
+    max-width: 340px;
+    z-index: ${zIndex.bubbleConfirm};
+
+    .${classes.bubble} {
+        border-radius: ${borderRadius}px;
+        box-shadow: ${boxShadow[0]};
+        background-color: ${background.card};
+        display: flex;
+        gap: ${spacing[4]}px;
+        padding: ${spacing[5]}px;
+
+        .${classes.icon} {
+            color: ${colors.warning};
+            font-size: 1.2em;
+        }
+
+        .${classes.info} {
+            flex: 1;
+            min-width: 0;
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
+
+            .${classes.title} {
+                font-weight: bold;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .${classes.content} {
+                color: ${text.secondary};
+            }
+
+            .${classes.footer} {
+                display: flex;
+                justify-content: flex-end;
+                gap: ${spacing[2]}px;
+            }
+        }
+    }
+
+    ${popperArrowStyle(background.card)}
+`);

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

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

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

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

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

@@ -0,0 +1,28 @@
+import React, { ReactNode, Ref } from 'react';
+import { ColorPropsValue, Size } from '../../../types';
+export interface ButtonProps extends Omit<JSX.IntrinsicElements['button'], 'ref' | 'prefix'> {
+    ref?: Ref<HTMLButtonElement>;
+    color?: ColorPropsValue;
+    /** @default "square" */
+    shape?: 'square' | 'circular' | 'rounded';
+    size?: Size;
+    /** @default "filled" */
+    variant?: 'filled' | 'outlined' | 'dashed' | 'ghost' | 'text' | 'plain';
+    /** @default "horizontal" */
+    orientation?: 'horizontal' | 'vertical';
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    loading?: boolean;
+    readOnly?: boolean;
+    /**
+     * prefix字段的别名
+     * @alias {@link prefix}
+     */
+    icon?: ReactNode;
+    /**
+     * children字段的别名
+     * @alias {@link children}
+     */
+    label?: ReactNode;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/button/button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useTheme } from '../app';
+import { useTouchRipple } from '../../utils';
+import { classnames } from '../../utils';
+import { LoadingIndicator } from '../loadingIndicator/loadingIndicator';
+import { classes, useStyle } from './button.style';
+import { Collapse } from '../transitionBase';
+export const Button = forwardRef(({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    const showRipple = useTouchRipple(color);
+    const onPointerUp = (e) => {
+        props.onPointerUp?.(e);
+        if (!props.disabled
+            && !loading
+            && !readOnly
+            && { filled: true, outlined: true, dashed: true }[variant]) {
+            showRipple(e.currentTarget);
+        }
+    };
+    const onClick = (e) => {
+        !loading && !readOnly && props.onClick?.(e);
+    };
+    const actualPrefix = prefix ?? icon;
+    const actualChildren = label ?? props.children;
+    return (_jsxs("button", { ...props, ref: ref, css: useStyle({ color }), className: classnames(classes.root, props.className), onPointerUp: onPointerUp, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-shape": shape, "data-size": size, "data-loading": loading, "data-read-only": readOnly, children: [loading
+                ? actualPrefix
+                    ? _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
+                    : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
+                : actualPrefix, !!actualChildren &&
+                _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
+                _jsx("div", { className: classes.suffix, children: suffix })] }));
+});

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

@@ -0,0 +1,11 @@
+import { ColorPropsValue } from '../../../types';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: {
+    color: ColorPropsValue;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,280 @@
+import { css } from '@emotion/react';
+import { defineClasses, useColor, useCss } from '../../utils';
+import Color from 'color';
+export const classes = defineClasses('button', [
+    'prefix',
+    'suffix',
+    'content'
+]);
+export function useStyle({ color }) {
+    const colorValue = useColor(color);
+    return useCss(({ borderRadius, easing, text, gray }) => {
+        const c = Color(colorValue);
+        const lighter = c.lighten(.1).hex();
+        const lightest = c.lighten(.2).hex();
+        const outlineColor = c.alpha(.4).string();
+        const darkerC = c.darken(.1);
+        const darker = darkerC.hex();
+        return css `
+            line-height: inherit;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            vertical-align: top;
+            font-size: 1em;
+            user-select: none;
+            appearance: none;
+            -webkit-tap-highlight-color: transparent;
+            position: relative;
+            border: none;
+            background-color: transparent;
+            color: ${colorValue};
+            border-radius: ${borderRadius}px;
+            outline-offset: 1px;
+            outline: 0 solid ${outlineColor};
+            transition-property: outline-width, filter, border-color, background-color, color;
+            transition-duration: .2s;
+            transition-timing-function: ${easing.easeOut};
+
+            &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                cursor: pointer;
+            }
+
+            &:focus-visible {
+                transition-timing-function: ${easing.swing}, ${easing.easeOut};
+                outline-width: 3px;
+            }
+
+            &:active {
+                transition: all 0s;
+            }
+
+            &[data-variant=filled], &[data-variant=text], &[data-variant=ghost] {
+                padding: 6px 16px;
+
+                &[data-size=small] {
+                    padding: 2px 8px;
+                }
+
+                &[data-size=large] {
+                    padding: 10px 20px;
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                padding: 5px 15px;
+                
+                &[data-size=small] {
+                    padding: 1px 7px;
+                }
+                
+                &[data-size=large] {
+                    padding: 9px 19px;
+                }
+            }
+
+            &[data-orientation=vertical] {
+                flex-direction: column;
+                padding-top: 9px;
+                padding-bottom: 9px;
+            }
+            
+            &[data-variant=filled] {
+                color: #ffffff;
+                background-image: linear-gradient(135deg, ${lighter}, ${darker});
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        filter: brightness(1.2);
+                    }
+
+                    &:active {
+                        background-image: linear-gradient(135deg, ${darker}, ${lighter});
+                        filter: brightness(1);
+                    }
+                }
+            }
+
+            &[data-variant=outlined], &[data-variant=dashed] {
+                border: 1px solid ${colorValue};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        border-color: ${lightest};
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        border-color: ${darker};
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-variant=dashed] {
+                border-style: dashed;
+            }
+
+            &[data-variant=ghost] {
+                background-color: ${c.alpha(.05).rgb().string()};
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.1).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${c.alpha(.15).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=text] {
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        background-color: ${c.alpha(.05).rgb().string()};
+                    }
+
+                    &:active {
+                        background-color: ${darkerC.alpha(.1).rgb().string()};
+                    }
+                }
+            }
+
+            &[data-variant=plain] {
+                padding: 0;
+
+                &:not(:disabled):not([data-read-only=true]):not([data-loading=true]) {
+                    &:hover {
+                        color: ${lightest};
+                    }
+
+                    &:active {
+                        color: ${darker};
+                    }
+                }
+            }
+
+            &[data-loading=true] {
+                transition: all 0s;
+
+                &[data-variant=filled] {
+                    background-image: none;
+                    background-color: ${lightest};
+                }
+
+                &[data-variant=outlined], &[data-variant=dashed] {
+                    color: ${lightest};
+                    border-color: ${lightest};
+                }
+
+                &[data-variant=text], &[data-variant=plain] {
+                    color: ${lightest};
+                }
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+                color: ${text.disabled};
+                border-color: ${text.disabled};
+
+                &:not([data-variant=text]):not([data-variant=plain]) {
+                    background-image: none;
+                    background-color: ${gray(.1)};
+                 }
+            }
+
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+            }
+
+            &[data-shape=circular] {
+                border-radius: 50%;
+                padding: 0;
+                width: 32px;
+                height: 32px;
+
+                &[data-size=small] {
+                    width: 24px;
+                    height: 24px;
+                }
+
+                &[data-size=large] {
+                    width: 40px;
+                    height: 40px;
+                }
+            }
+
+            &[data-compact=row] {
+                &[data-variant=filled]:not(:disabled) {
+                    background-image: linear-gradient(180deg, ${lighter}, ${darker});
+                    
+                    &:before, &:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        display: none;
+                    }
+
+                    &:before {
+                        background-color: ${lighter};
+                        left: 0;
+                    }
+
+                    &:after {
+                        background-color: ${colorValue};
+                        right: 0;
+                    }
+                }
+
+                &:not([data-last=true]) {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                    
+                    &:after {
+                        display: block;
+                    }
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+
+                    &:before {
+                        display: block;
+                    }
+
+                    &[data-variant=outlined] {
+                        border-left-color: transparent;
+                    }
+                }
+            }
+    
+            &[data-compact=column] {
+                &[data-variant=filled] {
+                    background-image: linear-gradient(90deg, ${lighter}, ${darker});
+                    border-top-color: ${lighter};
+                }
+
+                &:not([data-last=true]) {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-bottom-width: 1px;
+                }
+        
+                &:not([data-first=true]) {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                    border-top-width: 1px;
+                    
+                    &[data-variant=outlined] {
+                        margin-top: -1px;
+                    }
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { FlexProps } from '../flex';
+export interface CardProps extends FlexProps {
+    /** 是否采用flex布局，等效于display: flex，@default false */
+    flexable?: boolean;
+    /** 是否显示边框，@default 0 */
+    bordered?: boolean;
+    /** @ 支持0-5，明亮主题表示阴影的程度，@default 0; 暗黑主题表示背景色，@default 2 */
+    elevation?: number;
+    /** @default theme.borderRadius */
+    borderRadius?: number;
+}
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/card/card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classes, style } from './card.style';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+import { Flex } from '../flex';
+export const Card = forwardRef(({ flexable, bordered, elevation, borderRadius, ...props }, ref) => {
+    const theme = useTheme();
+    borderRadius ??= theme.borderRadius;
+    elevation ??= theme.mode === 'light' ? 0 : 2;
+    return (_jsx(Flex, { direction: "column", ...props, ref: ref, css: style, className: classnames(classes.root, props.className), style: {
+            display: flexable ? 'flex' : void 0,
+            borderRadius,
+            ...props.style
+        }, "data-elevation": elevation, "data-bordered": bordered }));
+});

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

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles[];

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

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('card');
+export const style = defineCss(({ spacing, mode, background, divider, boxShadow, gray }) => [
+    css `
+        padding: ${spacing[8]}px;
+    `,
+    ...[mode === 'light'
+            ? css `
+            background-color: ${background.card};
+
+            &[data-bordered=true] {
+                border: 1px solid ${divider};
+            }
+
+            &[data-elevation="1"] {
+                box-shadow: ${boxShadow[2]};
+            }
+
+            &[data-elevation="2"] {
+                box-shadow: ${boxShadow[3]};
+            }
+
+            &[data-elevation="3"] {
+                box-shadow: ${boxShadow[4]};
+            }
+
+            &[data-elevation="4"] {
+                box-shadow: ${boxShadow[5]};
+            }
+
+            &[data-elevation="5"] {
+                box-shadow: ${boxShadow[6]};
+            }
+        `
+            : css `
+            &[data-elevation="0"] {
+                background-color: ${gray(.12)};
+            }
+
+            &[data-elevation="1"] {
+                background-color: ${gray(.17)};
+            }
+
+            &[data-elevation="2"] {
+                background-color: ${gray(.2)};
+            }
+
+            &[data-elevation="3"] {
+                background-color: ${gray(.26)};
+            }
+
+            &[data-elevation="4"] {
+                background-color: ${gray(.34)};
+            }
+
+            &[data-elevation="5"] {
+                background-color: ${gray(.45)};
+            }
+        `
+    ]
+]);

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

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

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

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

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

@@ -0,0 +1,63 @@
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction } from 'react';
+import { InputProps } from '../input';
+import { InputBaseProps } from '../inputBase';
+import { PopperProps, PopperRef } from '../popper';
+import { SelectionContextProps } from '../selectionContext';
+import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
+import { Id } from '../../../types';
+export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
+    /** cascade内部由<input />实现 */
+    inputProps?: JSX.IntrinsicElements['input'];
+    inputRef?: Ref<HTMLInputElement>;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?(open: boolean): void;
+    /** @attention 注意loadOptions返回的必须是从根节点开始的完整树型数据，并非数据片段 */
+    loadOptions?(searchValue?: string, parent?: O): O[] | Promise<O[]>;
+    searchable?: boolean;
+    defaultSearchValue?: string;
+    searchValue?: string;
+    onSearchChange?(searchValue: string): void;
+    searchInputProps?: InputProps;
+    childrenKey?: keyof O;
+    popperProps?: PopperProps;
+    popperRef?: Ref<PopperRef>;
+    integration?: SelectionContextProps<O, V>['integration'];
+}
+export interface CascadeSingleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
+    multiple?: false;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+    renderBackfill?(value: V[]): ReactNode;
+}
+export interface CascadeMultipleProps<O extends MenuOptionType<V>, V extends Id = Id> extends CascadeBaseProps<O, V> {
+    multiple: true;
+    defaultValue?: V[][];
+    value?: V[][];
+    onChange?(value: V[][]): void;
+    renderBackfill?(value: V[][]): ReactNode;
+}
+export type CascadeProps<O extends MenuOptionType<V>, V extends Id = Id> = CascadeSingleProps<O, V> | CascadeMultipleProps<O, V>;
+type CascadeContext<O extends MenuOptionType<V>, V extends Id = Id> = {
+    innerLoading: boolean;
+    loadingOption: V | undefined;
+    multiple: boolean;
+    showCheckbox: boolean;
+    /** @default "value" */
+    primaryKey: keyof O;
+    labelKey: keyof O;
+    childrenKey: keyof O;
+    pathifiedValue: undefined | V[] | V[][];
+    selectionStatus: Map<V, 1 | 2>;
+    optionsMap: Map<V, O>;
+    openedPanels: V[];
+    onOptionClick(opt: O, index: number): void;
+    onCheckboxClick(opt: O, index: number): void;
+    verticalIndex: number;
+    setVerticalIndex: Dispatch<SetStateAction<number>>;
+    horizontalIndex: number;
+};
+export declare function useCascadeContext<O extends MenuOptionType<V>, V extends Id = Id>(): CascadeContext<O, V>;
+export declare const Cascade: <O extends MenuOptionType<V>, V extends Id = Id>(props: CascadeProps<O, V>) => ReactElement;
+export {};