naive-ui 2.23.0 → 2.23.1

package/lib/switch/src/styles/index.cssr.js

@@ -13,28 +13,28 @@ Object.defineProperty(exports, "__esModule", {
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr"));
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --button-border-radius
-// --button-box-shadow
-// --button-color
-// --button-width
-// --button-width-pressed
-// --height
-// --offset
-// --rail-border-radius
-// --rail-color
-// --rail-color-active
-// --rail-height
-// --rail-width
-// --width
-// --box-shadow-focus
-// --loading-color
-// --text-color
+// --n-bezier
+// --n-button-border-radius
+// --n-button-box-shadow
+// --n-button-color
+// --n-button-width
+// --n-button-width-pressed
+// --n-height
+// --n-offset
+// --n-rail-border-radius
+// --n-rail-color
+// --n-rail-color-active
+// --n-rail-height
+// --n-rail-width
+// --n-width
+// --n-box-shadow-focus
+// --n-loading-color
+// --n-text-color
 
 
 exports.default = (0, cssr_1.cB)('switch', `
- height: var(--height);
- min-width: var(--width);
+ height: var(--n-height);
+ min-width: var(--n-width);
  vertical-align: middle;
  user-select: none;
  display: inline-flex;
@@ -42,7 +42,7 @@ exports.default = (0, cssr_1.cB)('switch', `
  justify-content: center;
  align-items: center;
 `, [(0, cssr_1.cE)('children-placeholder', `
- height: var(--rail-height);
+ height: var(--n-rail-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -52,21 +52,21 @@ exports.default = (0, cssr_1.cB)('switch', `
  display: flex;
  flex-wrap: none;
  `), (0, cssr_1.cE)('button-placeholder', `
- width: calc(1.75 * var(--rail-height));
- height: var(--rail-height);
+ width: calc(1.75 * var(--n-rail-height));
+ height: var(--n-rail-height);
  `), (0, cssr_1.cB)('base-loading', `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
- font-size: calc(var(--button-width) - 4px);
- color: var(--loading-color);
- transition: color .3s var(--bezier);
+ font-size: calc(var(--n-button-width) - 4px);
+ color: var(--n-loading-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })]), (0, cssr_1.cE)('checked, unchecked', `
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  box-sizing: border-box;
  position: absolute;
  white-space: nowrap;
@@ -77,59 +77,59 @@ exports.default = (0, cssr_1.cB)('switch', `
  line-height: 1;
  `), (0, cssr_1.cE)('checked', `
  right: 0;
- padding-right: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), (0, cssr_1.cE)('unchecked', `
  left: 0;
  justify-content: flex-end;
- padding-left: calc(1.25 * var(--rail-height) - var(--offset));
+ padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), (0, cssr_1.c)('&:focus', [(0, cssr_1.cE)('rail', `
- box-shadow: var(--box-shadow-focus);
+ box-shadow: var(--n-box-shadow-focus);
  `)]), (0, cssr_1.cM)('round', [(0, cssr_1.cE)('rail', {
-  borderRadius: 'calc(var(--rail-height) / 2)'
+  borderRadius: 'calc(var(--n-rail-height) / 2)'
 }, [(0, cssr_1.cE)('button', {
-  borderRadius: 'calc(var(--button-height) / 2)'
+  borderRadius: 'calc(var(--n-button-height) / 2)'
 })])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), (0, cssr_1.cE)('rail', [(0, cssr_1.c)('&:active', [(0, cssr_1.cE)('button', {
-  maxWidth: 'var(--button-width-pressed)'
+  maxWidth: 'var(--n-button-width-pressed)'
 })])]), (0, cssr_1.cM)('active', [(0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])]), (0, cssr_1.cE)('rail', [(0, cssr_1.c)('&:active', [(0, cssr_1.cE)('button', {
-  left: 'calc(100% - var(--offset) - var(--button-width-pressed))'
+  left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])])])]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
-  left: 'calc(100% - (var(--rail-height) + var(--button-width)) / 2)'
+  left: 'calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)'
 })])]), (0, cssr_1.cE)('rail', `
  overflow: hidden;
- height: var(--rail-height);
- min-width: var(--rail-width);
- border-radius: var(--rail-border-radius);
+ height: var(--n-rail-height);
+ min-width: var(--n-rail-width);
+ border-radius: var(--n-rail-border-radius);
  cursor: pointer;
  position: relative;
  transition:
- background .3s var(--bezier),
- box-shadow .3s var(--bezier);
- background-color: var(--rail-color);
+ background .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
+ background-color: var(--n-rail-color);
  `, [(0, cssr_1.cE)('button', `
- top: var(--offset);
- left: var(--offset);
- height: var(--button-width);
- width: var(--button-width-pressed);
- max-width: var(--button-width);
- border-radius: var(--button-border-radius);
- background-color: var(--button-color);
- box-shadow: var(--button-box-shadow);
+ top: var(--n-offset);
+ left: var(--n-offset);
+ height: var(--n-button-width);
+ width: var(--n-button-width-pressed);
+ max-width: var(--n-button-width);
+ border-radius: var(--n-button-border-radius);
+ background-color: var(--n-button-color);
+ box-shadow: var(--n-button-box-shadow);
  box-sizing: border-box;
  cursor: inherit;
  content: "";
  position: absolute;
  transition:
- background-color .3s var(--bezier),
- left .3s var(--bezier),
- opacity .3s var(--bezier),
- max-width .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ left .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ max-width .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', {
-  backgroundColor: 'var(--rail-color-active)'
+  backgroundColor: 'var(--n-rail-color-active)'
 })]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('rail', `
  cursor: not-allowed;
  opacity: .5;

package/lib/tag/src/Tag.d.ts

@@ -458,32 +458,32 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--avatar-size-override': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--close-margin': string;
-        '--close-margin-rtl': string;
-        '--close-size': string;
-        '--color': string;
-        '--color-checkable': string;
-        '--color-checked': string;
-        '--color-checked-hover': string;
-        '--color-checked-pressed': string;
-        '--color-hover-checkable': string;
-        '--color-pressed-checkable': string;
-        '--font-size': string;
-        '--height': string;
-        '--opacity-disabled': string;
-        '--padding': string;
-        '--text-color': string;
-        '--text-color-checkable': string;
-        '--text-color-checked': string;
-        '--text-color-hover-checkable': string;
-        '--text-color-pressed-checkable': string;
+        '--n-avatar-size-override': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-close-margin': string;
+        '--n-close-margin-rtl': string;
+        '--n-close-size': string;
+        '--n-color': string;
+        '--n-color-checkable': string;
+        '--n-color-checked': string;
+        '--n-color-checked-hover': string;
+        '--n-color-checked-pressed': string;
+        '--n-color-hover-checkable': string;
+        '--n-color-pressed-checkable': string;
+        '--n-font-size': string;
+        '--n-height': string;
+        '--n-opacity-disabled': string;
+        '--n-padding': string;
+        '--n-text-color': string;
+        '--n-text-color-checkable': string;
+        '--n-text-color-checked': string;
+        '--n-text-color-hover-checkable': string;
+        '--n-text-color-pressed-checkable': string;
     }>;
     setTextContent: (textContent: string) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/lib/tag/src/Tag.js

@@ -77,32 +77,32 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, size, color: { color, textColor } = {} } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
-                    '--avatar-size-override': `calc(${height} - 8px)`,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-margin': closeMargin,
-                    '--close-margin-rtl': closeMarginRtl,
-                    '--close-size': closeSize,
-                    '--color': color || typedColor,
-                    '--color-checkable': colorCheckable,
-                    '--color-checked': colorChecked,
-                    '--color-checked-hover': colorCheckedHover,
-                    '--color-checked-pressed': colorCheckedPressed,
-                    '--color-hover-checkable': colorHoverCheckable,
-                    '--color-pressed-checkable': colorPressedCheckable,
-                    '--font-size': fontSize,
-                    '--height': height,
-                    '--opacity-disabled': opacityDisabled,
-                    '--padding': padding,
-                    '--text-color': textColor || typeTextColor,
-                    '--text-color-checkable': textColorCheckable,
-                    '--text-color-checked': textColorChecked,
-                    '--text-color-hover-checkable': textColorHoverCheckable,
-                    '--text-color-pressed-checkable': textColorPressedCheckable
+                    '--n-avatar-size-override': `calc(${height} - 8px)`,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-margin': closeMargin,
+                    '--n-close-margin-rtl': closeMarginRtl,
+                    '--n-close-size': closeSize,
+                    '--n-color': color || typedColor,
+                    '--n-color-checkable': colorCheckable,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-checked-hover': colorCheckedHover,
+                    '--n-color-checked-pressed': colorCheckedPressed,
+                    '--n-color-hover-checkable': colorHoverCheckable,
+                    '--n-color-pressed-checkable': colorPressedCheckable,
+                    '--n-font-size': fontSize,
+                    '--n-height': height,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-padding': padding,
+                    '--n-text-color': textColor || typeTextColor,
+                    '--n-text-color-checkable': textColorCheckable,
+                    '--n-text-color-checked': textColorChecked,
+                    '--n-text-color-hover-checkable': textColorHoverCheckable,
+                    '--n-text-color-pressed-checkable': textColorPressedCheckable
                 };
             }) });
     },

