@canlooks/can-ui 0.0.74 → 0.0.76

package/dist/esm/components/inputBase/inputBase.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useImperativeHandle, useRef } from 'react';
 import { classes, useStyle } from './inputBase.style';
-import { fixInputNumber, mergeComponentProps, useControlled } from '../../utils';
+import { fixInputNumber, isUnset, mergeComponentProps, useControlled } from '../../utils';
 import { useTheme } from '../theme';
 import { Button } from '../button';
 import { LoadingIndicator } from '../loadingIndicator';
@@ -53,6 +53,15 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
             changeHandler(e);
         }
     };
+    const shouldRenderClearButton = () => {
+        if (!clearable || disabled || readOnly || isUnset(innerValue.current)) {
+            return false;
+        }
+        if (Array.isArray(innerValue.current) || typeof innerValue.current === 'string') {
+            return !!innerValue.current.length;
+        }
+        return true;
+    };
     return (_jsxs("div", { ...mergeComponentProps(props, {
             ref: innerRef,
             className: classes.root,
@@ -83,7 +92,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
                     onBlur: blurHandler,
                     onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
                 }) }), loading &&
-                _jsx(LoadingIndicator, {}), clearable && !disabled && !readOnly && !!innerValue.current?.length &&
+                _jsx(LoadingIndicator, {}), shouldRenderClearButton() &&
                 _jsx(Button, { className: classes.clear, variant: "plain", color: "text.disabled", onClick: clear, tabIndex: -1, children: _jsx(Icon, { icon: faCircleXmark }) }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 });

package/dist/esm/components/popper/popper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { cloneElement, isValidElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { clsx, cloneRef, isElementVisibleCompletely, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer } from '../../utils';
+import { clsx, cloneRef, listenAllPredecessorsScroll, toArray, useControlled, useDerivedState, useForceUpdate, useSync, useSyncState, useUnmounted, useContainer, isElementOverflowed } from '../../utils';
 import { ClickAway } from '../clickAway';
 import { classes, style } from './popper.style';
 import { PopperContext, usePopperContext } from './popperContext';
@@ -12,8 +12,8 @@ const getAttemptOrder = (placement) => {
     if (index > -1) {
         return [
             placement,
-            ...order.slice(0, index),
             ...order.slice(index + 1),
+            ...order.slice(0, index),
             placement
         ];
     }
@@ -62,8 +62,8 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         }
         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) {
@@ -123,7 +123,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             // 右键菜单
             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) {
@@ -187,7 +187,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return isElementOverflowed(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         else {
@@ -195,7 +195,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             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') {
@@ -258,7 +258,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
                 }
                 popperEl.style.left = left + 'px';
                 popperEl.style.top = top + 'px';
-                return isElementVisibleCompletely(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
+                return isElementOverflowed(popperEl, containerEl.current === document.body ? void 0 : containerEl.current);
             };
         }
         if (options?.forcePlacement) {
@@ -267,7 +267,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         else {
             const attemptOrder = getAttemptOrder(placement);
             for (let i = 0; i < attemptOrder.length; i++) {
-                if (attempt(attemptOrder[i])) {
+                if (attempt(attemptOrder[i]) === false) {
                     break;
                 }
             }
@@ -292,8 +292,8 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             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);
             });
@@ -357,26 +357,26 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const hoverable = triggersSet.has('hover');
     const enterTimeout = useRef(void 0);
     const leaveTimeout = useRef(void 0);
-    const isEntered = useRef(false);
+    const hoverStack = 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);
     };
+    // 绑定锚点元素
     useEffect(() => {
         if (!hoverable) {
             return;
@@ -389,6 +389,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             anchorEl.removeEventListener('pointerleave', pointerLeave);
         };
     }, [hoverable]);
