naive-ui 2.41.1 → 2.43.0

package/es/image/src/Image.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watchEffect } from 'vue';
 import { useConfig } from "../../_mixins/index.mjs";
 import { resolveSlot } from "../../_utils/index.mjs";
 import { isImageSupportNativeLazy } from "../../_utils/env/is-native-lazy-load.mjs";
@@ -26,6 +26,7 @@ export const imageProps = Object.assign({
   onError: Function,
   onLoad: Function
 }, imagePreviewSharedProps);
+let uuid = 0;
 export default defineComponent({
   name: 'Image',
   props: imageProps,
@@ -39,24 +40,30 @@ export default defineComponent({
     const {
       mergedClsPrefixRef
     } = imageGroupHandle || useConfig(props);
+    const mergedPreviewSrcRef = computed(() => {
+      return props.previewSrc || props.src;
+    });
+    const previewShowRef = 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 = ref(!props.lazy);
     onMounted(() => {
@@ -83,6 +90,21 @@ export default defineComponent({
       void (props.src || ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src));
       showErrorRef.value = false;
     });
+    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 = ref(false);
     provide(imageContextKey, {
       previewedImgPropsRef: toRef(props, 'previewedImgProps')
@@ -92,14 +114,14 @@ export default defineComponent({
       groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId,
       previewInstRef,
       imageRef,
+      mergedPreviewSrc: mergedPreviewSrcRef,
       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);
+        onImgClick(e);
       },
+      onPreviewClose,
       mergedOnError: e => {
         if (!shouldStartLoadingRef.value) return;
         showErrorRef.value = true;
@@ -122,7 +144,8 @@ export default defineComponent({
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
         imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
         loadedRef.value = true;
-      }
+      },
+      previewShow: previewShowRef
     }, exposedMethods);
   },
   render() {
@@ -165,11 +188,13 @@ export default defineComponent({
     }), this.groupId ? imgNode : h(NImagePreview, {
       theme: this.theme,
       themeOverrides: this.themeOverrides,
-      clsPrefix: mergedClsPrefix,
       ref: "previewInstRef",
       showToolbar: this.showToolbar,
       showToolbarTooltip: this.showToolbarTooltip,
-      renderToolbar: this.renderToolbar
+      renderToolbar: this.renderToolbar,
+      src: this.mergedPreviewSrc,
+      show: !this.previewDisabled && this.previewShow,
+      onClose: this.onPreviewClose
     }, {
       default: () => imgNode
     }), !loaded && placeholderNode);

package/es/image/src/ImageGroup.d.ts

@@ -1,22 +1,38 @@
-import type { ImagePreviewInst } from './ImagePreview';
-import type { ImageRenderToolbar } from './public-types';
-import { type Ref } from 'vue';
-import { type ExtractPublicPropTypes } from '../../_utils';
+import type { PropType, Ref } from 'vue';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { ImagePreviewInst, ImageRenderToolbar } from './public-types';
 export declare const imageGroupInjectionKey: import("vue").InjectionKey<ImagePreviewInst & {
     groupId: string;
     mergedClsPrefixRef: Ref<string>;
     renderToolbarRef: Ref<ImageRenderToolbar | undefined>;
+    registerImageUrl: (id: number, url: string) => () => void;
+    toggleShow: (imageId: string) => void;
 }>;
 export declare const imageGroupProps: {
-    onPreviewPrev: import("vue").PropType<() => void>;
-    onPreviewNext: import("vue").PropType<() => void>;
+    srcList: PropType<string[]>;
+    current: NumberConstructor;
+    defaultCurrent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateCurrent: PropType<MaybeArray<(current: number) => void>>;
+    'onUpdate:current': PropType<MaybeArray<(current: number) => void>>;
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: import("vue").PropType<ImageRenderToolbar>;
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
+    renderToolbar: PropType<ImageRenderToolbar>;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -42,10 +58,23 @@ export declare const imageGroupProps: {
                 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -71,10 +100,23 @@ export declare const imageGroupProps: {
                 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -100,21 +142,49 @@ export declare const imageGroupProps: {
                 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 ImageGroupProps = ExtractPublicPropTypes<typeof imageGroupProps>;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    onPreviewPrev: import("vue").PropType<() => void>;
-    onPreviewNext: import("vue").PropType<() => void>;
+    srcList: PropType<string[]>;
+    current: NumberConstructor;
+    defaultCurrent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateCurrent: PropType<MaybeArray<(current: number) => void>>;
+    'onUpdate:current': PropType<MaybeArray<(current: number) => void>>;
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: import("vue").PropType<ImageRenderToolbar>;
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
+    renderToolbar: PropType<ImageRenderToolbar>;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -140,10 +210,23 @@ 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -169,10 +252,23 @@ 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -198,32 +294,59 @@ 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>;
+            }>;
         }>;
     }>>>;
 }>, {
     mergedClsPrefix: Ref<string, string>;
     previewInstRef: 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>;
+    mergedShow: import("vue").ComputedRef<boolean>;
+    src: import("vue").ComputedRef<string | undefined>;
+    onClose: () => void;
     next: () => void;
     prev: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    onPreviewPrev: import("vue").PropType<() => void>;
-    onPreviewNext: import("vue").PropType<() => void>;
+    srcList: PropType<string[]>;
+    current: NumberConstructor;
+    defaultCurrent: {
+        type: NumberConstructor;
+        default: number;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultShow: BooleanConstructor;
+    onUpdateShow: PropType<MaybeArray<(show: boolean) => void>>;
+    'onUpdate:show': PropType<MaybeArray<(show: boolean) => void>>;
+    onUpdateCurrent: PropType<MaybeArray<(current: number) => void>>;
+    'onUpdate:current': PropType<MaybeArray<(current: number) => void>>;
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: import("vue").PropType<ImageRenderToolbar>;
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
+    renderToolbar: PropType<ImageRenderToolbar>;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -249,10 +372,23 @@ 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -278,10 +414,23 @@ 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: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -307,11 +456,27 @@ 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;
+    defaultCurrent: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/image/src/ImageGroup.mjs

@@ -1,56 +1,155 @@
 import { createId } from 'seemly';
-import { defineComponent, getCurrentInstance, h, provide, ref, toRef } from 'vue';
+import { useMergedState } from 'vooks';
+import { computed, defineComponent, h, provide, ref, toRef } from 'vue';
 import { useConfig } from "../../_mixins/index.mjs";
-import { createInjectionKey } from "../../_utils/index.mjs";
+import { call, createInjectionKey, throwError } from "../../_utils/index.mjs";
 import NImagePreview from "./ImagePreview.mjs";
 import { imagePreviewSharedProps } from "./interface.mjs";
 export const imageGroupInjectionKey = createInjectionKey('n-image-group');
-export const imageGroupProps = imagePreviewSharedProps;
+export const imageGroupProps = Object.assign(Object.assign({}, imagePreviewSharedProps), {
+  srcList: Array,
+  current: Number,
+  defaultCurrent: {
+    type: Number,
+    default: 0
+  },
+  show: {
+    type: Boolean,
+    default: undefined
+  },
+  defaultShow: Boolean,
+  onUpdateShow: [Function, Array],
+  'onUpdate:show': [Function, Array],
+  onUpdateCurrent: [Function, Array],
+  'onUpdate:current': [Function, Array]
+});
 export default defineComponent({
   name: 'ImageGroup',
   props: imageGroupProps,
   setup(props) {
-    let currentSrc;
     const {
       mergedClsPrefixRef
     } = useConfig(props);
     const groupId = `c${createId()}`;
-    const vm = getCurrentInstance();
     const previewInstRef = ref(null);
-    const setPreviewSrc = src => {
-      var _a;
-      currentSrc = src;
-      (_a = previewInstRef.value) === null || _a === void 0 ? void 0 : _a.setPreviewSrc(src);
+    const uncontrolledShowRef = ref(props.defaultShow);
+    const controlledShowRef = toRef(props, 'show');
+    const mergedShowRef = useMergedState(controlledShowRef, uncontrolledShowRef);
+    const registeredImageUrlMap = ref(new Map());
+    const mergedImageUrlMap = computed(() => {
+      if (props.srcList) {
+        const map = new Map();
+        props.srcList.forEach((url, index) => {
+          map.set(`p${index}`, url);
+        });
+        return map;
+      }
+      return registeredImageUrlMap.value;
+    });
+    const imageIdListRef = computed(() => Array.from(mergedImageUrlMap.value.keys()));
+    const imageCountGetter = () => imageIdListRef.value.length;
+    function registerImageUrl(id, url) {
+      if (props.srcList) {
+        throwError('image-group', '`n-image` can\'t be placed inside `n-image-group` when image group\'s `src-list` prop is set.');
+      }
+      const sid = `r${id}`;
+      if (!registeredImageUrlMap.value.has(`r${sid}`)) {
+        registeredImageUrlMap.value.set(sid, url);
+      }
+      return function unregisterPreviewUrl() {
+        if (!registeredImageUrlMap.value.has(sid)) {
+          registeredImageUrlMap.value.delete(sid);
+        }
+      };
+    }
+    const uncontrolledCurrentRef = ref(props.defaultCurrent);
+    const controlledCurrentRef = toRef(props, 'current');
+    const mergedCurrentRef = useMergedState(controlledCurrentRef, uncontrolledCurrentRef);
+    const setCurrentIndex = index => {
+      if (index !== mergedCurrentRef.value) {
+        const {
+          onUpdateCurrent,
+          'onUpdate:current': _onUpdateCurrent
+        } = props;
+        if (onUpdateCurrent) {
+          call(onUpdateCurrent, index);
+        }
+        if (_onUpdateCurrent) {
+          call(_onUpdateCurrent, index);
+        }
+        uncontrolledCurrentRef.value = index;
+      }
+    };
+    const currentId = computed(() => imageIdListRef.value[mergedCurrentRef.value]);
+    const setCurrentId = nextId => {
+      const nextIndex = imageIdListRef.value.indexOf(nextId);
+      if (nextIndex !== mergedCurrentRef.value) {
+        setCurrentIndex(nextIndex);
+      }
     };
+    const currentUrl = computed(() => mergedImageUrlMap.value.get(currentId.value));
+    function doUpdateShow(value) {
+      const {
+        onUpdateShow,
+        'onUpdate:show': _onUpdateShow
+      } = props;
+      if (onUpdateShow) {
+        call(onUpdateShow, value);
+      }
+      if (_onUpdateShow) {
+        call(_onUpdateShow, value);
+      }
+      uncontrolledShowRef.value = value;
+    }
+    function onClose() {
+      doUpdateShow(false);
+    }
+    const nextIndex = computed(() => {
+      const findNext = (start, end) => {
+        for (let i = start; i <= end; i++) {
+          const id = imageIdListRef.value[i];
+          if (mergedImageUrlMap.value.get(id)) {
+            return i;
+          }
+        }
+        return undefined;
+      };
+      const next = findNext(mergedCurrentRef.value + 1, imageCountGetter() - 1);
+      return next === undefined ? findNext(0, mergedCurrentRef.value - 1) : next;
+    });
+    const prevIndex = computed(() => {
+      const findPrev = (start, end) => {
+        for (let i = start; i >= end; i--) {
+          const id = imageIdListRef.value[i];
+          if (mergedImageUrlMap.value.get(id)) {
+            return i;
+          }
+        }
+        return undefined;
+      };
+      const prev = findPrev(mergedCurrentRef.value - 1, 0);
+      return prev === undefined ? findPrev(imageCountGetter() - 1, mergedCurrentRef.value + 1) : prev;
+    });
     function go(step) {
       var _a, _b;
-      if (!(vm === null || vm === void 0 ? void 0 : vm.proxy)) return;
-      const container = vm.proxy.$el.parentElement;
-      // use dom api since we can't get the correct order before all children are rendered
-      const imgs = container.querySelectorAll(`[data-group-id=${groupId}]:not([data-error=true])`);
-      if (!imgs.length) return;
-      const index = Array.from(imgs).findIndex(img => img.dataset.previewSrc === currentSrc);
-      if (~index) {
-        setPreviewSrc(imgs[(index + step + imgs.length) % imgs.length].dataset.previewSrc);
-      } else {
-        setPreviewSrc(imgs[0].dataset.previewSrc);
-      }
       if (step === 1) {
+        prevIndex.value !== undefined && setCurrentIndex(nextIndex.value);
         (_a = props.onPreviewNext) === null || _a === void 0 ? void 0 : _a.call(props);
       } else {
+        nextIndex.value !== undefined && setCurrentIndex(prevIndex.value);
         (_b = props.onPreviewPrev) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
     provide(imageGroupInjectionKey, {
       mergedClsPrefixRef,
-      setPreviewSrc,
+      registerImageUrl,
       setThumbnailEl: el => {
         var _a;
         (_a = previewInstRef.value) === null || _a === void 0 ? void 0 : _a.setThumbnailEl(el);
       },
-      toggleShow: () => {
-        var _a;
-        (_a = previewInstRef.value) === null || _a === void 0 ? void 0 : _a.toggleShow();
+      toggleShow: imageId => {
+        doUpdateShow(true);
+        setCurrentId(imageId);
       },
       groupId,
       renderToolbarRef: toRef(props, 'renderToolbar')
@@ -58,6 +157,9 @@ export default defineComponent({
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       previewInstRef,
+      mergedShow: mergedShowRef,
+      src: currentUrl,
+      onClose,
       next: () => {
         go(1);
       },
@@ -70,13 +172,15 @@ export default defineComponent({
     return h(NImagePreview, {
       theme: this.theme,
       themeOverrides: this.themeOverrides,
-      clsPrefix: this.mergedClsPrefix,
       ref: "previewInstRef",
       onPrev: this.prev,
       onNext: this.next,
+      src: this.src,
+      show: this.mergedShow,
       showToolbar: this.showToolbar,
       showToolbarTooltip: this.showToolbarTooltip,
-      renderToolbar: this.renderToolbar
+      renderToolbar: this.renderToolbar,
+      onClose: this.onClose
     }, this.$slots);
   }
 });