@canlooks/can-ui 0.0.85 → 0.0.87

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

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

package/dist/esm/components/clickAway/clickAway.d.ts

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual" | "hint";
+    popover: "" | "auto" | "manual";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

package/dist/esm/components/dialog/dialog.js

@@ -17,8 +17,12 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
     };
     // 绑定ESC键
     const overlayRef = useEscapeClosable({ escapeClosable, close }, onCancel);
+    const containerRef = useRef(null);
     // 点击遮罩层
     const onMaskClick = (e) => {
+        if (e.target !== containerRef.current) {
+            return;
+        }
         props.onMaskClick?.(e);
         if (maskClosable) {
             onCancel?.(e);
@@ -45,7 +49,7 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
     }, confirmLoading);
     /**
      * ---------------------------------------------------------------------
-     * 长内容滚动
+     * 长内容滚动 - card模式
      */
     const bodyRef = useRef(null);
     const bodyWrapRef = useRef(null);
@@ -57,6 +61,17 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
         }
     };
     useEffect(() => {
+        if (scrollBehavior === 'card') {
+            bodyRef.current.addEventListener('scroll', onScroll);
+            return () => {
+                bodyRef.current.removeEventListener('scroll', onScroll);
+            };
+        }
+    }, [scrollBehavior]);
+    useEffect(() => {
+        if (scrollBehavior !== 'card') {
+            return;
+        }
         if (innerOpen.current) {
             const resizeObserver = new ResizeObserver(onScroll);
             resizeObserver.observe(bodyRef.current);
@@ -65,7 +80,25 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
                 resizeObserver.disconnect();
             };
         }
-    }, [innerOpen.current]);
+    }, [innerOpen.current, scrollBehavior]);
+    /**
+     * ---------------------------------------------------------------------
+     * 长内容滚动 - card模式
+     */
+    const cardRef = useRef(null);
+    useEffect(() => {
+        if (scrollBehavior === 'body' && innerOpen.current) {
+            const containerEl = containerRef.current;
+            const resizeObserver = new ResizeObserver(() => {
+                containerEl.dataset.scrollable = (containerEl.scrollHeight > containerEl.clientHeight).toString();
+            });
+            resizeObserver.observe(containerEl);
+            resizeObserver.observe(cardRef.current);
+            return () => {
+                resizeObserver.disconnect();
+            };
+        }
+    }, [innerOpen.current, scrollBehavior]);
     /**
      * ---------------------------------------------------------------------
      * 渲染
@@ -78,11 +111,11 @@ export function Dialog({ icon, title, footer, prefix, suffix, width = 420, minWi
         }
         return footer;
     };
-    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, onMaskClick: onMaskClick, "data-scroll-behavior": scrollBehavior, "data-draggable": draggable, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
-                        _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
-                                _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
-                                            _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: onScroll, children: [!!prefix &&
-                                        _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }), !!suffix &&
-                                        _jsx("div", { className: classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
-                                _jsx("div", { className: classes.footer, children: renderFooter() })] })] }) }) }));
+    return (_jsx(Modal, { ...props, ref: cloneRef(overlayRef, props.ref), css: style, className: clsx(classes.root, props.className), open: innerOpen.current, "data-scroll-behavior": scrollBehavior, "data-draggable": draggable, children: _jsx("div", { ref: containerRef, className: classes.container, onClick: onMaskClick, children: _jsx(Draggable, { container: () => overlayRef.current, children: (targetProps, handleProps) => _jsxs("div", { ref: cardRef, className: classes.card, ...targetProps, style: { width, minWidth, maxWidth, ...targetProps.style }, children: [!!icon &&
+                            _jsx("div", { className: classes.icon, children: icon }), _jsxs("div", { className: classes.content, children: [!!(title || showClose) &&
+                                    _jsxs("div", { className: classes.titleRow, ...handleProps, children: [_jsx("div", { className: classes.title, children: title }), showClose &&
+                                                _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", ...closeProps, className: clsx(classes.close, closeProps?.className), onClick: closeHandler, children: _jsx(Icon, { icon: faXmark }) })] }), _jsxs("div", { ref: bodyRef, className: classes.body, onScroll: scrollBehavior === 'card' ? onScroll : void 0, children: [!!prefix &&
+                                            _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { ref: bodyWrapRef, className: classes.bodyWrap, children: props.children }), !!suffix &&
+                                            _jsx("div", { className: classes.suffix, children: suffix })] }), (typeof footer === 'undefined' || !!footer) &&
+                                    _jsx("div", { className: classes.footer, children: renderFooter() })] })] }) }) }) }));
 }

package/dist/esm/components/dialog/dialog.style.d.ts

@@ -6,6 +6,7 @@ export declare const classes: {
     close: string;
     prefix: string;
     icon: string;
+    container: string;
     suffix: string;
     card: string;
     titleRow: string;

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

@@ -1,8 +1,7 @@
 import { css } from '@emotion/react';
 import { defineInnerClasses, defineCss } from '../../utils';
-import { classes as modalClasses } from '../modal/modal.style';
-import { classes as overlayBaseClasses } from '../overlayBase/overlayBase.style';
 export const classes = defineInnerClasses('dialog', [
+    'container',
     'card',
     'icon',
     'content',
@@ -16,6 +15,16 @@ export const classes = defineInnerClasses('dialog', [
     'footer'
 ]);
 export const style = defineCss(({ background, borderRadius, boxShadow, spacing, colors, divider }) => css `
+    .${classes.container} {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        overflow: hidden;
+    }
+    
     .${classes.card} {
         display: flex;
         background-color: ${background.content};
@@ -23,29 +32,24 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
         box-shadow: ${boxShadow[0]};
     }
 
-    .${modalClasses.childrenWrap} {
-        max-width: 100%;
-        padding: 40px;
-    }
-
     &[data-scroll-behavior=card] {
-        .${modalClasses.childrenWrap} {
-            height: 100%;
-        }
-
         .${classes.card} {
             max-height: 100%;
         }
     }
 
     &[data-scroll-behavior=body] {
-        .${modalClasses.modal} {
-            height: auto;
-            min-height: 100%;
-        }
-
-        .enter-done .${overlayBaseClasses.childrenWrap} {
+        .${classes.container} {
             overflow: hidden auto;
+            scrollbar-width: none;
+            
+            &[data-scrollable=true] {
+                align-items: flex-start;
+            }
+        }
+        
+        .enter-done .${classes.container} {
+            scrollbar-width: auto;
         }
     }
 

package/dist/esm/components/form/form.d.ts

@@ -31,11 +31,12 @@ type FormContext<V extends FormValue> = {
 };
 declare const FormContext: React.Context<FormContext<any>>;
 export declare function useFormContext<V extends FormValue>(): FormContext<V>;
-type FormValueContextType<V extends FormValue> = {
+type FormValueContext<V extends FormValue> = {
     formValue?: V;
     setFieldValue?(field: FieldPath, value: any, silent?: boolean): void;
 };
-export declare function useFormValueContext<V extends FormValue>(): FormValueContextType<V>;
+declare const FormValueContext: React.Context<FormValueContext<any>>;
+export declare function useFormValueContext<V extends FormValue>(): FormValueContext<V>;
 export declare function useFormStyleContext(): FormSharedProps;
 export type FormRef<V extends FormValue = FormValue> = {
     /** 存在校验不通过的字段时会得到`null` */