package/lib/tag/src/styles/index.cssr.js

@@ -5,30 +5,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-radius
-// --border
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-margin
-// --close-size
-// --color
-// --color-checkable
-// --color-checked
-// --color-checked-hover
-// --color-checked-pressed
-// --color-hover-checkable
-// --color-pressed-checkable
-// --font-size
-// --height
-// --opacity-disabled
-// --padding
-// --text-color
-// --text-color-checkable
-// --text-color-checked
-// --text-color-hover-checkable
-// --text-color-pressed-checkable
+// --n-bezier
+// --n-border-radius
+// --n-border
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-margin
+// --n-close-size
+// --n-color
+// --n-color-checkable
+// --n-color-checked
+// --n-color-checked-hover
+// --n-color-checked-pressed
+// --n-color-hover-checkable
+// --n-color-pressed-checkable
+// --n-font-size
+// --n-height
+// --n-opacity-disabled
+// --n-padding
+// --n-text-color
+// --n-text-color-checkable
+// --n-text-color-checked
+// --n-text-color-hover-checkable
+// --n-text-color-pressed-checkable
 
 
 exports.default = (0, cssr_1.cB)('tag', `
@@ -39,19 +39,19 @@ exports.default = (0, cssr_1.cB)('tag', `
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
- padding: var(--padding);
- border-radius: var(--border-radius);
- color: var(--text-color);
- background-color: var(--color);
+ padding: var(--n-padding);
+ border-radius: var(--n-border-radius);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  transition: 
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- opacity .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
  line-height: 1.2;
- height: var(--height);
- font-size: var(--font-size);
+ height: var(--n-height);
+ font-size: var(--n-font-size);
 `, [(0, cssr_1.cE)('border', `
  pointer-events: none;
  position: absolute;
@@ -60,42 +60,42 @@ exports.default = (0, cssr_1.cB)('tag', `
  top: 0;
  bottom: 0;
  border-radius: inherit;
- border: var(--border);
- transition: border-color .3s var(--bezier);
+ border: var(--n-border);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('avatar', `
  display: flex;
  margin-right: 6px;
  `), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
- margin: var(--close-margin);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ margin: var(--n-close-margin);
+ transition: color .3s var(--n-bezier);
  cursor: pointer;
  `), (0, cssr_1.cM)('round', `
- padding: 0 calc(var(--height) / 2);
- border-radius: calc(var(--height) / 2);
+ padding: 0 calc(var(--n-height) / 2);
+ border-radius: calc(var(--n-height) / 2);
  `, [(0, cssr_1.cE)('avatar', `
- margin-left: calc((var(--height) - 8px) / -2);
+ margin-left: calc((var(--n-height) - 8px) / -2);
  `)]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed !important;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `), (0, cssr_1.cM)('checkable', `
  cursor: pointer;
  box-shadow: none;
- color: var(--text-color-checkable);
- background-color: var(--color-checkable);
+ color: var(--n-text-color-checkable);
+ background-color: var(--n-color-checkable);
  `, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-hover-checkable)'
+  backgroundColor: 'var(--n-color-hover-checkable)'
 }, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--text-color-hover-checkable)'
+  color: 'var(--n-text-color-hover-checkable)'
 })]), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-pressed-checkable)'
+  backgroundColor: 'var(--n-color-pressed-checkable)'
 }, [(0, cssr_1.cNotM)('checked', {
-  color: 'var(--text-color-pressed-checkable)'
+  color: 'var(--n-text-color-pressed-checkable)'
 })])]), (0, cssr_1.cM)('checked', {
-  color: 'var(--text-color-checked)',
-  backgroundColor: 'var(--color-checked)'
+  color: 'var(--n-text-color-checked)',
+  backgroundColor: 'var(--n-color-checked)'
 }, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--color-checked-hover)'
+  backgroundColor: 'var(--n-color-checked-hover)'
 }), (0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--color-checked-pressed)'
+  backgroundColor: 'var(--n-color-checked-pressed)'
 })])])])]);

package/lib/tag/src/styles/rtl.cssr.js

@@ -9,7 +9,7 @@ const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('tag', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('close', `
- margin: var(--close-margin-rtl);
+ margin: var(--n-close-margin-rtl);
  `), (0, cssr_1.cE)('avatar', `
  margin-left: 6px;
  margin-right: 0;

package/lib/time-picker/src/TimePicker.d.ts

@@ -2346,25 +2346,25 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     triggerCssVars: import("vue").ComputedRef<{
-        '--icon-color': string;
-        '--icon-color-disabled': string;
-        '--bezier': string;
+        '--n-icon-color': string;
+        '--n-icon-color-disabled': string;
+        '--n-bezier': string;
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--border-radius': string;
-        '--item-color-hover': string;
-        '--item-font-size': string;
-        '--item-height': string;
-        '--item-opacity-disabled': string;
-        '--item-text-color': string;
-        '--item-text-color-active': string;
-        '--item-width': string;
-        '--panel-action-padding': string;
-        '--panel-box-shadow': string;
-        '--panel-color': string;
-        '--panel-divider-color': string;
-        '--item-border-radius': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-item-color-hover': string;
+        '--n-item-font-size': string;
+        '--n-item-height': string;
+        '--n-item-opacity-disabled': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-active': string;
+        '--n-item-width': string;
+        '--n-panel-action-padding': string;
+        '--n-panel-box-shadow': string;
+        '--n-panel-color': string;
+        '--n-panel-divider-color': string;
+        '--n-item-border-radius': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     to?: unknown;

package/lib/time-picker/src/TimePicker.js

@@ -531,28 +531,28 @@ exports.default = (0, vue_1.defineComponent)({
             triggerCssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
-                    '--icon-color': iconColor,
-                    '--icon-color-disabled': iconColorDisabled,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-disabled': iconColorDisabled,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--item-color-hover': itemColorHover,
-                    '--item-font-size': itemFontSize,
-                    '--item-height': itemHeight,
-                    '--item-opacity-disabled': itemOpacityDisabled,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--item-width': itemWidth,
-                    '--panel-action-padding': panelActionPadding,
-                    '--panel-box-shadow': panelBoxShadow,
-                    '--panel-color': panelColor,
-                    '--panel-divider-color': panelDividerColor,
-                    '--item-border-radius': itemBorderRadius
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-item-color-hover': itemColorHover,
+                    '--n-item-font-size': itemFontSize,
+                    '--n-item-height': itemHeight,
+                    '--n-item-opacity-disabled': itemOpacityDisabled,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-item-width': itemWidth,
+                    '--n-panel-action-padding': panelActionPadding,
+                    '--n-panel-box-shadow': panelBoxShadow,
+                    '--n-panel-color': panelColor,
+                    '--n-panel-divider-color': panelDividerColor,
+                    '--n-item-border-radius': itemBorderRadius
                 };
             })
         };