@canlooks/can-ui 0.0.168 → 0.0.170

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/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

@@ -6,34 +6,34 @@ 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 { Collapse } from '../transitionBase/index.js';
 import { useSortable } from '@dnd-kit/react/sortable';
-export const Tab = memo(({ prefix, suffix, color, orientation, label, value, disabled, closable, onClose, sortable, _active, _index, ...props }) => {
+import { Collapse } from '../transitionBase/index.js';
+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;
+    const showBorder = context.variant === 'line' && !context.animating && _active;
     const { ref } = useSortable({
         id: value,
         index: _index,
         disabled: !_sortable
     });
-    return (_jsxs(Collapse, { orientation: "horizontal", ...mergeComponentProps(props, {
+    return (_jsx(Collapse, { ...mergeComponentProps(props, {
             ref,
-            className: classes.tab,
-            style: {
-                borderColor: context.variant === 'line' && !context.animating && _active ? 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 }) })] }));
+            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

@@ -2,7 +2,7 @@ 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, 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,12 +18,13 @@ 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);
@@ -35,7 +36,7 @@ export const Tabs = memo(({ tabs, labelKey = 'label', primaryKey = 'value', size
             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);
@@ -130,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;
@@ -123,6 +125,10 @@ export function useStyle({ color, variant }) {
                         position: absolute;
                     }
                     
+                    .${classes.tabTransition} { {
+                        z-index: 1;
+                    }}
+                    
                     .${classes.tab} {
                         display: flex;
                         align-items: center;
@@ -132,7 +138,6 @@ export function useStyle({ color, variant }) {
                         white-space: nowrap;
                         text-overflow: ellipsis;
                         overflow: hidden;
-                        z-index: 1;
                         -webkit-tap-highlight-color: transparent;
                         transition: background-color, color .25s ${easing.easeOut};
 
@@ -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);
 };

package/dist/esm/components/transitionBase/collapse.js

@@ -1,60 +1,71 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { TransitionBase } from './transitionBase.js';
-import { cloneRef, useStrictEffect } from '../../utils/index.js';
+import { cloneRef, useUpdateEffect } from '../../utils/index.js';
 export const Collapse = ({ transitionType = 'sweeping', ...props }) => {
     const Component = transitionType === 'sweeping' ? Sweeping : TransitionBase;
     return (_jsx(Component, { ...props, _mode: transitionType === 'sweeping' ? '_sweeping' : 'collapse' }));
 };
-const Sweeping = ({ ref, in: _in = false, appear = true, orientation = 'vertical', collapsedSize = 0, ...props }) => {
+const Sweeping = ({ ref, in: _in = false, orientation = 'vertical', collapsedSize = 0, appear = true, ...props }) => {
     const innerRef = useRef(null);
+    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
     const getCollapsedSize = () => {
         return typeof collapsedSize === 'function' ? collapsedSize() : collapsedSize;
     };
-    const [size, setSize] = useState(() => {
-        if (_in && !appear) {
-            return 'auto';
-        }
-        return getCollapsedSize();
-    });
-    const [isEntered, setIsEntered] = useState(_in && !appear);
-    const styleProperty = orientation === 'vertical' ? 'height' : 'width';
-    const expand = () => {
+    const [size, setSize] = useState(() => !_in ? getCollapsedSize() : 'auto');
+    const getFullSize = () => {
         const el = innerRef.current;
+        let size;
         if (el) {
             el.style.transition = 'none';
+            const originalSize = el.style[styleProperty];
             el.style[styleProperty] = 'auto';
-            const newSize = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
-            el.style[styleProperty] = size + 'px';
+            size = el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+            el.style[styleProperty] = originalSize;
             el.style.transition = '';
+        }
+        return size;
+    };
+    const expand = (fromSize) => {
+        const fullSize = getFullSize();
+        if (typeof fullSize !== 'undefined') {
+            if (typeof fromSize !== 'undefined') {
+                const el = innerRef.current;
+                el.style[styleProperty] = fromSize + 'px';
+            }
             requestAnimationFrame(() => {
-                setSize(newSize);
+                setSize(fullSize);
             });
         }
     };
+    const getCurrentSize = () => {
+        const el = innerRef.current;
+        if (el) {
+            return el[orientation === 'vertical' ? 'offsetHeight' : 'offsetWidth'];
+        }
+    };
     const collapse = () => {
-        setIsEntered(false);
-        requestAnimationFrame(() => {
-            setSize(getCollapsedSize());
-        });
+        const currentSize = getCurrentSize();
+        if (typeof currentSize !== 'undefined') {
+            const el = innerRef.current;
+            el.style[styleProperty] = currentSize + 'px';
+            requestAnimationFrame(() => {
+                setSize(getCollapsedSize());
+            });
+        }
     };
-    const mounted = useRef(false);
-    useStrictEffect(() => {
-        if (!mounted.current) {
-            // 首次渲染
-            mounted.current = true;
-            if (!appear) {
-                // 若appear为false，则跳过首次动画
-                return;
-            }
+    useLayoutEffect(() => {
+        if (_in && appear) {
+            expand(getCollapsedSize());
         }
+    }, []);
+    useUpdateEffect(() => {
         _in
             ? expand()
             : collapse();
     }, [_in]);
-    return (_jsx(TransitionBase, { ...props, appear: appear, orientation: orientation, in: _in, ref: cloneRef(ref, innerRef), style: {
-            [styleProperty]: isEntered ? 'auto' : size,
-            ...!isEntered && { overflow: 'hidden' },
+    return (_jsx(TransitionBase, { ...props, ref: cloneRef(ref, innerRef), in: _in, orientation: orientation, appear: appear, style: {
+            [styleProperty]: size,
             ...props.style
-        }, onEntered: () => setIsEntered(true) }));
+        } }));
 };

package/dist/esm/components/transitionBase/transitionBase.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { classes, fadeStyle, sweepingStyle, useGrowAndCollapseStyle, useSlideStyle, useTransitionBaseStyle } from './transitionBase.style.js';
-import { clsx, cloneRef } from '../../utils/index.js';
+import { classes, fadeStyle, useGrowAndCollapseStyle, useSlideStyle, useSweepingStyle, useTransitionBaseStyle } from './transitionBase.style.js';
+import { clsx, cloneRef, useUpdateEffect } from '../../utils/index.js';
 export const TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
         useTransitionBaseStyle({ timeout })
@@ -11,7 +11,7 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         cssArr.push(fadeStyle);
         switch (_mode) {
             case '_sweeping':
-                cssArr.push(sweepingStyle);
+                cssArr.push(useSweepingStyle({ orientation }));
                 break;
             case 'collapse':
             case 'grow':
@@ -22,5 +22,10 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         }
     }
     const innerRef = useRef(null);
-    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
+    const firstOpenChanged = useRef(false);
+    useUpdateEffect(() => {
+        firstOpenChanged.current = true;
+    }, [props.in]);
+    const unInitClass = !firstOpenChanged.current && !props.in && 'exit-done';
+    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
 });

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

@@ -4,6 +4,6 @@ export declare const classes: {
 };
 export declare function useTransitionBaseStyle({ timeout }: Required<Pick<TransitionBaseProps<any>, 'timeout'>>): import("@emotion/utils").SerializedStyles;
 export declare const fadeStyle: () => import("@emotion/utils").SerializedStyles;
-export declare const sweepingStyle: () => import("@emotion/utils").SerializedStyles;
-export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps<any>, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
-export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps<any>, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSweepingStyle({ orientation }: Required<Pick<TransitionBaseProps, 'orientation'>>): import("@emotion/utils").SerializedStyles;
+export declare function useGrowAndCollapseStyle({ orientation, _mode }: Required<Pick<TransitionBaseProps, 'orientation' | '_mode'>>): import("@emotion/utils").SerializedStyles;
+export declare function useSlideStyle({ direction, offset }: Required<Pick<TransitionBaseProps, 'direction' | 'offset'>>): import("@emotion/utils").SerializedStyles;