naive-ui 2.23.2 → 2.24.0

package/lib/image/src/ImageGroup.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageGroupInjectionKey = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
-const ImagePreview_1 = __importDefault(require("./ImagePreview"));
 const _mixins_1 = require("../../_mixins");
+const ImagePreview_1 = __importDefault(require("./ImagePreview"));
+const interface_1 = require("./interface");
 exports.imageGroupInjectionKey = Symbol('image-group');
-const imageGroupProps = {
-    showToolbar: { type: Boolean, default: true }
-};
+const imageGroupProps = interface_1.imagePreviewSharedProps;
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImageGroup',
     props: imageGroupProps,
@@ -63,8 +62,6 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        return ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: this.mergedClsPrefix, ref: "previewInstRef", onPrev: this.prev, onNext: this.next, showToolbar: this.showToolbar }, {
-            default: () => (0, vue_1.renderSlot)(this.$slots, 'default')
-        }));
+        return ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: this.mergedClsPrefix, ref: "previewInstRef", onPrev: this.prev, onNext: this.next, showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, this.$slots));
     }
 });

package/lib/image/src/ImagePreview.d.ts

@@ -1,22 +1,109 @@
-import { PropType } from 'vue';
+import { PropType, VNode } from 'vue';
 export interface ImagePreviewInst {
     setThumbnailEl: (e: HTMLImageElement | null) => void;
     setPreviewSrc: (src?: string) => void;
     toggleShow: () => void;
 }
 declare const _default: import("vue").DefineComponent<{
-    showToolbar: BooleanConstructor;
     onNext: PropType<() => void>;
     onPrev: PropType<() => void>;
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: 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: 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: 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>;
+        }>;
+    }>>>;
 }, {
-    cssVars: import("vue").ComputedRef<{
-        '--n-bezier': string;
-        '--n-icon-color': string;
-    }>;
     setThumbnailEl: (e: HTMLImageElement | null) => void;
     setPreviewSrc: (src?: string | undefined) => void;
     toggleShow: () => void;
@@ -37,18 +124,119 @@ declare const _default: import("vue").DefineComponent<{
     rotateClockwise: () => void;
     handleSwitchPrev: () => void;
     handleSwitchNext: () => void;
+    withTooltip: (node: VNode, tooltipKey: "tipPrevious" | "tipNext" | "tipCounterclockwise" | "tipClockwise" | "tipZoomOut" | "tipZoomIn" | "tipClose") => VNode;
+    cssVars: import("vue").ComputedRef<{
+        '--n-bezier': string;
+        '--n-toolbar-icon-color': string;
+        '--n-toolbar-color': string;
+        '--n-toolbar-border-radius': string;
+        '--n-toolbar-box-shadow': string;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    showToolbar?: unknown;
     onNext?: unknown;
     onPrev?: unknown;
     clsPrefix?: unknown;
+    showToolbar?: unknown;
+    showToolbarTooltip?: unknown;
+    theme?: unknown;
+    themeOverrides?: unknown;
+    builtinThemeOverrides?: unknown;
 } & {
     clsPrefix: string;
     showToolbar: boolean;
+    showToolbarTooltip: boolean;
 } & {
+    theme?: 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>;
+        }>;
+    }> | undefined;
+    themeOverrides?: 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>;
+        }>;
+    }>> | undefined;
+    builtinThemeOverrides?: 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>;
+        }>;
+    }>> | undefined;
     onNext?: (() => void) | undefined;
     onPrev?: (() => void) | undefined;
 }>, {
     showToolbar: boolean;
+    showToolbarTooltip: boolean;
 }>;
 export default _default;

package/lib/image/src/ImagePreview.js

@@ -14,26 +14,24 @@ const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
 const styles_1 = require("../styles");
 const icons_2 = require("./icons");
+const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const tooltip_1 = require("../../tooltip");
 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,7 +243,21 @@ exports.default = (0, vue_1.defineComponent)({
             },
             toggleShow
         };
-        return Object.assign(Object.assign({ previewRef,
+        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, handlePreviewMousedown,
             handlePreviewDblclick,
             syncTransformOrigin, handleAfterLeave: () => {
@@ -263,13 +271,17 @@ 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() {
         const { clsPrefix } = this;
@@ -282,17 +294,24 @@ exports.default = (0, vue_1.defineComponent)({
                             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/input-number/src/utils.js

@@ -13,9 +13,9 @@ function parse(value) {
 }
 exports.parse = parse;
 // can be parsed to number but shouldn't be applied when inputing
-// Ending with 0 and. doesn't update, if 0 parse func will remove 0
+// when value includes `.`, ending with 0 and`.`, doesn't update, if 0 parse func will remove 0
 function isWipValue(value) {
-    return /^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value);
+    return value.includes('.') && (/^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value));
 }
 exports.isWipValue = isWipValue;
 // string => boolean (expected, not implemented)

package/lib/locales/common/deDE.js

@@ -98,6 +98,16 @@ const deDE = {
         import: 'Importieren',
         export: 'Exportieren',
         restore: 'Auf Standard zurücksetzen'
+    },
+    // TODO: translation
+    Image: {
+        tipPrevious: 'Previous picture (←)',
+        tipNext: 'Next picture (→)',
+        tipCounterclockwise: 'Counterclockwise',
+        tipClockwise: 'Clockwise',
+        tipZoomOut: 'Zoom out',
+        tipZoomIn: 'Zoom in',
+        tipClose: 'Close (Esc)'
     }
 };
 exports.default = deDE;

package/lib/locales/common/enUS.d.ts

@@ -96,6 +96,15 @@ declare const enUS: {
         export: string;
         restore: string;
     };
+    Image: {
+        tipPrevious: string;
+        tipNext: string;
+        tipCounterclockwise: string;
+        tipClockwise: string;
+        tipZoomOut: string;
+        tipZoomIn: string;
+        tipClose: string;
+    };
 };
 export declare type NLocale = typeof enUS;
 export default enUS;