naive-ui 2.21.5 → 2.23.2

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

@@ -1,28 +1,28 @@
 import { c, cB, cE, cM, cNotM } from '../../../_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
 
 export default cB('tag', `
  white-space: nowrap;
@@ -32,19 +32,19 @@ export default 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);
- line-height: 1;
- height: var(--height);
- font-size: var(--font-size);
+ 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(--n-height);
+ font-size: var(--n-font-size);
 `, [cE('border', `
  pointer-events: none;
  position: absolute;
@@ -53,42 +53,42 @@ export default 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);
  `), cE('avatar', `
  display: flex;
  margin-right: 6px;
  `), 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;
  `), 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);
  `, [cE('avatar', `
- margin-left: calc((var(--height) - 8px) / -2);
+ margin-left: calc((var(--n-height) - 8px) / -2);
  `)]), cM('disabled', `
  cursor: not-allowed !important;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `), 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);
  `, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--color-hover-checkable)'
+  backgroundColor: 'var(--n-color-hover-checkable)'
 }, [cNotM('checked', {
-  color: 'var(--text-color-hover-checkable)'
+  color: 'var(--n-text-color-hover-checkable)'
 })]), c('&:active', {
-  backgroundColor: 'var(--color-pressed-checkable)'
+  backgroundColor: 'var(--n-color-pressed-checkable)'
 }, [cNotM('checked', {
-  color: 'var(--text-color-pressed-checkable)'
+  color: 'var(--n-text-color-pressed-checkable)'
 })])]), cM('checked', {
-  color: 'var(--text-color-checked)',
-  backgroundColor: 'var(--color-checked)'
+  color: 'var(--n-text-color-checked)',
+  backgroundColor: 'var(--n-color-checked)'
 }, [cNotM('disabled', [c('&:hover', {
-  backgroundColor: 'var(--color-checked-hover)'
+  backgroundColor: 'var(--n-color-checked-hover)'
 }), c('&:active', {
-  backgroundColor: 'var(--color-checked-pressed)'
+  backgroundColor: 'var(--n-color-checked-pressed)'
 })])])])]);

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

@@ -2,7 +2,7 @@ import { cB, cM, cE } from '../../../_utils/cssr';
 export default cB('tag', [cM('rtl', `
  direction: rtl;
  `, [cE('close', `
- margin: var(--close-margin-rtl);
+ margin: var(--n-close-margin-rtl);
  `), cE('avatar', `
  margin-left: 6px;
  margin-right: 0;

package/es/thing/src/Thing.js

