naive-ui 2.41.1 → 2.43.0

package/lib/image/index.js

@@ -3,10 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NImageGroup = exports.imageGroupProps = exports.NImage = exports.imageProps = void 0;
+exports.NImagePreview = exports.imagePreviewProps = exports.NImageGroup = exports.imageGroupProps = exports.NImage = exports.imageProps = void 0;
 var Image_1 = require("./src/Image");
 Object.defineProperty(exports, "imageProps", { enumerable: true, get: function () { return Image_1.imageProps; } });
 Object.defineProperty(exports, "NImage", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
 var ImageGroup_1 = require("./src/ImageGroup");
 Object.defineProperty(exports, "imageGroupProps", { enumerable: true, get: function () { return ImageGroup_1.imageGroupProps; } });
 Object.defineProperty(exports, "NImageGroup", { enumerable: true, get: function () { return __importDefault(ImageGroup_1).default; } });
+var ImagePreview_1 = require("./src/ImagePreview");
+Object.defineProperty(exports, "imagePreviewProps", { enumerable: true, get: function () { return ImagePreview_1.imagePreviewProps; } });
+Object.defineProperty(exports, "NImagePreview", { enumerable: true, get: function () { return __importDefault(ImagePreview_1).default; } });

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

@@ -1,10 +1,7 @@
-import type { ImagePreviewInst } from './ImagePreview';
+import type { ImagePreviewInst, ImageSlots } from './public-types';
 import type { IntersectionObserverOptions } from './utils';
-import { type ImgHTMLAttributes, type PropType, type SlotsType, type VNode } from 'vue';
+import { type ImgHTMLAttributes, type PropType, type SlotsType } from 'vue';
 import { type ExtractPublicPropTypes } from '../../_utils';
-export interface ImageInst {
-    click: () => void;
-}
 export declare const imageProps: {
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -40,7 +37,20 @@ export declare const imageProps: {
                 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", {
@@ -69,7 +79,20 @@ export declare const imageProps: {
                 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", {
@@ -98,7 +121,20 @@ export declare const imageProps: {
                 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>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;
@@ -121,10 +157,6 @@ export declare const imageProps: {
     onLoad: PropType<(e: Event) => void>;
 };
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
-export interface ImageSlots {
-    placeholder?: () => VNode[];
-    error?: () => VNode[];
-}
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -160,7 +192,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", {
@@ -189,7 +234,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", {
@@ -218,7 +276,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>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;
@@ -241,24 +312,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onLoad: PropType<(e: Event) => void>;
 }>, {
     click: () => void;
+    showPreview: () => void;
     mergedClsPrefix: import("vue").Ref<string, string>;
     groupId: string | undefined;
     previewInstRef: import("vue").Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string) => void;
-        toggleShow: () => void;
     } | null, ImagePreviewInst | {
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string) => void;
-        toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null, HTMLImageElement | null>;
+    mergedPreviewSrc: import("vue").ComputedRef<string | undefined>;
     showError: import("vue").Ref<boolean, boolean>;
     shouldStartLoading: import("vue").Ref<boolean, boolean>;
     loaded: import("vue").Ref<boolean, boolean>;
-    mergedOnClick: (e: MouseEvent) => void;
+    mergedOnClick: (e: PointerEvent) => void;
+    onPreviewClose: () => void;
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
+    previewShow: import("vue").Ref<boolean, boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     onPreviewPrev: PropType<() => void>;
     onPreviewNext: PropType<() => void>;
@@ -294,7 +365,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", {
@@ -323,7 +407,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", {
@@ -352,7 +449,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>;
+            }>;
         }>;
     }>>>;
     alt: StringConstructor;

package/lib/image/src/Image.js

@@ -16,6 +16,7 @@ exports.imageProps = Object.assign({ alt: String, height: [String, Number], imgP
         type: String,
         default: 'fill'
     }, previewSrc: String, fallbackSrc: String, width: [String, Number], src: String, previewDisabled: Boolean, loadDescription: String, onError: Function, onLoad: Function }, interface_1.imagePreviewSharedProps);
