@canlooks/can-ui 0.0.98 → 0.0.99

package/dist/cjs/components/upload/dropArea.style.js

@@ -8,38 +8,40 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
     'description'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors, easing }) => (0, react_1.css) `
-    height: 100px;
-    display: flex;
-    gap: ${spacing[1]}px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 1px dashed ${divider};
-    border-radius: ${borderRadius}px;
-    color: ${text.disabled};
-    cursor: pointer;
-    background-color: ${gray(.1)};
-    transition: background-color .25s ${easing.easeOut};
+    @layer reset {
+        height: 100px;
+        display: flex;
+        gap: ${spacing[1]}px;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        border: 1px dashed ${divider};
+        border-radius: ${borderRadius}px;
+        color: ${text.disabled};
+        cursor: pointer;
+        background-color: ${gray(.1)};
+        transition: background-color .25s ${easing.easeOut};
 
-    &:hover {
-        background-color: ${gray(.15)};
-    }
+        &:hover {
+            background-color: ${gray(.15)};
+        }
 
-    &:active {
-        background-color: ${gray(.08)};
-        transition: background-color 0s;
-    }
-    
-    .${exports.classes.icon}, .${exports.classes.description} {
-        pointer-events: none;
-    }
+        &:active {
+            background-color: ${gray(.08)};
+            transition: background-color 0s;
+        }
 
-    .${exports.classes.icon} {
-        font-size: ${30 / 14}em;
-    }
+        .${exports.classes.icon}, .${exports.classes.description} {
+            pointer-events: none;
+        }
+
+        .${exports.classes.icon} {
+            font-size: ${30 / 14}em;
+        }
 
-    &[data-over=true] {
-        border-color: ${colors.primary.main};
-        color: ${colors.primary.main};
+        &[data-over=true] {
+            border-color: ${colors.primary.main};
+            color: ${colors.primary.main};
+        }
     }
 `);

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

