@canlooks/can-ui 0.0.1

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from 'react';
+import { classes, style } from './table.style';
+import { classnames } from '../../utils';
+import { useTheme } from '../app';
+export const Table = forwardRef(({ size, bordered = false, striped = false, ...props }, ref) => {
+    const theme = useTheme();
+    size ??= theme.size;
+    return (_jsx("table", { ...props, ref: ref, css: style, className: classnames(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+});

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

@@ -0,0 +1,93 @@
+import { css } from '@emotion/react';
+import { defineClasses, defineCss } from '../../utils';
+export const classes = defineClasses('table');
+export const style = 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 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/esm/components/tabs/index.d.ts

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

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

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

package/dist/esm/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/esm/components/tabs/tab.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, memo } from 'react';
+import { classnames, useColor } from '../../utils';
+import { classes } from './tabs.style';
+import { useTabsContext } from './tabs';
+export const Tab = memo(forwardRef(({ prefix, suffix, color = 'primary', orientation, label, value, disabled, _active, ...props }, ref) => {
+    const colorValue = useColor(color);
+    const { variant, animating } = useTabsContext();
+    return (_jsxs("div", { ...props, ref: ref, className: classnames(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 &&
+                _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                _jsx("div", { className: classes.tabSuffix, children: suffix })] }));
+}));

package/dist/esm/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/esm/components/tabs/tabs.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { Children, cloneElement, createContext, forwardRef, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { classes, indicatorWidth, useStyle } from './tabs.style';
+import { classnames, cloneRef, colorTransfer, isUnset, useControlled, useDerivedState } from '../../utils';
+import { useTheme } from '../app';
+import { Tab } from './tab';
+import { TabsEllipsis } from './tabsEllipsis';
+const tabsContext = createContext({});
+export function useTabsContext() {
+    return useContext(tabsContext);
+}
+export const Tabs = memo(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 = useTheme();
+    size ??= theme.size;
+    const [animating, setAnimating] = useState(false);
+    const [innerValue, _setInnerValue] = useControlled(defaultValue, value, onChange);
+    const setInnerValue = (value) => {
+        if (!readOnly && !disabled) {
+            setAnimating(true);
+            _setInnerValue(value);
+        }
+    };
+    const setValueInEllipsis = (value) => {
+        shouldScroll.current = true;
+        setInnerValue(value);
+    };
+    const tabRefs = useRef(new Map());
+    const activeTab = useMemo(() => {
+        return !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: indicatorWidth,
+                        left: el.offsetLeft,
+                        ...position === 'top'
+                            ? { bottom: 0 }
+                            : { top: 0 }
+                    };
+                }
+                return {
+                    width: 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] = useDerivedState(fitIndicatorRect, [innerValue.current, variant, position]);
+    useEffect(() => {
+        // 仅首次渲染需要计算
+        setIndicatorRect(fitIndicatorRect());
+    }, []);
+    const renderTabs = () => {
+        if (tabs) {
+            return tabs.map((p, i) => {
+                const value = p[primaryKey];
+                const active = !isUnset(value) && value === innerValue.current;
+                return (_jsx(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 Children.map(props.children, c => {
+            if (isValidElement(c)) {
+                const { value, color, onClick } = c.props;
+                const active = !isUnset(value) && value === innerValue.current;
+                return cloneElement(c, {
+                    ref: cloneRef(c.ref, el => {
+                        !isUnset(value) && tabRefs.current.set(value, { el, color: color || 'primary' });
+                    }),
+                    onClick(e) {
+                        onClick?.(e);
+                        !isUnset(value) && setInnerValue(value);
+                    },
+                    _active: active,
+                    _animating: animating
+                });
+            }
+            return c;
+        });
+    };
+    /**
+     * ----------------------------------------------------------------
+     * 滚动
+     */
+    const scrollRef = useRef(null);
+    const [shadowStart, setShadowStart] = useState(false);
+    const [shadowEnd, setShadowEnd] = 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);
+        }
+    };
+    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 = useRef(true);
+    useEffect(() => {
+        if (shouldScroll.current) {
+            activeTab?.el?.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+            shouldScroll.current = false;
+        }
+    }, [shouldScroll.current]);
+    return (_jsxs("div", { ...props, ref: ref, css: useStyle({ color, variant }), className: classnames(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: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
+                    _jsx("div", { className: classes.prefix, children: prefix }) }), _jsx("div", { ref: scrollRef, className: classes.scroll, onScroll: setShadow, children: _jsxs("div", { className: classes.scrollWrap, style: { justifyContent }, children: [_jsx(tabsContext.Provider, { value: useMemo(() => ({ variant, animating }), [variant, animating]), children: renderTabs() }), variant === 'line' &&
+                            _jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
+                                    ...indicatorRect.current,
+                                    backgroundColor: activeTab && colorTransfer(activeTab.color, theme)
+                                } })] }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
+                    _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&
+                                _jsx(TabsEllipsis, { tabs: tabs, labelKey: labelKey, primaryKey: primaryKey, value: innerValue.current, onToggleSelected: setValueInEllipsis, children: props.children }), suffix] }) })] }));
+}));
+Tabs.Tab = Tab;

package/dist/esm/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;