naive-ui 2.23.2 → 2.24.3

package/lib/image/src/ImagePreview.js

@@ -12,28 +12,26 @@ const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
+const tooltip_1 = require("../../tooltip");
 const styles_1 = require("../styles");
 const icons_2 = require("./icons");
+const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImagePreview',
-    props: {
-        showToolbar: Boolean,
-        onNext: Function,
-        onPrev: Function,
-        clsPrefix: {
+    props: Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { onNext: Function, onPrev: Function, clsPrefix: {
             type: String,
             required: true
-        }
-    },
+        } }),
     setup(props) {
-        const themeRef = (0, _mixins_1.useTheme)('Image', 'Image', index_cssr_1.default, styles_1.imageLight, {}, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const themeRef = (0, _mixins_1.useTheme)('Image', 'Image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
         let thumbnailEl = null;
         const previewRef = (0, vue_1.ref)(null);
         const previewWrapperRef = (0, vue_1.ref)(null);
         const previewSrcRef = (0, vue_1.ref)(undefined);
         const showRef = (0, vue_1.ref)(false);
         const displayedRef = (0, vue_1.ref)(false);
+        const { localeRef } = (0, _mixins_1.useLocale)('Image');
         function syncTransformOrigin() {
             const { value: previewWrapper } = previewWrapperRef;
             if (!thumbnailEl || !previewWrapper)
@@ -86,12 +84,8 @@ exports.default = (0, vue_1.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,
@@ -249,8 +243,25 @@ exports.default = (0, vue_1.defineComponent)({
             },
             toggleShow
         };
-        return Object.assign(Object.assign({ previewRef,
-            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handlePreviewMousedown,
+        function withTooltip(node, tooltipKey) {
+            if (props.showToolbarTooltip) {
+                const { value: theme } = themeRef;
+                return ((0, vue_1.h)(tooltip_1.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: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handleWheel(e) {
+                e.preventDefault();
+            },
+            handlePreviewMousedown,
             handlePreviewDblclick,
             syncTransformOrigin, handleAfterLeave: () => {
                 rotate = 0;
@@ -263,36 +274,48 @@ exports.default = (0, vue_1.defineComponent)({
             rotateCounterclockwise,
             rotateClockwise,
             handleSwitchPrev,
-            handleSwitchNext }, exposedMethods), { cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { iconColor } } = themeRef.value;
+            handleSwitchNext,
+            withTooltip, cssVars: (0, vue_1.computed)(() => {
+                const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
-                    '--n-icon-color': iconColor
+                    '--n-toolbar-icon-color': toolbarIconColor,
+                    '--n-toolbar-color': toolbarColor,
+                    '--n-toolbar-border-radius': toolbarBorderRadius,
+                    '--n-toolbar-box-shadow': toolbarBoxShadow
                 };
-            }) });
+            }) }, exposedMethods);
     },
     render() {
+        var _a, _b;
         const { clsPrefix } = this;
-        return ((0, vue_1.h)(vue_1.Fragment, null,
-            (0, vue_1.renderSlot)(this.$slots, 'default'),
+        return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a),
             (0, vue_1.h)(vueuc_1.LazyTeleport, { show: this.show }, {
                 default: () => this.show || this.displayed
-                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-container`, style: this.cssVars },
+                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-container`, style: this.cssVars, onWheel: this.handleWheel },
                         (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
                             default: () => this.show ? ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: this.toggleShow })) : null
                         }),
                         this.showToolbar ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
-                            default: () => this.show ? ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-toolbar` },
-                                this.onPrev ? ((0, vue_1.h)(vue_1.Fragment, null,
-                                    (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => icons_2.prevIcon }),
-                                    (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => icons_2.nextIcon }))) : null,
-                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
-                                    default: () => ((0, vue_1.h)(icons_1.RotateCounterclockwiseIcon, null))
-                                }),
-                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, { default: () => (0, vue_1.h)(icons_1.RotateClockwiseIcon, null) }),
-                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => (0, vue_1.h)(icons_1.ZoomOutIcon, null) }),
-                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => (0, vue_1.h)(icons_1.ZoomInIcon, null) }),
-                                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => icons_2.closeIcon }))) : null
+                            default: () => {
+                                if (!this.show)
+                                    return null;
+                                const { withTooltip } = this;
+                                return ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-toolbar` },
+                                    this.onPrev ? ((0, vue_1.h)(vue_1.Fragment, null,
+                                        withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchPrev }, { default: () => icons_2.prevIcon }), 'tipPrevious'),
+                                        withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleSwitchNext }, { default: () => icons_2.nextIcon }), 'tipNext'))) : null,
+                                    withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateCounterclockwise }, {
+                                        default: () => ((0, vue_1.h)(icons_1.RotateCounterclockwiseIcon, null))
+                                    }), 'tipCounterclockwise'),
+                                    withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.rotateClockwise }, {
+                                        default: () => (0, vue_1.h)(icons_1.RotateClockwiseIcon, null)
+                                    }), 'tipClockwise'),
+                                    withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => (0, vue_1.h)(icons_1.ZoomOutIcon, null) }), 'tipZoomOut'),
+                                    withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => (0, vue_1.h)(icons_1.ZoomInIcon, null) }), 'tipZoomIn'),
+                                    withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => icons_2.closeIcon }), 'tipClose')));
+                            }
                         })) : null,
                         (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", onAfterLeave: this.handleAfterLeave, appear: this.appear, 
                             // BUG:

package/lib/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/lib/image/src/interface.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.imagePreviewSharedProps = void 0;
+const _mixins_1 = require("../../_mixins");
+exports.imagePreviewSharedProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });

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

