@canlooks/can-ui 0.0.167 → 0.0.169

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sweepingStyle = exports.fadeStyle = exports.classes = void 0;
+exports.fadeStyle = exports.classes = void 0;
 exports.useTransitionBaseStyle = useTransitionBaseStyle;
+exports.useSweepingStyle = useSweepingStyle;
 exports.useGrowAndCollapseStyle = useGrowAndCollapseStyle;
 exports.useSlideStyle = useSlideStyle;
 const react_1 = require("@emotion/react");
@@ -12,6 +13,7 @@ function useTransitionBaseStyle({ timeout }) {
     return (0, utils_1.useCss)(() => (0, react_1.css) `
         @layer reset {
             ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+            
             &.appear-active {
                 ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
             }
@@ -28,126 +30,107 @@ function useTransitionBaseStyle({ timeout }) {
 }
 exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
     @layer reset {
-        transition-property: opacity;
-        transition-timing-function: ${easing.easeOut};
-
-        &,
         &.appear,
-        &.enter {
+        &.exit,
+        &.exit-done {
             opacity: 0;
         }
-
+        
         &.appear-active,
-        &.enter-active,
-        &.enter-done,
-        &.exit {
+        &.enter,
+        &.enter-done {
             opacity: 1;
         }
 
-        &.exit-active,
-        &.exit-done {
-            opacity: 0;
-        }
-    }
-`);
-exports.sweepingStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
-    @layer reset {
-        transition-property: opacity, width, height;
-
         &.appear-active,
         &.enter-active,
-        &.enter-done {
-            transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce};
-        }
-
-        &.exit-active,
-        &.exit-done {
+        &.exit-active {
+            transition-property: opacity;
             transition-timing-function: ${easing.easeOut};
         }
     }
 `);
+function useSweepingStyle({ orientation }) {
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            &.appear,
+            &.appear-active,
+            &.enter-active,
+            &.exit,
+            &.exit-active,
+            &.exit-done {
+                overflow: hidden;
+            }
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, width, height;
+            }
+        }
+    `, [orientation]);
+}
 function useGrowAndCollapseStyle({ orientation, _mode }) {
-    return (0, utils_1.useCss)(({ easing }) => {
-        let transformMethod = _mode === 'grow'
-            ? 'scale'
-            : orientation === 'vertical'
-                ? 'scaleY'
-                : 'scaleX';
-        return (0, react_1.css) `
-            @layer reset {
-                transition-property: opacity, transform;
-                ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
-                &,
-                &.appear,
-                &.enter {
-                    transform: ${transformMethod}(0);
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    transform: scale(1);
-                }
+    let transformMethod = _mode === 'grow'
+        ? 'scale'
+        : orientation === 'vertical'
+            ? 'scaleY'
+            : 'scaleX';
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
 
-                &.exit-active,
-                &.exit-done {
-                    transform: ${transformMethod}(0);
-                }
+            transition-property: opacity, transform;
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                transform: ${transformMethod}(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                transform: scale(1);
             }
-        `;
-    }, [orientation, _mode]);
+            
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
+            }
+        }
+    `, [orientation, _mode]);
 }
 function useSlideStyle({ direction, offset }) {
-    return (0, utils_1.useCss)(({ easing }) => {
-        const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
-        let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
-        if (direction === 'down' || direction === 'right') {
-            offsetValue = '-' + offsetValue;
-        }
-        return (0, react_1.css) `
-            @layer reset {
-                transition-property: opacity, transform;
-
-                &,
-                &.appear,
-                &.enter {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
-
-                &.appear-active,
-                &.enter-active,
-                &.enter-done,
-                &.exit {
-                    pointer-events: inherit;
-                    transform: translate(0);
-                }
+    const transformMethod = direction === 'up' || direction === 'down' ? 'translateY' : 'translateX';
+    let offsetValue = typeof offset === 'number' ? `${offset}px` : offset;
+    if (direction === 'down' || direction === 'right') {
+        offsetValue = '-' + offsetValue;
+    }
+    return (0, utils_1.useCss)(() => (0, react_1.css) `
+        @layer reset {
+            transition-property: opacity, transform;
 
-                &.exit-active,
-                &.exit-done {
-                    pointer-events: none;
-                    transform: ${transformMethod}(${offsetValue});
-                }
+            &.appear,
+            &.exit,
+            &.exit-done {
+                pointer-events: none;
+                transform: ${transformMethod}(${offsetValue});
+            }
 
-                &.appear-active,
-                &.enter-active {
-                    transition-timing-function: ${easing.easeOut}, ${easing.bounce};
-                }
+            &.appear-active,
+            &.enter,
+            &.enter-done {
+                pointer-events: inherit;
+                transform: translate(0);
+            }
 
-                &.exit-active {
-                    transition-timing-function: ${easing.easeOut};
-                }
+            &.appear-active,
+            &.enter-active,
+            &.exit-active {
+                transition-property: opacity, transform;
             }
-        `;
-    }, [direction, offset]);
+        }
+    `, [direction, offset]);
 }

package/dist/cjs/utils/curd.d.ts

@@ -21,7 +21,7 @@ export declare const CONTROL_COLUMN_KEY = "$control";
 export declare function useCurdColumns<R extends RowType, V extends Id = Id>({ columns, columnConfigurable }: Pick<CurdProps<R, FormValue, V>, 'columns' | 'columnConfigurable'>): {
     orderedColumns: any[];
     actualColumns: (symbol | ColumnType<R>)[];
-    innerVisible: import("react").RefObject<Id[]>;
-    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
-    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[]>>;
+    innerVisible: import("react").RefObject<Id[] | undefined>;
+    setInnerVisible: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
+    setInnerOrder: import("react").Dispatch<import("react").SetStateAction<Id[] | undefined>>;
 };

package/dist/cjs/utils/curd.js

@@ -69,24 +69,6 @@ function useCurdColumns({ columns, columnConfigurable }) {
         columnConfigurable = {};
     }
     let { defaultVisible, visible, onVisibleChange, defaultOrder, order, onOrderChange } = columnConfigurable;
-    if (!defaultVisible || !defaultOrder) {
-        let hasControlColumn = false;
-        const defaultKeys = columns?.flatMap((col) => {
-            if (col.hideInTable) {
-                return [];
-            }
-            if (col._key) {
-                if (col._key === exports.CONTROL_COLUMN_KEY) {
-                    hasControlColumn = true;
-                }
-                return col._key;
-            }
-            return [];
-        }) || [];
-        !hasControlColumn && defaultKeys.push(exports.CONTROL_COLUMN_KEY);
-        defaultVisible ||= defaultKeys;
-        defaultOrder ||= defaultKeys;
-    }
     const [innerOrder, setInnerOrder] = (0, hooks_1.useControlled)(defaultOrder, order, onOrderChange);
     const [innerVisible, setInnerVisible] = (0, hooks_1.useControlled)(defaultVisible, visible, onVisibleChange);
     const symbolBoundToNext = (0, react_1.useRef)(new WeakMap());
@@ -112,7 +94,7 @@ function useCurdColumns({ columns, columnConfigurable }) {
     }, [columns]);
     // 只排序不筛选，用于设置项
     const orderedColumns = (0, react_1.useMemo)(() => {
-        if (!innerOrder.current.length) {
+        if (!innerOrder.current?.length) {
             return pureColumns;
         }
         const set = new Set(pureColumns);
@@ -129,12 +111,12 @@ function useCurdColumns({ columns, columnConfigurable }) {
         ];
     }, [innerOrder.current, pureColumns]);
     const visibleSet = (0, react_1.useMemo)(() => {
-        return new Set(innerVisible.current);
+        return innerVisible.current && new Set(innerVisible.current);
     }, [innerVisible.current]);
     // 筛选表格上可见的列，并将symbol回填
     const actualColumns = (0, react_1.useMemo)(() => {
         return orderedColumns.flatMap(col => {
-            if (!(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key)) {
+            if (!(0, utils_1.isUnset)(col._key) && (!visibleSet || visibleSet.has(col._key))) {
                 const symbolArr = symbolBoundToNext.current.get(col) || [];
                 // 移除DataGrid不需要的属性
                 const { filterInline, filter, form, ...c } = col;

package/dist/esm/components/curd/curdColumnConfig.d.ts

@@ -3,9 +3,9 @@ import { CurdColumn } from './curd.js';
 import { RowType } from '../dataGrid/index.js';
 import { Id } from '../../types.js';
 export type CurdColumnConfigProps<R extends RowType> = {
-    columns?: CurdColumn<R>[];
-    innerVisible: Id[];
-    setInnerVisible: Dispatch<SetStateAction<Id[]>>;
-    setInnerOrder: Dispatch<SetStateAction<Id[]>>;
+    columns: CurdColumn<R>[] | undefined;
+    innerVisible: Id[] | undefined;
+    setInnerVisible: Dispatch<SetStateAction<Id[] | undefined>>;
+    setInnerOrder: Dispatch<SetStateAction<Id[] | undefined>>;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;

package/dist/esm/components/curd/curdColumnConfig.js

@@ -30,16 +30,16 @@ const CurdColumnConfigContent = memo(({ columns, innerVisible, setInnerVisible }
         }
     };
     const visibleSet = useMemo(() => {
-        return new Set(innerVisible);
+        return innerVisible && new Set(innerVisible);
     }, [innerVisible]);
     const toggleVisible = (key, checked) => {
-        !isUnset(key) && setInnerVisible(o => checked
+        !isUnset(key) && setInnerVisible((o = []) => checked
             ? [...o, key]
             : o.filter(k => k !== key));
     };
     return (_jsx(Bubble, { css: style, open: open, onOpenChange: openChangeHandler, placement: "bottomRight", trigger: ['hover', 'click'], content: _jsxs("div", { className: classes.content, children: [_jsxs("div", { className: classes.title, children: [_jsx("div", { className: classes.titleText, children: "\u5217\u8BBE\u7F6E" }), _jsx("div", { className: classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
                     const id = col._key;
-                    const checked = !isUnset(id) && visibleSet.has(id);
+                    const checked = !isUnset(id) && (!visibleSet || visibleSet.has(id));
                     return (_jsx(SortableItem, { id: id ?? i, index: i, component: MenuItem, className: classes.item, prefix: _jsx(Checkbox, { className: classes.checkbox, checked: checked, onChange: e => {
                                 e.stopPropagation();
                                 toggleVisible(id, e.target.checked);

package/dist/esm/components/tabs/lineIndicator.d.ts

@@ -1,6 +1,6 @@
 import { Id } from '../../types.js';
-export declare function LineIndicator({ value, position, getActiveTab, }: {
-    value?: Id;
-    position: 'top' | 'bottom' | 'left' | 'right';
-    getActiveTab(): HTMLDivElement | undefined;
-}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const LineIndicator: import("react").MemoExoticComponent<({ value, position, getActiveTab }: {
+    value: Id | undefined;
+    position: "top" | "bottom" | "left" | "right";
+    getActiveTab(): HTMLElement | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { classes, indicatorWidth } from './tabs.style.js';
 import { colorTransfer } from '../../utils/index.js';
 import { useTheme } from '../theme/index.js';
 import { useTabsContext } from './tabs.js';
-export function LineIndicator({ value, position, getActiveTab, }) {
+export const LineIndicator = memo(({ value, position, getActiveTab }) => {
     const context = useTabsContext();
     const [color, setColor] = useState(context.color);
     const [boundingRect, setBoundingRect] = useState();
@@ -37,9 +37,12 @@ export function LineIndicator({ value, position, getActiveTab, }) {
         }
         activeTab.dataset.color && setColor(activeTab.dataset.color);
     }, [value]);
+    const onTransitionEnd = () => {
+        setAnimating(false);
+    };
     const theme = useTheme();
-    return (_jsx("div", { className: classes.indicator, onTransitionEnd: () => setAnimating(false), style: {
+    return (_jsx("div", { className: classes.indicator, onTransitionEnd: onTransitionEnd, style: {
             ...boundingRect,
             backgroundColor: colorTransfer(color, theme)
         } }));
-}
+});

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, Ref } from 'react';
 import { ColorPropsValue, DivProps, Id } from '../../types.js';
 export interface TabProps extends Omit<DivProps, 'prefix'> {
     prefix?: ReactNode;
@@ -17,5 +17,7 @@ export interface TabProps extends Omit<DivProps, 'prefix'> {
     _active?: boolean;
     /** @private */
     _index?: number;
+    /** @private */
+    _tabRef?: Ref<HTMLDivElement>;
 }
-export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Tab: React.MemoExoticComponent<({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, _tabRef, ...props }: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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

@@ -1,30 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { clsx, useColor } from '../../utils/index.js';
+import { mergeComponentProps, useColor } from '../../utils/index.js';
 import { classes } from './tabs.style.js';
 import { useTabsContext } from './tabs.js';
 import { Button } from '../button/index.js';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
 import { Icon } from '../icon/index.js';
-import { SortableItem } from '../sortableItem/index.js';
+import { useSortable } from '@dnd-kit/react/sortable';
 import { Collapse } from '../transitionBase/index.js';
-export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
+export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, _tabRef, ...props }) => {
     const context = useTabsContext();
     const colorValue = useColor(color ?? context.color);
     const _closable = closable ?? context.closable;
     const closeHandler = (e) => {
+        e.stopPropagation();
         onClose?.(e);
         context.onClose?.(value);
     };
     const _sortable = sortable ?? context.sortable;
-    return (_jsx(SortableItem, { ...props, className: clsx(classes.tabWrapper, props.className), component: Collapse, orientation: "horizontal", id: value, index: _index, disabled: !_sortable, children: _jsxs("div", { className: classes.tab, style: {
-                borderColor: context.variant === 'line' && !context.animating && _active ? colorValue : void 0,
-                color: _active ? colorValue : void 0,
-                ...props.style
-            }, "data-color": colorValue, "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 }), _closable &&
-                    _jsx(Button, { className: classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }) }));
+    const showBorder = context.variant === 'line' && !context.animating && _active;
+    const { ref } = useSortable({
+        id: value,
+        index: _index,
+        disabled: !_sortable
+    });
+    return (_jsx(Collapse, { ...mergeComponentProps(props, {
+            ref,
+            className: classes.tabTransition
+        }), orientation: "horizontal", className: classes.tabTransition, children: _jsx("div", { className: classes.tabWrapper, children: _jsxs("div", { ref: _tabRef, className: classes.tab, style: {
+                    borderColor: showBorder ? colorValue : void 0,
+                    color: _active ? colorValue : void 0
+                }, onClick: e => {
+                    !disabled && props.onClick?.(e);
+                }, "data-color": colorValue, "data-disabled": disabled, "data-orientation": orientation, "data-active": _active, children: [!!prefix &&
+                        _jsx("div", { className: classes.tabPrefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
+                        _jsx("div", { className: classes.tabSuffix, children: suffix }), _closable &&
+                        _jsx(Button, { className: classes.tabClose, variant: "text", color: "text.secondary", onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }) }) }));
 });

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
-import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Children, cloneElement, createContext, isValidElement, memo, useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { classes, useStyle } from './tabs.style.js';
-import { clsx, cloneRef, isUnset, useControlled, useDerivedState, defaultSensors, onDndDragEnd } from '../../utils/index.js';
+import { clsx, cloneRef, isUnset, useControlled, defaultSensors, onDndDragEnd } from '../../utils/index.js';
 import { useTheme } from '../theme/index.js';
 import { Tab } from './tab.js';
 import { TabsEllipsis } from './tabsEllipsis.js';
@@ -18,26 +18,25 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
     size ??= theme.size;
     const [innerValue, _setInnerValue] = useControlled(defaultValue, value, onChange);
     const setInnerValue = (value) => {
-        if (!readOnly && !disabled) {
+        if (!readOnly && !disabled && value !== innerValue.current) {
             _setInnerValue(value);
+            console.log(96, value);
+            variant === 'line' && setAnimating(true);
         }
     };
-    const [animating, setAnimating] = useDerivedState(prev => typeof prev !== 'undefined', [innerValue.current]);
+    const [animating, setAnimating] = useState(false);
     const setValueInEllipsis = (value) => {
         shouldScroll.current = true;
         setInnerValue(value);
     };
     const tabRefs = useRef(new Map());
-    const getActiveTab = () => {
-        return isUnset(innerValue.current) ? void 0 : tabRefs.current.get(innerValue.current);
-    };
     const eventName = changeEvent === 'click' ? 'onClick' : 'onPointerDown';
     const renderTabs = () => {
         if (tabs) {
             return tabs.map((p, i) => {
                 const value = p[primaryKey];
                 const active = !isUnset(value) && value === innerValue.current;
-                return (_createElement(Tab, { ...p, key: p.key ?? value ?? i, ref: el => {
+                return (_createElement(Tab, { ...p, key: p.key ?? value ?? i, _tabRef: el => {
                         el
                             ? tabRefs.current.set(value, el)
                             : tabRefs.current.delete(value);
@@ -110,6 +109,9 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
             resizeObserver.disconnect();
         };
     }, [position]);
+    const getActiveTab = useCallback(() => {
+        return tabRefs.current.get(innerValue.current);
+    }, []);
     const shouldScroll = useRef(true);
     useEffect(() => {
         if (shouldScroll.current) {
@@ -129,13 +131,13 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
             newTabs && props.onSort(e, newTabs);
         }
     };
-    return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: clsx(classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating.current, "data-full-width": fullWidth, "data-read-only": readOnly, "data-disabled": disabled, children: [_jsx("div", { className: classes.start, "data-show": shadowStart, children: !!prefix &&
+    return (_jsxs("div", { ...props, css: useStyle({ color, variant }), className: clsx(classes.root, props.className), "data-size": size, "data-position": position, "data-animating": animating, "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: _jsx("div", { className: classes.scrollWrap, style: { justifyContent }, children: _jsxs(TabsContext, { value: useMemo(() => ({
                             color, variant, closable, onClose, sortable,
-                            animating: animating.current, setAnimating
+                            animating, setAnimating
                         }), [
                             color, variant, closable, onClose, sortable,
-                            animating.current
+                            animating
                         ]), children: [_jsx(DragDropProvider, { sensors: defaultSensors, onDragEnd: dragEndHandler, children: _jsx(TransitionGroup, { component: null, children: renderTabs() }) }), variant === 'line' &&
                                 _jsx(LineIndicator, { value: innerValue.current, position: position, getActiveTab: getActiveTab })] }) }) }), _jsx("div", { className: classes.end, "data-show": shadowEnd, children: !!(suffix || shadowStart || shadowEnd) &&
                     _jsxs("div", { className: classes.suffix, children: [(shadowStart || shadowEnd) &&

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

@@ -10,6 +10,7 @@ export declare const classes: {
     ellipsis: string;
     tab: string;
     scrollWrap: string;
+    tabTransition: string;
     tabWrapper: string;
     tabPrefix: string;
     tabSuffix: string;

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

@@ -8,6 +8,7 @@ export const classes = defineInnerClasses('tabs', [
     'ellipsis',
     'prefix',
     'suffix',
+    'tabTransition',
     'tabWrapper',
     'tab',
     'label',
@@ -32,6 +33,7 @@ export function useStyle({ color, variant }) {
                         display: flex;
                         scrollbar-width: none;
                         position: relative;
+                        overflow: auto;
 
                         &::-webkit-scrollbar {
                             display: none;
@@ -122,7 +124,11 @@ export function useStyle({ color, variant }) {
                         background-color: ${divider};
                         position: absolute;
                     }
-
+                    
+                    .${classes.tabTransition} { {
+                        z-index: 1;
+                    }}
+                    
                     .${classes.tab} {
                         display: flex;
                         align-items: center;
@@ -132,9 +138,8 @@ export function useStyle({ color, variant }) {
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         overflow: hidden;
-                        z-index: 1;
                         -webkit-tap-highlight-color: transparent;
-                        transition: all .25s ${easing.easeOut};
+                        transition: background-color, color .25s ${easing.easeOut};
 
                         &[data-orientation=vertical] {
                             flex-direction: column;
@@ -225,8 +230,8 @@ export function useStyle({ color, variant }) {
             variant === 'line'
                 ? css `
                         @layer reset {
-                            .${classes.scrollWrap} {
-                                gap: 0 ${spacing[10]}px;
+                            .${classes.tabWrapper} {
+                                padding: 0 ${spacing[5]}px;
                             }
 
                             &[data-position=top],
@@ -309,10 +314,6 @@ export function useStyle({ color, variant }) {
                 // variant === 'card'
                 : css `
                         @layer reset {
-                            .${classes.scrollWrap} {
-                                gap: ${spacing[1]}px;
-                            }
-
                             .${classes.tab} {
                                 border: 1px solid ${gray(.1)};
                                 background-color: ${background.body};
@@ -324,6 +325,10 @@ export function useStyle({ color, variant }) {
 
                             &[data-position=top],
                             &[data-position=bottom] {
+                                .${classes.tabWrapper} {
+                                    padding: 0 2px;
+                                }
+                                
                                 .${classes.tab} {
                                     padding: 10px 15px;
                                 }
@@ -363,6 +368,10 @@ export function useStyle({ color, variant }) {
 
                             &[data-position=left],
                             &[data-position=right] {
+                                .${classes.tabWrapper} {
+                                    padding: 2px 0;
+                                }
+                                
                                 .${classes.tab} {
                                     padding: 9px 18px;
                                 }

package/dist/esm/components/transitionBase/collapse.d.ts

@@ -12,7 +12,7 @@ export type CollapseOwnProps = {
     /**
      * 设定折叠后的尺寸
      * {@link transitionType}为"`sweeping"`时有效
-     * 默认为0
+     * 默认为`0`
      */
     collapsedSize?: number | (() => number);
 };