naive-ui 2.20.3 → 2.21.3

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

@@ -6,6 +6,8 @@ import { merge } from 'lodash-es';
 export default defineComponent({
     name: 'GlobalStyle',
     setup() {
+        if (typeof document === 'undefined')
+            return; // TODO: inject style for SSR
         const NConfigProvider = inject(configProviderInjectionKey, null);
         const { body } = document;
         const { style } = body;

package/es/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/es/image/src/Image.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, ref, toRef, mergeProps } from 'vue';
+import { defineComponent, h, inject, ref, toRef, mergeProps, watchEffect } from 'vue';
 import NImagePreview from './ImagePreview';
 import { imageGroupInjectionKey } from './ImageGroup';
 import { useConfig } from '../../_mixins';
@@ -11,10 +11,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
 };
 export default defineComponent({
     name: 'Image',
@@ -22,12 +26,15 @@ export default defineComponent({
     inheritAttrs: false,
     setup(props) {
         const imageRef = ref(null);
+        const showErrorRef = ref(false);
         const imgPropsRef = toRef(props, 'imgProps');
         const previewInstRef = ref(null);
         const imageGroupHandle = inject(imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || useConfig(props);
         const exposedMethods = {
             click: () => {
+                if (props.previewDisabled || showErrorRef.value)
+                    return;
                 const mergedPreviewSrc = props.previewSrc || props.src;
                 if (imageGroupHandle) {
                     imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
@@ -43,15 +50,36 @@ export default defineComponent({
                 previewInst.toggleShow();
             }
         };
+        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 = h('div', mergeProps(this.$attrs, {
             role: 'none',
-            class: `${mergedClsPrefix}-image`
-        }), 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`
+            ]
+        }), [
+            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) : (h(NImagePreview, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
             default: () => imgWrapperNode
         }));

package/es/image/src/ImageGroup.js

@@ -12,7 +12,7 @@ export default defineComponent({
     setup(props) {
         let currentSrc;
         const { mergedClsPrefixRef } = useConfig(props);
-        const groupId = createId();
+        const groupId = `c${createId()}`;
         const vm = getCurrentInstance();
         const setPreviewSrc = (src) => {
             var _a;
@@ -24,7 +24,7 @@ export default 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/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/image/src/styles/index.cssr.js

@@ -1,4 +1,4 @@
-import { c, cB } from '../../../_utils/cssr';
+import { c, cB, cNotM } from '../../../_utils/cssr';
 import fadeInTransition from '../../../_styles/transitions/fade-in.cssr';
 import fadeInzoomInTransiton from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
 // --icon-color
@@ -54,9 +54,10 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  transition: transform .3s var(--bezier);
  `), cB('image', `
  display: inline-flex;
- cursor: pointer;
  max-height: 100%;
  max-width: 100%;
- `, [c('img', `
+ `, [cNotM('preview-disabled', `
+ cursor: pointer;
+ `), c('img', `
  border-radius: inherit;
  `)])]);

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

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

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

@@ -72,6 +72,7 @@ cE('input, textarea', `
  text-decoration-color: var(--text-decoration-color);
  color: var(--text-color);
  caret-color: var(--caret-color);
+ background-color: transparent;
  `, [c('&::placeholder', {
   color: '#0000'
 })]), cM('round', [cNotM('textarea', {
@@ -201,7 +202,7 @@ cM('pair', [cE('input-el, placeholder', {
   border: 'var(--border-focus)',
   boxShadow: 'var(--box-shadow-focus)'
 })]), c('&:hover', [cE('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--border-hover)'
 })])]), cE('border, state-border', `
  box-sizing: border-box;
  position: absolute;