naive-ui 2.41.1 → 2.43.0

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

@@ -1,16 +1,165 @@
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import { type PropType, type VNode } from 'vue';
-export interface ImagePreviewInst {
-    setThumbnailEl: (e: HTMLImageElement | null) => void;
-    setPreviewSrc: (src?: string) => void;
-    toggleShow: () => void;
-}
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+export declare const imagePreviewProps: {
+    src: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     onNext: PropType<() => void>;
     onPrev: PropType<() => void>;
-    clsPrefix: {
-        type: StringConstructor;
-        required: true;
+    onClose: PropType<MaybeArray<() => void>>;
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
     };
+    showToolbarTooltip: BooleanConstructor;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
+    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;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: 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;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: 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;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
+        }>;
+    }>>>;
+};
+export type ImagePreviewProps = ExtractPublicPropTypes<typeof imagePreviewProps>;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    onNext: PropType<() => void>;
+    onPrev: PropType<() => void>;
+    onClose: PropType<MaybeArray<() => void>>;
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
     showToolbar: {
@@ -45,7 +194,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -74,7 +236,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -103,21 +278,33 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
 }>, {
     setThumbnailEl: (e: HTMLImageElement | null) => void;
-    setPreviewSrc: (src?: string) => void;
-    toggleShow: () => void;
+    clsPrefix: import("vue").Ref<string, string>;
     previewRef: import("vue").Ref<HTMLImageElement | null, HTMLImageElement | null>;
     previewWrapperRef: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
     previewSrc: import("vue").Ref<string | undefined, string | undefined>;
-    show: import("vue").Ref<boolean, boolean>;
+    mergedShow: import("vue").ComputedRef<boolean>;
     appear: Readonly<import("vue").Ref<boolean, boolean>>;
     displayed: import("vue").Ref<boolean, boolean>;
     previewedImgProps: import("vue").Ref<import("vue").ImgHTMLAttributes | undefined, import("vue").ImgHTMLAttributes | undefined> | undefined;
-    handleWheel(e: WheelEvent): void;
+    handleWheel: (event: WheelEvent) => void;
     handlePreviewMousedown: (e: MouseEvent) => void;
     handlePreviewDblclick: (e: MouseEvent) => void;
     syncTransformOrigin: () => void;
@@ -141,13 +328,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }> | undefined;
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
+    doUpdateShow: (value: boolean) => void;
+    close: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: StringConstructor;
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
     onNext: PropType<() => void>;
     onPrev: PropType<() => void>;
