naive-ui 2.21.5 → 2.22.0

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

@@ -1,49 +1,50 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
 import fadeInWidthExpandTransition from '../../../_styles/transitions/fade-in-width-expand.cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr'; // vars:
-// --bezier
-// --ripple-duration
-// --opacity-disabled
-// --text-color
-// --text-color-hover
-// --text-color-pressed
-// --text-color-focus
-// --text-color-disabled
-// --color
-// --color-hover
-// --color-pressed
-// --color-focus
-// --color-disabled
-// --border
-// --border-hover
-// --border-pressed
-// --border-focus
-// --border-disabled
-// --ripple-color
-// --border-radius
-// --height
-// --width
-// --font-size
-// --padding
-// --icon-size
-// --icon-margin
-// --wave-opacity
-// --font-weight
+// --n-bezier
+// --n-bezier-ease-out
+// --n-ripple-duration
+// --n-opacity-disabled
+// --n-text-color
+// --n-text-color-hover
+// --n-text-color-pressed
+// --n-text-color-focus
+// --n-text-color-disabled
+// --n-color
+// --n-color-hover
+// --n-color-pressed
+// --n-color-focus
+// --n-color-disabled
+// --n-border
+// --n-border-hover
+// --n-border-pressed
+// --n-border-focus
+// --n-border-disabled
+// --n-ripple-color
+// --n-border-radius
+// --n-height
+// --n-width
+// --n-font-size
+// --n-padding
+// --n-icon-size
+// --n-icon-margin
+// --n-wave-opacity
+// --n-font-weight
 //
 // private-vars:
-// --border-color-xxx, used for custom color
+// --n-border-color-xxx, used for custom color
 
 export default c([cB('button', `
- font-weight: var(--font-weight);
+ font-weight: var(--n-font-weight);
  line-height: 1;
  font-family: inherit;
- padding: var(--padding);
- height: var(--height);
- font-size: var(--font-size);
- border-radius: var(--border-radius);
- color: var(--text-color);
- background-color: var(--color);
- width: var(--width);
+ padding: var(--n-padding);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ border-radius: var(--n-border-radius);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
+ width: var(--n-width);
  white-space: nowrap;
  outline: none;
  position: relative;
@@ -59,56 +60,58 @@ export default c([cB('button', `
  cursor: pointer;
  text-decoration: none;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [cM('color', [cE('border', {
-  borderColor: 'var(--border-color)'
+  borderColor: 'var(--n-border-color)'
 }), cM('disabled', [cE('border', {
-  borderColor: 'var(--border-color-disabled)'
+  borderColor: 'var(--n-border-color-disabled)'
 })]), cNotM('disabled', [c('&:focus', [cE('state-border', {
-  borderColor: 'var(--border-color-focus)'
+  borderColor: 'var(--n-border-color-focus)'
 })]), c('&:hover', [cE('state-border', {
-  borderColor: 'var(--border-color-hover)'
+  borderColor: 'var(--n-border-color-hover)'
 })]), c('&:active', [cE('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })]), cM('pressed', [cE('state-border', {
-  borderColor: 'var(--border-color-pressed)'
+  borderColor: 'var(--n-border-color-pressed)'
 })])])]), cM('disabled', {
-  backgroundColor: 'var(--color-disabled)',
-  color: 'var(--text-color-disabled)'
+  backgroundColor: 'var(--n-color-disabled)',
+  color: 'var(--n-text-color-disabled)'
 }, [cE('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 })]), cNotM('disabled', [c('&:focus', {
-  backgroundColor: 'var(--color-focus)',
-  color: 'var(--text-color-focus)'
+  backgroundColor: 'var(--n-color-focus)',
+  color: 'var(--n-text-color-focus)'
 }, [cE('state-border', {
-  border: 'var(--border-focus)'
+  border: 'var(--n-border-focus)'
 })]), c('&:hover', {
-  backgroundColor: 'var(--color-hover)',
-  color: 'var(--text-color-hover)'
+  backgroundColor: 'var(--n-color-hover)',
+  color: 'var(--n-text-color-hover)'
 }, [cE('state-border', {
-  border: 'var(--border-hover)'
+  border: 'var(--n-border-hover)'
 })]), c('&:active', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [cE('state-border', {
-  border: 'var(--border-pressed)'
+  border: 'var(--n-border-pressed)'
 })]), cM('pressed', {
-  backgroundColor: 'var(--color-pressed)',
-  color: 'var(--text-color-pressed)'
+  backgroundColor: 'var(--n-color-pressed)',
+  color: 'var(--n-text-color-pressed)'
 }, [cE('state-border', {
-  border: 'var(--border-pressed)'
-})])]), cB('base-wave', `
+  border: 'var(--n-border-pressed)'
+})])]), cM('loading', {
+  'pointer-events': 'none'
+}), cB('base-wave', `
  pointer-events: none;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation-iteration-count: 1;
- animation-duration: var(--ripple-duration);
- animation-timing-function: var(--bezier-ease-out), var(--bezier-ease-out);
+ animation-duration: var(--n-ripple-duration);
+ animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
  `, [cM('active', {
   zIndex: 1,
   animationName: 'button-wave-spread, button-wave-opacity'
@@ -121,26 +124,26 @@ export default c([cB('button', `
  right: 0;
  bottom: 0;
  border-radius: inherit;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  pointer-events: none;
  `), cE('border', {
-  border: 'var(--border)'
+  border: 'var(--n-border)'
 }), cE('state-border', {
-  border: 'var(--border)',
+  border: 'var(--n-border)',
   borderColor: '#0000',
   zIndex: 1
 }), cE('icon', `
- margin: var(--icon-margin);
+ margin: var(--n-icon-margin);
  margin-left: 0;
- height: var(--icon-size);
- width: var(--icon-size);
- max-width: var(--icon-size);
- font-size: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
+ max-width: var(--n-icon-size);
+ font-size: var(--n-icon-size);
  position: relative;
  flex-shrink: 0;
  `, [cB('icon-slot', `
- height: var(--icon-size);
- width: var(--icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  position: absolute;
  left: 0;
  top: 50%;
@@ -154,7 +157,7 @@ export default c([cB('button', `
  align-items: center;
  flex-wrap: nowrap;
  `, [c('~', [cE('icon', {
-  margin: 'var(--icon-margin)',
+  margin: 'var(--n-icon-margin)',
   marginRight: 0
 })])]), cM('block', `
  display: flex;
@@ -163,18 +166,18 @@ export default c([cB('button', `
   borderStyle: 'dashed !important'
 })]), cM('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--opacity-disabled)'
+  opacity: 'var(--n-opacity-disabled)'
 })]), c('@keyframes button-wave-spread', {
   from: {
-    boxShadow: '0 0 0.5px 0 var(--ripple-color)'
+    boxShadow: '0 0 0.5px 0 var(--n-ripple-color)'
   },
   to: {
     // don't use exact 5px since chrome will display the animation with glitches
-    boxShadow: '0 0 0.5px 4.5px var(--ripple-color)'
+    boxShadow: '0 0 0.5px 4.5px var(--n-ripple-color)'
   }
 }), c('@keyframes button-wave-opacity', {
   from: {
-    opacity: 'var(--wave-opacity)'
+    opacity: 'var(--n-wave-opacity)'
   },
   to: {
     opacity: 0

package/es/button/styles/light.js

@@ -7,7 +7,7 @@ export const self = (vars) => {
         heightMedium,
         heightLarge, borderRadiusTiny: borderRadius, borderRadiusSmall: borderRadius, borderRadiusMedium: borderRadius, borderRadiusLarge: borderRadius, fontSizeTiny: fontSizeTiny, fontSizeSmall: fontSizeSmall, fontSizeMedium: fontSizeMedium, fontSizeLarge: fontSizeLarge, opacityDisabled: opacityDisabled, 
         // secondary
-        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.2', colorOpacitySecondaryPressed: '0.24', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
+        colorOpacitySecondary: '0.16', colorOpacitySecondaryHover: '0.22', colorOpacitySecondaryPressed: '0.28', colorSecondary: buttonColor2, colorSecondaryHover: buttonColor2Hover, colorSecondaryPressed: buttonColor2Pressed, 
         // tertiary
         colorTertiary: buttonColor2, colorTertiaryHover: buttonColor2Hover, colorTertiaryPressed: buttonColor2Pressed, 
         // quaternary

package/es/calendar/src/Calendar.d.ts

@@ -1393,6 +1393,7 @@ declare const _default: import("vue").DefineComponent<{
         monthTypeFormat: string;
         dateFormat: string;
         dateTimeFormat: string;
+        quarterFormat: string;
         clear: string;
         now: string;
         confirm: string;
@@ -1402,6 +1403,7 @@ declare const _default: import("vue").DefineComponent<{
         datetimePlaceholder: string;
         monthPlaceholder: string;
         yearPlaceholder: string;
+        quarterPlaceholder: string;
         startDatePlaceholder: string;
         endDatePlaceholder: string;
         startDatetimePlaceholder: string;

package/es/cascader/src/Cascader.d.ts

@@ -254,6 +254,19 @@ declare const cascaderProps: {
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -424,6 +437,19 @@ declare const cascaderProps: {
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -594,6 +620,19 @@ declare const cascaderProps: {
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>>;
 };
 export declare type CascaderProps = ExtractPublicPropTypes<typeof cascaderProps>;
@@ -847,6 +886,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -1017,6 +1069,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -1187,6 +1252,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>>>;
 }, {
     selectMenuFollowerRef: import("vue").Ref<{
@@ -1520,6 +1598,19 @@ declare const _default: import("vue").DefineComponent<{
                 sizeLarge: string;
                 labelPadding: string;
             }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
         };
         peerOverrides: {
             InternalSelectMenu?: {
@@ -1571,6 +1662,11 @@ declare const _default: import("vue").DefineComponent<{
                     [x: string]: any;
                 } | undefined;
             } | undefined;
+            Empty?: {
+                peers?: {
+                    [x: string]: any;
+                } | undefined;
+            } | undefined;
         };
     }>;
     cssVars: import("vue").ComputedRef<{
@@ -1827,6 +1923,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -1997,6 +2106,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -2167,6 +2289,19 @@ declare const _default: import("vue").DefineComponent<{
             sizeLarge: string;
             labelPadding: string;
         }, any>;
+        Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeSmall: string;
+            fontSizeMedium: string;
+            fontSizeLarge: string;
+            fontSizeHuge: string;
+            textColor: string;
+            iconColor: string;
+            extraTextColor: string;
+            iconSizeSmall: string;
+            iconSizeMedium: string;
+            iconSizeLarge: string;
+            iconSizeHuge: string;
+        }, any>;
     }>> | undefined;
     bordered?: boolean | undefined;
     maxTagCount?: number | "responsive" | undefined;

package/es/cascader/src/Cascader.js

@@ -717,7 +717,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, $slots } = this;
         return (h("div", { class: `${mergedClsPrefix}-cascader` },
             h(VBinder, null, {
                 default: () => [
@@ -725,9 +725,7 @@ export default defineComponent({
                         default: () => (h(NInternalSelection, { ref: "triggerInstRef", clsPrefix: mergedClsPrefix, maxTagCount: this.maxTagCount, bordered: this.mergedBordered, size: this.mergedSize, theme: this.mergedTheme.peers.InternalSelection, themeOverrides: this.mergedTheme.peerOverrides.InternalSelection, active: this.mergedShow, pattern: this.pattern, placeholder: this.localizedPlaceholder, selectedOption: this.selectedOption, selectedOptions: this.selectedOptions, multiple: this.multiple, filterable: this.filterable, clearable: this.clearable, disabled: this.mergedDisabled, focused: this.focused, onFocus: this.handleTriggerFocus, onBlur: this.handleTriggerBlur, onClick: this.handleTriggerClick, onClear: this.handleClear, onDeleteOption: this.handleDeleteOption, onPatternInput: this.handlePatternInput, onKeydown: this.handleKeyDown, onKeyup: this.handleKeyUp }))
                     }),
                     h(VFollower, { key: "cascaderMenu", ref: "cascaderMenuFollowerRef", show: this.mergedShow && !this.showSelectMenu, containerClass: this.namespace, placement: "bottom-start", width: !this.options.length ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, to: this.adjustedTo }, {
-                        default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, this.$slots.action && {
-                            action: this.$slots.action
-                        }))
+                        default: () => (h(CascaderMenu, { ref: "cascaderMenuInstRef", value: this.mergedValue, show: this.mergedShow && !this.showSelectMenu, menuModel: this.menuModel, style: this.cssVars, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeyup: this.handleMenuKeyUp, onMousedown: this.handleMenuMousedown, onTabout: this.handleMenuTabout }, $slots))
                     }),
                     h(VFollower, { key: "selectMenu", ref: "selectMenuFollowerRef", show: this.mergedShow && this.showSelectMenu, containerClass: this.namespace, width: "target", placement: "bottom-start", to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
                         default: () => (h(CascaderSelectMenu, { ref: "selectMenuInstRef", value: this.mergedValue, show: this.mergedShow && this.showSelectMenu, pattern: this.pattern, multiple: this.multiple, tmNodes: this.treeMate.treeNodes, filter: this.filter, labelField: this.labelField, separator: this.separator, style: this.cssVars }))