naive-ui 2.23.0 → 2.23.1

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

@@ -1,16 +1,16 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 const lineHeight = 1.25; // vars:
-// --bezier
-// --circle-border
-// --content-font-size
-// --content-text-color
-// --line-color
-// --meta-text-color
-// --title-font-size
-// --title-font-weight
-// --title-margin
-// --title-text-color
-// --icon-size
+// --n-bezier
+// --n-circle-border
+// --n-content-font-size
+// --n-content-text-color
+// --n-line-color
+// --n-meta-text-color
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-margin
+// --n-title-text-color
+// --n-icon-size
 
 export default cB('timeline', `
  position: relative;
@@ -24,27 +24,27 @@ export default cB('timeline', `
  flex-shrink: 0;
  padding-right: 40px;
  `, [cB('timeline-item-content', `
- margin-top: calc(var(--icon-size) + 12px);
+ margin-top: calc(var(--n-icon-size) + 12px);
  `, [cE('meta', `
  margin-top: 6px;
  margin-bottom: unset;
  `)]), cB('timeline-item-timeline', `
  width: 100%;
- height: calc(var(--icon-size) + 12px);
+ height: calc(var(--n-icon-size) + 12px);
  `, [cE('line', `
- left: var(--icon-size);
- top: calc(var(--icon-size) / 2 - 1px);
+ left: var(--n-icon-size);
+ top: calc(var(--n-icon-size) / 2 - 1px);
  right: 0px;
  width: unset;
  height: 2px;
  `)])])]), cM('right-placement', [cB('timeline-item', [cB('timeline-item-content', `
  text-align: right;
- margin-right: calc(var(--icon-size) + 12px);
+ margin-right: calc(var(--n-icon-size) + 12px);
  `), cB('timeline-item-timeline', `
- width: var(--icon-size);
+ width: var(--n-icon-size);
  right: 0;
  `)])]), cM('left-placement', [cB('timeline-item', [cB('timeline-item-content', `
- margin-left: calc(var(--icon-size) + 12px);
+ margin-left: calc(var(--n-icon-size) + 12px);
  `), cB('timeline-item-timeline', `
  left: 0;
  `)])]), cB('timeline-item', `
@@ -54,50 +54,50 @@ export default cB('timeline', `
  `)]), cB('timeline-item-content', [cE('meta', `
  margin-bottom: 0;
  `)])]), cB('timeline-item-content', [cE('title', `
- margin: var(--title-margin);
- font-size: var(--title-font-size);
- transition: color .3s var(--bezier);
- font-weight: var(--title-font-weight);
+ margin: var(--n-title-margin);
+ font-size: var(--n-title-font-size);
+ transition: color .3s var(--n-bezier);
+ font-weight: var(--n-title-font-weight);
  margin-bottom: 6px;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), cE('content', `
- transition: color .3s var(--bezier);
- font-size: var(--content-font-size);
- color: var(--content-text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-content-font-size);
+ color: var(--n-content-text-color);
  `), cE('meta', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 20px;
- color: var(--meta-text-color);
+ color: var(--n-meta-text-color);
  `)]), cB('timeline-item-timeline', `
- width: calc(var(--icon-size) + 12px);
+ width: calc(var(--n-icon-size) + 12px);
  position: absolute;
- top: calc(var(--title-font-size) * ${lineHeight} / 2 - var(--icon-size) / 2);
+ top: calc(var(--n-title-font-size) * ${lineHeight} / 2 - var(--n-icon-size) / 2);
  height: 100%;
  `, [cE('circle', `
- border: var(--circle-border);
+ border: var(--n-circle-border);
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
- width: var(--icon-size);
- height: var(--icon-size);
- border-radius: var(--icon-size);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ border-radius: var(--n-icon-size);
  box-sizing: border-box;
  `), cE('icon', `
- color: var(--icon-color);
- font-size: var(--icon-size);
- height: var(--icon-size);
- width: var(--icon-size);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  `), cE('line', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
- top: var(--icon-size);
- left: calc(var(--icon-size) / 2 - 1px);
+ top: var(--n-icon-size);
+ left: calc(var(--n-icon-size) / 2 - 1px);
  bottom: 0px;
  width: 2px;
- background-color: var(--line-color);
+ background-color: var(--n-line-color);
  `)])])]);

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

@@ -47,14 +47,18 @@ export default c([cB('transfer', `
  display: flex;
  width: var(--width);
  font-size: var(--font-size);
- `, [cM('filterable', [cB('transfer-list', [cB('transfer-list-body', {
-  height: 'calc(var(--item-height) * 5.6 + 45px)'
-})])]), cB('transfer-icon', `
+ height: 240px;
+ display: flex;
+ flex-wrap: nowrap;
+ `, [cB('transfer-icon', `
  color: var(--icon-color);
  transition: color .3s var(--bezier);
  `), cM('disabled', [cB('transfer-icon', {
   color: 'var(--icon-color-disabled)'
 })]), cB('transfer-list', `
+ height: inherit;
+ display: flex;
+ flex-direction: column;
  background-clip: padding-box;
  width: calc(50% - 36px);
  position: relative;
@@ -105,7 +109,8 @@ export default c([cB('transfer', `
  white-space: nowrap;
  color: var(--header-extra-text-color);
  `)]), cB('transfer-list-body', `
- height: calc(var(--item-height) * 5.6);
+ flex-basis: 0;
+ flex-grow: 1;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;

package/es/tree/src/Tree.d.ts

@@ -961,17 +961,17 @@ declare const _default: import("vue").DefineComponent<{
     handleAfterEnter: () => void;
     handleResize: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--arrow-color': string;
-        '--loading-color': string;
-        '--bezier': string;
-        '--font-size': string;
-        '--node-border-radius': string;
-        '--node-color-active': string;
-        '--node-color-hover': string;
-        '--node-color-pressed': string;
-        '--node-text-color': string;
-        '--node-text-color-disabled': string;
-        '--drop-mark-color': string;
+        '--n-arrow-color': string;
+        '--n-loading-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-node-border-radius': string;
+        '--n-node-color-active': string;
+        '--n-node-color-hover': string;
+        '--n-node-color-pressed': string;
+        '--n-node-text-color': string;
+        '--n-node-text-color-disabled': string;
+        '--n-drop-mark-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly internalScrollable?: unknown;

package/es/tree/src/Tree.js

@@ -981,17 +981,17 @@ export default defineComponent({
             handleResize, cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
                 return {
-                    '--arrow-color': arrowColor,
-                    '--loading-color': loadingColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--node-border-radius': nodeBorderRadius,
-                    '--node-color-active': nodeColorActive,
-                    '--node-color-hover': nodeColorHover,
-                    '--node-color-pressed': nodeColorPressed,
-                    '--node-text-color': nodeTextColor,
-                    '--node-text-color-disabled': nodeTextColorDisabled,
-                    '--drop-mark-color': dropMarkColor
+                    '--n-arrow-color': arrowColor,
+                    '--n-loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-node-border-radius': nodeBorderRadius,
+                    '--n-node-color-active': nodeColorActive,
+                    '--n-node-color-hover': nodeColorHover,
+                    '--n-node-color-pressed': nodeColorPressed,
+                    '--n-node-text-color': nodeTextColor,
+                    '--n-node-text-color-disabled': nodeTextColorDisabled,
+                    '--n-drop-mark-color': dropMarkColor
                 };
             }) }, exposedMethods);
     },

package/es/tree/src/dnd.js

@@ -10,7 +10,7 @@ export function renderDropMark({ position, offsetLevel, indent, el }) {
         style.top = 0;
         style.bottom = 0;
         style.borderRadius = 'inherit';
-        style.boxShadow = 'inset 0 0 0 2px var(--drop-mark-color)';
+        style.boxShadow = 'inset 0 0 0 2px var(--n-drop-mark-color)';
     }
     else {
         const cssPosition = position === 'before' ? 'top' : 'bottom';
@@ -19,7 +19,7 @@ export function renderDropMark({ position, offsetLevel, indent, el }) {
         // Maybe it is possible to use content left
         style.left = `${el.offsetLeft + 6 - offsetLevel * indent}px`;
         style.height = '2px';
-        style.backgroundColor = 'var(--drop-mark-color)';
+        style.backgroundColor = 'var(--n-drop-mark-color)';
         style.transformOrigin = cssPosition;
         style.borderRadius = '1px';
         style.transform =

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

@@ -1,18 +1,18 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
 import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr';
 import fadeInHeightExpandTransition from '../../../_styles/transitions/fade-in-height-expand.cssr'; // vars:
-// --arrow-color
-// --bezier
-// --font-size
-// --node-border-radius
-// --node-color-active
-// --node-color-hover
-// --node-color-pressed
-// --node-text-color
-// --node-text-color-disabled
+// --n-arrow-color
+// --n-bezier
+// --n-font-size
+// --n-node-border-radius
+// --n-node-color-active
+// --n-node-color-hover
+// --n-node-color-pressed
+// --n-node-text-color
+// --n-node-text-color-disabled
 
 export default cB('tree', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
 `, [c('ul, li', `
  margin: 0;
@@ -32,33 +32,33 @@ export default cB('tree', `
  `), cB('tree-node', `
  position: relative;
  display: flex;
- border-radius: var(--node-border-radius);
- transition: background-color .3s var(--bezier);
+ border-radius: var(--n-node-border-radius);
+ transition: background-color .3s var(--n-bezier);
  `, [cM('highlight', [cB('tree-node-content', [cE('text', {
-  borderBottomColor: 'var(--node-text-color-disabled)'
+  borderBottomColor: 'var(--n-node-text-color-disabled)'
 })])]), cM('disabled', [cB('tree-node-content', `
- color: var(--node-text-color-disabled);
+ color: var(--n-node-text-color-disabled);
  cursor: not-allowed;
  `)]), cNotM('disabled', [cM('selectable', [cB('tree-node-content', `
  cursor: pointer;
  `)])])]), cM('block-node', [cB('tree-node-content', `
  width: 100%;
  `)]), cNotM('block-line', [cB('tree-node', [cNotM('disabled', [cB('tree-node-content', [c('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 })]), cM('selectable', [cB('tree-node-content', [c('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })])]), cM('pending', [cB('tree-node-content', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `)]), cM('selected', [cB('tree-node-content', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })])])])]), cM('block-line', [cB('tree-node', [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 }), cM('selectable', [c('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })]), cM('pending', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `), cM('selected', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })]), cM('disabled', `
  cursor: not-allowed;
  `)])]), cB('tree-node-switcher', `
@@ -69,18 +69,18 @@ export default cB('tree', `
  width: 24px;
  align-items: center;
  justify-content: center;
- transition: transform .15s var(--bezier);
+ transition: transform .15s var(--n-bezier);
  vertical-align: bottom;
  `, [cE('icon', `
  position: relative;
  height: 14px;
  width: 14px;
  display: flex;
- color: var(--arrow-color);
- transition: color .3s var(--bezier);
+ color: var(--n-arrow-color);
+ transition: color .3s var(--n-bezier);
  font-size: 14px;
  `, [cB('icon', [iconSwitchTransition()]), cB('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  position: absolute;
  left: 0;
  top: 0;
@@ -108,15 +108,15 @@ export default cB('tree', `
  vertical-align: bottom;
  padding: 0 6px;
  cursor: default;
- border-radius: var(--node-border-radius);
+ border-radius: var(--n-node-border-radius);
  text-decoration-color: #0000;
  text-decoration-line: underline;
- color: var(--node-text-color);
+ color: var(--n-node-text-color);
  transition:
- color .3s var(--bezier),
- text-decoration-color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [c('&:last-child', {
   marginBottom: 0
 }), cE('prefix', `
@@ -124,7 +124,7 @@ export default cB('tree', `
  margin-right: 8px;
  `), cE('text', `
  border-bottom: 1px solid #0000;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  flex-grow:1;
  `), cE('suffix', `
  display: inline-flex;

package/es/tree-select/src/TreeSelect.d.ts

@@ -1075,14 +1075,14 @@ declare const _default: import("vue").DefineComponent<{
     handleTabOut: () => void;
     handleMenuMousedown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
-        '--menu-border-radius': string;
-        '--menu-color': string;
-        '--menu-height': string;
-        '--bezier': string;
-        '--action-padding': string;
-        '--action-text-color': string;
-        '--action-divider-color': string;
+        '--n-menu-box-shadow': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-color': string;
+        '--n-menu-height': string;
+        '--n-bezier': string;
+        '--n-action-padding': string;
+        '--n-action-text-color': string;
+        '--n-action-divider-color': string;
     }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {

package/es/tree-select/src/TreeSelect.js

@@ -518,14 +518,14 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-color': menuColor,
-                    '--menu-height': menuHeight,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--action-padding': actionPadding,
-                    '--action-text-color': actionTextColor,
-                    '--action-divider-color': actionDividerColor
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-height': menuHeight,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-action-padding': actionPadding,
+                    '--n-action-text-color': actionTextColor,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTheme: themeRef

package/es/tree-select/src/styles/index.cssr.js

@@ -1,13 +1,13 @@
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr';
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --menu-height
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-color
-// --action-padding
-// --action-text-color
-// --action-divider-color
+// --n-bezier
+// --n-menu-height
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-color
+// --n-action-padding
+// --n-action-text-color
+// --n-action-divider-color
 
 export default c([cB('tree-select', `
  z-index: auto;
@@ -18,21 +18,21 @@ export default c([cB('tree-select', `
  position: relative;
  overflow: hidden;
  margin: 4px 0;
- transition: box-shadow .3s var(--bezier), background-color .3s var(--bezier);
- border-radius: var(--menu-border-radius);
- box-shadow: var(--menu-box-shadow);
- background-color: var(--menu-color);
+ transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier);
+ border-radius: var(--n-menu-border-radius);
+ box-shadow: var(--n-menu-box-shadow);
+ background-color: var(--n-menu-color);
  outline: none;
- `, [cB('tree', 'max-height: var(--menu-height);'), cE('empty', `
+ `, [cB('tree', 'max-height: var(--n-menu-height);'), cE('empty', `
  display: flex;
  padding: 12px 32px;
  flex: 1;
  justify-content: center;
  `), cE('action', `
- padding: var(--action-padding);
+ padding: var(--n-action-padding);
  transition: 
- color .3s var(--bezier);
- border-color .3s var(--bezier);
- border-top: 1px solid var(--action-divider-color);
- color: var(--action-text-color);
+ color .3s var(--n-bezier);
+ border-color .3s var(--n-bezier);
+ border-top: 1px solid var(--n-action-divider-color);
+ color: var(--n-action-text-color);
  `), fadeInScaleUpTransition()])]);

package/es/upload/src/Upload.js

@@ -382,22 +382,22 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--border-radius': borderRadius,
-                '--dragger-border': draggerBorder,
-                '--dragger-border-hover': draggerBorderHover,
-                '--dragger-color': draggerColor,
-                '--font-size': fontSize,
-                '--item-color-hover': itemColorHover,
-                '--item-color-hover-error': itemColorHoverError,
-                '--item-disabled-opacity': itemDisabledOpacity,
-                '--item-icon-color': itemIconColor,
-                '--item-text-color': itemTextColor,
-                '--item-text-color-error': itemTextColorError,
-                '--item-text-color-success': itemTextColorSuccess,
-                '--line-height': lineHeight,
-                '--item-border-image-card-error': itemBorderImageCardError,
-                '--item-border-image-card': itemBorderImageCard
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-dragger-border': draggerBorder,
+                '--n-dragger-border-hover': draggerBorderHover,
+                '--n-dragger-color': draggerColor,
+                '--n-font-size': fontSize,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-hover-error': itemColorHoverError,
+                '--n-item-disabled-opacity': itemDisabledOpacity,
+                '--n-item-icon-color': itemIconColor,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-error': itemTextColorError,
+                '--n-item-text-color-success': itemTextColorSuccess,
+                '--n-line-height': lineHeight,
+                '--n-item-border-image-card-error': itemBorderImageCardError,
+                '--n-item-border-image-card': itemBorderImageCard
             };
         });
         provide(uploadInjectionKey, {