@@ -15,11 +15,11 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { self: { titleTextColor, textColor, titleFontWeight, fontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--title-font-weight': titleFontWeight,
-                '--title-text-color': titleTextColor
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor
             };
         });
         return () => {

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

@@ -1,15 +1,15 @@
 import { c, cB, cE } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --font-size
-// --text-color
-// --title-font-weight
-// --title-text-color
+// --n-bezier
+// --n-font-size
+// --n-text-color
+// --n-title-font-weight
+// --n-title-text-color
 
 export default cB('thing', `
  display: flex;
- transition: color .3s var(--bezier);
- font-size: var(--font-size);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
 `, [cB('thing-avatar', `
  margin-right: 12px;
  margin-top: 2px;
@@ -27,9 +27,9 @@ export default cB('thing', `
  align-items: center;
  `, [cE('title', `
  font-size: 16px;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
- color: var(--title-text-color);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-title-text-color);
  `)]), cE('description', [c('&:not(:last-child)', `
  margin-bottom: 4px;
  `)]), cE('content', [c('&:not(:first-child)', `

package/es/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;
@@ -2400,10 +2400,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     format: string;
     placement: string;
+    showIcon: boolean;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 } & {
@@ -3290,11 +3290,11 @@ declare const _default: import("vue").DefineComponent<{
     format: string;
     to: string | boolean | HTMLElement;
     placement: string;
+    showIcon: boolean;
     bordered: boolean | undefined;
     clearable: boolean;
     defaultValue: number | null;
     stateful: boolean;
-    showIcon: boolean;
     inputReadonly: boolean;
     use12Hours: boolean;
 }>;

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

@@ -526,28 +526,28 @@ export default defineComponent({
             triggerCssVars: 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: 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
                 };
             })
         };

package/es/time-picker/src/styles/index.cssr.js

@@ -1,99 +1,99 @@
 import { c, cE, cM, cB, cNotM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --icon-color
-// --icon-color-disabled
-// --bezier
-// --border-radius
-// --item-color-hover
-// --item-font-size
-// --item-height
-// --item-opacity-disabled
-// --item-text-color
-// --item-text-color-active
-// --item-width
-// --panel-action-padding
-// --panel-box-shadow
-// --panel-color
-// --panel-divider-color
-// --item-border-radius
+// --n-icon-color
+// --n-icon-color-disabled
+// --n-bezier
+// --n-border-radius
+// --n-item-color-hover
+// --n-item-font-size
+// --n-item-height
+// --n-item-opacity-disabled
+// --n-item-text-color
+// --n-item-text-color-active
+// --n-item-width
+// --n-panel-action-padding
+// --n-panel-box-shadow
+// --n-panel-color
+// --n-panel-divider-color
+// --n-item-border-radius
 
 export default c([cB('time-picker', `
  z-index: auto;
  position: relative;
  `, [cB('time-picker-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), cM('disabled', [cB('time-picker-icon', {
-  color: 'var(--icon-color-disabled)'
+  color: 'var(--n-icon-color-disabled)'
 })])]), cB('time-picker-panel', `
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  outline: none;
- font-size: var(--item-font-size);
- border-radius: var(--border-radius);
+ font-size: var(--n-item-font-size);
+ border-radius: var(--n-border-radius);
  margin: 4px 0;
  min-width: 104px;
  overflow: hidden;
- background-color: var(--panel-color);
- box-shadow: var(--panel-box-shadow);
+ background-color: var(--n-panel-color);
+ box-shadow: var(--n-panel-box-shadow);
  `, [fadeInScaleUpTransition(), cB('time-picker-actions', `
- padding: var(--panel-action-padding);
+ padding: var(--n-panel-action-padding);
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  `), cB('time-picker-cols', `
- height: calc(var(--item-height) * 6);
+ height: calc(var(--n-item-height) * 6);
  display: flex;
  position: relative;
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--panel-divider-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-panel-divider-color);
  `), cB('time-picker-col', `
  flex-grow: 1;
- min-width: var(--item-width);
- height: calc(var(--item-height) * 6);
+ min-width: var(--n-item-width);
+ height: calc(var(--n-item-height) * 6);
  flex-direction: column;
- transition: box-shadow .3s var(--bezier);
+ transition: box-shadow .3s var(--n-bezier);
  `, [cM('transition-disabled', [cE('item', 'transition: none;', [c('&::before', 'transition: none;')])]), cE('padding', {
-  height: 'calc(var(--item-height) * 5)'
-}), c('&:first-child', 'min-width: calc(var(--item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
+  height: 'calc(var(--n-item-height) * 5)'
+}), c('&:first-child', 'min-width: calc(var(--n-item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
  cursor: pointer;
- height: var(--item-height);
+ height: var(--n-item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- text-decoration-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier);
  background: #0000;
  text-decoration-color: #0000;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  z-index: 0;
  box-sizing: border-box;
  padding-top: 4px;
  position: relative;
  `, [c('&::before', `
  content: "";
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  z-index: -1;
  position: absolute;
  left: 0;
  right: 4px;
  top: 4px;
  bottom: 0;
- border-radius: var(--item-border-radius);
+ border-radius: var(--n-item-border-radius);
  `), cNotM('disabled', [c('&:hover::before', {
-  backgroundColor: 'var(--item-color-hover)'
+  backgroundColor: 'var(--n-item-color-hover)'
 })]), cM('active', `
- color: var(--item-text-color-active);
+ color: var(--n-item-text-color-active);
  `, [c('&::before', `
- background-color: var(--item-color-hover);
+ background-color: var(--n-item-color-hover);
  `)]), cM('disabled', `
- opacity: var(--item-opacity-disabled);
+ opacity: var(--n-item-opacity-disabled);
  cursor: not-allowed;
  `)]), cM('invalid', [cE('item', [cM('active', `
  text-decoration: line-through;
- text-decoration-color: var(--item-text-color-active);
+ text-decoration-color: var(--n-item-text-color-active);
  `)])])])])]);

package/es/timeline/src/TimelineItem.d.ts

@@ -23,18 +23,18 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--circle-border': string;
-        '--icon-color': string;
-        '--content-font-size': string;
-        '--content-text-color': string;
-        '--line-color': string;
-        '--meta-text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-margin': string | number;
-        '--title-text-color': string;
-        '--icon-size': string;
+        '--n-bezier': string;
+        '--n-circle-border': string;
+        '--n-icon-color': string;
+        '--n-content-font-size': string;
+        '--n-content-text-color': string;
+        '--n-line-color': string;
+        '--n-meta-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-margin': string | number;
+        '--n-title-text-color': string;
+        '--n-icon-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     time?: unknown;

package/es/timeline/src/TimelineItem.js

@@ -26,18 +26,18 @@ export default defineComponent({
                 const { type } = props;
                 const { self: { titleTextColor, contentTextColor, metaTextColor, lineColor, titleFontWeight, contentFontSize, [createKey('iconSize', size)]: iconSize, [createKey('titleMargin', size)]: titleMargin, [createKey('titleFontSize', size)]: titleFontSize, [createKey('circleBorder', type)]: circleBorder, [createKey('iconColor', type)]: iconColor }, common: { cubicBezierEaseInOut } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--circle-border': circleBorder,
-                    '--icon-color': iconColor,
-                    '--content-font-size': contentFontSize,
-                    '--content-text-color': contentTextColor,
-                    '--line-color': lineColor,
-                    '--meta-text-color': metaTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-margin': titleMargin,
-                    '--title-text-color': titleTextColor,
-                    '--icon-size': formatLength(iconSizeProp) || iconSize
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-circle-border': circleBorder,
+                    '--n-icon-color': iconColor,
+                    '--n-content-font-size': contentFontSize,
+                    '--n-content-text-color': contentTextColor,
+                    '--n-line-color': lineColor,
+                    '--n-meta-text-color': metaTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-margin': titleMargin,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-icon-size': formatLength(iconSizeProp) || iconSize
                 };
             })
         };