+let uuid = 0;
 exports.default = (0, vue_1.defineComponent)({
     name: 'Image',
     props: exports.imageProps,
@@ -27,24 +28,30 @@ exports.default = (0, vue_1.defineComponent)({
         const previewInstRef = (0, vue_1.ref)(null);
         const imageGroupHandle = (0, vue_1.inject)(ImageGroup_1.imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || (0, _mixins_1.useConfig)(props);
+        const mergedPreviewSrcRef = (0, vue_1.computed)(() => {
+            return props.previewSrc || props.src;
+        });
+        const previewShowRef = (0, vue_1.ref)(false);
+        const imageId = uuid++;
+        const showPreview = () => {
+            if (props.previewDisabled || showErrorRef.value)
+                return;
+            if (imageGroupHandle) {
+                imageGroupHandle.setThumbnailEl(imageRef.value);
+                imageGroupHandle.toggleShow(`r${imageId}`);
+                return;
+            }
+            const { value: previewInst } = previewInstRef;
+            if (!previewInst)
+                return;
+            previewInst.setThumbnailEl(imageRef.value);
+            previewShowRef.value = true;
+        };
         const exposedMethods = {
             click: () => {
-                if (props.previewDisabled || showErrorRef.value)
-                    return;
-                const mergedPreviewSrc = props.previewSrc || props.src;
-                if (imageGroupHandle) {
-                    imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
-                    imageGroupHandle.setThumbnailEl(imageRef.value);
-                    imageGroupHandle.toggleShow();
-                    return;
-                }
-                const { value: previewInst } = previewInstRef;
-                if (!previewInst)
-                    return;
-                previewInst.setPreviewSrc(mergedPreviewSrc);
-                previewInst.setThumbnailEl(imageRef.value);
-                previewInst.toggleShow();
-            }
+                showPreview();
+            },
+            showPreview
         };
         const shouldStartLoadingRef = (0, vue_1.ref)(!props.lazy);
         (0, vue_1.onMounted)(() => {
@@ -71,16 +78,29 @@ exports.default = (0, vue_1.defineComponent)({
             void (props.src || ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src));
             showErrorRef.value = false;
         });
+        (0, vue_1.watchEffect)((onInvalidate) => {
+            var _a;
+            const unregister = (_a = imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.registerImageUrl) === null || _a === void 0 ? void 0 : _a.call(imageGroupHandle, imageId, mergedPreviewSrcRef.value || '');
+            onInvalidate(() => {
+                unregister === null || unregister === void 0 ? void 0 : unregister();
+            });
+        });
+        function onImgClick(e) {
+            var _a, _b;
+            exposedMethods.showPreview();
+            (_b = (_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+        }
+        function onPreviewClose() {
+            previewShowRef.value = false;
+        }
         const loadedRef = (0, vue_1.ref)(false);
         (0, vue_1.provide)(interface_1.imageContextKey, {
             previewedImgPropsRef: (0, vue_1.toRef)(props, 'previewedImgProps')
         });
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnClick: (e) => {
-                var _a, _b;
-                exposedMethods.click();
-                (_b = (_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-            }, mergedOnError: (e) => {
+            imageRef, mergedPreviewSrc: mergedPreviewSrcRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnClick: (e) => {
+                onImgClick(e);
+            }, onPreviewClose, mergedOnError: (e) => {
                 if (!shouldStartLoadingRef.value)
                     return;
                 showErrorRef.value = true;
@@ -92,7 +112,7 @@ exports.default = (0, vue_1.defineComponent)({
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
                 imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
                 loadedRef.value = true;
-            } }, exposedMethods);
+            }, previewShow: previewShowRef }, exposedMethods);
     },
     render() {
         var _a, _b;
@@ -127,7 +147,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (this.previewDisabled || this.showError)
                     && `${mergedClsPrefix}-image--preview-disabled`
             ] }),
-            this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip, renderToolbar: this.renderToolbar }, {
+            this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip, renderToolbar: this.renderToolbar, src: this.mergedPreviewSrc, show: !this.previewDisabled && this.previewShow, onClose: this.onPreviewClose }, {
                 default: () => imgNode
             })),
             !loaded && placeholderNode));