@canlooks/can-ui 0.0.1

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const app_1 = require("../app");
+const utils_1 = require("../../utils");
+const utils_2 = require("../../utils");
+const loadingIndicator_1 = require("../loadingIndicator/loadingIndicator");
+const button_style_1 = require("./button.style");
+const transitionBase_1 = require("../transitionBase");
+exports.Button = (0, react_1.forwardRef)(({ color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    const showRipple = (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("button", { ...props, ref: ref, css: (0, button_style_1.useStyle)({ color }), className: (0, utils_2.classnames)(button_style_1.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
+                    ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color })
+                    : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: variant === 'filled' ? '#ffffff' : color }) })
+                : actualPrefix, !!actualChildren &&
+                (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.content, children: actualChildren }), !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.suffix, children: suffix })] }));
+});

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

@@ -0,0 +1,285 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+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)('button', [
+    'prefix',
+    'suffix',
+    'content'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ borderRadius, easing, text, gray }) => {
+        const c = (0, color_1.default)(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 (0, react_1.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/cjs/components/button/index.d.ts

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

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const card_style_1 = require("./card.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const flex_1 = require("../flex");
+exports.Card = (0, react_1.forwardRef)(({ flexable, bordered, elevation, borderRadius, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    borderRadius ??= theme.borderRadius;
+    elevation ??= theme.mode === 'light' ? 0 : 2;
+    return ((0, jsx_runtime_1.jsx)(flex_1.Flex, { direction: "column", ...props, ref: ref, css: card_style_1.style, className: (0, utils_1.classnames)(card_style_1.classes.root, props.className), style: {
+            display: flexable ? 'flex' : void 0,
+            borderRadius,
+            ...props.style
+        }, "data-elevation": elevation, "data-bordered": bordered }));
+});

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

@@ -0,0 +1,65 @@
+"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");
+exports.classes = (0, utils_1.defineClasses)('card');
+exports.style = (0, utils_1.defineCss)(({ spacing, mode, background, divider, boxShadow, gray }) => [
+    (0, react_1.css) `
+        padding: ${spacing[8]}px;
+    `,
+    ...[mode === 'light'
+            ? (0, react_1.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]};
+            }
+        `
+            : (0, react_1.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/cjs/components/card/index.d.ts

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

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

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

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