naive-ui 2.20.3 → 2.21.3

package/lib/global-style/src/GlobalStyle.js

@@ -8,6 +8,8 @@ const lodash_1 = require("lodash");
 exports.default = (0, vue_1.defineComponent)({
     name: 'GlobalStyle',
     setup() {
+        if (typeof document === 'undefined')
+            return; // TODO: inject style for SSR
         const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
         const { body } = document;
         const { style } = body;

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

@@ -1,53 +1,50 @@
-import { PropType } from 'vue';
+import { PropType, ImgHTMLAttributes } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
-interface imgProps {
-    alt?: string;
-    crossorigin?: 'anonymous' | 'use-credentials' | '';
-    decoding?: 'async' | 'auto' | 'sync';
-    height?: number;
-    sizes?: string;
-    src?: string;
-    srcset?: string;
-    usemap?: string;
-    width?: number;
-}
 export interface ImageInst {
     click: () => void;
 }
 declare const imageProps: {
     alt: StringConstructor;
     height: PropType<string | number>;
-    imgProps: PropType<imgProps>;
+    imgProps: PropType<ImgHTMLAttributes>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
+    fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
+    previewDisabled: BooleanConstructor;
+    loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
+    onLoad: PropType<(e: Event) => void>;
 };
 export declare type ImageProps = ExtractPublicPropTypes<typeof imageProps>;
 declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
-    imgProps: PropType<imgProps>;
+    imgProps: PropType<ImgHTMLAttributes>;
     objectFit: {
         type: PropType<"fill" | "none" | "contain" | "cover" | "scale-down">;
         default: string;
     };
     previewSrc: StringConstructor;
+    fallbackSrc: StringConstructor;
     width: PropType<string | number>;
     src: StringConstructor;
     showToolbar: {
         type: BooleanConstructor;
         default: boolean;
     };
+    previewDisabled: BooleanConstructor;
+    loadDescription: StringConstructor;
     onError: PropType<(e: Event) => void>;
+    onLoad: PropType<(e: Event) => void>;
 }, {
     click: () => void;
     mergedClsPrefix: import("vue").Ref<string> | import("vue").ComputedRef<string>;
@@ -58,30 +55,42 @@ declare const _default: import("vue").DefineComponent<{
         toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null>;
-    imgProps: import("vue").Ref<imgProps | undefined>;
+    imgProps: import("vue").Ref<ImgHTMLAttributes | undefined>;
+    showError: import("vue").Ref<boolean>;
+    mergedOnError: (e: Event) => void;
+    mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     alt?: unknown;
     height?: unknown;
     imgProps?: unknown;
     objectFit?: unknown;
     previewSrc?: unknown;
+    fallbackSrc?: unknown;
     width?: unknown;
     src?: unknown;
     showToolbar?: unknown;
+    previewDisabled?: unknown;
+    loadDescription?: unknown;
     onError?: unknown;
+    onLoad?: unknown;
 } & {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    previewDisabled: boolean;
 } & {
     onError?: ((e: Event) => void) | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
+    onLoad?: ((e: Event) => void) | undefined;
     alt?: string | undefined;
     src?: string | undefined;
+    fallbackSrc?: string | undefined;
     previewSrc?: string | undefined;
-    imgProps?: imgProps | undefined;
+    imgProps?: ImgHTMLAttributes | undefined;
+    loadDescription?: string | undefined;
 }>, {
     objectFit: "fill" | "none" | "contain" | "cover" | "scale-down";
     showToolbar: boolean;
+    previewDisabled: boolean;
 }>;
 export default _default;

package/lib/image/src/Image.js

@@ -16,10 +16,14 @@ const imageProps = {
         default: 'fill'
     },
     previewSrc: String,
+    fallbackSrc: String,
     width: [String, Number],
     src: String,
     showToolbar: { type: Boolean, default: true },
-    onError: Function
+    previewDisabled: Boolean,
+    loadDescription: String,
+    onError: Function,
+    onLoad: Function
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'Image',
@@ -27,12 +31,15 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     setup(props) {
         const imageRef = (0, vue_1.ref)(null);
+        const showErrorRef = (0, vue_1.ref)(false);
         const imgPropsRef = (0, vue_1.toRef)(props, 'imgProps');
         const previewInstRef = (0, vue_1.ref)(null);
         const imageGroupHandle = (0, vue_1.inject)(ImageGroup_1.imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || (0, _mixins_1.useConfig)(props);
         const exposedMethods = {
             click: () => {
+                if (props.previewDisabled || showErrorRef.value)
+                    return;
                 const mergedPreviewSrc = props.previewSrc || props.src;
                 if (imageGroupHandle) {
                     imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
@@ -48,15 +55,36 @@ exports.default = (0, vue_1.defineComponent)({
                 previewInst.toggleShow();
             }
         };
+        (0, vue_1.watchEffect)(() => {
+            var _a;
+            void props.src;
+            void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
+            showErrorRef.value = false;
+        });
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef }, exposedMethods);
+            imageRef, imgProps: imgPropsRef, showError: showErrorRef, mergedOnError: (e) => {
+                showErrorRef.value = true;
+                const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
+                onError === null || onError === void 0 ? void 0 : onError(e);
+                imgPropsOnError === null || imgPropsOnError === void 0 ? void 0 : imgPropsOnError(e);
+            }, mergedOnLoad: (e) => {
+                const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
+                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+                imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
+            } }, exposedMethods);
     },
     render() {
         const { mergedClsPrefix, imgProps = {} } = this;
         const imgWrapperNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
             role: 'none',
-            class: `${mergedClsPrefix}-image`
-        }), (0, vue_1.h)("img", Object.assign({}, imgProps, { class: this.groupId, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.onError, style: { objectFit: this.objectFit }, "data-preview-src": this.previewSrc || this.src })));
+            class: [
+                `${mergedClsPrefix}-image`,
+                (this.previewDisabled || this.showError) &&
+                    `${mergedClsPrefix}-image--preview-disabled`
+            ]
+        }), [
+            (0, vue_1.h)("img", Object.assign({}, imgProps, { class: [this.groupId, imgProps.class], ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src }))
+        ]);
         return this.groupId ? (imgWrapperNode) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
             default: () => imgWrapperNode
         }));

