naive-ui 2.20.2 → 2.21.2

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/input/src/Input.d.ts

@@ -646,9 +646,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -793,6 +797,7 @@ declare const _default: import("vue").DefineComponent<{
     isCompositing: import("vue").Ref<boolean>;
     blur: () => void;
     focus: () => void;
+    select: () => void;
     activate: () => void;
     deactivate: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/lib/input/src/Input.js

@@ -519,6 +519,11 @@ exports.default = (0, vue_1.defineComponent)({
                 document.activeElement.blur();
             }
         }
+        function select() {
+            var _a, _b;
+            (_a = textareaElRef.value) === null || _a === void 0 ? void 0 : _a.select();
+            (_b = inputElRef.value) === null || _b === void 0 ? void 0 : _b.select();
+        }
         function activate() {
             if (mergedDisabledRef.value)
                 return;
@@ -585,6 +590,7 @@ exports.default = (0, vue_1.defineComponent)({
             isCompositing: isComposingRef,
             focus,
             blur,
+            select,
             deactivate,
             activate
         };
@@ -700,13 +706,13 @@ exports.default = (0, vue_1.defineComponent)({
                     this.autosize ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
                         default: () => ((0, vue_1.h)("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
                     })) : null)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
-                    (0, vue_1.h)("input", Object.assign({}, this.inputProps, { ref: "inputElRef", type: this.type === 'password' &&
+                    (0, vue_1.h)("input", Object.assign({ type: this.type === 'password' &&
                             this.mergedShowPasswordOn &&
                             this.passwordVisible
                             ? 'text'
-                            : this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
+                            : this.type }, this.inputProps, { ref: "inputElRef", class: `${mergedClsPrefix}-input__input-el`, style: this.textDecorationStyle[0], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[0]
-                            : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, style: this.textDecorationStyle[0], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: (e) => this.handleInput(e, 0), onChange: (e) => this.handleChange(e, 0) })),
+                            : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: (e) => this.handleInput(e, 0), onChange: (e) => this.handleChange(e, 0) })),
                     this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),

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

@@ -9,6 +9,7 @@ export interface InputWrappedRef {
     isCompositing: Ref<boolean>;
     blur: () => void;
     focus: () => void;
+    select: () => void;
     activate: () => void;
     deactivate: () => void;
 }