naive-ui 2.41.1 → 2.43.0

package/es/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/es/image/src/ImagePreview.mjs

@@ -1,41 +1,54 @@
 import { off, on } from 'evtd';
-import { kebabCase } from 'lodash-es';
+import { kebabCase } from 'lodash';
 import { beforeNextFrameOnce } from 'seemly';
 import { zindexable } from 'vdirs';
-import { useIsMounted } from 'vooks';
-import { computed, defineComponent, Fragment, h, inject, normalizeStyle, onBeforeUnmount, ref, toRef, Transition, vShow, watch, withDirectives } from 'vue';
+import { useIsMounted, useMergedState } from 'vooks';
+import { computed, defineComponent, Fragment, h, inject, normalizeStyle, onBeforeUnmount, ref, toRef, toRefs, Transition, vShow, watch, withDirectives } from 'vue';
 import { LazyTeleport } from 'vueuc';
 import { NBaseIcon } from "../../_internal/index.mjs";
 import { DownloadIcon, ResizeSmallIcon, RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from "../../_internal/icons/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
-import { download } from "../../_utils/index.mjs";
+import { call, download } from "../../_utils/index.mjs";
 import { NTooltip } from "../../tooltip/index.mjs";
 import { imageLight } from "../styles/index.mjs";
 import { renderCloseIcon, renderNextIcon, renderPrevIcon } from "./icons.mjs";
 import { imageContextKey, imagePreviewSharedProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
 const BLEEDING = 32;
+export const imagePreviewProps = Object.assign(Object.assign({}, imagePreviewSharedProps), {
+  src: String,
+  show: {
+    type: Boolean,
+    default: undefined
+  },
+  defaultShow: Boolean,
+  'onUpdate:show': [Function, Array],
+  onUpdateShow: [Function, Array],
+  onNext: Function,
+  onPrev: Function,
+  onClose: [Function, Array]
+});
 export default defineComponent({
   name: 'ImagePreview',
-  props: Object.assign(Object.assign({}, imagePreviewSharedProps), {
-    onNext: Function,
-    onPrev: Function,
-    clsPrefix: {
-      type: String,
-      required: true
-    }
-  }),
+  props: imagePreviewProps,
   setup(props) {
-    const themeRef = useTheme('Image', '-image', style, imageLight, props, toRef(props, 'clsPrefix'));
+    const {
+      src
+    } = toRefs(props);
+    const {
+      mergedClsPrefixRef
+    } = useConfig(props);
+    const themeRef = useTheme('Image', '-image', style, imageLight, props, mergedClsPrefixRef);
     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');
+    const uncontrolledShowRef = ref(props.defaultShow);
+    const controlledShowRef = toRef(props, 'show');
+    const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
     function syncTransformOrigin() {
       const {
         value: previewWrapper
@@ -61,12 +74,34 @@ export default 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;
       }
     }
-    watch(showRef, value => {
+    function doUpdateShow(value) {
+      const {
+        onUpdateShow,
+        'onUpdate:show': _onUpdateShow
+      } = props;
+      if (onUpdateShow) {
+        call(onUpdateShow, value);
+      }
+      if (_onUpdateShow) {
+        call(_onUpdateShow, value);
+      }
+      uncontrolledShowRef.value = value;
+      displayedRef.value = true;
+    }
+    watch(mergedShowRef, value => {
       if (value) {
         on('keydown', document, handleKeydown);
       } else {
@@ -285,9 +320,9 @@ export default defineComponent({
       }
     }
     function handleDownloadClick() {
-      const src = previewSrcRef.value;
-      if (src) {
-        download(src, undefined);
+      const imgSrc = src.value;
+      if (imgSrc) {
+        download(imgSrc, undefined);
       }
     }
     function derivePreviewStyle(transition = true) {
@@ -318,9 +353,15 @@ export default defineComponent({
         void preview.offsetHeight;
       }
     }
-    function toggleShow() {
-      showRef.value = !showRef.value;
-      displayedRef.value = true;
+    function close() {
+      if (mergedShowRef.value) {
+        const {
+          onClose
+        } = props;
+        if (onClose) call(onClose);
+        doUpdateShow(false);
+        uncontrolledShowRef.value = false;
+      }
     }
     function resizeToOrignalImageSize() {
       scale = getOrignalImageSizeScale();
@@ -330,13 +371,9 @@ export default defineComponent({
       derivePreviewStyle();
     }
     const exposedMethods = {
-      setPreviewSrc: src => {
-        previewSrcRef.value = src;
-      },
       setThumbnailEl: el => {
         thumbnailEl = el;
-      },
-      toggleShow
+      }
     };
     function withTooltip(node, tooltipKey) {
       if (props.showToolbarTooltip) {
@@ -382,17 +419,19 @@ export default defineComponent({
       inlineThemeDisabled
     } = useConfig();
     const themeClassHandle = inlineThemeDisabled ? useThemeClass('image-preview', undefined, cssVarsRef, props) : undefined;
+    function handleWheel(event) {
+      event.preventDefault();
+    }
     return Object.assign({
+      clsPrefix: mergedClsPrefixRef,
       previewRef,
       previewWrapperRef,
-      previewSrc: previewSrcRef,
-      show: showRef,
+      previewSrc: src,
+      mergedShow: mergedShowRef,
       appear: useIsMounted(),
       displayed: displayedRef,
       previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef,
-      handleWheel(e) {
-        e.preventDefault();
-      },
+      handleWheel,
       handlePreviewMousedown,
       handlePreviewDblclick,
       syncTransformOrigin,
@@ -417,7 +456,9 @@ export default defineComponent({
       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
+      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+      doUpdateShow,
+      close
     }, exposedMethods);
   },
   render() {
@@ -473,7 +514,7 @@ export default defineComponent({
     }), 'tipDownload');
     const closeNode = withTooltip(h(NBaseIcon, {
       clsPrefix: clsPrefix,
-      onClick: this.toggleShow
+      onClick: () => this.close()
     }, {
       default: renderCloseIcon
     }), 'tipClose');
@@ -484,15 +525,16 @@ export default defineComponent({
       default: () => h(ZoomInIcon, null)
     }), 'tipZoomIn');
     return h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a), h(LazyTeleport, {
-      show: this.show
+      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 withDirectives(h("div", {
+          ref: "containerRef",
           class: [`${clsPrefix}-image-preview-container`, this.themeClass],
           style: this.cssVars,
           onWheel: this.handleWheel
@@ -500,16 +542,16 @@ export default defineComponent({
           name: "fade-in-transition",
           appear: this.appear
         }, {
-          default: () => this.show ? h("div", {
+          default: () => this.mergedShow ? h("div", {
             class: `${clsPrefix}-image-preview-overlay`,
-            onClick: this.toggleShow
+            onClick: () => this.close()
           }) : null
         }), this.showToolbar ? h(Transition, {
           name: "fade-in-transition",
           appear: this.appear
         }, {
           default: () => {
-            if (!this.show) return null;
+            if (!this.mergedShow) return null;
             return h("div", {
               class: `${clsPrefix}-image-preview-toolbar`
             }, renderToolbar ? renderToolbar({
@@ -552,10 +594,10 @@ export default defineComponent({
               src: this.previewSrc,
               ref: "previewRef",
               onDragstart: this.handleDragStart
-            }))), [[vShow, this.show]]);
+            }))), [[vShow, this.mergedShow]]);
           }
         })), [[zindexable, {
-          enabled: this.show
+          enabled: this.mergedShow
         }]]);
       }
     }));

package/es/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/es/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;
+}