naive-ui 2.22.0 → 2.24.0

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

@@ -13,52 +13,51 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --size
-// --border
-// --border-focus
-// --border-checked
-// --border-disabled
-// --border-disabled-checked
-// --box-shadow-focus
-// --color
-// --color-checked
-// --color-table-header
-// --color-table-header-modal
-// --color-disabled
-// --color-disabled-checked
-// --text-color
-// --text-color-disabled
-// --check-mark-color
-// --check-mark-color-disabled
-// --check-mark-color-disabled-checked
-// --border-radius
-// --font-size
-// --label-padding
+// --n-bezier
+// --n-size
+// --n-border
+// --n-border-focus
+// --n-border-checked
+// --n-border-disabled
+// --n-border-disabled-checked
+// --n-box-shadow-focus
+// --n-color
+// --n-color-checked
+// --n-color-table-header
+// --n-color-table-header-modal
+// --n-color-disabled
+// --n-color-disabled-checked
+// --n-text-color
+// --n-text-color-disabled
+// --n-check-mark-color
+// --n-check-mark-color-disabled
+// --n-check-mark-color-disabled-checked
+// --n-border-radius
+// --n-font-size
+// --n-label-padding
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  line-height: 1;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle;
- --merged-color-table-header: var(--color-table-header);
+ --n-merged-color-table-header: var(--n-color-table-header);
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), (0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), (0, cssr_1.cM)('table-header', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--merged-color-table-header)'
+  backgroundColor: 'var(--n-merged-color-table-header)'
 })]), (0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', {
-  backgroundColor: 'var(--color-checked)'
+  backgroundColor: 'var(--n-color-checked)'
 }, [(0, cssr_1.cB)('checkbox-icon', [// if not set width to 100%, safari & old chrome won't display the icon
 (0, cssr_1.c)('.check-icon', `
- width: 100%;
  opacity: 1;
  transform: scale(1);
  `)])])]), (0, cssr_1.cM)('indeterminate', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon', `
@@ -68,51 +67,51 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  opacity: 1;
  transform: scale(1);
  `)])])]), (0, cssr_1.cM)('checked, indeterminate', [(0, cssr_1.c)('&:focus:not(:active)', [(0, cssr_1.cB)('checkbox-box', [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-checked)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])]), (0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-checked);
+ background-color: var(--n-color-checked);
  border-left: 0;
  border-top: 0;
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-checked)'
+  border: 'var(--n-border-checked)'
 })])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }, [(0, cssr_1.cM)('checked', [(0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-disabled-checked);
+ background-color: var(--n-color-disabled-checked);
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled-checked)'
+  border: 'var(--n-border-disabled-checked)'
 }), (0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled-checked)'
+  fill: 'var(--n-check-mark-color-disabled-checked)'
 })])])]), (0, cssr_1.cB)('checkbox-box', `
- background-color: var(--color-disabled);
+ background-color: var(--n-color-disabled);
  `, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), (0, cssr_1.cB)('checkbox-icon', [(0, cssr_1.c)('.check-icon, .line-icon', {
-  fill: 'var(--check-mark-color-disabled)'
+  fill: 'var(--n-check-mark-color-disabled)'
 })])]), (0, cssr_1.cE)('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })]), (0, cssr_1.cB)('checkbox-box', `
- height: var(--size);
- width: var(--size);
+ height: var(--n-size);
+ width: var(--n-size);
  display: inline-block;
  box-sizing: border-box;
- border-radius: var(--border-radius);
- background-color: var(--color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
  position: relative;
  transition:
- background-color 0.3s var(--bezier);
+ background-color 0.3s var(--n-bezier);
  `, [(0, cssr_1.cE)('border', `
  transition:
- border-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ border-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  border-radius: inherit;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- border: var(--border);
+ border: var(--n-border);
  `), (0, cssr_1.cB)('checkbox-icon', `
  display: flex;
  align-items: center;
@@ -123,29 +122,30 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  top: 1px;
  bottom: 1px;
  `, [(0, cssr_1.c)('.check-icon, .line-icon', `
- fill: var(--check-mark-color);
+ width: 100%;
+ fill: var(--n-check-mark-color);
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition:
- fill 0.3s var(--bezier),
- transform 0.3s var(--bezier),
- opacity 0.3s var(--bezier),
- border-color 0.3s var(--bezier);
+ fill 0.3s var(--n-bezier),
+ transform 0.3s var(--n-bezier),
+ opacity 0.3s var(--n-bezier),
+ border-color 0.3s var(--n-bezier);
  `), (0, icon_switch_cssr_1.default)({
   left: '1px',
   top: '1px'
 })])]), (0, cssr_1.cE)('label', `
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  user-select: none;
- padding: var(--label-padding);
+ padding: var(--n-label-padding);
  `, [(0, cssr_1.c)('&:empty', {
   display: 'none'
 })])]), // modal table header checkbox
 (0, cssr_1.insideModal)((0, cssr_1.cB)('checkbox', `
- --merged-color-table-header: var(--color-table-header-modal);
+ --n-merged-color-table-header: var(--n-color-table-header-modal);
  `)), // popover table header checkbox
 (0, cssr_1.insidePopover)((0, cssr_1.cB)('checkbox', `
- --merged-color-table-header: var(--color-table-header-popover);
+ --n-merged-color-table-header: var(--n-color-table-header-popover);
  `))]);

package/lib/code/src/Code.d.ts

@@ -14,6 +14,7 @@ declare const codeProps: {
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -73,6 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs: PropType<Hljs>;
     uri: BooleanConstructor;
     inline: BooleanConstructor;
+    wordWrap: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -121,20 +123,20 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     codeRef: import("vue").Ref<HTMLElement | null>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--font-family': string;
-        '--font-weight-strong': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--mono-3': string;
-        '--hue-1': string;
-        '--hue-2': string;
-        '--hue-3': string;
-        '--hue-4': string;
-        '--hue-5': string;
-        '--hue-5-2': string;
-        '--hue-6': string;
-        '--hue-6-2': string;
+        '--n-font-size': string;
+        '--n-font-family': string;
+        '--n-font-weight-strong': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-mono-3': string;
+        '--n-hue-1': string;
+        '--n-hue-2': string;
+        '--n-hue-3': string;
+        '--n-hue-4': string;
+        '--n-hue-5': string;
+        '--n-hue-5-2': string;
+        '--n-hue-6': string;
+        '--n-hue-6-2': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     language?: unknown;
@@ -143,6 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     hljs?: unknown;
     uri?: unknown;
     inline?: unknown;
+    wordWrap?: unknown;
     internalFontSize?: unknown;
     internalNoHighlight?: unknown;
     theme?: unknown;
@@ -151,6 +154,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     inline: boolean;
     trim: boolean;
+    wordWrap: boolean;
     code: string;
     uri: boolean;
     internalNoHighlight: boolean;
@@ -203,6 +207,7 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     inline: boolean;
     trim: boolean;
+    wordWrap: boolean;
     code: string;
     uri: boolean;
     internalNoHighlight: boolean;

package/lib/code/src/Code.js

@@ -13,7 +13,7 @@ const codeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { l
     }, trim: {
         type: Boolean,
         default: true
-    }, hljs: Object, uri: Boolean, inline: Boolean, 
+    }, hljs: Object, uri: Boolean, inline: Boolean, wordWrap: Boolean, 
     // In n-log, we only need to mount code's style for highlight
     internalFontSize: Number, internalNoHighlight: Boolean });
 exports.default = (0, vue_1.defineComponent)({
@@ -57,9 +57,16 @@ exports.default = (0, vue_1.defineComponent)({
                 codeEl.textContent = code;
                 return;
             }
-            const warp = document.createElement('pre');
-            warp.textContent = code;
-            codeEl.appendChild(warp);
+            const maybePreEl = codeEl.children[0];
+            if (maybePreEl && maybePreEl.tagName === 'PRE') {
+                maybePreEl.textContent = code;
+            }
+            else {
+                const warp = document.createElement('pre');
+                warp.textContent = code;
+                codeEl.innerHTML = '';
+                codeEl.appendChild(warp);
+            }
         };
         (0, vue_1.onMounted)(setCode);
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'language'), setCode);
@@ -76,26 +83,31 @@ exports.default = (0, vue_1.defineComponent)({
                 'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
                 const { internalFontSize } = props;
                 return {
-                    '--font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
-                    '--font-family': fontFamilyMono,
-                    '--font-weight-strong': fontWeightStrong,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--mono-3': $1,
-                    '--hue-1': $2,
-                    '--hue-2': $3,
-                    '--hue-3': $4,
-                    '--hue-4': $5,
-                    '--hue-5': $6,
-                    '--hue-5-2': $7,
-                    '--hue-6': $8,
-                    '--hue-6-2': $9
+                    '--n-font-size': internalFontSize
+                        ? `${internalFontSize}px`
+                        : fontSize,
+                    '--n-font-family': fontFamilyMono,
+                    '--n-font-weight-strong': fontWeightStrong,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-mono-3': $1,
+                    '--n-hue-1': $2,
+                    '--n-hue-2': $3,
+                    '--n-hue-3': $4,
+                    '--n-hue-4': $5,
+                    '--n-hue-5': $6,
+                    '--n-hue-5-2': $7,
+                    '--n-hue-6': $8,
+                    '--n-hue-6-2': $9
                 };
             })
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("code", { class: `${mergedClsPrefix}-code`, style: this.cssVars, ref: "codeRef" }, this.$slots));
+        const { mergedClsPrefix, wordWrap } = this;
+        return ((0, vue_1.h)("code", { class: [
+                `${mergedClsPrefix}-code`,
+                wordWrap && `${mergedClsPrefix}-code--word-wrap`
+            ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }
 });

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

@@ -5,33 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --font-family
-// --font-weight-strong
-// --bezier
-// --text-color
-// --mono-3
-// --hue-1
-// --hue-2
-// --hue-3
-// --hue-4
-// --hue-5
-// --hue-5-2
-// --hue-6
-// --hue-6-2
+// --n-font-size
+// --n-font-family
+// --n-font-weight-strong
+// --n-bezier
+// --n-text-color
+// --n-mono-3
+// --n-hue-1
+// --n-hue-2
+// --n-hue-3
+// --n-hue-4
+// --n-hue-5
+// --n-hue-5-2
+// --n-hue-6
+// --n-hue-6-2
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
- font-size: var(--font-size);
- font-family: var(--font-family);
- `, [(0, cssr_1.c)('pre', `
+ font-size: var(--n-font-size);
+ font-family: var(--n-font-family);
+ `, [(0, cssr_1.cM)('word-wrap', [(0, cssr_1.c)('pre', 'white-space: pre-wrap;')]), (0, cssr_1.c)('pre', `
  margin: 0;
  font-family: inherit;
  `), (0, cssr_1.c)('[class^=hljs]', `
- color: var(--text-color);
+ color: var(--n-text-color);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), ({
   props
 }) => {
@@ -39,29 +39,29 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
   const codeClass = `${props.bPrefix}code`;
   return [`${codeClass} .hljs-comment,
  ${codeClass} .hljs-quote {
- color: var(--mono-3);
+ color: var(--n-mono-3);
  font-style: italic;
  }`, `${codeClass} .hljs-doctag,
  ${codeClass} .hljs-keyword,
  ${codeClass} .hljs-formula {
- color: var(--hue-3);
+ color: var(--n-hue-3);
  }`, `${codeClass} .hljs-section,
  ${codeClass} .hljs-name,
  ${codeClass} .hljs-selector-tag,
  ${codeClass} .hljs-deletion,
  ${codeClass} .hljs-subst {
- color: var(--hue-5);
+ color: var(--n-hue-5);
  }`, `${codeClass} .hljs-literal {
- color: var(--hue-1);
+ color: var(--n-hue-1);
  }`, `${codeClass} .hljs-string,
  ${codeClass} .hljs-regexp,
  ${codeClass} .hljs-addition,
  ${codeClass} .hljs-attribute,
  ${codeClass} .hljs-meta-string {
- color: var(--hue-4);
+ color: var(--n-hue-4);
  }`, `${codeClass} .hljs-built_in,
  ${codeClass} .hljs-class .hljs-title {
- color: var(--hue-6-2);
+ color: var(--n-hue-6-2);
  }`, `${codeClass} .hljs-attr,
  ${codeClass} .hljs-variable,
  ${codeClass} .hljs-template-variable,
@@ -70,18 +70,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('code', `
  ${codeClass} .hljs-selector-attr,
  ${codeClass} .hljs-selector-pseudo,
  ${codeClass} .hljs-number {
- color: var(--hue-6);
+ color: var(--n-hue-6);
  }`, `${codeClass} .hljs-symbol,
  ${codeClass} .hljs-bullet,
  ${codeClass} .hljs-link,
  ${codeClass} .hljs-meta,
  ${codeClass} .hljs-selector-id,
  ${codeClass} .hljs-title {
- color: var(--hue-2);
+ color: var(--n-hue-2);
  }`, `${codeClass} .hljs-emphasis {
  font-style: italic;
  }`, `${codeClass} .hljs-strong {
- font-weight: var(--font-weight-strong);
+ font-weight: var(--n-font-weight-strong);
  }`, `${codeClass} .hljs-link {
  text-decoration: underline;
  }`];

package/lib/collapse/src/Collapse.d.ts

@@ -239,14 +239,14 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--divider-color': string;
-        '--title-font-size': string;
-        '--title-text-color': string;
-        '--title-font-weight': string;
-        '--arrow-color': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-divider-color': string;
+        '--n-title-font-size': string;
+        '--n-title-text-color': string;
+        '--n-title-font-weight': string;
+        '--n-arrow-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly defaultExpandedNames?: unknown;

package/lib/collapse/src/Collapse.js

@@ -110,14 +110,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--divider-color': dividerColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-weight': titleFontWeight,
-                    '--arrow-color': arrowColor
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-divider-color': dividerColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-arrow-color': arrowColor
                 };
             })
         };

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

@@ -13,24 +13,24 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --font-size
-// --bezier
-// --text-color
-// --divider-color
-// --title-font-size
-// --title-text-color
-// --title-font-weight
-// --arrow-color
+// --n-font-size
+// --n-bezier
+// --n-text-color
+// --n-divider-color
+// --n-title-font-size
+// --n-title-text-color
+// --n-title-font-weight
+// --n-arrow-color
 
 
 exports.default = (0, cssr_1.cB)('collapse', {
   width: '100%'
 }, [(0, cssr_1.cB)('collapse-item', `
- font-size: var(--font-size);
- color: var(--text-color);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  margin: 16px 0 0 0;
  `, [(0, cssr_1.cB)('collapse-item', 'margin-left: 32px;'), (0, cssr_1.c)('&:first-child', {
   marginTop: 0
@@ -47,36 +47,36 @@ exports.default = (0, cssr_1.cB)('collapse', {
 })]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('header', [(0, cssr_1.cM)('active', [(0, cssr_1.cB)('collapse-item-arrow', {
   transform: 'rotate(90deg)'
 })])])]), (0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--divider-color)'
+  borderTop: '1px solid var(--n-divider-color)'
 }), (0, cssr_1.cE)('header', `
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  position: relative;
  padding: 16px 0 0 0;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `, [(0, cssr_1.cE)('header-main', `
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  flex: 1;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), (0, cssr_1.cE)('header-extra', `
  cursor: pointer;
  display: flex;
  align-items: center;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), (0, cssr_1.cB)('collapse-item-arrow', `
  display: flex;
  transition:
- transform .15s var(--bezier),
- color .3s var(--bezier);
+ transform .15s var(--n-bezier),
+ color .3s var(--n-bezier);
  font-size: 18px;
- color: var(--arrow-color);
+ color: var(--n-arrow-color);
  `)])])]);

package/lib/collapse-transition/src/CollapseTransition.d.ts

@@ -46,7 +46,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedShow: import("vue").ComputedRef<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
+        '--n-bezier': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly show?: unknown;

package/lib/collapse-transition/src/CollapseTransition.js

@@ -48,7 +48,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { bezier } } = mergedThemeRef.value;
                 return {
-                    '--bezier': bezier
+                    '--n-bezier': bezier
                 };
             })
         };

package/lib/color-picker/src/ColorInputUnit.js

@@ -61,7 +61,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const inputValueRef = (0, vue_1.ref)('');
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const themeRef = (0, vue_1.inject)(ColorPicker_1.colorPickerThemeInjectionKey, null);
+        const { themeRef } = (0, vue_1.inject)(ColorPicker_1.colorPickerInjectionKey, null);
         (0, vue_1.watchEffect)(() => {
             inputValueRef.value = getInputString();
         });