naive-ui 2.23.1 → 2.23.2

package/es/empty/src/Empty.js

@@ -6,10 +6,10 @@ import { NBaseIcon } from '../../_internal';
 import { emptyLight } from '../styles';
 import style from './styles/index.cssr';
 import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider';
-const emptyProps = Object.assign(Object.assign({}, useTheme.props), { description: {
-        type: String,
-        default: undefined
-    }, showDescription: {
+const emptyProps = Object.assign(Object.assign({}, useTheme.props), { description: String, showDescription: {
+        type: Boolean,
+        default: true
+    }, showIcon: {
         type: Boolean,
         default: true
     }, size: {
@@ -43,12 +43,12 @@ export default defineComponent({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { [createKey('iconSize', size)]: iconSize, [createKey('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
                 return {
-                    '--icon-size': iconSize,
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--icon-color': iconColor,
-                    '--extra-text-color': extraTextColor
+                    '--n-icon-size': iconSize,
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-icon-color': iconColor,
+                    '--n-extra-text-color': extraTextColor
                 };
             })
         };
@@ -56,9 +56,9 @@ export default defineComponent({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return (h("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-empty__icon` }, renderSlot($slots, 'icon', undefined, () => [
+            this.showIcon ? (h("div", { class: `${mergedClsPrefix}-empty__icon` }, renderSlot($slots, 'icon', undefined, () => [
                 h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })
-            ])),
+            ]))) : null,
             this.showDescription ? (h("div", { class: `${mergedClsPrefix}-empty__description` }, renderSlot($slots, 'default', undefined, () => [
                 this.localizedDescription
             ]))) : null,

package/es/empty/src/styles/index.cssr.js

@@ -1,31 +1,32 @@
-import { cB, cE } from '../../../_utils/cssr'; // vars:
-// --font-size
-// --icon-size
-// --icon-color
-// --bezier
-// --text-color
-// --extra-text-color
+import { c, cB, cE } from '../../../_utils/cssr'; // vars:
+// --n-font-size
+// --n-icon-size
+// --n-icon-color
+// --n-bezier
+// --n-text-color
+// --n-extra-text-color
 
 export default cB('empty', `
  display: flex;
  flex-direction: column;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('icon', `
- width: var(--icon-size);
- height: var(--icon-size);
- font-size: var(--icon-size);
- line-height: var(--icon-size);
- color: var(--icon-color);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ font-size: var(--n-icon-size);
+ line-height: var(--n-icon-size);
+ color: var(--n-icon-color);
  transition:
- color .3s var(--bezier);
- `), cE('description', `
+ color .3s var(--n-bezier);
+ `, [c('+', [cE('description', `
  margin-top: 8px;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ `)])]), cE('description', `
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), cE('extra', `
  text-align: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  margin-top: 12px;
- color: var(--extra-text-color);
+ color: var(--n-extra-text-color);
  `)]);

package/es/form/src/FormItem.d.ts

@@ -249,21 +249,21 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--line-height': string;
-        '--blank-height': string;
-        '--label-font-size': string;
-        '--label-text-align': string;
-        '--label-height': string;
-        '--label-padding': string;
-        '--asterisk-color': string;
-        '--label-text-color': string;
-        '--feedback-padding': string;
-        '--feedback-font-size': string;
-        '--feedback-height': string;
-        '--feedback-text-color': string;
-        '--feedback-text-color-warning': string;
-        '--feedback-text-color-error': string;
+        '--n-bezier': string;
+        '--n-line-height': string;
+        '--n-blank-height': string;
+        '--n-label-font-size': string;
+        '--n-label-text-align': string;
+        '--n-label-height': string;
+        '--n-label-padding': string;
+        '--n-asterisk-color': string;
+        '--n-label-text-color': string;
+        '--n-feedback-padding': string;
+        '--n-feedback-font-size': string;
+        '--n-feedback-height': string;
+        '--n-feedback-text-color': string;
+        '--n-feedback-text-color-warning': string;
+        '--n-feedback-text-color-error': string;
     }>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;

package/es/form/src/FormItem.js

@@ -237,21 +237,21 @@ export default defineComponent({
                         mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
                 }
                 const cssVars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--line-height': lineHeight,
-                    '--blank-height': blankHeight,
-                    '--label-font-size': labelFontSize,
-                    '--label-text-align': mergedLabelTextAlign,
-                    '--label-height': labelHeight,
-                    '--label-padding': labelPadding,
-                    '--asterisk-color': asteriskColor,
-                    '--label-text-color': labelTextColor,
-                    '--feedback-padding': feedbackPadding,
-                    '--feedback-font-size': feedbackFontSize,
-                    '--feedback-height': feedbackHeight,
-                    '--feedback-text-color': feedbackTextColor,
-                    '--feedback-text-color-warning': feedbackTextColorWarning,
-                    '--feedback-text-color-error': feedbackTextColorError
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-line-height': lineHeight,
+                    '--n-blank-height': blankHeight,
+                    '--n-label-font-size': labelFontSize,
+                    '--n-label-text-align': mergedLabelTextAlign,
+                    '--n-label-height': labelHeight,
+                    '--n-label-padding': labelPadding,
+                    '--n-asterisk-color': asteriskColor,
+                    '--n-label-text-color': labelTextColor,
+                    '--n-feedback-padding': feedbackPadding,
+                    '--n-feedback-font-size': feedbackFontSize,
+                    '--n-feedback-height': feedbackHeight,
+                    '--n-feedback-text-color': feedbackTextColor,
+                    '--n-feedback-text-color-warning': feedbackTextColorWarning,
+                    '--n-feedback-text-color-error': feedbackTextColorError
                 };
                 return cssVars;
             }) });

