@canlooks/can-ui 0.0.74 → 0.0.76

package/dist/cjs/components/inputBase/inputBase.js

@@ -56,6 +56,15 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
+    const shouldRenderClearButton = () => {
+        if (!clearable || disabled || readOnly || (0, utils_1.isUnset)(innerValue.current)) {
+            return false;
+        }
+        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
+            return !!innerValue.current.length;
+        }
+        return true;
+    };
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.mergeComponentProps)(props, {
             ref: innerRef,
             className: inputBase_style_1.classes.root,
@@ -86,7 +95,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && !!innerValue.current?.length &&
+                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), shouldRenderClearButton() &&
                 (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faCircleXmark_1.faCircleXmark }) }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
 });

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

@@ -15,8 +15,8 @@ const getAttemptOrder = (placement) => {
     if (index > -1) {
         return [
             placement,
-            ...order.slice(0, index),
             ...order.slice(index + 1),
+            ...order.slice(0, index),
             placement
         ];
     }
@@ -65,8 +65,8 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         }
         tellParentOpenChange(innerOpen.current);
     }, [innerOpen.current]);
-    const onChildrenOpenChange = (open) => {
-        hold(open) === 0 && setInnerOpen(false);
+    const onChildrenOpenChange = (childrenOpen) => {
+        hold(childrenOpen) === 0 && setInnerOpen(false);
     };
     const setOpenForce = (open) => {
         if (!open) {
@@ -126,7 +126,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             // 右键菜单
             const mouseX = contextMenuEvent.current.clientX - containerRect.left;
             const mouseY = contextMenuEvent.current.clientY - containerRect.top;
-            attempt = (placement) => {
+            attempt = placement => {
                 [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
                 if (pB) {
                     switch (placement) {
@@ -190,7 +190,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -198,7 +198,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             const anchorRect = getAnchorElement().getBoundingClientRect();
             const topEdge = anchorRect.top - containerRect.top;
             const leftEdge = anchorRect.left - containerRect.left;
-            attempt = (placement) => {
+            attempt = placement => {
                 [, pA, pB] = placement.match(/^(top|bottom|left|right)(Top|Bottom|Left|Right)?/);
                 if (sizeAdaptable) {
                     if (pA === 'top' || pA === 'bottom') {
@@ -261,7 +261,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return (0, utils_1.isElementVisibleCompletely)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return (0, utils_1.isElementOverflowed)(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -270,7 +270,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         else {
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
-                if (attempt(attemptOrder[i])) {
+                if (attempt(attemptOrder[i]) === false) {
                     break;
                 }
             }
@@ -295,8 +295,8 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             popperEl.style.transform = variant === 'collapse'
                 ? pA === 'top' || pA === 'bottom' ? 'scaleY(0)' : 'scaleX(0)'
                 : 'scale(0)';
+            animating.current = true;
             requestAnimationFrame(() => {
-                animating.current = true;
                 settle();
                 setOpenNextFrame(true);
             });
@@ -360,26 +360,26 @@ 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 isEntered = (0, react_1.useRef)(false);
+    const hoverStack = (0, react_1.useRef)(0);
     const pointerEnter = () => {
-        if (isEntered.current) {
+        if (hoverStack.current++) {
             return;
         }
-        isEntered.current = true;
-        hold(true);
         clearTimeout(leaveTimeout.current);
         mouseEnterDelay
             ? enterTimeout.current = setTimeout(() => setInnerOpen(true), mouseEnterDelay)
             : setInnerOpen(true);
     };
     const pointerLeave = () => {
-        isEntered.current = false;
-        hold(false);
+        if (--hoverStack.current) {
+            return;
+        }
         clearTimeout(enterTimeout.current);
         mouseLeaveDelay
             ? leaveTimeout.current = setTimeout(() => setInnerOpen(false), mouseLeaveDelay)
             : setInnerOpen(false);
     };
+    // 绑定锚点元素
     (0, react_1.useEffect)(() => {
         if (!hoverable) {
             return;
@@ -392,6 +392,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
     }, [hoverable]);
+    // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     (0, react_1.useEffect)(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
@@ -431,7 +432,9 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             return;
         }
         const keyDown = (e) => {
-            e.key === 'Enter' && openAndHold(true);
+            if (e.key === 'Enter') {
+                openAndHold(true);
+            }
         };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('keydown', keyDown);
@@ -447,9 +450,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         if (!clickable) {
             return;
         }
-        const click = () => {
-            openAndHold(true);
-        };
+        const click = () => openAndHold(true);
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -457,7 +458,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
         };
     }, []);
     const onClickAway = () => {
-        innerOpen.current && openAndHold(false);
+        innerOpen.current && setOpenForce(false);
     };
     /**
      * clickToClose

package/dist/cjs/components/status/status.d.ts

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
-    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/cjs/components/table/table.d.ts

@@ -6,7 +6,7 @@ export interface TableProps extends Partial<ComponentProps<'table'>> {
     /**
      * 是否渲染边框，默认为`none`
      * @enum 'all' 所有单元格都渲染边框
-     * @enum true 所有单元格都渲染边框
+     * @enum true 同'all', 所有单元格都渲染边框
      * @enum 'out' 仅table外边缘渲染边框
      * @enum 'none' 不渲染边框
      */

package/dist/cjs/components/table/table.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = Table;
 exports.TableRow = TableRow;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
 const table_style_1 = require("./table.style");
 const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
@@ -10,7 +11,8 @@ const tableSticky_1 = require("./tableSticky");
 function Table({ size, bordered = 'none', striped = false, ...props }) {
     const theme = (0, theme_1.useTheme)();
     size ??= theme.size;
-    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+    const tableRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)("table", { ...props, css: table_style_1.style, ref: (0, utils_1.cloneRef)(props.ref, tableRef), className: (0, utils_1.clsx)(table_style_1.classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
 }
 function TableRow({ selected, ...props }) {
     return (0, jsx_runtime_1.jsx)("tr", { ...props, "data-selected": selected });

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

@@ -9,9 +9,9 @@ exports.classes = (0, utils_1.defineInnerClasses)('table', [
     'container',
     'cell'
 ]);
-exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing, colors }) => {
-    const headerBg = gray(mode === 'light' ? .02 : .22);
-    const stripedBg = gray(mode === 'light' ? .01 : .21);
+exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, background, easing, colors }) => {
+    const headerBg = gray(mode === 'light' ? .03 : .22);
+    const stripedBg = gray(mode === 'light' ? .02 : .21);
     const selectedBg = (0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return (0, react_1.css) `
         width: 100%;
@@ -38,6 +38,14 @@ exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing,
             }
         }
 
+        tbody tr {
+            &:not(:hover):not([data-selected=true]) {
+                th, td {
+                    background-color: ${background.content};
+                }
+            }
+        }
+
         th, td {
             position: relative;
             text-align: left;
@@ -59,11 +67,18 @@ exports.style = (0, utils_1.defineCss)(({ mode, spacing, gray, divider, easing,
         }
 
         &[data-bordered=all], &[data-bordered=true] {
-            border-top: 1px solid ${divider};
-            border-left: 1px solid ${divider};
-
             th, td {
                 border-right: 1px solid ${divider};
+                
+                &:first-of-type {
+                    border-left: 1px solid ${divider};
+                }
+            }
+            
+            thead tr:first-of-type {
+                th, td {
+                    border-top: 1px solid ${divider};
+                }
             }
         }
 

package/dist/cjs/components/table/tableSticky.js

@@ -9,22 +9,29 @@ const utils_1 = require("../../utils");
 const table_style_1 = require("./table.style");
 const tableSticky_style_1 = require("./tableSticky.style");
 exports.TableContainer = (({ component: Component = 'div', ...props }) => {
-    const [scrolledLeft, setScrolledLeft] = (0, react_1.useState)(false);
-    const [scrolledRight, setScrolledRight] = (0, react_1.useState)(false);
     const innerRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const el = innerRef.current;
         const scroll = () => {
-            setScrolledLeft(!!el.scrollLeft);
-            setScrolledRight(!!(el.scrollWidth - el.clientWidth - el.scrollLeft));
+            el.dataset.scrolledLeft = (el.scrollLeft > 0).toString();
+            el.dataset.scrolledRight = (el.scrollWidth - el.clientWidth > el.scrollLeft).toString();
         };
         scroll();
         el.addEventListener('scroll', scroll);
+        const table = el.getElementsByTagName('table')[0];
+        const resizeObserver = new ResizeObserver(scroll);
+        resizeObserver.observe(el);
+        table && resizeObserver.observe(table);
         return () => {
             el.removeEventListener('scroll', scroll);
+            resizeObserver.disconnect();
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Component, { ...props, ref: (0, utils_1.cloneRef)(props.ref, innerRef), css: tableSticky_style_1.style, className: (0, utils_1.clsx)(table_style_1.classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+    return ((0, jsx_runtime_1.jsx)(Component, { ...(0, utils_1.mergeComponentProps)(props, {
+            ref: innerRef,
+            css: tableSticky_style_1.style,
+            className: table_style_1.classes.container
+        }) }));
 });
 function TdCell(props) {
     return (0, jsx_runtime_1.jsx)("td", { ...useStickyCellProps(props) });
@@ -32,7 +39,7 @@ function TdCell(props) {
 function ThCell(props) {
     return (0, jsx_runtime_1.jsx)("th", { ...useStickyCellProps(props) });
 }
-function useStickyCellProps({ ref, sticky, ...props }) {
+function useStickyCellProps({ sticky, ...props }) {
     const innerRef = (0, react_1.useRef)(null);
     const [offset, setOffset] = (0, react_1.useState)(0);
     (0, react_1.useEffect)(() => {
@@ -62,15 +69,11 @@ function useStickyCellProps({ ref, sticky, ...props }) {
             resizeObserver.disconnect();
         };
     });
-    return {
-        ...props,
-        ref: (0, utils_1.cloneRef)(ref, innerRef),
+    return (0, utils_1.mergeComponentProps)(props, {
+        ref: innerRef,
         css: tableSticky_style_1.style,
-        className: (0, utils_1.clsx)(table_style_1.classes.cell, props.className),
-        'data-sticky': sticky,
-        style: {
-            ...sticky && { [sticky]: offset },
-            ...props.style
-        }
-    };
+        className: table_style_1.classes.cell,
+        style: sticky && { [sticky]: offset },
+        'data-sticky': sticky
+    });
 }

package/dist/cjs/components/table/tableSticky.style.js

@@ -6,14 +6,6 @@ const react_1 = require("@emotion/react");
 exports.style = (0, utils_1.defineCss)(({ background, easing }) => (0, react_1.css) `
     overflow: auto;
 
-    tbody tr {
-        &:not(:hover):not([data-selected=true]) {
-            th, td {
-                background-color: ${background.content};
-            }
-        }
-    }
-
     th, td {
         &[data-sticky=left], &[data-sticky=right] {
             overflow: visible;

package/dist/cjs/components/theme/themeVariables.js

@@ -128,8 +128,8 @@ exports.defaultLightTheme = {
     spacing: defaultSpacing,
     gap: defaultSpacing[6],
     gray,
-    /* divider: gray(.1), */
-    divider: '#e6e6e6',
+    /* divider: gray(.15), */
+    divider: '#d9d9d9',
     colors: {
         primary: '#1E71EC',
         secondary: '#925CC1',

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

@@ -47,12 +47,14 @@ export declare function mergeDeep<T extends {}, U, V, W, X>(target: T, source: U
 export declare function mergeDeep<T extends {}, U, V, W, X, Y>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y): T & U & V & W & X & Y;
 export declare function mergeDeep<T extends {}, U, V, W, X, Y, Z>(target: T, source: U, source2: V, source3: W, source4: X, source5: Y, source6: Z): T & U & V & W & X & Y & Z;
 export declare function mergeDeep(target: object, ...sources: any[]): any;
+export type OverflowEdge = 'top' | 'bottom' | 'left' | 'right';
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param target
- * @param container
+ * @param target 目标元素
+ * @param container 容器
+ * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-export declare function isElementVisibleCompletely(target: Element, container?: Element): boolean;
+export declare function isElementOverflowed(target: Element, container?: Element): OverflowEdge | false;
 /**
  * 下一个事件循环
  * @param callback

package/dist/cjs/utils/utils.js

@@ -8,7 +8,7 @@ exports.toArray = toArray;
 exports.isSelected = isSelected;
 exports.cloneDeep = cloneDeep;
 exports.mergeDeep = mergeDeep;
-exports.isElementVisibleCompletely = isElementVisibleCompletely;
+exports.isElementOverflowed = isElementOverflowed;
 exports.nextTick = nextTick;
 exports.cloneRef = cloneRef;
 exports.isUnset = isUnset;
@@ -138,18 +138,33 @@ function mergeDeep(target, ...sources) {
 }
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param target
- * @param container
+ * @param target 目标元素
+ * @param container 容器
+ * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-function isElementVisibleCompletely(target, container) {
+function isElementOverflowed(target, container) {
     const { left, top, right, bottom } = target.getBoundingClientRect();
+    const judge = (containerBounding) => {
+        if (left < containerBounding.left) {
+            return 'left';
+        }
+        if (top < containerBounding.top) {
+            return 'top';
+        }
+        if (right > containerBounding.right) {
+            return 'right';
+        }
+        if (bottom > containerBounding.bottom) {
+            return 'bottom';
+        }
+        return false;
+    };
     if (container) {
-        const { left: containerLeft, top: containerTop, right: containerRight, bottom: containerBottom } = container.getBoundingClientRect();
-        return left >= containerLeft && top >= containerTop && right <= containerRight && bottom <= containerBottom;
+        return judge(container.getBoundingClientRect());
     }
     const vWidth = window.innerWidth || document.documentElement.clientWidth;
     const vHeight = window.innerHeight || document.documentElement.clientHeight;
-    return left >= 0 && top >= 0 && right <= vWidth && bottom <= vHeight;
+    return judge({ left: 0, top: 0, right: vWidth, bottom: vHeight });
 }
 /**
  * 下一个事件循环