+    // 绑定弹框元素，鼠标移入弹框也要保持弹框打开
     useEffect(() => {
         if (!hoverable || !innerPopperRef.current) {
             return;
@@ -428,7 +429,9 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             return;
         }
         const keyDown = (e) => {
-            e.key === 'Enter' && openAndHold(true);
+            if (e.key === 'Enter') {
+                openAndHold(true);
+            }
         };
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('keydown', keyDown);
@@ -444,9 +447,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         if (!clickable) {
             return;
         }
-        const click = () => {
-            openAndHold(true);
-        };
+        const click = () => openAndHold(true);
         const anchorEl = anchorRef.current;
         anchorEl.addEventListener('click', click);
         return () => {
@@ -454,7 +455,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         };
     }, []);
     const onClickAway = () => {
-        innerOpen.current && openAndHold(false);
+        innerOpen.current && setOpenForce(false);
     };
     /**
      * clickToClose

package/dist/esm/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/esm/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/esm/components/table/table.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { useRef } from 'react';
 import { classes, style } from './table.style';
-import { clsx } from '../../utils';
+import { cloneRef, clsx } from '../../utils';
 import { useTheme } from '../theme';
 import { TdCell, ThCell } from './tableSticky';
 export function Table({ size, bordered = 'none', striped = false, ...props }) {
     const theme = useTheme();
     size ??= theme.size;
-    return (_jsx("table", { ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
+    const tableRef = useRef(null);
+    return (_jsx("table", { ...props, css: style, ref: cloneRef(props.ref, tableRef), className: clsx(classes.root, props.className), "data-size": size, "data-bordered": bordered, "data-striped": striped }));
 }
 export function TableRow({ selected, ...props }) {
     return _jsx("tr", { ...props, "data-selected": selected });

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

@@ -5,9 +5,9 @@ export const classes = defineInnerClasses('table', [
     'container',
     'cell'
 ]);
-export const style = defineCss(({ mode, spacing, gray, divider, easing, colors }) => {
-    const headerBg = gray(mode === 'light' ? .02 : .22);
-    const stripedBg = gray(mode === 'light' ? .01 : .21);
+export const style = defineCss(({ mode, spacing, gray, divider, background, easing, colors }) => {
+    const headerBg = gray(mode === 'light' ? .03 : .22);
+    const stripedBg = gray(mode === 'light' ? .02 : .21);
     const selectedBg = Color(colors.primary.main).alpha(mode === 'light' ? .05 : .1).string();
     return css `
         width: 100%;
@@ -34,6 +34,14 @@ export const style = defineCss(({ mode, spacing, gray, divider, easing, colors }
             }
         }
 
+        tbody tr {
+            &:not(:hover):not([data-selected=true]) {
+                th, td {
+                    background-color: ${background.content};
+                }
+            }
+        }
+
         th, td {
             position: relative;
             text-align: left;
@@ -55,11 +63,18 @@ export const style = defineCss(({ mode, spacing, gray, divider, easing, colors }
         }
 
         &[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/esm/components/table/tableSticky.js

@@ -1,25 +1,32 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { clsx, cloneRef } from '../../utils';
+import { mergeComponentProps } from '../../utils';
 import { classes } from './table.style';
 import { style } from './tableSticky.style';
 export const TableContainer = (({ component: Component = 'div', ...props }) => {
-    const [scrolledLeft, setScrolledLeft] = useState(false);
-    const [scrolledRight, setScrolledRight] = useState(false);
     const innerRef = useRef(null);
     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 (_jsx(Component, { ...props, ref: cloneRef(props.ref, innerRef), css: style, className: clsx(classes.container, props.className), "data-scrolled-left": scrolledLeft, "data-scrolled-right": scrolledRight }));
+    return (_jsx(Component, { ...mergeComponentProps(props, {
+            ref: innerRef,
+            css: style,
+            className: classes.container
+        }) }));
 });
 export function TdCell(props) {
     return _jsx("td", { ...useStickyCellProps(props) });
@@ -27,7 +34,7 @@ export function TdCell(props) {
 export function ThCell(props) {
     return _jsx("th", { ...useStickyCellProps(props) });
 }
-function useStickyCellProps({ ref, sticky, ...props }) {
+function useStickyCellProps({ sticky, ...props }) {
     const innerRef = useRef(null);
     const [offset, setOffset] = useState(0);
     useEffect(() => {
@@ -57,15 +64,11 @@ function useStickyCellProps({ ref, sticky, ...props }) {
             resizeObserver.disconnect();
         };
     });
-    return {
-        ...props,
-        ref: cloneRef(ref, innerRef),
+    return mergeComponentProps(props, {
+        ref: innerRef,
         css: style,
-        className: clsx(classes.cell, props.className),
-        'data-sticky': sticky,
-        style: {
-            ...sticky && { [sticky]: offset },
-            ...props.style
-        }
-    };
+        className: classes.cell,
+        style: sticky && { [sticky]: offset },
+        'data-sticky': sticky
+    });
 }

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

@@ -3,14 +3,6 @@ import { css } from '@emotion/react';
 export const style = defineCss(({ background, easing }) => 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/esm/components/theme/themeVariables.js

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

package/dist/esm/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/esm/utils/utils.js

@@ -113,18 +113,33 @@ export function mergeDeep(target, ...sources) {
 }
 /**
  * 判断元素是否完全在目标容器内，用于Popper组件
- * @param target
- * @param container
+ * @param target 目标元素
+ * @param container 容器
+ * @returns 'top' | 'bottom' | 'left' | 'right' | false
  */
-export function isElementVisibleCompletely(target, container) {
+export 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 });
 }
 /**
  * 下一个事件循环