naive-ui 2.38.2 → 2.40.0

package/lib/grid/src/Grid.d.ts

@@ -4,11 +4,11 @@ import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const gridProps: {
     readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
-        readonly type: PropType<"screen" | "self">;
+        readonly type: PropType<"self" | "screen">;
         readonly default: "self";
     };
     readonly cols: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 24;
     };
     readonly itemResponsive: BooleanConstructor;
@@ -17,13 +17,13 @@ export declare const gridProps: {
         readonly type: NumberConstructor;
         readonly default: 1;
     };
-    readonly itemStyle: PropType<string | CSSProperties>;
+    readonly itemStyle: PropType<CSSProperties | string>;
     readonly xGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
     readonly yGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
 };
@@ -38,11 +38,11 @@ export type GridProps = ExtractPublicPropTypes<typeof gridProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
-        readonly type: PropType<"screen" | "self">;
+        readonly type: PropType<"self" | "screen">;
         readonly default: "self";
     };
     readonly cols: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 24;
     };
     readonly itemResponsive: BooleanConstructor;
@@ -51,13 +51,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
-    readonly itemStyle: PropType<string | CSSProperties>;
+    readonly itemStyle: PropType<CSSProperties | string>;
     readonly xGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
     readonly yGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
 }, {
@@ -73,11 +73,11 @@ declare const _default: import("vue").DefineComponent<{
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
-        readonly type: PropType<"screen" | "self">;
+        readonly type: PropType<"self" | "screen">;
         readonly default: "self";
     };
     readonly cols: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 24;
     };
     readonly itemResponsive: BooleanConstructor;
