@canlooks/can-ui 0.0.168 → 0.0.170

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

@@ -6,6 +6,7 @@ export function useTransitionBaseStyle({ timeout }) {
     return useCss(() => css `
         @layer reset {
             ${timeoutIsNumber ? `transition-duration: ${timeout}ms;` : ''}
+            
             &.appear-active {
                 ${!timeoutIsNumber ? `transition-duration: ${timeout.appear}ms;` : ''}
             }
@@ -22,126 +23,107 @@ export function useTransitionBaseStyle({ timeout }) {
 }
 export const fadeStyle = defineCss(({ easing }) => 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;
-        }
-    }
-`);
-export const sweepingStyle = defineCss(({ easing }) => 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};
         }
     }
 `);
+export function useSweepingStyle({ orientation }) {
+    return useCss(() => 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]);
+}
 export function useGrowAndCollapseStyle({ orientation, _mode }) {
-    return useCss(({ easing }) => {
-        let transformMethod = _mode === 'grow'
-            ? 'scale'
-            : orientation === 'vertical'
-                ? 'scaleY'
-                : 'scaleX';
-        return 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 useCss(() => 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]);
 }
 export function useSlideStyle({ direction, offset }) {
-    return 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 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 useCss(() => 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/esm/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/esm/utils/curd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",