@canlooks/can-ui 0.0.97 → 0.0.99

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.getTranparentBackground = exports.classes = void 0;
+exports.style = exports.getTransparentBackground = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const slider_style_1 = require("../slider/slider.style");
@@ -21,145 +21,147 @@ exports.classes = (0, utils_1.defineInnerClasses)('palette', [
     'input',
     'inputItemLabel'
 ]);
-const getTranparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
-exports.getTranparentBackground = getTranparentBackground;
+const getTransparentBackground = (a, b) => `background-image: conic-gradient(${a} 0 25%, ${b} 25% 50%, ${a} 50% 75%, ${b} 75% 100%);`;
+exports.getTransparentBackground = getTransparentBackground;
 exports.style = (0, utils_1.defineCss)(({ spacing, borderRadius, background, divider, text }) => (0, react_1.css) `
-    width: 240px;
-    display: flex;
-    flex-direction: column;
-    gap: ${spacing[3]}px;
-    user-select: none;
-    
-    .${exports.classes.main} {
-        aspect-ratio: 3 / 2;
-        border-radius: ${borderRadius}px;
-        /* overflow: hidden; */
-        position: relative;
-        touch-action: none;
-    
-        .${exports.classes.mask} {
-            background-image: linear-gradient(0deg, #000, transparent);
-            border-radius: inherit;
-            position: absolute;
-            inset: 0;
-            pointer-events: none;
-        }
-    
-        .${exports.classes.handle} {
-            cursor: pointer;
-            width: 12px;
-            height: 12px;
-            border: 2px solid #ffffff;
-            border-radius: 50%;
-            box-shadow: 0 0 2px ${text.primary}, inset 0 0 1px ${text.primary};
-            position: absolute;
-            transform: translate(-50%, -50%);
-        }
-    }
-    
-    .${exports.classes.slidersRow} {
+    @layer reset {
+        width: 240px;
         display: flex;
+        flex-direction: column;
         gap: ${spacing[3]}px;
-    
-        .${exports.classes.sliders} {
-            flex: 1;
+        user-select: none;
+
+        .${exports.classes.main} {
+            aspect-ratio: 3 / 2;
+            border-radius: ${borderRadius}px;
+            /* overflow: hidden; */
+            position: relative;
+            touch-action: none;
+
+            .${exports.classes.mask} {
+                background-image: linear-gradient(0deg, #000, transparent);
+                border-radius: inherit;
+                position: absolute;
+                inset: 0;
+                pointer-events: none;
+            }
+
+            .${exports.classes.handle} {
+                cursor: pointer;
+                width: 12px;
+                height: 12px;
+                border: 2px solid #ffffff;
+                border-radius: 50%;
+                box-shadow: 0 0 2px ${text.primary}, inset 0 0 1px ${text.primary};
+                position: absolute;
+                transform: translate(-50%, -50%);
+            }
+        }
+
+        .${exports.classes.slidersRow} {
             display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-    
-            .${slider_style_1.classes.root} {
-                min-height: 0;
-    
-                .${slider_style_1.classes.handle} {
-                    background-color: transparent;
-                    border-color: #ffffff;
-                    box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+            gap: ${spacing[3]}px;
+
+            .${exports.classes.sliders} {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .${slider_style_1.classes.root} {
+                    min-height: 0;
+
+                    .${slider_style_1.classes.handle} {
+                        background-color: transparent;
+                        border-color: #ffffff;
+                        box-shadow: 0 0 2px #000000, inset 0 0 1px #000000;
+                    }
                 }
-            }
-    
-            .${exports.classes.hue} {
-                .${slider_style_1.classes.rail} {
-                    background-image: linear-gradient(90deg,
+
+                .${exports.classes.hue} {
+                    .${slider_style_1.classes.rail} {
+                        background-image: linear-gradient(90deg,
                         #f00 0%,
                         #ff0 ${100 / 6}%,
                         #0f0 ${100 / 6 * 2}%,
                         #0ff 50%, #00f ${100 / 6 * 4}%,
                         #f0f ${100 / 6 * 5}%,
                         #f00 100%
-                    );
-                }
-            }
-    
-            .${exports.classes.alpha} {
-                .${slider_style_1.classes.rail} {
-                    position: relative;
-                    background-color: transparent;
-    
-                    &:before,
-                    .${exports.classes.alphaMask} {
-                        border-radius: inherit;
-                        position: absolute;
-                        inset: 0;
+                        );
                     }
-    
-                    &:before {
-                        content: '';
-                        ${(0, exports.getTranparentBackground)(background.body, background.content)}
-                        background-size: 9px;
+                }
+
+                .${exports.classes.alpha} {
+                    .${slider_style_1.classes.rail} {
+                        position: relative;
+                        background-color: transparent;
+
+                        &::before,
+                        .${exports.classes.alphaMask} {
+                            border-radius: inherit;
+                            position: absolute;
+                            inset: 0;
+                        }
+
+                        &::before {
+                            content: '';
+                            ${(0, exports.getTransparentBackground)(background.body, background.content)}
+                            background-size: 9px;
+                        }
                     }
                 }
             }
-        }
-    
-        .${exports.classes.preview} {
-            width: 30px;
-            height: 30px;
-            border-radius: ${borderRadius}px;
-            border: 1px solid ${divider};
-            overflow: hidden;
-            ${(0, exports.getTranparentBackground)(background.body, background.content)}
-            background-size: 50% 50%;
-            position: relative;
-    
-            .${exports.classes.previewColor} {
-                position: absolute;
-                inset: 0;
+
+            .${exports.classes.preview} {
+                width: 30px;
+                height: 30px;
+                border-radius: ${borderRadius}px;
+                border: 1px solid ${divider};
+                overflow: hidden;
+                ${(0, exports.getTransparentBackground)(background.body, background.content)}
+                background-size: 50% 50%;
+                position: relative;
+
+                .${exports.classes.previewColor} {
+                    position: absolute;
+                    inset: 0;
+                }
             }
         }
-    }
 
-    .${exports.classes.inputRow} {
-        display: flex;
-        gap: 12px;
-        font-size: ${13 / 14}em;
-
-        .${exports.classes.inputsWrap} {
-            flex: 1;
+        .${exports.classes.inputRow} {
             display: flex;
-            gap: ${spacing[1]}px;
+            gap: 12px;
+            font-size: ${13 / 14}em;
 
-            .${exports.classes.inputItem} {
+            .${exports.classes.inputsWrap} {
                 flex: 1;
                 display: flex;
-                flex-direction: column;
+                gap: ${spacing[1]}px;
 
-                &[data-wide=true] {
-                    flex: 3;
-                }
+                .${exports.classes.inputItem} {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
 
-                .${exports.classes.input} {
-                    padding: 0 ${spacing[1]}px;
-                }
+                    &[data-wide=true] {
+                        flex: 3;
+                    }
 
-                &:not([data-wide=true]) {
-                    .${exports.classes.input} input {
-                        text-align: center;
+                    .${exports.classes.input} {
+                        padding: 0 ${spacing[1]}px;
+                    }
+
+                    &:not([data-wide=true]) {
+                        .${exports.classes.input} input {
+                            text-align: center;
+                        }
                     }
-                }
 
-                .${exports.classes.inputItemLabel} {
-                    text-align: center;
-                    color: ${text.placeholder};
+                    .${exports.classes.inputItemLabel} {
+                        text-align: center;
+                        color: ${text.placeholder};
+                    }
                 }
             }
         }

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

@@ -13,35 +13,37 @@ exports.classes = (0, utils_1.defineInnerClasses)('picker-dialog', [
     'confirm'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing }) => (0, react_1.css) `
-    .${exports.classes.selectedArea} {
-        width: 320px;
-        max-height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: ${spacing[3]}px;
+    @layer reset {
+        .${exports.classes.selectedArea} {
+            width: 320px;
+            max-height: 100%;
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
 
-        .${exports.classes.count} {
-            b {
-                margin: 0 ${spacing[2]}px;
-            }
+            .${exports.classes.count} {
+                b {
+                    margin: 0 ${spacing[2]}px;
+                }
 
-            .${divider_style_1.classes.content} {
-                display: flex;
-                gap: 12px;
+                .${divider_style_1.classes.content} {
+                    display: flex;
+                    gap: 12px;
+                }
             }
-        }
 
-        .${exports.classes.list} {
-            flex: 1;
-            overflow: hidden auto;
-            
-            .${alert_style_1.classes.description} {
-                margin-top: 0;
+            .${exports.classes.list} {
+                flex: 1;
+                overflow: hidden auto;
+
+                .${alert_style_1.classes.description} {
+                    margin-top: 0;
+                }
             }
-        }
 
-        .${exports.classes.confirm} {
-            margin-top: ${spacing[4]}px;
+            .${exports.classes.confirm} {
+                margin-top: ${spacing[4]}px;
+            }
         }
     }
 `);

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

@@ -7,15 +7,17 @@ exports.classes = (0, utils_1.defineInnerClasses)('pinchable', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    @layer reset {
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-    &, .${exports.classes.content} {
-        touch-action: none;
-    }
+        &, .${exports.classes.content} {
+            touch-action: none;
+        }
 
-    .${exports.classes.content}[data-transition=true] {
-        transition: all .25s ${easing.easeOut};
+        .${exports.classes.content}[data-transition=true] {
+            transition: all .25s ${easing.easeOut};
+        }
     }
 `);

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

@@ -10,33 +10,35 @@ exports.classes = (0, utils_1.defineInnerClasses)('placeholder', [
     'extra'
 ]);
 exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
-    width: 100%;
-    height: 100%;
-    flex: 1;
-    padding: ${spacing[8]}px 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    
-    .${exports.classes.image} {
-        height: 60px;
-        object-fit: cover;
-    }
+    @layer reset {
+        width: 100%;
+        height: 100%;
+        flex: 1;
+        padding: ${spacing[8]}px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
 
-    .${exports.classes.title} {
-        font-size: 1.7em;
-        margin-top: ${spacing[8]}px;
-        font-weight: bold;
-        white-space: nowrap;
-    }
-    
-    .${exports.classes.description} {
-        margin-top: ${spacing[4]}px;
-        color: ${text.placeholder};
-    }
+        .${exports.classes.image} {
+            height: 60px;
+            object-fit: cover;
+        }
+
+        .${exports.classes.title} {
+            font-size: 1.7em;
+            margin-top: ${spacing[8]}px;
+            font-weight: bold;
+            white-space: nowrap;
+        }
+
+        .${exports.classes.description} {
+            margin-top: ${spacing[4]}px;
+            color: ${text.placeholder};
+        }
 
-    .${exports.classes.extra} {
-        margin-top: ${spacing[8]}px;
+        .${exports.classes.extra} {
+            margin-top: ${spacing[8]}px;
+        }
     }
 `);

package/dist/cjs/components/popper/popper.js

@@ -360,51 +360,54 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const hoverStack = (0, react_1.useRef)(0);
-    const pointerEnter = () => {
-        if (hoverStack.current++) {
-            return;
-        }
+    const isOvering = (0, react_1.useRef)(false);
+    const pointerEnterFn = (0, react_1.useCallback)(() => {
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
-    };
-    const pointerLeave = () => {
-        if (--hoverStack.current) {
-            return;
-        }
+    }, [mouseEnterDelay]);
+    const pointerLeaveFn = (0, react_1.useCallback)(() => {
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
-    };
-    // 绑定锚点元素
+    }, [mouseLeaveDelay]);
     (0, react_1.useEffect)(() => {
         if (!hoverable) {
             return;
         }
+        const pointerOver = (e) => {
+            if (!isOvering.current && e.target === anchorRef.current) {
+                isOvering.current = true;
+                pointerEnterFn();
+            }
+        };
+        const pointerLeave = () => {
+            isOvering.current = false;
+            pointerLeaveFn();
+        };
         const anchorEl = anchorRef.current;
-        anchorEl.addEventListener('pointerenter', pointerEnter);
+        anchorEl.addEventListener('pointerover', pointerOver);
         anchorEl.addEventListener('pointerleave', pointerLeave);
         return () => {
-            anchorEl.removeEventListener('pointerenter', pointerEnter);
+            anchorEl.removeEventListener('pointerover', pointerOver);
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
-    }, [hoverable]);
+    }, []);
     // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     (0, react_1.useEffect)(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
         }
         const popperEl = innerPopperRef.current;
-        popperEl.addEventListener('pointerenter', pointerEnter);
-        popperEl.addEventListener('pointerleave', pointerLeave);
+        popperEl.addEventListener('pointerenter', pointerEnterFn);
+        popperEl.addEventListener('pointerleave', pointerLeaveFn);
         return () => {
-            popperEl.removeEventListener('pointerenter', pointerEnter);
-            popperEl.removeEventListener('pointerleave', pointerLeave);
+            popperEl.removeEventListener('pointerenter', pointerEnterFn);
+            popperEl.removeEventListener('pointerleave', pointerLeaveFn);
         };
-    }, [innerOpen.current]);
+    }, [innerOpen.current, mouseLeaveDelay]);
     /**
      * focus相关
      */
@@ -513,7 +516,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
     }), [innerOpen.current, autoClose]);
     const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
-                ? (0, react_1.cloneElement)(children, { ref: childRef })
+                ? (0, react_1.cloneElement)(children, {
+                    ref: childRef
+                })
                 : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 
                 // 右键菜单点击anchor需要关闭弹框
                 targets: () => contextMenuEvent.current ? null : anchorRef.current, onClickAway: onClickAway, children: (0, jsx_runtime_1.jsx)("div", { ...props, ref: innerPopperRef, css: popper_style_1.style, className: (0, utils_1.clsx)(popper_style_1.classes.root, props.className), style: {

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

@@ -13,34 +13,36 @@ exports.style = (0, utils_1.defineCss)(theme => {
     return [
         (0, app_style_1.appStyleCallback)(theme),
         (0, react_1.css) `
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: ${theme_1.zIndex.popper};
-            transition-property: transform, opacity;
-            transition-duration: .25s;
+            @layer reset {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: ${theme_1.zIndex.popper};
+                transition-property: transform, opacity;
+                transition-duration: .25s;
 
-            &[data-open=true] {
-                transition-timing-function: ${easing.bounce}, ${easing.easeOut};
-                opacity: 1;
-                transform: scale(1);
-            }
-
-            &:not([data-open=true]) {
-                transition-timing-function: ${easing.easeIn};
-                opacity: 0;
-
-                &[data-variant=zoom] {
-                    transform: scale(0);
+                &[data-open=true] {
+                    transition-timing-function: ${easing.bounce}, ${easing.easeOut};
+                    opacity: 1;
+                    transform: scale(1);
                 }
 
-                &[data-variant=collapse] {
-                    &[data-place-a=top], &[data-place-a=bottom] {
-                        transform: scaleY(0);
+                &:not([data-open=true]) {
+                    transition-timing-function: ${easing.easeIn};
+                    opacity: 0;
+
+                    &[data-variant=zoom] {
+                        transform: scale(0);
                     }
 
-                    &[data-place-a=left], &[data-place-a=right] {
-                        transform: scaleX(0);
+                    &[data-variant=collapse] {
+                        &[data-place-a=top], &[data-place-a=bottom] {
+                            transform: scaleY(0);
+                        }
+
+                        &[data-place-a=left], &[data-place-a=right] {
+                            transform: scaleX(0);
+                        }
                     }
                 }
             }
@@ -53,7 +55,7 @@ exports.style = (0, utils_1.defineCss)(theme => {
  * @param arrowSize
  */
 const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
-    [data-show-arrow=true]:before {
+    [data-show-arrow=true]::before {
         content: '';
         position: absolute;
         width: ${arrowSize}px;
@@ -62,7 +64,7 @@ const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
     }
 
     &[data-place-a=top] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 0 0, 100% 0);
             top: 100%;
             left: calc(50% - ${arrowSize / 2}px);
@@ -70,7 +72,7 @@ const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
     }
 
     &[data-place-a=bottom] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 100% 100%, 0 100%);
             bottom: 100%;
             left: calc(50% - ${arrowSize / 2}px);
@@ -78,7 +80,7 @@ const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
     }
 
     &[data-place-a=left] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 0 0, 0 100%);
             left: 100%;
             top: calc(50% - ${arrowSize / 2}px);
@@ -86,7 +88,7 @@ const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
     }
 
     &[data-place-a=right] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             clip-path: polygon(50% 50%, 100% 100%, 100% 0);
             right: 100%;
             top: calc(50% - ${arrowSize / 2}px);
@@ -94,26 +96,26 @@ const popperArrowStyle = (colorValue, arrowSize = 10) => (0, react_1.css) `
     }
 
     &[data-place-b=Left] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             left: 9px;
         }
     }
 
     &[data-place-b=Right] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             left: auto;
             right: 9px;
         }
     }
 
     &[data-place-b=Top] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             top: 9px;
         }
     }
 
     &[data-place-b=Bottom] {
-        [data-show-arrow=true]:before {
+        [data-show-arrow=true]::before {
             top: auto;
             bottom: 9px;
         }
@@ -124,13 +126,15 @@ exports.popperArrowStyle = popperArrowStyle;
  *  通用弹框样式
  */
 const popperStyleCallback = ({ background, borderRadius, boxShadow }) => (0, react_1.css) `
-    background-color: ${background.content};
-    border-radius: ${borderRadius}px;
-    box-shadow: ${boxShadow[0]};
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 4px;
+    @layer reset {
+        background-color: ${background.content};
+        border-radius: ${borderRadius}px;
+        box-shadow: ${boxShadow[0]};
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        padding: 4px;
+    }
 `;
 exports.popperStyleCallback = popperStyleCallback;
 exports.popperStyle = (0, utils_1.defineCss)(exports.popperStyleCallback);