package/dist/esm/components/modal/modal.js

@@ -19,5 +19,5 @@ export function Modal({ modalProps, ...props }) {
     return (_jsx(OverlayBase, { ...props, css: style, className: clsx(classes.root, props.className), children: _jsx(Grow, { timeout: overlayBaseTransitionDuration, ...modalProps, in: props.open, className: clsx(classes.modal, modalProps?.className), style: {
                 transformOrigin: transformOrigin.current,
                 ...modalProps?.style
-            }, children: _jsx("div", { className: classes.childrenWrap, onClick: e => e.stopPropagation(), children: props.children }) }) }));
+            }, children: props.children }) }));
 }

package/dist/esm/components/modal/modal.style.d.ts

@@ -1,5 +1,4 @@
 export declare const classes: {
-    childrenWrap: string;
     modal: string;
 } & {
     root: string;

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

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { defineInnerClasses } from '../../utils';
 export const classes = defineInnerClasses('modal', [
     'modal',
-    'childrenWrap'
 ]);
 export const style = css `
     .${classes.modal} {
@@ -11,5 +10,10 @@ export const style = css `
         display: flex;
         align-items: center;
         justify-content: center;
+        pointer-events: none;
+
+        > * {
+            pointer-events: all;
+        }
     }
 `;

package/dist/esm/components/overlayBase/overlayBase.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useEffect } from 'react';
 import { classes, style } from './overlayBase.style';
 import { clsx, mergeComponentProps, useContainer, useDerivedState } from '../../utils';
@@ -33,11 +33,11 @@ export function OverlayBase({ container, effectContainer, forceRender, open, onM
         onClosed?.();
         forceRender === false && setShouldRender(false);
     };
-    return shouldRender.current && createPortal(_jsx("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: _jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
-                in: open,
-                className: classes.mask,
-                onClick,
-                onEntered,
-                onExited
-            }), children: _jsx("div", { className: classes.childrenWrap, children: props.children }) }) }), containerEl.current);
+    return shouldRender.current && createPortal(_jsxs("div", { ...props, css: style, className: clsx(classes.root, props.className), "data-open": open, "data-custom-container": containerEl.current !== document.body, children: [_jsx(Fade, { timeout: overlayBaseTransitionDuration, ...mergeComponentProps(maskProps, {
+                    in: open,
+                    className: classes.mask,
+                    onClick,
+                    onEntered,
+                    onExited
+                }) }), props.children] }), containerEl.current);
 }

package/dist/esm/components/overlayBase/overlayBase.style.d.ts

@@ -1,6 +1,5 @@
 export declare const classes: {
     mask: string;
-    childrenWrap: string;
 } & {
     root: string;
 };

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

@@ -4,7 +4,6 @@ import { appStyleCallback } from '../app/app.style';
 import { zIndex } from '../theme';
 export const classes = defineInnerClasses('overlay-base', [
     'mask',
-    'childrenWrap'
 ]);
 export const style = defineCss(theme => {
     return [
@@ -27,11 +26,6 @@ export const style = defineCss(theme => {
             &:not([data-open=true]) {
                 pointer-events: none;
             }
-            
-            .${classes.childrenWrap} {
-                height: 100%;
-                position: relative;
-            }
         `
     ];
 });

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

@@ -24,7 +24,6 @@ export function useStyle({ size }) {
                 z-index: 0;
                 overflow: auto;
                 scrollbar-width: none;
-                -ms-overflow-style: none;
 
                 &::-webkit-scrollbar {
                     display: none;

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;