-    clsPrefix: {
-        type: StringConstructor;
-        required: true;
-    };
+    onClose: PropType<MaybeArray<() => void>>;
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
     showToolbar: {
@@ -182,7 +376,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -211,7 +418,20 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -240,10 +460,25 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
 }>> & Readonly<{}>, {
+    show: boolean;
+    defaultShow: boolean;
     showToolbar: boolean;
     showToolbarTooltip: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/lib/image/src/ImagePreview.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.imagePreviewProps = void 0;
 const evtd_1 = require("evtd");
 const lodash_1 = require("lodash");
 const seemly_1 = require("seemly");
@@ -20,21 +21,25 @@ const icons_2 = require("./icons");
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const BLEEDING = 32;
+exports.imagePreviewProps = Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { src: String, show: {
+        type: Boolean,
+        default: undefined
+    }, defaultShow: Boolean, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onNext: Function, onPrev: Function, onClose: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImagePreview',
-    props: Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { onNext: Function, onPrev: Function, clsPrefix: {
-            type: String,
-            required: true
-        } }),
+    props: exports.imagePreviewProps,
     setup(props) {
-        const themeRef = (0, _mixins_1.useTheme)('Image', '-image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const { src } = (0, vue_1.toRefs)(props);
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Image', '-image', index_cssr_1.default, styles_1.imageLight, props, mergedClsPrefixRef);
         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');
+        const uncontrolledShowRef = (0, vue_1.ref)(props.defaultShow);
+        const controlledShowRef = (0, vue_1.toRef)(props, 'show');
+        const mergedShowRef = (0, vooks_1.useMergedState)(controlledShowRef, uncontrolledShowRef);
         function syncTransformOrigin() {
             const { value: previewWrapper } = previewWrapperRef;
             if (!thumbnailEl || !previewWrapper)
@@ -57,12 +62,31 @@ exports.default = (0, vue_1.defineComponent)({
                 case 'ArrowRight':
                     (_b = props.onNext) === null || _b === void 0 ? void 0 : _b.call(props);
                     break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    zoomIn();
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    zoomOut();
+                    break;
                 case 'Escape':
-                    toggleShow();
+                    close();
                     break;
             }
         }
-        (0, vue_1.watch)(showRef, (value) => {
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow) {
+                (0, _utils_1.call)(onUpdateShow, value);
+            }
+            if (_onUpdateShow) {
+                (0, _utils_1.call)(_onUpdateShow, value);
+            }
+            uncontrolledShowRef.value = value;
+            displayedRef.value = true;
+        }
+        (0, vue_1.watch)(mergedShowRef, (value) => {
             if (value) {
                 (0, evtd_1.on)('keydown', document, handleKeydown);
             }
@@ -260,9 +284,9 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleDownloadClick() {
-            const src = previewSrcRef.value;
-            if (src) {
-                (0, _utils_1.download)(src, undefined);
+            const imgSrc = src.value;
+            if (imgSrc) {
+                (0, _utils_1.download)(imgSrc, undefined);
             }
         }
         function derivePreviewStyle(transition = true) {
@@ -292,9 +316,14 @@ exports.default = (0, vue_1.defineComponent)({
                 void preview.offsetHeight;
             }
         }
-        function toggleShow() {
-            showRef.value = !showRef.value;
-            displayedRef.value = true;
+        function close() {
+            if (mergedShowRef.value) {
+                const { onClose } = props;
+                if (onClose)
+                    (0, _utils_1.call)(onClose);
+                doUpdateShow(false);
+                uncontrolledShowRef.value = false;
+            }
         }
         function resizeToOrignalImageSize() {
             scale = getOrignalImageSizeScale();
@@ -304,13 +333,9 @@ exports.default = (0, vue_1.defineComponent)({
             derivePreviewStyle();
         }
         const exposedMethods = {
-            setPreviewSrc: (src) => {
-                previewSrcRef.value = src;
-            },
             setThumbnailEl: (el) => {
                 thumbnailEl = el;
-            },
-            toggleShow
+            }
         };
         function withTooltip(node, tooltipKey) {
             if (props.showToolbarTooltip) {
@@ -340,10 +365,11 @@ exports.default = (0, vue_1.defineComponent)({
         const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('image-preview', undefined, cssVarsRef, props)
             : undefined;
-        return Object.assign({ previewRef,
-            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef, handleWheel(e) {
-                e.preventDefault();
-            },
+        function handleWheel(event) {
+            event.preventDefault();
+        }
+        return Object.assign({ clsPrefix: mergedClsPrefixRef, previewRef,
+            previewWrapperRef, previewSrc: src, mergedShow: mergedShowRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef, handleWheel,
             handlePreviewMousedown,
             handlePreviewDblclick,
             syncTransformOrigin, handleAfterLeave: () => {
@@ -362,7 +388,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleSwitchPrev,
             handleSwitchNext,
             withTooltip,
-            resizeToOrignalImageSize, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+            resizeToOrignalImageSize, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender, doUpdateShow,
+            close }, exposedMethods);
     },
     render() {
         var _a, _b;
@@ -382,27 +409,27 @@ exports.default = (0, vue_1.defineComponent)({
         }), 'tipOriginalSize');
         const zoomOutNode = withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => (0, vue_1.h)(icons_1.ZoomOutIcon, null) }), 'tipZoomOut');
         const downloadNode = withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleDownloadClick }, { default: () => (0, vue_1.h)(icons_1.DownloadIcon, null) }), 'tipDownload');
-        const closeNode = withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: icons_2.renderCloseIcon }), 'tipClose');
+        const closeNode = withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: () => this.close() }, { default: icons_2.renderCloseIcon }), 'tipClose');
         const zoomInNode = withTooltip((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => (0, vue_1.h)(icons_1.ZoomInIcon, null) }), 'tipZoomIn');
         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 }, {
+            (0, vue_1.h)(vueuc_1.LazyTeleport, { show: this.mergedShow }, {
                 default: () => {
                     var _a;
-                    if (!(this.show || this.displayed)) {
+                    if (!(this.mergedShow || this.displayed)) {
                         return null;
                     }
                     (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-                    return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [
+                    return (0, vue_1.withDirectives)((0, vue_1.h)("div", { ref: "containerRef", class: [
                             `${clsPrefix}-image-preview-container`,
                             this.themeClass
                         ], 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
+                            default: () => this.mergedShow ? ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: () => this.close() })) : null
                         }),
                         this.showToolbar ? ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
                             default: () => {
-                                if (!this.show)
+                                if (!this.mergedShow)
                                     return null;
                                 return ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-toolbar` }, renderToolbar ? (renderToolbar({
                                     nodes: {
@@ -440,9 +467,9 @@ exports.default = (0, vue_1.defineComponent)({
                                     (0, vue_1.h)("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
                                             `${clsPrefix}-image-preview`,
                                             previewedImgProps.class
-                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vue_1.vShow, this.show]]);
+                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vue_1.vShow, this.mergedShow]]);
                             }
-                        })), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                        })), [[vdirs_1.zindexable, { enabled: this.mergedShow }]]);
                 }
             })));
     }

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

@@ -41,7 +41,20 @@ export declare const imagePreviewSharedProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -70,7 +83,20 @@ export declare const imagePreviewSharedProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
@@ -99,7 +125,20 @@ export declare const imagePreviewSharedProps: {
                 arrowOffsetVertical: string;
                 arrowHeight: string;
                 padding: string;
-            }, any>;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
+                    color: string;
+                    colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
+                }, any>;
+            }>;
         }>;
     }>>>;
 };

package/lib/image/src/public-types.d.ts

@@ -15,3 +15,17 @@ export interface ImageRenderToolbarProps {
 export type ImageRenderToolbar = (props: ImageRenderToolbarProps) => VNodeChild;
 export type ImageGroupRenderToolbarProps = ImageRenderToolbarProps;
 export type ImageGroupRenderToolbar = ImageRenderToolbar;
+export interface ImageInst {
+    /** @deprecated Use `showPreview` instead */
+    click: () => void;
+    showPreview: () => void;
+}
+export interface ImageSlots {
+    placeholder?: ImagePlaceholderSlot;
+    error?: ImageErrorSlot;
+}
+export type ImagePlaceholderSlot = () => VNode[];
+export type ImageErrorSlot = () => VNode[];
+export interface ImagePreviewInst {
+    setThumbnailEl: (e: HTMLImageElement | null) => void;
+}

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

@@ -30,7 +30,20 @@ export declare const imageLight: import("../../_mixins").Theme<"Image", {
             arrowOffsetVertical: string;
             arrowHeight: string;
             padding: string;
-        }, any>;
+        }, {
+            Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
+                color: string;
+                colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
+            }, any>;
+        }>;
     }>;
 }>;
 export type ImageTheme = typeof imageLight;