naive-ui 2.21.5 → 2.23.2

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

@@ -15,19 +15,19 @@ const cssr_1 = require("../../../_utils/cssr");
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_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
 
 
 exports.default = (0, cssr_1.cB)('tree', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
 `, [(0, cssr_1.c)('ul, li', `
  margin: 0;
@@ -47,33 +47,33 @@ exports.default = (0, cssr_1.cB)('tree', `
  `), (0, cssr_1.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);
  `, [(0, cssr_1.cM)('highlight', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.cE)('text', {
-  borderBottomColor: 'var(--node-text-color-disabled)'
+  borderBottomColor: 'var(--n-node-text-color-disabled)'
 })])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('tree-node-content', `
- color: var(--node-text-color-disabled);
+ color: var(--n-node-text-color-disabled);
  cursor: not-allowed;
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', `
  cursor: pointer;
  `)])])]), (0, cssr_1.cM)('block-node', [(0, cssr_1.cB)('tree-node-content', `
  width: 100%;
  `)]), (0, cssr_1.cNotM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 })]), (0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })])]), (0, cssr_1.cM)('pending', [(0, cssr_1.cB)('tree-node-content', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })])])])]), (0, cssr_1.cM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 }), (0, cssr_1.cM)('selectable', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })]), (0, cssr_1.cM)('pending', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `), (0, cssr_1.cM)('selected', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `)])]), (0, cssr_1.cB)('tree-node-switcher', `
@@ -84,18 +84,18 @@ exports.default = (0, cssr_1.cB)('tree', `
  width: 24px;
  align-items: center;
  justify-content: center;
- transition: transform .15s var(--bezier);
+ transition: transform .15s var(--n-bezier);
  vertical-align: bottom;
  `, [(0, cssr_1.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;
  `, [(0, cssr_1.cB)('icon', [(0, icon_switch_cssr_1.default)()]), (0, cssr_1.cB)('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  position: absolute;
  left: 0;
  top: 0;
@@ -123,15 +123,15 @@ exports.default = (0, cssr_1.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);
  `, [(0, cssr_1.c)('&:last-child', {
   marginBottom: 0
 }), (0, cssr_1.cE)('prefix', `
@@ -139,7 +139,7 @@ exports.default = (0, cssr_1.cB)('tree', `
  margin-right: 8px;
  `), (0, cssr_1.cE)('text', `
  border-bottom: 1px solid #0000;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  flex-grow:1;
  `), (0, cssr_1.cE)('suffix', `
  display: inline-flex;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, HTMLAttributes } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { CheckStrategy } from 'treemate';
 import { Key } from '../../tree/src/interface';
@@ -94,6 +94,7 @@ declare const props: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -104,6 +105,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -238,6 +242,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -372,6 +379,9 @@ declare const props: {
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -591,6 +601,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly menuProps: PropType<HTMLAttributes>;
     readonly virtualScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -601,6 +612,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -735,6 +749,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -869,6 +886,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1055,11 +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;
+        '--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: {
@@ -1171,6 +1194,9 @@ declare const _default: import("vue").DefineComponent<{
             menuBoxShadow: string;
             menuBorderRadius: string;
             menuHeight: string;
+            actionDividerColor: string;
+            actionTextColor: string;
+            actionPadding: string;
         };
         peers: {
             Tree: import("../../_mixins").Theme<"Tree", {
@@ -1403,6 +1429,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly value?: unknown;
     readonly to?: unknown;
+    readonly menuProps?: unknown;
     readonly virtualScroll?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
@@ -1444,6 +1471,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1578,6 +1608,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1712,6 +1745,9 @@ declare const _default: import("vue").DefineComponent<{
         menuBoxShadow: string;
         menuBorderRadius: string;
         menuHeight: string;
+        actionDividerColor: string;
+        actionTextColor: string;
+        actionPadding: string;
     }, {
         Tree: import("../../_mixins").Theme<"Tree", {
             fontSize: string;
@@ -1843,6 +1879,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: MaybeArray<(show: boolean) => void> | undefined;
     onUpdateShow?: MaybeArray<(show: boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;
+    menuProps?: HTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     leafOnly?: boolean | undefined;

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

@@ -8,6 +8,7 @@ const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
 const vdirs_1 = require("vdirs");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const Tree_1 = require("../../tree/src/Tree");
 const _internal_1 = require("../../_internal");
 const tree_1 = require("../../tree");
@@ -45,7 +46,7 @@ const props = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixin
     }, show: {
         type: Boolean,
         default: undefined
-    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, virtualScroll: {
+    }, size: String, value: [String, Number, Array], to: _utils_1.useAdjustedTo.propTo, menuProps: Object, virtualScroll: {
         type: Boolean,
         default: true
     } }), Tree_1.treeSharedProps), { onBlur: Function, onFocus: Function, onUpdateShow: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], 'onUpdate:show': [Function, Array], 
@@ -442,7 +443,8 @@ exports.default = (0, vue_1.defineComponent)({
         function handleMenuMousedown(e) {
             // If there's an action slot later, we need to check if mousedown happens
             // in action panel
-            e.preventDefault();
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
         }
         (0, vue_1.provide)(interface_1.treeSelectInjectionKey, {
             pendingNodeKeyRef
@@ -519,20 +521,23 @@ exports.default = (0, vue_1.defineComponent)({
             handleTabOut,
             handleMenuMousedown,
             cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight } } = themeRef.value;
+                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
+                    '--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
         };
     },
     render() {
-        const { mergedTheme, mergedClsPrefix } = this;
+        const { mergedTheme, mergedClsPrefix, $slots } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select` },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
@@ -544,11 +549,21 @@ exports.default = (0, vue_1.defineComponent)({
                             default: () => {
                                 if (!this.mergedShow)
                                     return null;
-                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple } = this;
-                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu`, ref: "menuElRef", style: this.cssVars, tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout },
+                                const { mergedClsPrefix, filteredTreeInfo, checkable, multiple, menuProps } = this;
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", Object.assign({}, menuProps, { class: [
+                                        `${mergedClsPrefix}-tree-select-menu`,
+                                        menuProps === null || menuProps === void 0 ? void 0 : menuProps.class
+                                    ], ref: "menuElRef", style: [
+                                        (menuProps === null || menuProps === void 0 ? void 0 : menuProps.style) || '',
+                                        this.cssVars
+                                    ], tabindex: 0, onMousedown: this.handleMenuMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown, onFocusin: this.handleMenuFocusin, onFocusout: this.handleMenuFocusout }),
                                     filteredTreeInfo.filteredTree.length ? ((0, vue_1.h)(tree_1.NTree, { ref: "treeInstRef", blockLine: true, animated: false, data: filteredTreeInfo.filteredTree, cancelable: multiple, labelField: this.labelField, theme: mergedTheme.peers.Tree, themeOverrides: mergedTheme.peerOverrides.Tree, defaultExpandAll: this.defaultExpandAll, defaultExpandedKeys: this.defaultExpandedKeys, expandedKeys: this.mergedExpandedKeys, checkedKeys: this.treeCheckedKeys, selectedKeys: this.treeSelectedKeys, checkable: checkable, checkStrategy: this.checkStrategy, cascade: this.mergedCascade, leafOnly: this.leafOnly, multiple: this.multiple, virtualScroll: this.consistentMenuWidth &&
-                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` },
-                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))),
+                                            this.virtualScroll, internalDataTreeMate: this.dataTreeMate, internalDisplayTreeMate: this.displayTreeMate, internalHighlightKeySet: filteredTreeInfo.highlightKeySet, internalUnifySelectCheck: true, internalScrollable: true, internalScrollablePadding: this.menuPadding, internalFocusable: false, internalCheckboxFocusable: false, onUpdateCheckedKeys: this.handleUpdateCheckedKeys, onUpdateIndeterminateKeys: this.handleUpdateIndeterminateKeys, onUpdateExpandedKeys: this.doUpdateExpandedKeys })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__empty` }, (0, vue_1.renderSlot)($slots, 'empty', undefined, () => [
+                                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
+                                    ]))),
+                                    $slots.action && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tree-select-menu__action`, "data-action": true }, {
+                                        default: $slots.action
+                                    })),
                                     (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.handleTabOut })), [[vdirs_1.clickoutside, this.handleMenuClickoutside]]);
                             }
                         }))

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

@@ -13,11 +13,14 @@ 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
-// --menu-height
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-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
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
@@ -29,15 +32,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
  position: relative;
  overflow: hidden;
  margin: 4px 0;
- max-height: var(--menu-height);
- 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;
- `, [(0, cssr_1.cB)('tree', 'max-height: inherit;'), (0, cssr_1.cE)('empty', `
+ `, [(0, cssr_1.cB)('tree', 'max-height: var(--n-menu-height);'), (0, cssr_1.cE)('empty', `
  display: flex;
  padding: 12px 32px;
  flex: 1;
  justify-content: center;
+ `), (0, cssr_1.cE)('action', `
+ padding: var(--n-action-padding);
+ transition: 
+ 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);
  `), (0, fade_in_scale_up_cssr_1.default)()])]);

package/lib/tree-select/styles/light.d.ts

@@ -5,6 +5,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 };
 export declare type TreeSelectThemeVars = ReturnType<typeof self>;
 declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSelect", {
@@ -13,6 +16,9 @@ declare const treeSelectLight: import("../../_mixins/use-theme").Theme<"TreeSele
     menuBoxShadow: string;
     menuBorderRadius: string;
     menuHeight: string;
+    actionDividerColor: string;
+    actionTextColor: string;
+    actionPadding: string;
 }, {
     Tree: import("../../_mixins/use-theme").Theme<"Tree", {
         fontSize: string;

package/lib/tree-select/styles/light.js

@@ -7,13 +7,16 @@ const styles_1 = require("../../tree/styles");
 const styles_2 = require("../../empty/styles");
 const styles_3 = require("../../_internal/selection/styles");
 const self = (vars) => {
-    const { popoverColor, boxShadow2, borderRadius, heightMedium } = vars;
+    const { popoverColor, boxShadow2, borderRadius, heightMedium, dividerColor, textColor2 } = vars;
     return {
         menuPadding: '4px',
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuBorderRadius: borderRadius,
-        menuHeight: `calc(${heightMedium} * 7.6)`
+        menuHeight: `calc(${heightMedium} * 7.6)`,
+        actionDividerColor: dividerColor,
+        actionTextColor: textColor2,
+        actionPadding: '8px 12px'
     };
 };
 exports.self = self;

package/lib/typography/src/a.d.ts

@@ -402,8 +402,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--text-color': string;
-        '--bezier': string;
+        '--n-text-color': 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 theme?: unknown;

package/lib/typography/src/a.js

@@ -19,8 +19,8 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { aTextColor } } = themeRef.value;
                 return {
-                    '--text-color': aTextColor,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-text-color': aTextColor,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             })
         };

package/lib/typography/src/blockquote.d.ts

@@ -404,11 +404,11 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--prefix-color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-prefix-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly alignText?: unknown;

package/lib/typography/src/blockquote.js

@@ -19,11 +19,11 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { blockquoteTextColor, blockquotePrefixColor, blockquoteLineHeight, blockquoteFontSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': blockquoteFontSize,
-                    '--line-height': blockquoteLineHeight,
-                    '--prefix-color': blockquotePrefixColor,
-                    '--text-color': blockquoteTextColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': blockquoteFontSize,
+                    '--n-line-height': blockquoteLineHeight,
+                    '--n-prefix-color': blockquotePrefixColor,
+                    '--n-text-color': blockquoteTextColor
                 };
             })
         };

package/lib/typography/src/create-header.d.ts

@@ -415,14 +415,14 @@ declare const _default: (level: '1' | '2' | '3' | '4' | '5' | '6') => import("vu
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--margin': string;
-        '--bar-color': string;
-        '--bar-width': string;
-        '--font-weight': string;
-        '--text-color': string;
-        '--prefix-width': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-margin': string;
+        '--n-bar-color': string;
+        '--n-bar-width': string;
+        '--n-font-weight': string;
+        '--n-text-color': string;
+        '--n-prefix-width': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly type?: unknown;

package/lib/typography/src/create-header.js

@@ -25,14 +25,14 @@ exports.default = (level) => (0, vue_1.defineComponent)({
                 const { type } = props;
                 const { common: { cubicBezierEaseInOut }, self: { headerFontWeight, headerTextColor, [(0, _utils_1.createKey)('headerPrefixWidth', level)]: prefixWidth, [(0, _utils_1.createKey)('headerFontSize', level)]: fontSize, [(0, _utils_1.createKey)('headerMargin', level)]: margin, [(0, _utils_1.createKey)('headerBarWidth', level)]: barWidth, [(0, _utils_1.createKey)('headerBarColor', type)]: barColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--margin': margin,
-                    '--bar-color': barColor,
-                    '--bar-width': barWidth,
-                    '--font-weight': headerFontWeight,
-                    '--text-color': headerTextColor,
-                    '--prefix-width': prefixWidth
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-margin': margin,
+                    '--n-bar-color': barColor,
+                    '--n-bar-width': barWidth,
+                    '--n-font-weight': headerFontWeight,
+                    '--n-text-color': headerTextColor,
+                    '--n-prefix-width': prefixWidth
                 };
             })
         };