@@ -22,147 +22,149 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload', [
 exports.style = (0, utils_1.defineCss)(({ spacing, mode, text, gray, borderRadius, colors, divider, easing, background }) => {
     const maskBg = (0, color_1.default)(background.content).alpha(.9).string();
     return (0, react_1.css) `
-        position: relative;
-
-        .${exports.classes.input} {
-            position: absolute;
-            opacity: 0;
-            pointer-events: none;
-        }
+        @layer reset {
+            position: relative;
 
-        &[data-file-type=file] {
-            .${exports.classes.files} {
-                display: flex;
-                flex-direction: column;
-                margin-top: ${spacing[2]}px;
+            .${exports.classes.input} {
+                position: absolute;
+                opacity: 0;
+                pointer-events: none;
+            }
 
-                .${exports.classes.file} {
+            &[data-file-type=file] {
+                .${exports.classes.files} {
                     display: flex;
-                    align-items: center;
-                    gap: ${spacing[3]}px;
-                    padding-right: ${spacing[2]}px;
-                    border-radius: ${borderRadius}px;
-
-                    .${exports.classes.icon} {
-                        color: ${text.secondary};
-                    }
-
-                    .${exports.classes.info} {
-                        min-width: 0;
-                        flex: 1;
-                        position: relative;
-                        padding: ${spacing[2]}px 0;
+                    flex-direction: column;
+                    margin-top: ${spacing[2]}px;
 
-                        .${exports.classes.name} {
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
+                    .${exports.classes.file} {
+                        display: flex;
+                        align-items: center;
+                        gap: ${spacing[3]}px;
+                        padding-right: ${spacing[2]}px;
+                        border-radius: ${borderRadius}px;
 
-                        .${exports.classes.progress} {
-                            position: absolute;
-                            inset: auto 0 0;
+                        .${exports.classes.icon} {
+                            color: ${text.secondary};
                         }
-                    }
-
-                    .${exports.classes.control} {
-                        display: none;
-                        gap: ${spacing[4]}px;
-                    }
 
-                    &:hover {
-                        background-color: ${gray(mode === 'light' ? .03 : .18)};
+                        .${exports.classes.info} {
+                            min-width: 0;
+                            flex: 1;
+                            position: relative;
+                            padding: ${spacing[2]}px 0;
 
-                        &:not([data-status=uploading]) {
-                            .${exports.classes.control} {
-                                display: flex;
+                            .${exports.classes.name} {
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                                overflow: hidden;
                             }
-                        }
-                    }
 
-                    &[data-status=error] {
-                        .${exports.classes.name} {
-                            color: ${colors.error.main};
+                            .${exports.classes.progress} {
+                                position: absolute;
+                                inset: auto 0 0;
+                            }
                         }
 
                         .${exports.classes.control} {
-                            display: flex;
+                            display: none;
+                            gap: ${spacing[4]}px;
                         }
-                    }
-                }
-            }
-        }
 
-        &[data-file-type=image] {
-            .${exports.classes.images} {
-                display: flex;
-                gap: ${spacing[3]}px;
-                flex-wrap: wrap;
-            }
+                        &:hover {
+                            background-color: ${gray(mode === 'light' ? .03 : .18)};
 
-            .${exports.classes.imageWrap} {
-                width: 96px;
-                height: 96px;
-                border: 1px dashed ${divider};
-                padding: 4px;
+                            &:not([data-status=uploading]) {
+                                .${exports.classes.control} {
+                                    display: flex;
+                                }
+                            }
+                        }
 
-                &[data-clickable=true] {
-                    cursor: pointer;
-                    transition: border-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
+                        &[data-status=error] {
+                            .${exports.classes.name} {
+                                color: ${colors.error.main};
+                            }
 
-                    &:hover {
-                        border-color: ${colors.primary.main};
-                        color: ${colors.primary.main};
+                            .${exports.classes.control} {
+                                display: flex;
+                            }
+                        }
                     }
                 }
+            }
 
-                .${exports.classes.image} {
-                    width: 100%;
-                    height: 100%;
-                    background-color: ${gray(.05)};
-                    border-radius: inherit;
+            &[data-file-type=image] {
+                .${exports.classes.images} {
                     display: flex;
-                    align-items: center;
-                    justify-content: center;
+                    gap: ${spacing[3]}px;
+                    flex-wrap: wrap;
+                }
 
-                    .${exports.classes.progress} {
-                        background-color: ${maskBg};
-                        position: absolute;
-                        inset: 0;
+                .${exports.classes.imageWrap} {
+                    width: 96px;
+                    height: 96px;
+                    border: 1px dashed ${divider};
+                    padding: 4px;
+
+                    &[data-clickable=true] {
+                        cursor: pointer;
+                        transition: border-color .25s ${easing.easeOut}, color .25s ${easing.easeOut};
+
+                        &:hover {
+                            border-color: ${colors.primary.main};
+                            color: ${colors.primary.main};
+                        }
+                    }
+
+                    .${exports.classes.image} {
+                        width: 100%;
+                        height: 100%;
+                        background-color: ${gray(.05)};
+                        border-radius: inherit;
                         display: flex;
                         align-items: center;
                         justify-content: center;
+
+                        .${exports.classes.progress} {
+                            background-color: ${maskBg};
+                            position: absolute;
+                            inset: 0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                        }
                     }
                 }
-            }
 
-            &[data-variant=circular] {
-                .${exports.classes.imageWrap} {
-                    border-radius: 50%;
+                &[data-variant=circular] {
+                    .${exports.classes.imageWrap} {
+                        border-radius: 50%;
+                    }
                 }
-            }
 
-            &[data-variant=square] {
-                .${exports.classes.imageWrap} {
-                    border-radius: ${borderRadius}px;
+                &[data-variant=square] {
+                    .${exports.classes.imageWrap} {
+                        border-radius: ${borderRadius}px;
+                    }
                 }
             }
-        }
 
-        .${exports.classes.sortable}[data-dragging=true] {
-            position: relative;
-            z-index: 1;
-        }
+            .${exports.classes.sortable}[data-dragging=true] {
+                position: relative;
+                z-index: 1;
+            }
 
-        &[data-sortable=true] {
-            .${exports.classes.file}, .${exports.classes.imageWrap} {
-                cursor: grab;
+            &[data-sortable=true] {
+                .${exports.classes.file}, .${exports.classes.imageWrap} {
+                    cursor: grab;
+                }
             }
-        }
 
-        &:not([data-sortable=true]) {
-            .${exports.classes.file}, .${exports.classes.imageWrap} {
-                cursor: default;
+            &:not([data-sortable=true]) {
+                .${exports.classes.file}, .${exports.classes.imageWrap} {
+                    cursor: default;
+                }
             }
         }
     `;

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

@@ -9,15 +9,17 @@ exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {
     return (0, utils_1.useCss)(theme => (0, react_1.css) `
-        ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
+        @layer reset {
+            ${(0, utils_1.responsiveVariables)(theme.breakpoints, k => `
             ${k in columnCount ? `--waterfall-columnCount: ${columnCount[k]}` : ''};
             ${k in columnGap ? `--waterfall-column-gap: ${columnGap[k]}px` : ''};
             ${k in rowGap ? `--waterfall-row-gap: ${rowGap[k]}px` : ''};
         `)}
 
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        column-gap: var(--waterfall-column-gap);
+            display: flex;
+            flex-direction: column;
+            flex-wrap: wrap;
+            column-gap: var(--waterfall-column-gap);
+        }
     `);
 }

package/dist/cjs/extensions/documentViewer/documentViewer.style.js

@@ -22,57 +22,59 @@ exports.iframeStyle = (0, react_1.css) `
     display: block;
 `;
 exports.svgStyle = (0, utils_1.defineCss)(({ spacing, background, divider, text, colors, easing }) => (0, react_1.css) `
-    .${loading_style_1.classes.container} {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .${exports.classes.svgToolbar} {
-        padding: ${spacing[3]}px ${spacing[8]}px;
-        background: ${background.content};
-        border-bottom: 1px solid ${divider};
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+    @layer reset {
+        .${loading_style_1.classes.container} {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
 
-        .${exports.classes.svgTitle} {
+        .${exports.classes.svgToolbar} {
+            padding: ${spacing[3]}px ${spacing[8]}px;
+            background: ${background.content};
+            border-bottom: 1px solid ${divider};
             display: flex;
             align-items: center;
-            gap: ${spacing[2]}px;
-            color: ${text.primary};
+            justify-content: space-between;
 
-            .${exports.classes.svgIcon} {
-                color: ${colors.primary.main};
+            .${exports.classes.svgTitle} {
+                display: flex;
+                align-items: center;
+                gap: ${spacing[2]}px;
+                color: ${text.primary};
+
+                .${exports.classes.svgIcon} {
+                    color: ${colors.primary.main};
+                }
             }
-        }
 
-        .${exports.classes.svgToolbarRight} {
-            display: flex;
-            gap: ${spacing[2]}px;
+            .${exports.classes.svgToolbarRight} {
+                display: flex;
+                gap: ${spacing[2]}px;
+            }
+
+            .${exports.classes.svgDivider} {
+                padding: ${spacing[2]}px 0;
+            }
         }
 
-        .${exports.classes.svgDivider} {
-            padding: ${spacing[2]}px 0;
+        .${exports.classes.svgContainer} {
+            width: 100%;
+            flex: 1;
+            background-color: ${background.body};
+            overflow: hidden;
         }
-    }
 
-    .${exports.classes.svgContainer} {
-        width: 100%;
-        flex: 1;
-        background-color: ${background.body};
-        overflow: hidden;
-    }
-    
-    .${exports.classes.svgContent}, .${exports.classes.object} {
-        width: 100%;
-        height: 100%;
-    }
+        .${exports.classes.svgContent}, .${exports.classes.object} {
+            width: 100%;
+            height: 100%;
+        }
 
-    .${exports.classes.object} {
-        pointer-events: none;
-        user-select: none;
-        transition: rotate .4s ${easing.easeOut};
+        .${exports.classes.object} {
+            pointer-events: none;
+            user-select: none;
+            transition: rotate .4s ${easing.easeOut};
+        }
     }
 `);

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

@@ -135,12 +135,6 @@ export declare function range(value: number, min?: number, max?: number): number
  */
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], setValue?: (oldValue: any) => T, separator?: string): T;
 export declare function queryDeep<T = any>(obj: any, keyPath: PropertyKey | PropertyKey[], separator?: string, setValue?: (oldValue: any) => T): T;
-/**
- * 过滤对象中值为undefined属性
- * @param obj
- * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
- */
-export declare function filterProperties<T extends Record<string, any>>(obj: T, undefinedValue?: any): T;
 /**
  * 合并属性
  */

package/dist/cjs/utils/utils.js

@@ -22,7 +22,6 @@ exports.findPredecessor = findPredecessor;
 exports.listenAllPredecessorsScroll = listenAllPredecessorsScroll;
 exports.range = range;
 exports.queryDeep = queryDeep;
-exports.filterProperties = filterProperties;
 exports.mergeComponentProps = mergeComponentProps;
 /**
  * 生成最简易的随机ID
@@ -354,19 +353,6 @@ function queryDeep(obj, keyPath, a, b) {
     }
     return obj[keyPath];
 }
-/**
- * 过滤对象中值为undefined属性
- * @param obj
- * @param undefinedValue 可传入该值，用于替换undefined以删除其他属性
- */
-function filterProperties(obj, undefinedValue) {
-    for (const k in obj) {
-        if (obj[k] === undefinedValue) {
-            delete obj[k];
-        }
-    }
-    return obj;
-}
 function mergeComponentProps(...props) {
     const { length } = props;
     if (length <= 1) {