@@ -86,13 +86,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
-    readonly itemStyle: PropType<string | CSSProperties>;
+    readonly itemStyle: PropType<CSSProperties | string>;
     readonly xGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
     readonly yGap: {
-        readonly type: PropType<string | number>;
+        readonly type: PropType<number | string>;
         readonly default: 0;
     };
 }>>, {

package/lib/grid/src/Grid.js

@@ -186,10 +186,10 @@ exports.default = (0, vue_1.defineComponent)({
                 if (suffixPropValue !== undefined && suffixPropValue !== false) {
                     suffixSpan = Number((_d = (0, seemly_1.parseResponsivePropValue)((_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span, responsiveQuery)) !== null && _d !== void 0 ? _d : config_2.defaultSpan);
                     maybeSuffixNode.props.privateSpan = suffixSpan;
-                    maybeSuffixNode.props.privateColStart =
-                        responsiveCols + 1 - suffixSpan;
-                    maybeSuffixNode.props.privateShow =
-                        (_e = maybeSuffixNode.props.privateShow) !== null && _e !== void 0 ? _e : true;
+                    maybeSuffixNode.props.privateColStart
+                        = responsiveCols + 1 - suffixSpan;
+                    maybeSuffixNode.props.privateShow
+                        = (_e = maybeSuffixNode.props.privateShow) !== null && _e !== void 0 ? _e : true;
                 }
             }
             let spanCounter = 0;
@@ -217,8 +217,8 @@ exports.default = (0, vue_1.defineComponent)({
                         if (childSpan + remainder > responsiveCols) {
                             spanCounter += responsiveCols - remainder;
                         }
-                        if (childSpan + spanCounter + suffixSpan >
-                            collapsedRows * responsiveCols) {
+                        if (childSpan + spanCounter + suffixSpan
+                            > collapsedRows * responsiveCols) {
                             done = true;
                         }
                         else {

package/lib/grid/src/GridItem.js

@@ -32,9 +32,7 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['Gi'],
     props: exports.gridItemProps,
     setup() {
-        const { isSsrRef, xGapRef, itemStyleRef, overflowRef, layoutShiftDisabledRef
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(config_1.gridInjectionKey);
+        const { isSsrRef, xGapRef, itemStyleRef, overflowRef, layoutShiftDisabledRef } = (0, vue_1.inject)(config_1.gridInjectionKey);
         const self = (0, vue_1.getCurrentInstance)();
         return {
             overflow: overflowRef,
@@ -46,9 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
             deriveStyle: () => {
                 void isSsrRef.value;
                 // Here is quite a hack, I hope there is a better way to solve it
-                const { privateSpan = exports.defaultSpan, privateShow = true, privateColStart = undefined, privateOffset = 0
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                 } = self.vnode.props;
+                const { privateSpan = exports.defaultSpan, privateShow = true, privateColStart = undefined, privateOffset = 0 } = self.vnode.props;
                 const { value: xGap } = xGapRef;
                 const mergedXGap = (0, seemly_1.pxfy)(xGap || 0);
                 return {

package/lib/highlight/index.d.ts

@@ -0,0 +1,2 @@
+export { default as NHighlight, highlightProps } from './src/Highlight';
+export type * from './src/public-types';

package/lib/highlight/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlightProps = exports.NHighlight = void 0;
+var Highlight_1 = require("./src/Highlight");
+Object.defineProperty(exports, "NHighlight", { enumerable: true, get: function () { return __importDefault(Highlight_1).default; } });
+Object.defineProperty(exports, "highlightProps", { enumerable: true, get: function () { return Highlight_1.highlightProps; } });

package/lib/highlight/src/Highlight.d.ts

@@ -0,0 +1,65 @@
+import type { CSSProperties, PropType, VNode } from 'vue';
+export declare const highlightProps: {
+    readonly highlightTag: {
+        readonly type: StringConstructor;
+        readonly default: "mark";
+    };
+    readonly caseSensitive: BooleanConstructor;
+    readonly autoEscape: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly text: StringConstructor;
+    readonly patterns: {
+        readonly type: PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly highlightClass: StringConstructor;
+    readonly highlightStyle: PropType<CSSProperties | string>;
+};
+declare const _default: import("vue").DefineComponent<{
+    readonly highlightTag: {
+        readonly type: StringConstructor;
+        readonly default: "mark";
+    };
+    readonly caseSensitive: BooleanConstructor;
+    readonly autoEscape: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly text: StringConstructor;
+    readonly patterns: {
+        readonly type: PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly highlightClass: StringConstructor;
+    readonly highlightStyle: PropType<CSSProperties | string>;
+}, {
+    highlightedNode: import("vue").ComputedRef<VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>>;
+    mergedClsPrefix: import("vue").Ref<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly highlightTag: {
+        readonly type: StringConstructor;
+        readonly default: "mark";
+    };
+    readonly caseSensitive: BooleanConstructor;
+    readonly autoEscape: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly text: StringConstructor;
+    readonly patterns: {
+        readonly type: PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly highlightClass: StringConstructor;
+    readonly highlightStyle: PropType<CSSProperties | string>;
+}>>, {
+    readonly highlightTag: string;
+    readonly caseSensitive: boolean;
+    readonly autoEscape: boolean;
+    readonly patterns: string[];
+}, {}>;
+export default _default;

package/lib/highlight/src/Highlight.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlightProps = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const utils_1 = require("./utils");
+exports.highlightProps = {
+    highlightTag: {
+        type: String,
+        default: 'mark'
+    },
+    caseSensitive: Boolean,
+    autoEscape: {
+        type: Boolean,
+        default: true
+    },
+    text: String,
+    patterns: {
+        type: Array,
+        default: () => []
+    },
+    highlightClass: String,
+    highlightStyle: [Object, String]
+};
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Highlight',
+    props: exports.highlightProps,
+    setup(props) {
+        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
+        const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const highlightedNodeRef = (0, vue_1.computed)(() => {
+            const mergedClsPrefix = mergedClsPrefixRef.value;
+            let children = [];
+            const { patterns, text } = props;
+            if (patterns.length === 0 || !text) {
+                children = [text];
+            }
+            else {
+                const { highlightTag, caseSensitive, autoEscape, highlightClass, highlightStyle } = props;
+                const pattern = patterns
+                    .map(word => (autoEscape ? escapeRegExp(word) : word))
+                    .join('|');
+                const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
+                const splitItems = (0, utils_1.splitAndMarkByRegex)(text, regex);
+                children = splitItems.map(({ text, isMatch }) => {
+                    if (isMatch) {
+                        return (0, vue_1.h)(highlightTag, {
+                            class: [`${mergedClsPrefix}-highlight__mark`, highlightClass],
+                            style: highlightStyle
+                        }, text);
+                    }
+                    return text;
+                });
+            }
+            return (0, vue_1.h)('span', {
+                class: `${mergedClsPrefix}-highlight`
+            }, children);
+        });
+        return {
+            highlightedNode: highlightedNodeRef,
+            mergedClsPrefix: mergedClsPrefixRef
+        };
+    },
+    render() {
+        return this.highlightedNode;
+    }
+});

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

@@ -0,0 +1,3 @@
+import type { ExtractPublicPropTypes } from '../../_utils';
+import type { highlightProps } from './Highlight';
+export type HighlightProps = ExtractPublicPropTypes<typeof highlightProps>;

package/lib/highlight/src/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/highlight/src/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function splitAndMarkByRegex(str: string, regex: RegExp): Array<{
+    text: string;
+    isMatch: boolean;
+}>;

package/lib/highlight/src/utils.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitAndMarkByRegex = splitAndMarkByRegex;
+// Generated by ChatGPT
+function splitAndMarkByRegex(str, regex) {
+    const result = [];
+    let lastIndex = 0;
+    let match;
+    // eslint-disable-next-line no-cond-assign
+    while ((match = regex.exec(str)) !== null) {
+        if (match.index > lastIndex) {
+            result.push({
+                text: str.slice(lastIndex, match.index),
+                isMatch: false
+            });
+        }
+        result.push({
+            text: match[0],
+            isMatch: true
+        });
+        lastIndex = regex.lastIndex;
+        if (!regex.global) {
+            break;
+        }
+    }
+    if (lastIndex < str.length) {
+        result.push({
+            text: str.slice(lastIndex),
+            isMatch: false
+        });
+    }
+    return result;
+}

package/lib/icon/src/Icon.d.ts

@@ -3,7 +3,7 @@ import type { ExtractPublicPropTypes } from '../../_utils';
 export type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
 export declare const iconProps: {
     readonly depth: PropType<Depth>;
-    readonly size: PropType<string | number>;
+    readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
@@ -34,7 +34,7 @@ export declare const iconProps: {
 export type IconProps = ExtractPublicPropTypes<typeof iconProps>;
 export declare const NIcon: import("vue").DefineComponent<{
     readonly depth: PropType<Depth>;
-    readonly size: PropType<string | number>;
+    readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
@@ -76,7 +76,7 @@ export declare const NIcon: import("vue").DefineComponent<{
     onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly depth: PropType<Depth>;
-    readonly size: PropType<string | number>;
+    readonly size: PropType<number | string>;
     readonly color: StringConstructor;
     readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {

package/lib/icon/src/Icon.js

@@ -9,7 +9,7 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.iconProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object });
+exports.iconProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: [Object, Function] });
 exports.NIcon = (0, vue_1.defineComponent)({
     _n_icon__: true,
     name: 'Icon',
@@ -56,7 +56,7 @@ exports.NIcon = (0, vue_1.defineComponent)({
         var _a;
         const { $parent, depth, mergedClsPrefix, component, onRender, themeClass } = this;
         if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
-            (0, _utils_1.warn)('icon', "don't wrap `n-icon` inside `n-icon`");
+            (0, _utils_1.warn)('icon', 'don\'t wrap `n-icon` inside `n-icon`');
         }
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (0, vue_1.h)('i', (0, vue_1.mergeProps)(this.$attrs, {

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

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+export declare function self(vars: ThemeCommonVars): {
     color: string;
     opacity1Depth: string;
     opacity2Depth: string;

package/lib/icon/styles/light.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.self = void 0;
+exports.self = self;
 const common_1 = require("../../_styles/common");
-const self = (vars) => {
+function self(vars) {
     const { textColorBase, opacity1, opacity2, opacity3, opacity4, opacity5 } = vars;
     return {
         color: textColorBase,
@@ -12,11 +12,10 @@ const self = (vars) => {
         opacity4Depth: opacity4,
         opacity5Depth: opacity5
     };
-};
-exports.self = self;
+}
 const iconLight = {
     name: 'Icon',
     common: common_1.commonLight,
-    self: exports.self
+    self
 };
 exports.default = iconLight;

package/lib/icon-wrapper/src/IconWrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="vue/jsx" />
 import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const iconWrapperProps: {
     readonly size: {

package/lib/icon-wrapper/styles/light.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
-export declare const self: (vars: ThemeCommonVars) => {
+export declare function self(vars: ThemeCommonVars): {
     color: string;
     iconColor: string;
 };

package/lib/icon-wrapper/styles/light.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.self = void 0;
+exports.self = self;
 const common_1 = require("../../_styles/common");
-const self = (vars) => {
+function self(vars) {
     const { primaryColor, baseColor } = vars;
     return {
         color: primaryColor,
         iconColor: baseColor
     };
-};
-exports.self = self;
+}
 const iconWrapperLight = {
     name: 'IconWrapper',
     common: common_1.commonLight,
-    self: exports.self
+    self
 };
 exports.default = iconWrapperLight;

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

@@ -1,4 +1,4 @@
-import { type PropType, type ImgHTMLAttributes } from 'vue';
+import { type ImgHTMLAttributes, type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { IntersectionObserverOptions } from './utils';
 export interface ImageInst {
@@ -12,7 +12,7 @@ export declare const imageProps: {
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("naive-ui").ImageRenderToolbar>;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
     theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
@@ -107,7 +107,7 @@ export declare const imageProps: {
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
-        type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
+        type: PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
@@ -128,7 +128,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("naive-ui").ImageRenderToolbar>;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
     theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
@@ -223,7 +223,7 @@ declare const _default: import("vue").DefineComponent<{
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
-        type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
+        type: PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
@@ -240,7 +240,7 @@ declare const _default: import("vue").DefineComponent<{
     groupId: string | undefined;
     previewInstRef: import("vue").Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string | undefined) => void;
+        setPreviewSrc: (src?: string) => void;
         toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null>;
@@ -258,7 +258,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("naive-ui").ImageRenderToolbar>;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
     theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
@@ -353,7 +353,7 @@ declare const _default: import("vue").DefineComponent<{
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
-        type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
+        type: PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;

package/lib/image/src/Image.js

@@ -117,8 +117,8 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", Object.assign({}, $attrs, { role: "none", class: [
                 $attrs.class,
                 `${mergedClsPrefix}-image`,
-                (this.previewDisabled || this.showError) &&
-                    `${mergedClsPrefix}-image--preview-disabled`
+                (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 }, {
                 default: () => imgNode,

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

@@ -205,7 +205,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: Ref<string>;
     previewInstRef: Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
-        setPreviewSrc: (src?: string | undefined) => void;
+        setPreviewSrc: (src?: string) => void;
         toggleShow: () => void;
     } | null>;
     next: () => void;

package/lib/image/src/ImageGroup.js

@@ -20,6 +20,7 @@ exports.default = (0, vue_1.defineComponent)({
         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;
@@ -34,14 +35,19 @@ exports.default = (0, vue_1.defineComponent)({
             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);
+            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);
             }
-            step === 1 ? (_a = props.onPreviewNext) === null || _a === void 0 ? void 0 : _a.call(props) : (_b = props.onPreviewPrev) === null || _b === void 0 ? void 0 : _b.call(props);
+            if (step === 1) {
+                (_a = props.onPreviewNext) === null || _a === void 0 ? void 0 : _a.call(props);
+            }
+            else {
+                (_b = props.onPreviewPrev) === null || _b === void 0 ? void 0 : _b.call(props);
+            }
         }
         (0, vue_1.provide)(exports.imageGroupInjectionKey, {
             mergedClsPrefixRef,
@@ -57,7 +63,6 @@ exports.default = (0, vue_1.defineComponent)({
             groupId,
             renderToolbarRef: (0, vue_1.toRef)(props, 'renderToolbar')
         });
-        const previewInstRef = (0, vue_1.ref)(null);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             previewInstRef,

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("naive-ui").ImageRenderToolbar>;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
     theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
@@ -108,7 +108,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     setThumbnailEl: (e: HTMLImageElement | null) => void;
-    setPreviewSrc: (src?: string | undefined) => void;
+    setPreviewSrc: (src?: string) => void;
     toggleShow: () => void;
     previewRef: import("vue").Ref<HTMLImageElement | null>;
     previewWrapperRef: import("vue").Ref<HTMLDivElement | null>;
@@ -155,7 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    renderToolbar: PropType<import("naive-ui").ImageRenderToolbar>;
+    renderToolbar: PropType<import("./public-types").ImageRenderToolbar>;
     theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;