package/lib/image/src/ImageGroup.js

@@ -18,7 +18,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         let currentSrc;
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const groupId = (0, seemly_1.createId)();
+        const groupId = `c${(0, seemly_1.createId)()}`;
         const vm = (0, vue_1.getCurrentInstance)();
         const setPreviewSrc = (src) => {
             var _a;
@@ -30,7 +30,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             const container = vm.proxy.$el.parentElement;
             // use dom api since we can't get the correct order before all children are rendered
-            const imgs = container.getElementsByClassName(groupId);
+            const imgs = container.querySelectorAll(`.${groupId}:not([data-error=true])`);
             if (!imgs.length)
                 return;
             const index = Array.from(imgs).findIndex((img) => img.dataset.previewSrc === currentSrc);

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/image/src/styles/index.cssr.js

@@ -69,9 +69,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-
  transition: transform .3s var(--bezier);
  `), (0, cssr_1.cB)('image', `
  display: inline-flex;
- cursor: pointer;
  max-height: 100%;
  max-width: 100%;
- `, [(0, cssr_1.c)('img', `
+ `, [(0, cssr_1.cNotM)('preview-disabled', `
+ cursor: pointer;
+ `), (0, cssr_1.c)('img', `
  border-radius: inherit;
  `)])]);

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
         };

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;
 }

package/lib/input/src/styles/input.cssr.js

@@ -79,6 +79,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  text-decoration-color: var(--text-decoration-color);
  color: var(--text-color);
  caret-color: var(--caret-color);
+ background-color: transparent;
  `, [(0, cssr_1.c)('&::placeholder', {
   color: '#0000'
 })]), (0, cssr_1.cM)('round', [(0, cssr_1.cNotM)('textarea', {
@@ -208,7 +209,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
   border: 'var(--border-focus)',
   boxShadow: 'var(--box-shadow-focus)'
 })]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--border-hover)'
 })])]), (0, cssr_1.cE)('border, state-border', `
  box-sizing: border-box;
  position: absolute;