@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,121 @@
+"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)('switch', [
+    'input',
+    'track',
+    'label',
+    'checkedLabel',
+    'uncheckedLabel',
+    'thumb',
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ gray, easing, text }) => {
+        const c = (0, color_1.default)(colorValue);
+        const lighter = c.lighten(.2).hex();
+        const outlineColor = c.alpha(.4).string();
+        return (0, react_1.css) `
+            display: inline-flex;
+            align-items: center;
+            position: relative;
+
+            .${exports.classes.input} {
+                position: absolute;
+                opacity: 0;
+                inset: 0;
+                pointer-events: none;
+            }
+
+            .${exports.classes.track} {
+                display: inline-flex;
+                align-items: center;
+                border-radius: 1000em;
+                position: relative;
+                overflow: hidden;
+                outline-offset: 1px;
+                outline: 0 solid ${outlineColor};
+                background-color: ${gray(.1)};
+                transition: background-color .2s ${easing.easeOut};
+            }
+
+            &:has(:focus-visible) {
+                .${exports.classes.track} {
+                    transition: background-color .2s ${easing.easeOut}, outline-width .2s ${easing.swing};
+                    outline-width: 3px;
+                }
+            }
+
+            .${exports.classes.thumb} {
+                aspect-ratio: 1;
+                background-color: #ffffff;
+                border-radius: 50%;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 2px;
+                transition: left .2s ${easing.bounce};
+            }
+
+            &:not([data-disabled=true]):not([data-read-only=true]) {
+                cursor: pointer;
+                
+                &:hover {
+                    .${exports.classes.track} {
+                        background-color: ${gray(.2)};
+                    }
+                }
+            }
+
+            &[data-disabled=true] {
+                cursor: not-allowed;
+
+                &[data-checked=true] {
+                    .${exports.classes.track} {
+                        background-color: ${outlineColor};
+                    }
+                }
+            }
+
+            &[data-checked=true] {
+                .${exports.classes.track} {
+                    background-color: ${colorValue};
+                }
+
+                &:not([data-disabled=true]):not([data-read-only=true]):hover {
+                    .${exports.classes.track} {
+                        background-color: ${lighter};
+                    }
+                }
+            }
+
+            .${exports.classes.label} {
+                height: 100%;
+                align-self: flex-start;
+                white-space: nowrap;
+                transition: all .2s ${easing.bounce};
+                
+                .${exports.classes.checkedLabel},
+                .${exports.classes.uncheckedLabel} {
+                    text-align: center;
+                }
+
+                .${exports.classes.checkedLabel} {
+                    color: #ffffff;
+                    padding: 0 6px 0 12px;
+                }
+                
+                .${exports.classes.uncheckedLabel} {
+                    color: ${text.secondary};
+                    padding: 0 12px 0 6px;
+                }
+            }
+        `;
+    }, [colorValue]);
+}

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Ref } from 'react';
+import { Size } from '../../../types';
+export interface TableProps extends Omit<JSX.IntrinsicElements['table'], 'ref'> {
+    ref?: Ref<HTMLTableElement>;
+    size?: Size;
+    bordered?: boolean;
+    striped?: boolean;
+}
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<TableProps, "ref"> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/cjs/components/table/table.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const table_style_1 = require("./table.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+exports.Table = (0, react_1.forwardRef)(({ size, bordered = false, striped = false, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, ref: ref, css: table_style_1.style, className: (0, utils_1.classnames)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+});

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

@@ -0,0 +1,96 @@
+"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)('table');
+exports.style = (0, utils_1.defineCss)(({ mode, borderRadius, spacing, gray, easing }) => {
+    const borderColor = gray(mode === 'light' ? .12 : .32);
+    const bg = gray(mode === 'light' ? .02 : .22);
+    const bgStriped = gray(mode === 'light' ? .01 : .21);
+    return (0, react_1.css) `
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        border-radius: ${borderRadius}px ${borderRadius}px 0 0;
+
+        thead tr {
+            & > * {
+                background-color: ${bg};
+                box-sizing: border-box;
+                position: sticky;
+                top: 0;
+                z-index: 1;
+            }
+
+            &:first-of-type > * {
+                &:first-of-type {
+                    border-top-left-radius: ${borderRadius}px;
+                }
+
+                &:last-of-type {
+                    border-top-right-radius: ${borderRadius}px;
+                }
+            }
+        }
+
+        th, td {
+            text-align: left;
+            padding: 12px ${spacing[5]}px;
+            border-bottom: 1px solid ${borderColor};
+
+            &[data-grouped=true] {
+                text-align: center;
+            }
+        }
+
+        &[data-size=small] {
+            th, td {
+                padding: 7px ${spacing[4]}px;
+            }
+        }
+
+        &[data-size=large] {
+            th, td {
+                padding: 17px ${spacing[6]}px;
+            }
+        }
+
+        &[data-bordered=true] {
+            border-top: 1px solid ${borderColor};
+            border-left: 1px solid ${borderColor};
+
+            th, td {
+                border-right: 1px solid ${borderColor};
+            }
+        }
+
+        &:not([data-bordered=true]) {
+            thead > tr > * {
+                &:not(:first-of-type):before {
+                    content: '';
+                    width: 1px;
+                    height: 20px;
+                    background-color: ${borderColor};
+                    position: absolute;
+                    inset: auto auto auto 0;
+                }
+            }
+        }
+
+
+        tr {
+            transition: background-color .2s ${easing.easeOut};
+
+            &:not([data-selected=true]):hover {
+                background-color: ${bg};
+            }
+        }
+
+        &[data-striped=true] {
+            tbody tr:nth-of-type(even):not(:hover):not([data-selected=true]) {
+                background-color: ${bgStriped};
+            }
+        }
+    `;
+});

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

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

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

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

package/dist/cjs/components/tabs/tab.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Id } from '../../../types';
+export interface TabProps extends Omit<DIVProps, 'prefix'> {
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    /** color仅生效于激活状态，普通状态样式请使用css修改 */
+    color?: ColorPropsValue;
+    orientation?: 'horizontal' | 'vertical';
+    label?: ReactNode;
+    value?: Id;
+    disabled?: boolean;
+    /** @private 内部使用，用于表示改选项卡是否为激活状态 */
+    _active?: boolean;
+}
+export declare const Tab: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<TabProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/tabs/tab.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tab = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const tabs_style_1 = require("./tabs.style");
+const tabs_1 = require("./tabs");
+exports.Tab = (0, react_1.memo)((0, react_1.forwardRef)(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }, ref) => {
+    const colorValue = (0, utils_1.useColor)(color);
+    const { variant, animating } = (0, tabs_1.useTabsContext)();
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, className: (0, utils_1.classnames)(tabs_style_1.classes.tab, props.className), style: {
+            borderColor: variant === 'line' && !animating && _active ? colorValue : void 0,
+            color: _active ? colorValue : void 0,
+            ...props.style
+        }, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, onClick: e => {
+            !disabled && props.onClick?.(e);
+        }, children: [!!prefix &&
+                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabPrefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.label, children: label }), !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.tabSuffix, children: suffix })] }));
+}));

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

