naive-ui 2.20.2 → 2.21.2

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/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/es/input/src/Input.js

@@ -514,6 +514,11 @@ export default 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;
@@ -580,6 +585,7 @@ export default defineComponent({
             isCompositing: isComposingRef,
             focus,
             blur,
+            select,
             deactivate,
             activate
         };
@@ -695,13 +701,13 @@ export default defineComponent({
                     this.autosize ? (h(VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
                         default: () => (h("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
                     })) : null)) : (h("div", { class: `${mergedClsPrefix}-input__input` },
-                    h("input", Object.assign({}, this.inputProps, { ref: "inputElRef", type: this.type === 'password' &&
+                    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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? (h("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),

package/es/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;
 }