naive-ui 2.22.0 → 2.24.0

package/es/image/src/ImagePreview.js

@@ -1,34 +1,32 @@
-import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, renderSlot, watch, computed, toRef } from 'vue';
+import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, renderSlot, watch, computed, toRef, onBeforeUnmount } from 'vue';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
 import { LazyTeleport } from 'vueuc';
 import { on, off } from 'evtd';
 import { beforeNextFrameOnce } from 'seemly';
 import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from '../../_internal/icons';
-import { useTheme } from '../../_mixins';
+import { useLocale, useTheme } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
 import { imageLight } from '../styles';
 import { prevIcon, nextIcon, closeIcon } from './icons';
+import { imagePreviewSharedProps } from './interface';
 import style from './styles/index.cssr';
+import { NTooltip } from '../../tooltip';
 export default defineComponent({
     name: 'ImagePreview',
-    props: {
-        showToolbar: Boolean,
-        onNext: Function,
-        onPrev: Function,
-        clsPrefix: {
+    props: Object.assign(Object.assign({}, imagePreviewSharedProps), { onNext: Function, onPrev: Function, clsPrefix: {
             type: String,
             required: true
-        }
-    },
+        } }),
     setup(props) {
-        const themeRef = useTheme('Image', 'Image', style, imageLight, {}, toRef(props, 'clsPrefix'));
+        const themeRef = useTheme('Image', 'Image', style, imageLight, props, toRef(props, 'clsPrefix'));
         let thumbnailEl = null;
         const previewRef = ref(null);
         const previewWrapperRef = ref(null);
         const previewSrcRef = ref(undefined);
         const showRef = ref(false);
         const displayedRef = ref(false);
+        const { localeRef } = useLocale('Image');
         function syncTransformOrigin() {
             const { value: previewWrapper } = previewWrapperRef;
             if (!thumbnailEl || !previewWrapper)
@@ -39,7 +37,7 @@ export default defineComponent({
             const ty = tbox.top + tbox.height / 2;
             style.transformOrigin = `${tx}px ${ty}px`;
         }
-        function handleKeyup(e) {
+        function handleKeydown(e) {
             var _a, _b;
             switch (e.code) {
                 case 'ArrowLeft':
@@ -53,14 +51,15 @@ export default defineComponent({
                     break;
             }
         }
-        if (props.onPrev) {
-            watch(showRef, (value) => {
-                if (value)
-                    on('keyup', document, handleKeyup);
-                else
-                    off('keyup', document, handleKeyup);
-            });
-        }
+        watch(showRef, (value) => {
+            if (value)
+                on('keydown', document, handleKeydown);
+            else
+                off('keydown', document, handleKeydown);
+        });
+        onBeforeUnmount(() => {
+            off('keydown', document, handleKeydown);
+        });
         let startX = 0;
         let startY = 0;
         let offsetX = 0;
@@ -80,12 +79,8 @@ export default defineComponent({
             const { mouseUpClientX, mouseUpClientY, mouseDownClientX, mouseDownClientY } = opts;
             const deltaHorizontal = mouseDownClientX - mouseUpClientX;
             const deltaVertical = mouseDownClientY - mouseUpClientY;
-            let moveVerticalDirection = null;
-            let moveHorizontalDirection = null;
-            moveVerticalDirection = ('vertical' +
-                (deltaVertical > 0 ? 'Top' : 'Bottom'));
-            moveHorizontalDirection = ('horizontal' +
-                (deltaHorizontal > 0 ? 'Left' : 'Right'));
+            const moveVerticalDirection = `vertical${deltaVertical > 0 ? 'Top' : 'Bottom'}`;
+            const moveHorizontalDirection = `horizontal${deltaHorizontal > 0 ? 'Left' : 'Right'}`;
             return {
                 moveVerticalDirection,
                 moveHorizontalDirection,
@@ -243,7 +238,21 @@ export default defineComponent({
             },
             toggleShow
         };
-        return Object.assign(Object.assign({ previewRef,
+        function withTooltip(node, tooltipKey) {
+            if (props.showToolbarTooltip) {
+                const { value: theme } = themeRef;
+                return (h(NTooltip, { to: false, theme: theme.peers.Tooltip, themeOverrides: theme.peerOverrides.Tooltip }, {
+                    default: () => {
+                        return localeRef.value[tooltipKey];
+                    },
+                    trigger: () => node
+                }));
+            }
+            else {
+                return node;
+            }
+        }
+        return Object.assign({ previewRef,
             previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: useIsMounted(), displayed: displayedRef, handlePreviewMousedown,
             handlePreviewDblclick,
             syncTransformOrigin, handleAfterLeave: () => {
@@ -257,13 +266,17 @@ export default defineComponent({
             rotateCounterclockwise,
             rotateClockwise,
             handleSwitchPrev,
-            handleSwitchNext }, exposedMethods), { cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { iconColor } } = themeRef.value;
+            handleSwitchNext,
+            withTooltip, cssVars: computed(() => {
+                const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-toolbar-icon-color': toolbarIconColor,
+                    '--n-toolbar-color': toolbarColor,
+                    '--n-toolbar-border-radius': toolbarBorderRadius,
+                    '--n-toolbar-box-shadow': toolbarBoxShadow
                 };
-            }) });
+            }) }, exposedMethods);
     },
     render() {
         const { clsPrefix } = this;
@@ -276,17 +289,24 @@ export default defineComponent({
                             default: () => this.show ? (h("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: this.toggleShow })) : null
                         }),
                         this.showToolbar ? (h(Transition, { name: "fade-in-transition", appear: this.appear }, {
-                            default: () => this.show ? (h("div", { class: `${clsPrefix}-image-preview-toolbar` },
-                                this.onPrev ? (h(Fragment, null,
-                                    h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }),
-                                    h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }))) : null,
-                                h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
-                                    default: () => (h(RotateCounterclockwiseIcon, null))
-                                }),
-                                h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, { default: () => h(RotateClockwiseIcon, null) }),
-                                h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => h(ZoomOutIcon, null) }),
-                                h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => h(ZoomInIcon, null) }),
-                                h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => closeIcon }))) : null
+                            default: () => {
+                                if (!this.show)
+                                    return null;
+                                const { withTooltip } = this;
+                                return (h("div", { class: `${clsPrefix}-image-preview-toolbar` },
+                                    this.onPrev ? (h(Fragment, null,
+                                        withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => prevIcon }), 'tipPrevious'),
+                                        withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => nextIcon }), 'tipNext'))) : null,
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
+                                        default: () => (h(RotateCounterclockwiseIcon, null))
+                                    }), 'tipCounterclockwise'),
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, {
+                                        default: () => h(RotateClockwiseIcon, null)
+                                    }), 'tipClockwise'),
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => h(ZoomOutIcon, null) }), 'tipZoomOut'),
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => h(ZoomInIcon, null) }), 'tipZoomIn'),
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => closeIcon }), 'tipClose')));
+                            }
                         })) : null,
                         h(Transition, { name: "fade-in-scale-up-transition", onAfterLeave: this.handleAfterLeave, appear: this.appear, 
                             // BUG:

package/es/image/src/interface.d.ts

@@ -4,3 +4,97 @@ export interface MoveStrategy {
     deltaHorizontal: number;
     deltaVertical: number;
 }
+export declare const imagePreviewSharedProps: {
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>;
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+        toolbarIconColor: string;
+        toolbarColor: string;
+        toolbarBoxShadow: string;
+        toolbarBorderRadius: string;
+    }, {
+        Tooltip: import("../../_mixins").Theme<"Tooltip", {
+            borderRadius: string;
+            boxShadow: string;
+            color: string;
+            textColor: string;
+            padding: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+        }>;
+    }>>>;
+};

package/es/image/src/interface.js

@@ -1 +1,2 @@
-export {};
+import { useTheme } from '../../_mixins';
+export const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), { showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });

