naive-ui 2.34.3 → 2.35.0

package/es/form/src/FormItemGridItem.js

@@ -20,7 +20,7 @@ export default defineComponent({
         const restoreValidation = () => {
             const { value } = formItemInstRef;
             if (value) {
-                return value.restoreValidation();
+                value.restoreValidation();
             }
         };
         return {

package/es/form/src/FormItemRow.d.ts

@@ -463,5 +463,5 @@ declare const _default: import("vue").DefineComponent<{
     ignorePathChange: boolean;
     gutter: string | number | [number, number];
     pull: import("../../legacy-grid/src/interface").Span;
-}>;
+}, {}>;
 export default _default;

package/es/form/src/FormItemRow.js

@@ -17,7 +17,7 @@ export default defineComponent({
         const restoreValidation = () => {
             const { value } = formItemColInstRef;
             if (value) {
-                return value.restoreValidation();
+                value.restoreValidation();
             }
         };
         return {

package/es/form/src/interface.d.ts

@@ -1,6 +1,6 @@
-import { Ref, VNodeChild } from 'vue';
-import { ValidateError, RuleItem, ValidateOption, ValidateMessages } from 'async-validator';
-import { FormSetupProps } from './Form';
+import type { Ref, VNodeChild } from 'vue';
+import type { ValidateError, RuleItem, ValidateOption, ValidateMessages } from 'async-validator';
+import type { FormSetupProps } from './Form';
 export interface FormRules {
     [path: string]: FormRules | FormItemRule | FormItemRule[];
 }

package/es/form/src/utils.d.ts

@@ -1,4 +1,4 @@
-import { ComputedRef } from 'vue';
+import { type ComputedRef } from 'vue';
 import type { FormItemSetupProps } from './FormItem';
 import type { Size, FormItemRule } from './interface';
 export declare function formItemSize(props: FormItemSetupProps): {

package/es/global-style/src/GlobalStyle.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/es/gradient-text/src/GradientText.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 type Gradient = string | {
     deg?: string | number;
@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         colorEndSuccess: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     compatibleType: import("vue").ComputedRef<"error" | "primary" | "info" | "success" | "warning">;
     styleFontSize: import("vue").ComputedRef<string | number | undefined>;
     styleBgImage: import("vue").ComputedRef<string | undefined>;
@@ -176,5 +176,5 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly type: "error" | "primary" | "info" | "success" | "warning" | "danger";
-}>;
+}, {}>;
 export default _default;

package/es/gradient-text/styles/dark.d.ts

@@ -1,3 +1,3 @@
-import { GradientTextTheme } from './light';
+import type { GradientTextTheme } from './light';
 declare const gradientTextDark: GradientTextTheme;
 export default gradientTextDark;

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

@@ -1,6 +1,6 @@
-import { CSSProperties, PropType, Ref } from 'vue';
-import { VResizeObserverOnResize } from 'vueuc';
-import { ExtractPublicPropTypes } from '../../_utils';
+import { type CSSProperties, type PropType, type Ref } from 'vue';
+import { type VResizeObserverOnResize } from 'vueuc';
+import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const gridProps: {
     readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
@@ -63,10 +63,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     isSsr: boolean;
     contentEl: Ref<HTMLElement | undefined>;
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: Ref<string>;
     style: import("vue").ComputedRef<CSSProperties>;
     isResponsive: import("vue").ComputedRef<boolean>;
-    responsiveQuery: import("vue").ComputedRef<number | string[] | undefined>;
+    responsiveQuery: import("vue").ComputedRef<number | ("m" | "s" | "l" | "xs" | "xl" | "xxl")[] | undefined>;
     responsiveCols: import("vue").ComputedRef<number>;
     handleResize: import("vue").ComputedRef<VResizeObserverOnResize | undefined>;
     overflow: Ref<boolean>;
@@ -104,5 +104,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly collapsedRows: number;
     readonly xGap: string | number;
     readonly yGap: string | number;
-}>;
+}, {}>;
 export default _default;

package/es/grid/src/Grid.js

@@ -144,7 +144,7 @@ export default defineComponent({
             const childrenAndRawSpan = [];
             const { collapsed, collapsedRows, responsiveCols, responsiveQuery } = this;
             rawChildren.forEach((child) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.__GRID_ITEM__) !== true)
                     return;
                 if (isNodeVShowFalse(child)) {
@@ -164,8 +164,11 @@ export default defineComponent({
                 // We don't want v-show to control display, so we need to stripe it
                 // here, nor it may mess child's style
                 child.dirs = ((_b = child.dirs) === null || _b === void 0 ? void 0 : _b.filter(({ dir }) => dir !== vShow)) || null;
+                if (((_c = child.dirs) === null || _c === void 0 ? void 0 : _c.length) === 0) {
+                    child.dirs = null;
+                }
                 const clonedChild = cloneVNode(child);
-                const rawChildSpan = Number((_d = parseResponsivePropValue((_c = clonedChild.props) === null || _c === void 0 ? void 0 : _c.span, responsiveQuery)) !== null && _d !== void 0 ? _d : defaultSpan);
+                const rawChildSpan = Number((_e = parseResponsivePropValue((_d = clonedChild.props) === null || _d === void 0 ? void 0 : _d.span, responsiveQuery)) !== null && _e !== void 0 ? _e : defaultSpan);
                 if (rawChildSpan === 0)
                     return;
                 childrenAndRawSpan.push({
@@ -178,7 +181,7 @@ export default defineComponent({
             if (maybeSuffixNode === null || maybeSuffixNode === void 0 ? void 0 : maybeSuffixNode.props) {
                 const suffixPropValue = (_b = maybeSuffixNode.props) === null || _b === void 0 ? void 0 : _b.suffix;
                 if (suffixPropValue !== undefined && suffixPropValue !== false) {
-                    suffixSpan = (_d = (_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span) !== null && _d !== void 0 ? _d : defaultSpan;
+                    suffixSpan = Number((_d = parseResponsivePropValue((_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span, responsiveQuery)) !== null && _d !== void 0 ? _d : defaultSpan);
                     maybeSuffixNode.props.privateSpan = suffixSpan;
                     maybeSuffixNode.props.privateColStart =
                         responsiveCols + 1 - suffixSpan;

package/es/grid/src/GridItem.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { type PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const defaultSpan = 1;
 export declare const gridItemProps: {
@@ -70,5 +70,5 @@ declare const _default: import("vue").DefineComponent<{
     readonly span: string | number;
     readonly suffix: boolean;
     readonly privateShow: boolean;
-}>;
+}, {}>;
 export default _default;

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

@@ -1,11 +1,11 @@
-import { Component, PropType } from 'vue';
+import { type Component, type PropType } from 'vue';
 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 color: StringConstructor;
-    readonly component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -36,7 +36,7 @@ export declare const NIcon: import("vue").DefineComponent<{
     readonly depth: PropType<Depth>;
     readonly size: PropType<string | number>;
     readonly color: StringConstructor;
-    readonly component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -62,7 +62,7 @@ export declare const NIcon: import("vue").DefineComponent<{
         opacity5Depth: string;
     }, any>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     mergedStyle: import("vue").ComputedRef<{
         fontSize: string | undefined;
         color: string | undefined;
@@ -78,7 +78,7 @@ export declare const NIcon: import("vue").DefineComponent<{
     readonly depth: PropType<Depth>;
     readonly size: PropType<string | number>;
     readonly color: StringConstructor;
-    readonly component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
+    readonly component: PropType<Component>;
     readonly theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -103,4 +103,4 @@ export declare const NIcon: import("vue").DefineComponent<{
         opacity4Depth: string;
         opacity5Depth: string;
     }, any>>>;
-}>>, {}>;
+}>>, {}, {}>;

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

@@ -1,4 +1,4 @@
-import { ExtractPublicPropTypes } from '../../_utils';
+import { type ExtractPublicPropTypes } from '../../_utils';
 export declare const iconWrapperProps: {
     readonly size: {
         readonly type: NumberConstructor;
@@ -73,4 +73,4 @@ export declare const NIconWrapper: import("vue").DefineComponent<{
 }>>, {
     readonly size: number;
     readonly borderRadius: number;
-}>;
+}, {}>;

package/es/icon-wrapper/src/IconWrapper.js

@@ -14,8 +14,8 @@ export const NIconWrapper = defineComponent({
     name: 'IconWrapper',
     props: iconWrapperProps,
     setup(props, { slots }) {
-        const themeRef = useTheme('IconWrapper', '-icon-wrapper', style, iconWrapperLight, props);
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const themeRef = useTheme('IconWrapper', '-icon-wrapper', style, iconWrapperLight, props, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { color, iconColor } } = themeRef.value;
             return {

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

@@ -1,10 +1,12 @@
-import { PropType, ImgHTMLAttributes } from 'vue';
+import { type PropType, type ImgHTMLAttributes } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { IntersectionObserverOptions } from './utils';
 export interface ImageInst {
     click: () => void;
 }
 export declare const imageProps: {
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -118,6 +120,8 @@ export declare const imageProps: {
 };
 export type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
 declare const _default: import("vue").DefineComponent<{
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -230,7 +234,7 @@ declare const _default: import("vue").DefineComponent<{
     onLoad: PropType<(e: Event) => void>;
 }, {
     click: () => void;
-    mergedClsPrefix: import("vue").Ref<string> | import("vue").ComputedRef<string>;
+    mergedClsPrefix: import("vue").Ref<string>;
     groupId: string | undefined;
     previewInstRef: import("vue").Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
@@ -245,6 +249,8 @@ declare const _default: import("vue").DefineComponent<{
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -361,5 +367,5 @@ declare const _default: import("vue").DefineComponent<{
     showToolbar: boolean;
     showToolbarTooltip: boolean;
     previewDisabled: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/image/src/Image.js

@@ -44,21 +44,19 @@ export default defineComponent({
             (_a = imageRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('data-group-id', (imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId) || '');
         });
         onMounted(() => {
-            if (isImageSupportNativeLazy) {
-                return;
-            }
-            let unobserve;
-            const stopWatchHandle = watchEffect(() => {
-                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
-                unobserve = undefined;
-                if (props.lazy) {
+            // Use IntersectionObserver if lazy and intersectionObserverOptions is set
+            if (props.lazy && props.intersectionObserverOptions) {
+                let unobserve;
+                const stopWatchHandle = watchEffect(() => {
+                    unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                    unobserve = undefined;
                     unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
-                }
-            });
-            onBeforeUnmount(() => {
-                stopWatchHandle();
-                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
-            });
+                });
+                onBeforeUnmount(() => {
+                    stopWatchHandle();
+                    unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                });
+            }
         });
         watchEffect(() => {
             var _a;
@@ -93,14 +91,14 @@ export default defineComponent({
         var _a, _b;
         const { mergedClsPrefix, imgProps = {}, loaded, $attrs, lazy } = this;
         const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
-        const loadSrc = this.src || imgProps.src || '';
-        const imgNode = h('img', Object.assign(Object.assign({}, imgProps), { ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: isImageSupportNativeLazy
-                ? loadSrc
-                : this.showError
-                    ? this.fallbackSrc
-                    : this.shouldStartLoading
+        const loadSrc = this.src || imgProps.src;
+        const imgNode = h('img', Object.assign(Object.assign({}, imgProps), { ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError
+                ? this.fallbackSrc
+                : lazy && this.intersectionObserverOptions
+                    ? this.shouldStartLoading
                         ? loadSrc
-                        : undefined, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.mergedOnClick, onError: this.mergedOnError, onLoad: this.mergedOnLoad, 
+                        : undefined
+                    : loadSrc, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.mergedOnClick, onError: this.mergedOnError, onLoad: this.mergedOnLoad, 
             // If interseciton observer options is set, do not use native lazy
             loading: isImageSupportNativeLazy && lazy && !this.intersectionObserverOptions
                 ? 'lazy'

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

@@ -1,11 +1,13 @@
-import { Ref } from 'vue';
-import { ExtractPublicPropTypes } from '../../_utils';
+import { type Ref } from 'vue';
+import { type ExtractPublicPropTypes } from '../../_utils';
 import type { ImagePreviewInst } from './ImagePreview';
 export declare const imageGroupInjectionKey: import("vue").InjectionKey<ImagePreviewInst & {
     groupId: string;
     mergedClsPrefixRef: Ref<string>;
 }>;
 export declare const imageGroupProps: {
+    onPreviewPrev: import("vue").PropType<() => void>;
+    onPreviewNext: import("vue").PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -101,6 +103,8 @@ export declare const imageGroupProps: {
 };
 export type ImageGroupProps = ExtractPublicPropTypes<typeof imageGroupProps>;
 declare const _default: import("vue").DefineComponent<{
+    onPreviewPrev: import("vue").PropType<() => void>;
+    onPreviewNext: import("vue").PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -194,7 +198,7 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }>>>;
 }, {
-    mergedClsPrefix: import("vue").ComputedRef<string>;
+    mergedClsPrefix: Ref<string>;
     previewInstRef: Ref<{
         setThumbnailEl: (e: HTMLImageElement | null) => void;
         setPreviewSrc: (src?: string | undefined) => void;
@@ -203,6 +207,8 @@ declare const _default: import("vue").DefineComponent<{
     next: () => void;
     prev: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onPreviewPrev: import("vue").PropType<() => void>;
+    onPreviewNext: import("vue").PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -298,5 +304,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     showToolbar: boolean;
     showToolbarTooltip: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/image/src/ImageGroup.js

@@ -20,6 +20,7 @@ export default defineComponent({
             (_a = previewInstRef.value) === null || _a === void 0 ? void 0 : _a.setPreviewSrc(src);
         };
         function go(step) {
+            var _a, _b;
             if (!(vm === null || vm === void 0 ? void 0 : vm.proxy))
                 return;
             const container = vm.proxy.$el.parentElement;
@@ -34,6 +35,7 @@ export default defineComponent({
             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);
         }
         provide(imageGroupInjectionKey, {
             mergedClsPrefixRef,
@@ -52,8 +54,12 @@ export default defineComponent({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             previewInstRef,
-            next: () => go(1),
-            prev: () => go(-1)
+            next: () => {
+                go(1);
+            },
+            prev: () => {
+                go(-1);
+            }
         };
     },
     render() {

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

@@ -1,4 +1,4 @@
-import { PropType, VNode } from 'vue';
+import { type PropType, type VNode } from 'vue';
 export interface ImagePreviewInst {
     setThumbnailEl: (e: HTMLImageElement | null) => void;
     setPreviewSrc: (src?: string) => void;
@@ -11,6 +11,8 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -113,7 +115,7 @@ declare const _default: import("vue").DefineComponent<{
     show: import("vue").Ref<boolean>;
     appear: Readonly<import("vue").Ref<boolean>>;
     displayed: import("vue").Ref<boolean>;
-    previewedImgProps: import("vue").Ref<import("vue").ImgHTMLAttributes> | undefined;
+    previewedImgProps: import("vue").Ref<import("vue").ImgHTMLAttributes | undefined> | undefined;
     handleWheel(e: WheelEvent): void;
     handlePreviewMousedown: (e: MouseEvent) => void;
     handlePreviewDblclick: (e: MouseEvent) => void;
@@ -122,11 +124,12 @@ declare const _default: import("vue").DefineComponent<{
     handleDragStart: (e: DragEvent) => void;
     zoomIn: () => void;
     zoomOut: () => void;
+    handleDownloadClick: () => void;
     rotateCounterclockwise: () => void;
     rotateClockwise: () => void;
     handleSwitchPrev: () => void;
     handleSwitchNext: () => void;
-    withTooltip: (node: VNode, tooltipKey: "tipPrevious" | "tipNext" | "tipCounterclockwise" | "tipClockwise" | "tipZoomOut" | "tipZoomIn" | "tipClose" | "tipOriginalSize") => VNode;
+    withTooltip: (node: VNode, tooltipKey: "tipPrevious" | "tipNext" | "tipCounterclockwise" | "tipClockwise" | "tipZoomOut" | "tipZoomIn" | "tipDownload" | "tipClose" | "tipOriginalSize") => VNode;
     resizeToOrignalImageSize: () => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
@@ -144,6 +147,8 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         required: true;
     };
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
@@ -239,5 +244,5 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     showToolbar: boolean;
     showToolbarTooltip: boolean;
-}>;
+}, {}>;
 export default _default;

package/es/image/src/ImagePreview.js

@@ -5,12 +5,13 @@ import { LazyTeleport } from 'vueuc';
 import { on, off } from 'evtd';
 import { beforeNextFrameOnce } from 'seemly';
 import { kebabCase } from 'lodash-es';
+import { download } from '../../upload/src/utils';
 import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon, ResizeSmallIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
 import { NTooltip } from '../../tooltip';
 import { imageLight } from '../styles';
-import { prevIcon, nextIcon, closeIcon } from './icons';
+import { prevIcon, nextIcon, closeIcon, downloadIcon } from './icons';
 import { imageContextKey, imagePreviewSharedProps } from './interface';
 import style from './styles/index.cssr';
 const BLEEDING = 32;
@@ -252,6 +253,12 @@ export default defineComponent({
                 derivePreviewStyle();
             }
         }
+        function handleDownloadClick() {
+            const src = previewSrcRef.value;
+            if (src) {
+                download(src, undefined);
+            }
+        }
         function derivePreviewStyle(transition = true) {
             var _a;
             const { value: preview } = previewRef;
@@ -350,6 +357,7 @@ export default defineComponent({
                 e.preventDefault();
             }, zoomIn,
             zoomOut,
+            handleDownloadClick,
             rotateCounterclockwise,
             rotateClockwise,
             handleSwitchPrev,
@@ -398,6 +406,7 @@ export default defineComponent({
                                     }), 'tipOriginalSize'),
                                     withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomOut }, { default: () => h(ZoomOutIcon, null) }), 'tipZoomOut'),
                                     withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.zoomIn }, { default: () => h(ZoomInIcon, null) }), 'tipZoomIn'),
+                                    withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.handleDownloadClick }, { default: () => downloadIcon }), 'tipDownload'),
                                     withTooltip(h(NBaseIcon, { clsPrefix: clsPrefix, onClick: this.toggleShow }, { default: () => closeIcon }), 'tipClose')));
                             }
                         })) : null,

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

@@ -1,3 +1,4 @@
 export declare const prevIcon: JSX.Element;
 export declare const nextIcon: JSX.Element;
 export declare const closeIcon: JSX.Element;
+export declare const downloadIcon: JSX.Element;

package/es/image/src/icons.js

@@ -5,3 +5,5 @@ export const nextIcon = (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "
     h("path", { d: "M13.5 5C13.7455 5 13.9496 5.17688 13.9919 5.41012L14 5.5V14.5C14 14.7761 13.7761 15 13.5 15C13.2545 15 13.0504 14.8231 13.0081 14.5899L13 14.5V5.5C13 5.22386 13.2239 5 13.5 5ZM5.64645 5.14645C5.82001 4.97288 6.08944 4.9536 6.28431 5.08859L6.35355 5.14645L10.8536 9.64645C11.0271 9.82001 11.0464 10.0894 10.9114 10.2843L10.8536 10.3536L6.35355 14.8536C6.15829 15.0488 5.84171 15.0488 5.64645 14.8536C5.47288 14.68 5.4536 14.4106 5.58859 14.2157L5.64645 14.1464L9.79289 10L5.64645 5.85355C5.45118 5.65829 5.45118 5.34171 5.64645 5.14645Z", fill: "currentColor" })));
 export const closeIcon = (h("svg", { viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("path", { d: "M4.089 4.216l.057-.07a.5.5 0 0 1 .638-.057l.07.057L10 9.293l5.146-5.147a.5.5 0 0 1 .638-.057l.07.057a.5.5 0 0 1 .057.638l-.057.07L10.707 10l5.147 5.146a.5.5 0 0 1 .057.638l-.057.07a.5.5 0 0 1-.638.057l-.07-.057L10 10.707l-5.146 5.147a.5.5 0 0 1-.638.057l-.07-.057a.5.5 0 0 1-.057-.638l.057-.07L9.293 10L4.146 4.854a.5.5 0 0 1-.057-.638l.057-.07l-.057.07z", fill: "currentColor" })));
+export const downloadIcon = (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 1024 1024" },
+    h("path", { fill: "currentColor", d: "M505.7 661a8 8 0 0 0 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z" })));

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

@@ -1,4 +1,4 @@
-import { ImgHTMLAttributes, Ref } from 'vue';
+import type { ImgHTMLAttributes, PropType, Ref } from 'vue';
 export interface MoveStrategy {
     moveVerticalDirection: 'verticalTop' | 'verticalBottom';
     moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
@@ -6,12 +6,14 @@ export interface MoveStrategy {
     deltaVertical: number;
 }
 export declare const imagePreviewSharedProps: {
+    onPreviewPrev: PropType<() => void>;
+    onPreviewNext: PropType<() => void>;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
     showToolbarTooltip: BooleanConstructor;
-    theme: import("vue").PropType<import("../../_mixins").Theme<"Image", {
+    theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -40,7 +42,7 @@ export declare const imagePreviewSharedProps: {
             }, 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;
@@ -69,7 +71,7 @@ export declare const imagePreviewSharedProps: {
             }, 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,6 +102,6 @@ export declare const imagePreviewSharedProps: {
     }>>>;
 };
 export interface ImageContext {
-    previewedImgPropsRef: Ref<ImgHTMLAttributes>;
+    previewedImgPropsRef: Ref<ImgHTMLAttributes | undefined>;
 }
 export declare const imageContextKey: import("vue").InjectionKey<ImageContext>;

package/es/image/src/interface.js

@@ -1,4 +1,4 @@
 import { useTheme } from '../../_mixins';
 import { createInjectionKey } from '../../_utils';
-export const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), { showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });
+export const imagePreviewSharedProps = Object.assign(Object.assign({}, useTheme.props), { onPreviewPrev: Function, onPreviewNext: Function, showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });
 export const imageContextKey = createInjectionKey('n-image');

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

@@ -1,4 +1,4 @@
-import { Ref } from 'vue';
+import type { Ref } from 'vue';
 export type IntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
     root?: Element | Document | null | string;
 };

package/es/index.d.ts

@@ -1,5 +1,6 @@
 export { default, install } from './preset';
 export { useOsTheme } from 'vooks';
+export { zindexable } from 'vdirs';
 export { default as create } from './create';
 export * from './locales';
 export * from './components';

package/es/index.js

@@ -1,5 +1,6 @@
 export { default, install } from './preset';
 export { useOsTheme } from 'vooks';
+export { zindexable } from 'vdirs';
 export { default as create } from './create';
 export * from './locales';
 export * from './components';