naive-ui 2.21.0 → 2.21.1

package/es/data-table/src/TableParts/Body.js

@@ -35,7 +35,7 @@ function flatten(rowInfos, expandedRowKeys) {
     rowInfos.forEach((rowInfo) => {
         fRows.push(rowInfo);
         const { children } = rowInfo.tmNode;
-        if (children) {
+        if (children && expandedRowKeys.has(rowInfo.key)) {
             traverse(children);
         }
     });
@@ -255,10 +255,6 @@ export default defineComponent({
                 const cordKey = {};
                 const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, showHeader, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
-                const rowIndexToKey = {};
-                paginatedData.forEach(({ tmNode }, rowIndex) => {
-                    rowIndexToKey[rowIndex] = tmNode.key;
-                });
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
                 const mergedPaginationData = hasChildren
@@ -299,7 +295,25 @@ export default defineComponent({
                 const indentStyle = hasChildren
                     ? { width: pxfy(this.indent) }
                     : undefined;
-                const { length: rowCount } = mergedData;
+                // Tile the data of the expanded row
+                const displayedData = [];
+                mergedData.forEach((rowInfo) => {
+                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
+                        displayedData.push(rowInfo, {
+                            isExpandedRow: true,
+                            key: rowInfo.key,
+                            tmNode: rowInfo.tmNode
+                        });
+                    }
+                    else {
+                        displayedData.push(rowInfo);
+                    }
+                });
+                const { length: rowCount } = displayedData;
+                const rowIndexToKey = {};
+                paginatedData.forEach(({ tmNode }, rowIndex) => {
+                    rowIndexToKey[rowIndex] = tmNode.key;
+                });
                 const renderRow = (rowInfo, rowIndex, isVirtual) => {
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
@@ -417,20 +431,6 @@ export default defineComponent({
                     })));
                     return row;
                 };
-                // Tile the data of the expanded row
-                const displayedData = [];
-                mergedData.forEach((rowInfo) => {
-                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
-                        displayedData.push(rowInfo, {
-                            isExpandedRow: true,
-                            key: rowInfo.key,
-                            tmNode: rowInfo.tmNode
-                        });
-                    }
-                    else {
-                        displayedData.push(rowInfo);
-                    }
-                });
                 if (!virtualScroll) {
                     return (h("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, onMouseenter: handleMouseenterTable, style: {
                             tableLayout: this.mergedTableLayout

package/es/dropdown/src/DropdownGroupHeader.js

@@ -33,17 +33,17 @@ export default defineComponent({
         const { rawNode } = this.tmNode;
         return (h("div", { class: `${clsPrefix}-dropdown-option` },
             h("div", { class: `${clsPrefix}-dropdown-option-body ${clsPrefix}-dropdown-option-body--group` },
-                h("div", { "__dropdown-option": true, class: [
+                h("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__prefix`,
                         showIcon && `${clsPrefix}-dropdown-option-body__prefix--show-icon`
                     ] }, render(rawNode.icon)),
-                h("div", { class: `${clsPrefix}-dropdown-option-body__label`, "__dropdown-option": true }, renderLabel
+                h("div", { class: `${clsPrefix}-dropdown-option-body__label`, "data-dropdown-option": true }, renderLabel
                     ? renderLabel(rawNode)
                     : render((_a = rawNode.title) !== null && _a !== void 0 ? _a : rawNode[this.labelField])),
                 h("div", { class: [
                         `${clsPrefix}-dropdown-option-body__suffix`,
                         hasSubmenu &&
                             `${clsPrefix}-dropdown-option-body__suffix--has-submenu`
-                    ], "__dropdown-option": true }))));
+                    ], "data-dropdown-option": true }))));
     }
 });

package/es/dropdown/src/DropdownOption.js

@@ -6,7 +6,8 @@ import { render, useDeferredTrue } from '../../_utils';
 import { NIcon } from '../../icon';
 import NDropdownMenu, { dropdownMenuInjectionKey } from './DropdownMenu';
 import { dropdownInjectionKey } from './Dropdown';