@@ -0,0 +1,31 @@
+import { CSSProperties, ReactElement, ReactNode } from 'react';
+import { ColorPropsValue, DIVProps, Id, Obj, Size } from '../../../types';
+import { Tab, TabProps } from './tab';
+export type TabType = TabProps & Obj;
+export interface TabsProps<T extends TabType = TabType> extends Omit<DIVProps, 'prefix' | 'defaultValue' | 'onChange'> {
+    tabs?: T[];
+    labelKey?: keyof T;
+    primaryKey?: keyof T;
+    variant?: 'line' | 'card';
+    color?: ColorPropsValue;
+    size?: Size;
+    /**选项卡的位置，@default "top" */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    justifyContent?: CSSProperties['justifyContent'];
+    fullWidth?: boolean;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    defaultValue?: Id;
+    value?: Id;
+    onChange?(value: Id): void;
+    readOnly?: boolean;
+    disabled?: boolean;
+}
+export declare function useTabsContext(): {
+    variant?: TabsProps<TabType>["variant"];
+    animating?: boolean;
+};
+export declare const Tabs: {
+    <T extends TabType>(props: TabsProps<T>): ReactElement;
+    Tab: typeof Tab;
+};

package/dist/cjs/components/tabs/tabs.js

@@ -0,0 +1,155 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+exports.useTabsContext = useTabsContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const tabs_style_1 = require("./tabs.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const tab_1 = require("./tab");
+const tabsEllipsis_1 = require("./tabsEllipsis");
+const tabsContext = (0, react_1.createContext)({});
+function useTabsContext() {
+    return (0, react_1.useContext)(tabsContext);
+}
+exports.Tabs = (0, react_1.memo)((0, react_1.forwardRef)(({ tabs, labelKey = 'label', primaryKey = 'value', variant = 'line', color = 'primary', size, position = 'top', justifyContent = 'flex-start', fullWidth, prefix, suffix, defaultValue, value, onChange, readOnly, disabled, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    const [animating, setAnimating] = (0, react_1.useState)(false);
+    const [innerValue, _setInnerValue] = (0, utils_1.useControlled)(defaultValue, value, onChange);
+    const setInnerValue = (value) => {
+        if (!readOnly && !disabled) {
+            setAnimating(true);
+            _setInnerValue(value);
+        }
+    };
+    const setValueInEllipsis = (value) => {
+        shouldScroll.current = true;
+        setInnerValue(value);
+    };
+    const tabRefs = (0, react_1.useRef)(new Map());
+    const activeTab = (0, react_1.useMemo)(() => {
+        return !(0, utils_1.isUnset)(innerValue.current) ? tabRefs.current.get(innerValue.current) : void 0;
+    }, [innerValue.current]);
+    /**
+     * 计算指示器的位置
+     */
+    const fitIndicatorRect = () => {
+        if (variant !== 'card') {
+            const el = activeTab?.el;
+            if (el) {
+                if (position === 'top' || position === 'bottom') {
+                    return {
+                        width: el.offsetWidth,
+                        height: tabs_style_1.indicatorWidth,
+                        left: el.offsetLeft,
+                        ...position === 'top'
+                            ? { bottom: 0 }
+                            : { top: 0 }
+                    };
+                }
+                return {
+                    width: tabs_style_1.indicatorWidth,
+                    height: el.offsetHeight,
+                    top: el.offsetTop,
+                    ...position === 'left'
+                        ? { right: 0 }
+                        : { left: 0 }
+                };
+            }
+        }
+        return {
+            width: 0,
+            height: 0,
+            left: 0,
+            top: 0
+        };
+    };
+    const [indicatorRect, setIndicatorRect] = (0, utils_1.useDerivedState)(fitIndicatorRect, [innerValue.current, variant, position]);
+    (0, react_1.useEffect)(() => {
+        // 仅首次渲染需要计算
+        setIndicatorRect(fitIndicatorRect());
+    }, []);
+    const renderTabs = () => {
+        if (tabs) {
+            return tabs.map((p, i) => {
+                const value = p[primaryKey];
+                const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
+                return ((0, jsx_runtime_1.jsx)(tab_1.Tab, { prefix: p.prefix, suffix: p.suffix, color: p.color, orientation: p.orientation, disabled: p.disabled, ref: el => tabRefs.current.set(value, { el, color: p.color || 'primary' }), value: value, label: p[labelKey], onClick: e => {
+                        p.onClick?.(e);
+                        setInnerValue(value);
+                    }, _active: active }, p.key ?? value ?? i));
+            });
+        }
+        return react_1.Children.map(props.children, c => {
+            if ((0, react_1.isValidElement)(c)) {
+                const { value, color, onClick } = c.props;
+                const active = !(0, utils_1.isUnset)(value) && value === innerValue.current;
+                return (0, react_1.cloneElement)(c, {
+                    ref: (0, utils_1.cloneRef)(c.ref, el => {
+                        !(0, utils_1.isUnset)(value) && tabRefs.current.set(value, { el, color: color || 'primary' });
+                    }),
+                    onClick(e) {
+                        onClick?.(e);
+                        !(0, utils_1.isUnset)(value) && setInnerValue(value);
+                    },
+                    _active: active,
+                    _animating: animating
+                });
+            }
+            return c;
+        });
+    };
+    /**
+     * ----------------------------------------------------------------
+     * 滚动
+     */
+    const scrollRef = (0, react_1.useRef)(null);
+    const [shadowStart, setShadowStart] = (0, react_1.useState)(false);
+    const [shadowEnd, setShadowEnd] = (0, react_1.useState)(false);
+    const setShadow = () => {
+        if (position === 'top' || position === 'bottom') {
+            const { scrollLeft } = scrollRef.current;
+            setShadowStart(scrollLeft > 0);
+            setShadowEnd(scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth);
+        }
+        else {
+            const { scrollTop } = scrollRef.current;
+            setShadowStart(scrollTop > 0);
+            setShadowEnd(scrollTop < scrollRef.current.scrollHeight - scrollRef.current.clientHeight);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const onWheel = (e) => {
+            scrollRef.current.scrollTo({
+                left: scrollRef.current.scrollLeft + e.deltaY
+            });
+        };
+        if (position === 'top' || position === 'bottom') {
+            scrollRef.current?.addEventListener('wheel', onWheel, { passive: false });
+        }
+        const resizeObserver = new ResizeObserver(setShadow);
+        resizeObserver.observe(scrollRef.current);
+        return () => {
+            scrollRef.current?.removeEventListener('wheel', onWheel);
+            resizeObserver.disconnect();
+        };
+    }, [position]);
+    const shouldScroll = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (shouldScroll.current) {
+            activeTab?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            shouldScroll.current = false;
+        }
+    }, [shouldScroll.current]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, tabs_style_1.useStyle)({ color, variant }), className: (0, utils_1.classnames)(tabs_style_1.classes.root, props.className), "data-size": size, "data-animating": animating, "data-position": position, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.start, "data-show": shadowStart, children: !!prefix &&
+                    (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.prefix, children: prefix }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: tabs_style_1.classes.scroll, onScroll: setShadow, children: (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.scrollWrap, style: { justifyContent }, children: [(0, jsx_runtime_1.jsx)(tabsContext.Provider, { value: (0, react_1.useMemo)(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
+                            (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
+                                    ...indicatorRect.current,
+                                    backgroundColor: activeTab && (0, utils_1.colorTransfer)(activeTab.color, theme)
+                                } })] }) }), (0, jsx_runtime_1.jsx)("div", { className: tabs_style_1.classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                    (0, jsx_runtime_1.jsxs)("div", { className: tabs_style_1.classes.suffix, children: [(shadowStart || shadowEnd) &&
+                                (0, jsx_runtime_1.jsx)(tabsEllipsis_1.TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
+}));
+exports.Tabs.Tab = tab_1.Tab;

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

@@ -0,0 +1,19 @@
+import { TabsProps } from './tabs';
+export declare const classes: {
+    prefix: string;
+    tab: string;
+    label: string;
+    suffix: string;
+    indicator: string;
+    end: string;
+    start: string;
+    scroll: string;
+    ellipsis: string;
+    scrollWrap: string;
+    tabPrefix: string;
+    tabSuffix: string;
+} & {
+    root: string;
+};
+export declare const indicatorWidth = 2;
+export declare function useStyle({ color, variant }: Required<Pick<TabsProps, 'color' | 'variant'>>): import("@emotion/react").SerializedStyles;