package/es/form/src/FormItemCol.d.ts

@@ -277,6 +277,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 0;
     };
 }, {
+    formItemInstRef: import("vue").Ref<{
+        validate: import("./interface").FormItemValidate;
+        restoreValidation: () => void;
+        path?: string | undefined;
+        internalValidate: import("./interface").FormItemInternalValidate;
+    } | null>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/es/form/src/FormItemCol.js

@@ -22,6 +22,7 @@ export default defineComponent({
             }
         };
         return {
+            formItemInstRef,
             validate,
             restoreValidation
         };

package/es/form/src/FormItemGridItem.d.ts

@@ -277,6 +277,12 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
 }, {
+    formItemInstRef: import("vue").Ref<{
+        validate: import("./interface").FormItemValidate;
+        restoreValidation: () => void;
+        path?: string | undefined;
+        internalValidate: import("./interface").FormItemInternalValidate;
+    } | null>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/es/form/src/FormItemGridItem.js

@@ -24,6 +24,7 @@ export default defineComponent({
             }
         };
         return {
+            formItemInstRef,
             validate,
             restoreValidation
         };

package/es/form/src/FormItemRow.d.ts

@@ -288,6 +288,12 @@ declare const _default: import("vue").DefineComponent<{
     alignItems: StringConstructor;
     justifyContent: StringConstructor;
 }, {
+    formItemColInstRef: import("vue").Ref<{
+        validate: import("./interface").FormItemValidate;
+        restoreValidation: () => void;
+        path?: string | undefined;
+        internalValidate: import("./interface").FormItemInternalValidate;
+    } | null>;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/es/form/src/FormItemRow.js

@@ -21,6 +21,7 @@ export default defineComponent({
             }
         };
         return {
+            formItemColInstRef,
             validate,
             restoreValidation
         };

package/es/form/src/styles/form-item.cssr.js

@@ -1,50 +1,50 @@
 import { cB, cE, cM } from '../../../_utils/cssr';
 import fadeDownTranstion from '../../../_styles/transitions/fade-down.cssr'; // vars:
-// --line-height
-// --blank-height
-// --feedback-padding
-// --feedback-font-size
-// --label-font-size-left
-// --label-font-size-top
-// --label-height
-// --label-padding
-// --asterisk-color
-// --label-text-color
-// --bezier
-// --feedback-text-color
-// --feedback-text-color-warning
-// --feedback-text-color-error
-// --label-text-align
-// --label-padding
+// --n-line-height
+// --n-blank-height
+// --n-feedback-padding
+// --n-feedback-font-size
+// --n-label-font-size-left
+// --n-label-font-size-top
+// --n-label-height
+// --n-label-padding
+// --n-asterisk-color
+// --n-label-text-color
+// --n-bezier
+// --n-feedback-text-color
+// --n-feedback-text-color-warning
+// --n-feedback-text-color-error
+// --n-label-text-align
+// --n-label-padding
 
 export default cB('form-item', {
   display: 'grid',
-  lineHeight: 'var(--line-height)'
+  lineHeight: 'var(--n-line-height)'
 }, [cB('form-item-label', `
  grid-area: label;
  align-items: center;
  line-height: 1.25;
- text-align: var(--label-text-align);
- font-size: var(--label-font-size);
- height: var(--label-height);
- padding: var(--label-padding);
- color: var(--label-text-color);
- transition: color .3s var(--bezier);
+ text-align: var(--n-label-text-align);
+ font-size: var(--n-label-font-size);
+ height: var(--n-label-height);
+ padding: var(--n-label-padding);
+ color: var(--n-label-text-color);
+ transition: color .3s var(--n-bezier);
  box-sizing: border-box;
  `, [cE('asterisk', `
- color: var(--asterisk-color);
- transition: color .3s var(--bezier);
+ color: var(--n-asterisk-color);
+ transition: color .3s var(--n-bezier);
  `)]), cB('form-item-blank', {
   gridArea: 'blank',
-  minHeight: 'var(--blank-height)'
+  minHeight: 'var(--n-blank-height)'
 }), cM('left-labelled', `
  grid-template-areas:
  "label blank"
  "label feedback";
  grid-template-columns: auto minmax(0, 1fr);
  `, [cB('form-item-label', `
- height: var(--blank-height);
- line-height: var(--blank-height);
+ height: var(--n-blank-height);
+ line-height: var(--n-blank-height);
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
@@ -54,7 +54,7 @@ export default cB('form-item', {
  "label"
  "blank"
  "feedback";
- grid-template-rows: var(--label-height) 1fr;
+ grid-template-rows: var(--n-label-height) 1fr;
  grid-template-columns: minmax(0, 100%);
  `, [cM('no-label', `
  grid-template-areas:
@@ -64,7 +64,7 @@ export default cB('form-item', {
  `), cB('form-item-label', {
   display: 'flex',
   alignItems: 'flex-end',
-  justifyContent: 'var(--label-text-align)'
+  justifyContent: 'var(--n-label-text-align)'
 })]), cB('form-item-blank', `
  box-sizing: border-box;
  display: flex;
@@ -73,18 +73,18 @@ export default cB('form-item', {
  `), cB('form-item-feedback-wrapper', `
  grid-area: feedback;
  box-sizing: border-box;
- min-height: var(--feedback-height);
- font-size: var(--feedback-font-size);
- padding: var(--feedback-padding);
+ min-height: var(--n-feedback-height);
+ font-size: var(--n-feedback-font-size);
+ padding: var(--n-feedback-padding);
  line-height: 1.25;
  transform-origin: top left;
  `, [cB('form-item-feedback', {
-  transition: 'color .3s var(--bezier)',
-  color: 'var(--feedback-text-color)'
+  transition: 'color .3s var(--n-bezier)',
+  color: 'var(--n-feedback-text-color)'
 }, [cM('warning', {
-  color: 'var(--feedback-text-color-warning)'
+  color: 'var(--n-feedback-text-color-warning)'
 }), cM('error', {
-  color: 'var(--feedback-text-color-error)'
+  color: 'var(--n-feedback-text-color-error)'
 }), fadeDownTranstion({
   fromOffset: '-3px',
   enterDuration: '.3s',

package/es/gradient-text/src/GradientText.d.ts

@@ -115,11 +115,11 @@ declare const _default: import("vue").DefineComponent<{
     styleFontSize: import("vue").ComputedRef<string | number | undefined>;
     styleBgImage: import("vue").ComputedRef<string | undefined>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--rotate': string;
-        '--color-start': string;
-        '--color-end': string;
-        '--font-weight': string;
+        '--n-bezier': string;
+        '--n-rotate': string;
+        '--n-color-start': string;
+        '--n-color-end': string;
+        '--n-font-weight': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly size?: unknown;

package/es/gradient-text/src/GradientText.js

@@ -48,11 +48,11 @@ export default defineComponent({
                 const { value: type } = compatibleTypeRef;
                 const { common: { cubicBezierEaseInOut }, self: { rotate, [createKey('colorStart', type)]: colorStart, [createKey('colorEnd', type)]: colorEnd, fontWeight } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--rotate': rotate,
-                    '--color-start': colorStart,
-                    '--color-end': colorEnd,
-                    '--font-weight': fontWeight
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-rotate': rotate,
+                    '--n-color-start': colorStart,
+                    '--n-color-end': colorEnd,
+                    '--n-font-weight': fontWeight
                 };
             })
         };

package/es/gradient-text/src/styles/index.cssr.js

@@ -1,19 +1,19 @@
 import { cB } from '../../../_utils/cssr'; // vars:
-// --font-weight
-// --rotate
-// --bezier
-// --color-start
-// --color-end
+// --n-font-weight
+// --n-rotate
+// --n-bezier
+// --n-color-start
+// --n-color-end
 
 export default cB('gradient-text', `
  display: inline-block;
- font-weight: var(--font-weight);
+ font-weight: var(--n-font-weight);
  -webkit-background-clip: text;
  background-clip: text;
  color: #0000;
  white-space: nowrap;
- background-image: linear-gradient(var(--rotate), var(--color-start) 0%, var(--color-end) 100%);
+ background-image: linear-gradient(var(--n-rotate), var(--n-color-start) 0%, var(--n-color-end) 100%);
  transition:
- --color-start .3s var(--bezier),
- --color-end .3s var(--bezier);
+ --n-color-start .3s var(--n-bezier),
+ --n-color-end .3s var(--n-bezier);
 `);

package/es/icon/src/Icon.d.ts

@@ -35,13 +35,13 @@ declare const _default: import("vue").DefineComponent<{
         color: string | undefined;
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--opacity': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-opacity': string;
     } | {
-        '--bezier': string;
-        '--color'?: undefined;
-        '--opacity'?: undefined;
+        '--n-bezier': string;
+        '--n-color'?: undefined;
+        '--n-opacity'?: undefined;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     depth?: unknown;

package/es/icon/src/Icon.js

@@ -26,13 +26,13 @@ export default defineComponent({
                 if (depth !== undefined) {
                     const { color, [`opacity${depth}Depth`]: opacity } = self;
                     return {
-                        '--bezier': cubicBezierEaseInOut,
-                        '--color': color,
-                        '--opacity': opacity
+                        '--n-bezier': cubicBezierEaseInOut,
+                        '--n-color': color,
+                        '--n-opacity': opacity
                     };
                 }
                 return {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             })
         };

package/es/icon/src/styles/index.cssr.js

@@ -1,7 +1,7 @@
 import { c, cB, cM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --color
-// --opacity
+// --n-bezier
+// --n-color
+// --n-opacity
 
 export default cB('icon', `
  height: 1em;
@@ -13,12 +13,12 @@ export default cB('icon', `
  fill: currentColor;
  transform: translateZ(0);
 `, [cM('color-transition', {
-  transition: 'color .3s var(--bezier)'
+  transition: 'color .3s var(--n-bezier)'
 }), cM('depth', {
-  color: 'var(--color)'
+  color: 'var(--n-color)'
 }, [c('svg', {
-  opacity: 'var(--opacity)',
-  transition: 'opacity .3s var(--bezier)'
+  opacity: 'var(--n-opacity)',
+  transition: 'opacity .3s var(--n-bezier)'
 })]), c('svg', {
   height: '1em',
   width: '1em'

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

@@ -14,8 +14,8 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--icon-color': string;
+        '--n-bezier': string;
+        '--n-icon-color': string;
     }>;
     setThumbnailEl: (e: HTMLImageElement | null) => void;
     setPreviewSrc: (src?: string | undefined) => void;

package/es/image/src/ImagePreview.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, renderSlot, watch, computed, toRef } from 'vue';
+import { h, defineComponent, Fragment, ref, withDirectives, Transition, vShow, renderSlot, watch, computed, toRef, onBeforeUnmount } from 'vue';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
 import { LazyTeleport } from 'vueuc';
@@ -39,7 +39,7 @@ export default defineComponent({
             const ty = tbox.top + tbox.height / 2;
             style.transformOrigin = `${tx}px ${ty}px`;
         }
-        function handleKeyup(e) {
+        function handleKeydown(e) {
             var _a, _b;
             switch (e.code) {
                 case 'ArrowLeft':
@@ -53,14 +53,15 @@ export default defineComponent({
                     break;
             }
         }
-        if (props.onPrev) {
-            watch(showRef, (value) => {
-                if (value)
-                    on('keyup', document, handleKeyup);
-                else
-                    off('keyup', document, handleKeyup);
-            });
-        }
+        watch(showRef, (value) => {
+            if (value)
+                on('keydown', document, handleKeydown);
+            else
+                off('keydown', document, handleKeydown);
+        });
+        onBeforeUnmount(() => {
+            off('keydown', document, handleKeydown);
+        });
         let startX = 0;
         let startY = 0;
         let offsetX = 0;
@@ -260,8 +261,8 @@ export default defineComponent({
             handleSwitchNext }, exposedMethods), { cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-icon-color': iconColor
                 };
             }) });
     },

package/es/image/src/styles/index.cssr.js

@@ -1,8 +1,8 @@
 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
-// --bezier
+// --n-icon-color
+// --n-bezier
 
 export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('image-preview-container', `
  position: fixed;
@@ -29,8 +29,8 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  bottom: 40px;
  padding: 0 12px;
  background: rgba(0, 0, 0, .35);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
  `, [cB('base-icon', `
@@ -51,7 +51,7 @@ export default c([c('body >', [cB('image-container', 'position: fixed;')]), cB('
  margin: auto;
  max-height: 100vh;
  max-width: 100vw;
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  `), cB('image', `
  display: inline-flex;
  max-height: 100%;