-import { isDropdownOptionRelatedTarget, isSubmenuNode } from './utils';
+import { isSubmenuNode } from './utils';
+import { happensIn } from 'seemly';
 const dropdownOptionInjectionKey = Symbol('dropdown-option');
 export default defineComponent({
     name: 'DropdownOption',
@@ -104,7 +105,7 @@ export default defineComponent({
                 return;
             const { relatedTarget } = e;
             if (relatedTarget &&
-                !isDropdownOptionRelatedTarget(relatedTarget)) {
+                !happensIn({ target: relatedTarget }, 'dropdownOption')) {
                 hoverKeyRef.value = null;
             }
         }
@@ -179,15 +180,15 @@ export default defineComponent({
         };
         return (h("div", { class: `${clsPrefix}-dropdown-option` },
             h('div', mergeProps(builtinProps, props), [
-                h("div", { "__dropdown-option": true, class: [
+                h("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__prefix`,
                         siblingHasIcon &&
                             `${clsPrefix}-dropdown-option-body__prefix--show-icon`
                     ] }, [renderIcon ? renderIcon(rawNode) : render(rawNode.icon)]),
-                h("div", { "__dropdown-option": true, class: `${clsPrefix}-dropdown-option-body__label` }, renderLabel
+                h("div", { "data-dropdown-option": true, class: `${clsPrefix}-dropdown-option-body__label` }, renderLabel
                     ? renderLabel(rawNode)
                     : render((_a = rawNode[this.labelField]) !== null && _a !== void 0 ? _a : rawNode.title)),
-                h("div", { "__dropdown-option": true, class: [
+                h("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__suffix`,
                         siblingHasSubmenu &&
                             `${clsPrefix}-dropdown-option-body__suffix--has-submenu`

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

@@ -3,4 +3,3 @@ export declare function isSubmenuNode(rawNode: DropdownMixedOption, childrenFiel
 export declare function isGroupNode(rawNode: DropdownMixedOption): boolean;
 export declare function isDividerNode(rawNode: DropdownMixedOption): boolean;
 export declare function isRenderNode(rawNode: DropdownMixedOption): rawNode is DropdownRenderOption;
-export declare function isDropdownOptionRelatedTarget(element: HTMLElement): boolean;

package/es/dropdown/src/utils.js

@@ -11,13 +11,3 @@ export function isDividerNode(rawNode) {
 export function isRenderNode(rawNode) {
     return rawNode.type === 'render';
 }
-export function isDropdownOptionRelatedTarget(element) {
-    let currentElement = element;
-    while (currentElement !== null) {
-        if (currentElement.hasAttribute('__dropdown-option')) {
-            return true;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return false;
-}

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

@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     handlePreviewDblclick: () => void;
     syncTransformOrigin: () => void;
     handleAfterLeave: () => void;
+    handleDragStart: (e: Event) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     rotateCounterclockwise: () => void;

package/es/image/src/ImagePreview.js

@@ -65,6 +65,10 @@ export default defineComponent({
         let startY = 0;
         let offsetX = 0;
         let offsetY = 0;
+        let startOffsetX = 0;
+        let startOffsetY = 0;
+        let mouseDownClientX = 0;
+        let mouseDownClientY = 0;
         let dragging = false;
         function handleMouseMove(e) {
             const { clientX, clientY } = e;
@@ -72,12 +76,30 @@ export default defineComponent({
             offsetY = clientY - startY;
             beforeNextFrameOnce(derivePreviewStyle);
         }
+        function getMoveStrategy(opts) {
+            const { mouseUpClientX, mouseUpClientY, mouseDownClientX, mouseDownClientY } = opts;
+            const deltaHorizontal = mouseDownClientX - mouseUpClientX;
+            const deltaVertical = mouseDownClientY - mouseUpClientY;
+            let moveVerticalDirection = null;
+            let moveHorizontalDirection = null;
+            moveVerticalDirection = ('vertical' +
+                (deltaVertical > 0 ? 'Top' : 'Bottom'));
+            moveHorizontalDirection = ('horizontal' +
+                (deltaHorizontal > 0 ? 'Left' : 'Right'));
+            return {
+                moveVerticalDirection,
+                moveHorizontalDirection,
+                deltaHorizontal,
+                deltaVertical
+            };
+        }
         // avoid image move outside viewport
-        function getDerivedOffset() {
+        function getDerivedOffset(moveStrategy) {
             const { value: preview } = previewRef;
             if (!preview)
                 return { offsetX: 0, offsetY: 0 };
             const pbox = preview.getBoundingClientRect();
+            const { moveVerticalDirection, moveHorizontalDirection, deltaHorizontal, deltaVertical } = moveStrategy || {};
             let nextOffsetX = 0;
             let nextOffsetY = 0;
             if (pbox.width <= window.innerWidth) {
@@ -89,6 +111,12 @@ export default defineComponent({
             else if (pbox.right < window.innerWidth) {
                 nextOffsetX = -(pbox.width - window.innerWidth) / 2;
             }
+            else if (moveHorizontalDirection === 'horizontalRight') {
+                nextOffsetX = Math.min((pbox.width - window.innerWidth) / 2, startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
+            else {
+                nextOffsetX = Math.max(-((pbox.width - window.innerWidth) / 2), startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
             if (pbox.height <= window.innerHeight) {
                 nextOffsetY = 0;
             }
@@ -98,16 +126,29 @@ export default defineComponent({
             else if (pbox.bottom < window.innerHeight) {
                 nextOffsetY = -(pbox.height - window.innerHeight) / 2;
             }
+            else if (moveVerticalDirection === 'verticalBottom') {
+                nextOffsetY = Math.min((pbox.height - window.innerHeight) / 2, startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
+            else {
+                nextOffsetY = Math.max(-((pbox.height - window.innerHeight) / 2), startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
             return {
                 offsetX: nextOffsetX,
                 offsetY: nextOffsetY
             };
         }
-        function handleMouseUp() {
+        function handleMouseUp(e) {
             off('mousemove', document, handleMouseMove);
             off('mouseup', document, handleMouseUp);
+            const { clientX: mouseUpClientX, clientY: mouseUpClientY } = e;
             dragging = false;
-            const offset = getDerivedOffset();
+            const moveStrategy = getMoveStrategy({
+                mouseUpClientX,
+                mouseUpClientY,
+                mouseDownClientX,
+                mouseDownClientY
+            });
+            const offset = getDerivedOffset(moveStrategy);
             offsetX = offset.offsetX;
             offsetY = offset.offsetY;
             derivePreviewStyle();
@@ -117,6 +158,10 @@ export default defineComponent({
             dragging = true;
             startX = clientX - offsetX;
             startY = clientY - offsetY;
+            startOffsetX = offsetX;
+            startOffsetY = offsetY;
+            mouseDownClientX = clientX;
+            mouseDownClientY = clientY;
             derivePreviewStyle();
             on('mousemove', document, handleMouseMove);
             on('mouseup', document, handleMouseUp);
@@ -205,6 +250,8 @@ export default defineComponent({
                 rotate = 0;
                 scale = 1;
                 displayedRef.value = false;
+            }, handleDragStart: (e) => {
+                e.preventDefault();
             }, zoomIn,
             zoomOut,
             rotateCounterclockwise,
@@ -247,7 +294,7 @@ export default defineComponent({
                             // Maybe it is a bug of vue
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
                             default: () => withDirectives(h("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
-                                h("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef" })), [[vShow, this.show]])
+                                h("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart })), [[vShow, this.show]])
                         })), [[zindexable, { enabled: this.show }]])
                     : null
             })));

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

@@ -0,0 +1,6 @@
+export interface MoveStrategy {
+    moveVerticalDirection: 'verticalTop' | 'verticalBottom';
+    moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
+    deltaHorizontal: number;
+    deltaVertical: number;
+}

package/es/image/src/interface.js

@@ -0,0 +1 @@
+export {};

package/es/modal/src/Modal.d.ts

@@ -1796,7 +1796,7 @@ declare const _default: import("vue").DefineComponent<{
     isMounted: Readonly<import("vue").Ref<boolean>>;
     containerRef: import("vue").Ref<HTMLElement | null>;
     presetProps: import("vue").ComputedRef<Pick<Readonly<{
-        [x: string & `on${string}`]: undefined;
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         type: "default" | "error" | "info" | "success" | "warning";
         content: string | (() => import("vue").VNodeChild) | undefined;
         size: "small" | "medium" | "large" | "huge";

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.21.0";
+declare const _default: "2.21.1";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.21.0';
+export default '2.21.1';

package/lib/data-table/src/TableParts/Body.js

@@ -40,7 +40,7 @@ function flatten(rowInfos, expandedRowKeys) {
     rowInfos.forEach((rowInfo) => {
         fRows.push(rowInfo);
         const { children } = rowInfo.tmNode;
-        if (children) {
+        if (children && expandedRowKeys.has(rowInfo.key)) {
             traverse(children);
         }
     });
@@ -260,10 +260,6 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordKey = {};
                 const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, showHeader, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
-                const rowIndexToKey = {};
-                paginatedData.forEach(({ tmNode }, rowIndex) => {
-                    rowIndexToKey[rowIndex] = tmNode.key;
-                });
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
                 const mergedPaginationData = hasChildren
@@ -304,7 +300,25 @@ exports.default = (0, vue_1.defineComponent)({
                 const indentStyle = hasChildren
                     ? { width: (0, seemly_1.pxfy)(this.indent) }
                     : undefined;
-                const { length: rowCount } = mergedData;
+                // Tile the data of the expanded row
+                const displayedData = [];
+                mergedData.forEach((rowInfo) => {
+                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
+                        displayedData.push(rowInfo, {
+                            isExpandedRow: true,
+                            key: rowInfo.key,
+                            tmNode: rowInfo.tmNode
+                        });
+                    }
+                    else {
+                        displayedData.push(rowInfo);
+                    }
+                });
+                const { length: rowCount } = displayedData;
+                const rowIndexToKey = {};
+                paginatedData.forEach(({ tmNode }, rowIndex) => {
+                    rowIndexToKey[rowIndex] = tmNode.key;
+                });
                 const renderRow = (rowInfo, rowIndex, isVirtual) => {
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
@@ -422,20 +436,6 @@ exports.default = (0, vue_1.defineComponent)({
                     })));
                     return row;
                 };
-                // Tile the data of the expanded row
-                const displayedData = [];
-                mergedData.forEach((rowInfo) => {
-                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
-                        displayedData.push(rowInfo, {
-                            isExpandedRow: true,
-                            key: rowInfo.key,
-                            tmNode: rowInfo.tmNode
-                        });
-                    }
-                    else {
-                        displayedData.push(rowInfo);
-                    }
-                });
                 if (!virtualScroll) {
                     return ((0, vue_1.h)("table", { class: `${mergedClsPrefix}-data-table-table`, onMouseleave: handleMouseleaveTable, onMouseenter: handleMouseenterTable, style: {
                             tableLayout: this.mergedTableLayout

package/lib/dropdown/src/DropdownGroupHeader.js

@@ -35,17 +35,17 @@ exports.default = (0, vue_1.defineComponent)({
         const { rawNode } = this.tmNode;
         return ((0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-option` },
             (0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-option-body ${clsPrefix}-dropdown-option-body--group` },
-                (0, vue_1.h)("div", { "__dropdown-option": true, class: [
+                (0, vue_1.h)("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__prefix`,
                         showIcon && `${clsPrefix}-dropdown-option-body__prefix--show-icon`
                     ] }, (0, _utils_1.render)(rawNode.icon)),
-                (0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-option-body__label`, "__dropdown-option": true }, renderLabel
+                (0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-option-body__label`, "data-dropdown-option": true }, renderLabel
                     ? renderLabel(rawNode)
                     : (0, _utils_1.render)((_a = rawNode.title) !== null && _a !== void 0 ? _a : rawNode[this.labelField])),
                 (0, vue_1.h)("div", { class: [
                         `${clsPrefix}-dropdown-option-body__suffix`,
                         hasSubmenu &&
                             `${clsPrefix}-dropdown-option-body__suffix--has-submenu`
-                    ], "__dropdown-option": true }))));
+                    ], "data-dropdown-option": true }))));
     }
 });

package/lib/dropdown/src/DropdownOption.js

@@ -28,6 +28,7 @@ const icon_1 = require("../../icon");
 const DropdownMenu_1 = __importStar(require("./DropdownMenu"));
 const Dropdown_1 = require("./Dropdown");
 const utils_1 = require("./utils");
+const seemly_1 = require("seemly");
 const dropdownOptionInjectionKey = Symbol('dropdown-option');
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownOption',
@@ -125,7 +126,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             const { relatedTarget } = e;
             if (relatedTarget &&
-                !(0, utils_1.isDropdownOptionRelatedTarget)(relatedTarget)) {
+                !(0, seemly_1.happensIn)({ target: relatedTarget }, 'dropdownOption')) {
                 hoverKeyRef.value = null;
             }
         }
@@ -200,15 +201,15 @@ exports.default = (0, vue_1.defineComponent)({
         };
         return ((0, vue_1.h)("div", { class: `${clsPrefix}-dropdown-option` },
             (0, vue_1.h)('div', (0, vue_1.mergeProps)(builtinProps, props), [
-                (0, vue_1.h)("div", { "__dropdown-option": true, class: [
+                (0, vue_1.h)("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__prefix`,
                         siblingHasIcon &&
                             `${clsPrefix}-dropdown-option-body__prefix--show-icon`
                     ] }, [renderIcon ? renderIcon(rawNode) : (0, _utils_1.render)(rawNode.icon)]),
-                (0, vue_1.h)("div", { "__dropdown-option": true, class: `${clsPrefix}-dropdown-option-body__label` }, renderLabel
+                (0, vue_1.h)("div", { "data-dropdown-option": true, class: `${clsPrefix}-dropdown-option-body__label` }, renderLabel
                     ? renderLabel(rawNode)
                     : (0, _utils_1.render)((_a = rawNode[this.labelField]) !== null && _a !== void 0 ? _a : rawNode.title)),
-                (0, vue_1.h)("div", { "__dropdown-option": true, class: [
+                (0, vue_1.h)("div", { "data-dropdown-option": true, class: [
                         `${clsPrefix}-dropdown-option-body__suffix`,
                         siblingHasSubmenu &&
                             `${clsPrefix}-dropdown-option-body__suffix--has-submenu`

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

@@ -3,4 +3,3 @@ export declare function isSubmenuNode(rawNode: DropdownMixedOption, childrenFiel
 export declare function isGroupNode(rawNode: DropdownMixedOption): boolean;
 export declare function isDividerNode(rawNode: DropdownMixedOption): boolean;
 export declare function isRenderNode(rawNode: DropdownMixedOption): rawNode is DropdownRenderOption;
-export declare function isDropdownOptionRelatedTarget(element: HTMLElement): boolean;

package/lib/dropdown/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDropdownOptionRelatedTarget = exports.isRenderNode = exports.isDividerNode = exports.isGroupNode = exports.isSubmenuNode = void 0;
+exports.isRenderNode = exports.isDividerNode = exports.isGroupNode = exports.isSubmenuNode = void 0;
 function isSubmenuNode(rawNode, childrenField) {
     return (rawNode.type === 'submenu' ||
         (rawNode.type === undefined && rawNode[childrenField] !== undefined));
@@ -18,14 +18,3 @@ function isRenderNode(rawNode) {
     return rawNode.type === 'render';
 }
 exports.isRenderNode = isRenderNode;
-function isDropdownOptionRelatedTarget(element) {
-    let currentElement = element;
-    while (currentElement !== null) {
-        if (currentElement.hasAttribute('__dropdown-option')) {
-            return true;
-        }
-        currentElement = currentElement.parentElement;
-    }
-    return false;
-}
-exports.isDropdownOptionRelatedTarget = isDropdownOptionRelatedTarget;

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

@@ -30,6 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     handlePreviewDblclick: () => void;
     syncTransformOrigin: () => void;
     handleAfterLeave: () => void;
+    handleDragStart: (e: Event) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     rotateCounterclockwise: () => void;

package/lib/image/src/ImagePreview.js

@@ -70,6 +70,10 @@ exports.default = (0, vue_1.defineComponent)({
         let startY = 0;
         let offsetX = 0;
         let offsetY = 0;
+        let startOffsetX = 0;
+        let startOffsetY = 0;
+        let mouseDownClientX = 0;
+        let mouseDownClientY = 0;
         let dragging = false;
         function handleMouseMove(e) {
             const { clientX, clientY } = e;
@@ -77,12 +81,30 @@ exports.default = (0, vue_1.defineComponent)({
             offsetY = clientY - startY;
             (0, seemly_1.beforeNextFrameOnce)(derivePreviewStyle);
         }
+        function getMoveStrategy(opts) {
+            const { mouseUpClientX, mouseUpClientY, mouseDownClientX, mouseDownClientY } = opts;
+            const deltaHorizontal = mouseDownClientX - mouseUpClientX;
+            const deltaVertical = mouseDownClientY - mouseUpClientY;
+            let moveVerticalDirection = null;
+            let moveHorizontalDirection = null;
+            moveVerticalDirection = ('vertical' +
+                (deltaVertical > 0 ? 'Top' : 'Bottom'));
+            moveHorizontalDirection = ('horizontal' +
+                (deltaHorizontal > 0 ? 'Left' : 'Right'));
+            return {
+                moveVerticalDirection,
+                moveHorizontalDirection,
+                deltaHorizontal,
+                deltaVertical
+            };
+        }
         // avoid image move outside viewport
-        function getDerivedOffset() {
+        function getDerivedOffset(moveStrategy) {
             const { value: preview } = previewRef;
             if (!preview)
                 return { offsetX: 0, offsetY: 0 };
             const pbox = preview.getBoundingClientRect();
+            const { moveVerticalDirection, moveHorizontalDirection, deltaHorizontal, deltaVertical } = moveStrategy || {};
             let nextOffsetX = 0;
             let nextOffsetY = 0;
             if (pbox.width <= window.innerWidth) {
@@ -94,6 +116,12 @@ exports.default = (0, vue_1.defineComponent)({
             else if (pbox.right < window.innerWidth) {
                 nextOffsetX = -(pbox.width - window.innerWidth) / 2;
             }
+            else if (moveHorizontalDirection === 'horizontalRight') {
+                nextOffsetX = Math.min((pbox.width - window.innerWidth) / 2, startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
+            else {
+                nextOffsetX = Math.max(-((pbox.width - window.innerWidth) / 2), startOffsetX - (deltaHorizontal !== null && deltaHorizontal !== void 0 ? deltaHorizontal : 0));
+            }
             if (pbox.height <= window.innerHeight) {
                 nextOffsetY = 0;
             }
@@ -103,16 +131,29 @@ exports.default = (0, vue_1.defineComponent)({
             else if (pbox.bottom < window.innerHeight) {
                 nextOffsetY = -(pbox.height - window.innerHeight) / 2;
             }
+            else if (moveVerticalDirection === 'verticalBottom') {
+                nextOffsetY = Math.min((pbox.height - window.innerHeight) / 2, startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
+            else {
+                nextOffsetY = Math.max(-((pbox.height - window.innerHeight) / 2), startOffsetY - (deltaVertical !== null && deltaVertical !== void 0 ? deltaVertical : 0));
+            }
             return {
                 offsetX: nextOffsetX,
                 offsetY: nextOffsetY
             };
         }
-        function handleMouseUp() {
+        function handleMouseUp(e) {
             (0, evtd_1.off)('mousemove', document, handleMouseMove);
             (0, evtd_1.off)('mouseup', document, handleMouseUp);
+            const { clientX: mouseUpClientX, clientY: mouseUpClientY } = e;
             dragging = false;
-            const offset = getDerivedOffset();
+            const moveStrategy = getMoveStrategy({
+                mouseUpClientX,
+                mouseUpClientY,
+                mouseDownClientX,
+                mouseDownClientY
+            });
+            const offset = getDerivedOffset(moveStrategy);
             offsetX = offset.offsetX;
             offsetY = offset.offsetY;
             derivePreviewStyle();
@@ -122,6 +163,10 @@ exports.default = (0, vue_1.defineComponent)({
             dragging = true;
             startX = clientX - offsetX;
             startY = clientY - offsetY;
+            startOffsetX = offsetX;
+            startOffsetY = offsetY;
+            mouseDownClientX = clientX;
+            mouseDownClientY = clientY;
             derivePreviewStyle();
             (0, evtd_1.on)('mousemove', document, handleMouseMove);
             (0, evtd_1.on)('mouseup', document, handleMouseUp);
@@ -210,6 +255,8 @@ exports.default = (0, vue_1.defineComponent)({
                 rotate = 0;
                 scale = 1;
                 displayedRef.value = false;
+            }, handleDragStart: (e) => {
+                e.preventDefault();
             }, zoomIn,
             zoomOut,
             rotateCounterclockwise,
@@ -252,7 +299,7 @@ exports.default = (0, vue_1.defineComponent)({
                             // Maybe it is a bug of vue
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
                             default: () => (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
-                                (0, vue_1.h)("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef" })), [[vue_1.vShow, this.show]])
+                                (0, vue_1.h)("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart })), [[vue_1.vShow, this.show]])
                         })), [[vdirs_1.zindexable, { enabled: this.show }]])
                     : null
             })));

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

@@ -0,0 +1,6 @@
+export interface MoveStrategy {
+    moveVerticalDirection: 'verticalTop' | 'verticalBottom';
+    moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
+    deltaHorizontal: number;
+    deltaVertical: number;
+}

package/lib/image/src/interface.js

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

package/lib/modal/src/Modal.d.ts

@@ -1796,7 +1796,7 @@ declare const _default: import("vue").DefineComponent<{
     isMounted: Readonly<import("vue").Ref<boolean>>;
     containerRef: import("vue").Ref<HTMLElement | null>;
     presetProps: import("vue").ComputedRef<Pick<Readonly<{
-        [x: string & `on${string}`]: undefined;
+        [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         type: "default" | "error" | "info" | "success" | "warning";
         content: string | (() => import("vue").VNodeChild) | undefined;
         size: "small" | "medium" | "large" | "huge";

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.21.0";
+declare const _default: "2.21.1";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.21.0';
+exports.default = '2.21.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -79,7 +79,7 @@
     "@vue/eslint-config-standard": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/server-renderer": "^3.2.18",
-    "@vue/test-utils": "^2.0.0-rc.9",
+    "@vue/test-utils": "2.0.0-rc.16",
     "autoprefixer": "^10.2.6",
     "babel-jest": "^27.0.2",
     "codesandbox": "^2.2.3",
@@ -100,7 +100,7 @@
     "inquirer": "^8.1.0",
     "jest": "^27.0.4",
     "jest-canvas-mock": "^2.3.1",
-    "lint-staged": "^12.0.3",
+    "lint-staged": "^11.2.6",
     "marked": "^4.0.4",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
@@ -128,7 +128,7 @@
     "highlight.js": "^11.0.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
-    "seemly": "^0.3.2",
+    "seemly": "^0.3.3",
     "treemate": "^0.3.8",
     "vdirs": "^0.1.4",
     "vfonts": "^0.1.0",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "naive-ui",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "contributions": {
     "html": {
       "tags": [