@@ -15,7 +15,10 @@ const cssr_1 = require("../../../_utils/cssr");
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr"));
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --n-icon-color
+// --n-toolbar-icon-color
+// --n-toolbar-color
+// --n-toolbar-border-radius
+// --n-toolbar-box-shadow
 // --n-bezier
 
 
@@ -39,12 +42,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  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(--n-icon-color);
+ 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;

package/lib/image/styles/dark.js

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageDark = void 0;
+const styles_1 = require("../../styles");
 const common_1 = require("../../_styles/common");
 exports.imageDark = {
     name: 'Image',
     common: common_1.commonDark,
+    peers: {
+        Tooltip: styles_1.tooltipDark
+    },
     self: (vars) => {
         const { textColor2 } = vars;
         return {
-            iconColor: textColor2
+            toolbarIconColor: textColor2,
+            toolbarColor: 'rgba(0, 0, 0, .35)',
+            toolbarBoxShadow: 'none',
+            toolbarBorderRadius: '24px'
         };
     }
 };

package/lib/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/lib/image/styles/light.js

@@ -1,15 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageLight = void 0;
+const styles_1 = require("../../tooltip/styles");
 const _mixins_1 = require("../../_mixins");
 const common_1 = require("../../_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'
     };
 }
 exports.imageLight = (0, _mixins_1.createTheme)({
     name: 'Image',
     common: common_1.commonLight,
+    peers: {
+        Tooltip: styles_1.tooltipLight
+    },
     self
 });

package/lib/index.d.ts

@@ -5,7 +5,7 @@ export * from './locales';
 export * from './components';
 export * from './composables';
 export * from './styles';
-export { darkTheme, createTheme } from './themes';
+export { darkTheme, lightTheme, createTheme } from './themes';
 export { c, cE, cM, cB, cNotM } from './_utils/cssr';
 export { default as version } from './version';
 export { NThemeEditor } from './theme-editor';

package/lib/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NThemeEditor = exports.version = exports.cNotM = exports.cB = exports.cM = exports.cE = exports.c = exports.createTheme = exports.darkTheme = exports.create = exports.useOsTheme = exports.default = void 0;
+exports.NThemeEditor = exports.version = exports.cNotM = exports.cB = exports.cM = exports.cE = exports.c = exports.createTheme = exports.lightTheme = exports.darkTheme = exports.create = exports.useOsTheme = exports.default = void 0;
 var preset_1 = require("./preset");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(preset_1).default; } });
 var vooks_1 = require("vooks");
@@ -28,6 +28,7 @@ __exportStar(require("./styles"), exports);
 // composed global theme, createTheme from component themes util
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return themes_1.darkTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return themes_1.lightTheme; } });
 Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return themes_1.createTheme; } });
 var cssr_1 = require("./_utils/cssr");
 Object.defineProperty(exports, "c", { enumerable: true, get: function () { return cssr_1.c; } });