package/es/image/src/styles/index.cssr.js

@@ -1,8 +1,11 @@
 import { c, cB, cNotM } from '../../../_utils/cssr';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr';
 import fadeInzoomInTransiton from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --icon-color
-// --bezier
+// --n-toolbar-icon-color
+// --n-toolbar-color
+// --n-toolbar-border-radius
+// --n-toolbar-box-shadow
+// --n-bezier
 
 export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('image-preview-container', `
  position: fixed;
@@ -24,13 +27,14 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
- border-radius: 24px;
+ border-radius: var(--n-toolbar-border-radius);
  height: 48px;
  bottom: 40px;
  padding: 0 12px;
- background: rgba(0, 0, 0, .35);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ background: var(--n-toolbar-color);
+ box-shadow: var(--n-toolbar-box-shadow);
+ color: var(--n-toolbar-icon-color);
+ transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
  `, [cB('base-icon', `
@@ -51,7 +55,7 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  margin: auto;
  max-height: 100vh;
  max-width: 100vw;
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  `), cB('image', `
  display: inline-flex;
  max-height: 100%;

package/es/image/styles/dark.js

@@ -1,11 +1,18 @@
+import { tooltipDark } from '../../styles';
 import { commonDark } from '../../_styles/common';
 export const imageDark = {
     name: 'Image',
     common: commonDark,
+    peers: {
+        Tooltip: tooltipDark
+    },
     self: (vars) => {
         const { textColor2 } = vars;
         return {
-            iconColor: textColor2
+            toolbarIconColor: textColor2,
+            toolbarColor: 'rgba(0, 0, 0, .35)',
+            toolbarBoxShadow: 'none',
+            toolbarBorderRadius: '24px'
         };
     }
 };

package/es/image/styles/light.d.ts

@@ -1,9 +1,38 @@
 declare function self(): {
-    iconColor: string;
+    toolbarIconColor: string;
+    toolbarColor: string;
+    toolbarBoxShadow: string;
+    toolbarBorderRadius: string;
 };
 export declare const imageLight: import("../../_mixins").Theme<"Image", {
-    iconColor: string;
-}, unknown>;
+    toolbarIconColor: string;
+    toolbarColor: string;
+    toolbarBoxShadow: string;
+    toolbarBorderRadius: string;
+}, {
+    Tooltip: import("../../_mixins").Theme<"Tooltip", {
+        borderRadius: string;
+        boxShadow: string;
+        color: string;
+        textColor: string;
+        padding: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+        }, any>;
+    }>;
+}>;
 export declare type ImageTheme = typeof imageLight;
 export declare type ImageThemeVars = ReturnType<typeof self>;
 export {};

package/es/image/styles/light.js

@@ -1,12 +1,19 @@
+import { tooltipLight } from '../../tooltip/styles';
 import { createTheme } from '../../_mixins';
 import { commonLight } from '../../_styles/common';
 function self() {
     return {
-        iconColor: 'rgba(255, 255, 255, .9)'
+        toolbarIconColor: 'rgba(255, 255, 255, .9)',
+        toolbarColor: 'rgba(0, 0, 0, .35)',
+        toolbarBoxShadow: 'none',
+        toolbarBorderRadius: '24px'
     };
 }
 export const imageLight = createTheme({
     name: 'Image',
     common: commonLight,
+    peers: {
+        Tooltip: tooltipLight
+    },
     self
 });

package/es/input/src/Input.d.ts

@@ -85,6 +85,7 @@ declare const inputProps: {
     onWrapperBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     internalDeactivateOnEnter: BooleanConstructor;
     internalForceFocus: BooleanConstructor;
+    internalLoadingBeforeSuffix: BooleanConstructor;
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
@@ -352,6 +353,7 @@ declare const _default: import("vue").DefineComponent<{
     onWrapperBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     internalDeactivateOnEnter: BooleanConstructor;
     internalForceFocus: BooleanConstructor;
+    internalLoadingBeforeSuffix: BooleanConstructor;
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
@@ -746,53 +748,53 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--count-text-color': string;
-        '--color': string;
-        '--font-size': string;
-        '--border-radius': string;
-        '--height': string;
-        '--padding-left': string;
-        '--padding-right': string;
-        '--text-color': string;
-        '--caret-color': string;
-        '--text-decoration-color': string;
-        '--border': string;
-        '--border-disabled': string;
-        '--border-hover': string;
-        '--border-focus': string;
-        '--placeholder-color': string;
-        '--placeholder-color-disabled': string;
-        '--icon-size': string;
-        '--line-height-textarea': string;
-        '--color-disabled': string;
-        '--color-focus': string;
-        '--text-color-disabled': string;
-        '--box-shadow-focus': string;
-        '--loading-color': string;
-        '--caret-color-warning': string;
-        '--color-focus-warning': string;
-        '--box-shadow-focus-warning': string;
-        '--border-warning': string;
-        '--border-focus-warning': string;
-        '--border-hover-warning': string;
-        '--loading-color-warning': string;
-        '--caret-color-error': string;
-        '--color-focus-error': string;
-        '--box-shadow-focus-error': string;
-        '--border-error': string;
-        '--border-focus-error': string;
-        '--border-hover-error': string;
-        '--loading-color-error': string;
-        '--clear-color': string;
-        '--clear-size': string;
-        '--clear-color-hover': string;
-        '--clear-color-pressed': string;
-        '--icon-color': string;
-        '--icon-color-hover': string;
-        '--icon-color-pressed': string;
-        '--icon-color-disabled': string;
-        '--suffix-text-color': string;
+        '--n-bezier': string;
+        '--n-count-text-color': string;
+        '--n-color': string;
+        '--n-font-size': string;
+        '--n-border-radius': string;
+        '--n-height': string;
+        '--n-padding-left': string;
+        '--n-padding-right': string;
+        '--n-text-color': string;
+        '--n-caret-color': string;
+        '--n-text-decoration-color': string;
+        '--n-border': string;
+        '--n-border-disabled': string;
+        '--n-border-hover': string;
+        '--n-border-focus': string;
+        '--n-placeholder-color': string;
+        '--n-placeholder-color-disabled': string;
+        '--n-icon-size': string;
+        '--n-line-height-textarea': string;
+        '--n-color-disabled': string;
+        '--n-color-focus': string;
+        '--n-text-color-disabled': string;
+        '--n-box-shadow-focus': string;
+        '--n-loading-color': string;
+        '--n-caret-color-warning': string;
+        '--n-color-focus-warning': string;
+        '--n-box-shadow-focus-warning': string;
+        '--n-border-warning': string;
+        '--n-border-focus-warning': string;
+        '--n-border-hover-warning': string;
+        '--n-loading-color-warning': string;
+        '--n-caret-color-error': string;
+        '--n-color-focus-error': string;
+        '--n-box-shadow-focus-error': string;
+        '--n-border-error': string;
+        '--n-border-focus-error': string;
+        '--n-border-hover-error': string;
+        '--n-loading-color-error': string;
+        '--n-clear-color': string;
+        '--n-clear-size': string;
+        '--n-clear-color-hover': string;
+        '--n-clear-color-pressed': string;
+        '--n-icon-color': string;
+        '--n-icon-color-hover': string;
+        '--n-icon-color-pressed': string;
+        '--n-icon-color-disabled': string;
+        '--n-suffix-text-color': string;
     }>;
     isCompositing: import("vue").Ref<boolean>;
     blur: () => void;
@@ -846,6 +848,7 @@ declare const _default: import("vue").DefineComponent<{
     onWrapperBlur?: unknown;
     internalDeactivateOnEnter?: unknown;
     internalForceFocus?: unknown;
+    internalLoadingBeforeSuffix?: unknown;
     showPasswordToggle?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
@@ -870,6 +873,7 @@ declare const _default: import("vue").DefineComponent<{
     attrSize: number;
     internalDeactivateOnEnter: boolean;
     internalForceFocus: boolean;
+    internalLoadingBeforeSuffix: boolean;
     showPasswordToggle: boolean;
 } & {
     value?: string | [string, string] | null | undefined;
@@ -1104,6 +1108,7 @@ declare const _default: import("vue").DefineComponent<{
     attrSize: number;
     internalDeactivateOnEnter: boolean;
     internalForceFocus: boolean;
+    internalLoadingBeforeSuffix: boolean;
     showPasswordToggle: boolean;
 }>;
 export default _default;