naive-ui 2.41.1 → 2.43.0

package/lib/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/lib/image/src/ImageGroup.js

@@ -5,60 +5,142 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageGroupProps = exports.imageGroupInjectionKey = void 0;
 const seemly_1 = require("seemly");
+const vooks_1 = require("vooks");
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const ImagePreview_1 = __importDefault(require("./ImagePreview"));
 const interface_1 = require("./interface");
 exports.imageGroupInjectionKey = (0, _utils_1.createInjectionKey)('n-image-group');
-exports.imageGroupProps = interface_1.imagePreviewSharedProps;
+exports.imageGroupProps = Object.assign(Object.assign({}, interface_1.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] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImageGroup',
     props: exports.imageGroupProps,
     setup(props) {
-        let currentSrc;
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const groupId = `c${(0, seemly_1.createId)()}`;
-        const vm = (0, vue_1.getCurrentInstance)();
         const previewInstRef = (0, vue_1.ref)(null);
-        const setPreviewSrc = (src) => {
-            var _a;
-            currentSrc = src;
-            (_a = previewInstRef.value) === null || _a === void 0 ? void 0 : _a.setPreviewSrc(src);
+        const uncontrolledShowRef = (0, vue_1.ref)(props.defaultShow);
+        const controlledShowRef = (0, vue_1.toRef)(props, 'show');
+        const mergedShowRef = (0, vooks_1.useMergedState)(controlledShowRef, uncontrolledShowRef);
+        const registeredImageUrlMap = (0, vue_1.ref)(new Map());
+        const mergedImageUrlMap = (0, vue_1.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 = (0, vue_1.computed)(() => Array.from(mergedImageUrlMap.value.keys()));
+        const imageCountGetter = () => imageIdListRef.value.length;
+        function registerImageUrl(id, url) {
+            if (props.srcList) {
+                (0, _utils_1.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 = (0, vue_1.ref)(props.defaultCurrent);
+        const controlledCurrentRef = (0, vue_1.toRef)(props, 'current');
+        const mergedCurrentRef = (0, vooks_1.useMergedState)(controlledCurrentRef, uncontrolledCurrentRef);
+        const setCurrentIndex = (index) => {
+            if (index !== mergedCurrentRef.value) {
+                const { onUpdateCurrent, 'onUpdate:current': _onUpdateCurrent } = props;
+                if (onUpdateCurrent) {
+                    (0, _utils_1.call)(onUpdateCurrent, index);
+                }
+                if (_onUpdateCurrent) {
+                    (0, _utils_1.call)(_onUpdateCurrent, index);
+                }
+                uncontrolledCurrentRef.value = index;
+            }
         };
-        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);
+        const currentId = (0, vue_1.computed)(() => imageIdListRef.value[mergedCurrentRef.value]);
+        const setCurrentId = (nextId) => {
+            const nextIndex = imageIdListRef.value.indexOf(nextId);
+            if (nextIndex !== mergedCurrentRef.value) {
+                setCurrentIndex(nextIndex);
             }
-            else {
-                setPreviewSrc(imgs[0].dataset.previewSrc);
+        };
+        const currentUrl = (0, vue_1.computed)(() => mergedImageUrlMap.value.get(currentId.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;
+        }
+        function onClose() {
+            doUpdateShow(false);
+        }
+        const nextIndex = (0, vue_1.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 = (0, vue_1.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 (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);
             }
         }
         (0, vue_1.provide)(exports.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: (0, vue_1.toRef)(props, 'renderToolbar')
@@ -66,6 +148,9 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             previewInstRef,
+            mergedShow: mergedShowRef,
+            src: currentUrl,
+            onClose,
             next: () => {
                 go(1);
             },
@@ -75,6 +160,6 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        return ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: this.mergedClsPrefix, ref: "previewInstRef", onPrev: this.prev, onNext: this.next, showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip, renderToolbar: this.renderToolbar }, this.$slots));
+        return ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, ref: "previewInstRef", onPrev: this.prev, onNext: this.next, src: this.src, show: this.mergedShow, showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip, renderToolbar: this.renderToolbar, onClose: this.onClose }, this.$slots));
     }
 });