naive-ui 2.23.1 → 2.23.2

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

@@ -5,119 +5,121 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --border-radius
-// --color
-// --color-modal
-// --color-popover
-// --text-color
-// --line-height
-// --padding-top
-// --padding-bottom
-// --padding-left
-// --font-size
-// --action-color
-// --title-font-weight
-// --title-font-size
-// --title-text-color
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --border-color
-// --close-size
-// --box-shadow
+// --n-bezier
+// --n-border-radius
+// --n-color
+// --n-color-modal
+// --n-color-popover
+// --n-text-color
+// --n-line-height
+// --n-padding-top
+// --n-padding-bottom
+// --n-padding-left
+// --n-font-size
+// --n-action-color
+// --n-title-font-weight
+// --n-title-font-size
+// --n-title-text-color
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-border-color
+// --n-close-size
+// --n-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
- font-size: var(--font-size);
- line-height: var(--line-height);
+ font-size: var(--n-font-size);
+ line-height: var(--n-line-height);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  position: relative;
- border-radius: var(--border-radius);
- background-color: var(--color);
- color: var(--text-color);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
- `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  paddingTop: 'var(--padding-bottom)'
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ `, [(0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
- margin: 0 var(--padding-left);
- padding: var(--padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
+ padding: var(--n-padding-bottom) 0;
  `)])]), (0, cssr_1.cM)('footer-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })])]), (0, cssr_1.cM)('footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
- padding: var(--padding-bottom) 0;
- margin: 0 var(--padding-left);
+ padding: var(--n-padding-bottom) 0;
+ margin: 0 var(--n-padding-left);
  `)])]), (0, cssr_1.c)('>', [(0, cssr_1.cB)('card-header', `
  box-sizing: border-box;
  display: flex;
  align-items: center;
- font-size: var(--title-font-size);
+ font-size: var(--n-title-font-size);
  padding:
- var(--padding-top)
- var(--padding-left)
- var(--padding-bottom)
- var(--padding-left);
+ var(--n-padding-top)
+ var(--n-padding-left)
+ var(--n-padding-bottom)
+ var(--n-padding-left);
  `, [(0, cssr_1.cE)('main', `
- 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)('extra', `
  display: flex;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  font-weight: 400;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `), (0, cssr_1.cE)('close', `
- font-size: var(--close-size);
- transition: color .3s var(--bezier);
+ font-size: var(--n-close-size);
+ transition: color .3s var(--n-bezier);
  `)]), (0, cssr_1.cE)('action', `
  box-sizing: border-box;
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  background-clip: padding-box;
- background-color: var(--action-color);
+ background-color: var(--n-action-color);
  `), (0, cssr_1.cE)('content', 'flex: 1;'), (0, cssr_1.cE)('content, footer', `
  box-sizing: border-box;
- padding: 0 var(--padding-left) var(--padding-bottom) var(--padding-left);
- font-size: var(--font-size);
+ padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
+ font-size: var(--n-font-size);
  `, [(0, cssr_1.c)('&:first-child', {
-  paddingTop: 'var(--padding-bottom)'
+  paddingTop: 'var(--n-padding-bottom)'
 })]), (0, cssr_1.cE)('action', `
- background-color: var(--action-color);
- padding: var(--padding-bottom) var(--padding-left);
+ background-color: var(--n-action-color);
+ padding: var(--n-padding-bottom) var(--n-padding-left);
+ border-bottom-left-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  `)]), (0, cssr_1.cB)('card-cover', `
  overflow: hidden;
  width: 100%;
- border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
  `, [(0, cssr_1.c)('img', `
  display: block;
  width: 100%;
  `)]), (0, cssr_1.cM)('bordered', `
- border: 1px solid var(--border-color);
- `, [(0, cssr_1.c)('&:target', 'border-color: var(--color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+ border: 1px solid var(--n-border-color);
+ `, [(0, cssr_1.c)('&:target', 'border-color: var(--n-color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', {
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), (0, cssr_1.cM)('content-segmented, content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])]), (0, cssr_1.cM)('footer-segmented, footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  transition: 'border-color 0.3s var(--bezier)'
+  transition: 'border-color 0.3s var(--n-bezier)'
 }, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--border-color)'
+  borderTop: '1px solid var(--n-border-color)'
 })])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', {
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })), (0, cssr_1.insidePopover)((0, cssr_1.cB)('card', {
-  background: 'var(--color-popover)'
+  background: 'var(--n-color-popover)'
 })), (0, cssr_1.cB)('card', [(0, cssr_1.asModal)({
-  background: 'var(--color-modal)'
+  background: 'var(--n-color-modal)'
 })])]);

package/lib/carousel/src/Carousel.d.ts

@@ -85,11 +85,11 @@ declare const _default: import("vue").DefineComponent<{
     handleTransitionEnd: (e: TransitionEvent) => void;
     handleMouseenter: (current: number) => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--dot-color': string;
-        '--dot-color-active': string;
-        '--dot-size': string;
-        '--arrow-color': string;
+        '--n-bezier': string;
+        '--n-dot-color': string;
+        '--n-dot-color-active': string;
+        '--n-dot-size': 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<{
     showArrow?: unknown;

package/lib/carousel/src/Carousel.js

@@ -243,11 +243,11 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { dotColor, dotColorActive, dotSize, arrowColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--dot-color': dotColor,
-                    '--dot-color-active': dotColorActive,
-                    '--dot-size': dotSize,
-                    '--arrow-color': arrowColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-dot-color': dotColor,
+                    '--n-dot-color-active': dotColorActive,
+                    '--n-dot-size': dotSize,
+                    '--n-arrow-color': arrowColor
                 };
             })
         };

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

@@ -16,7 +16,7 @@ exports.default = (0, cssr_1.cB)('carousel', `
  overflow: hidden;
  position: relative;
 `, [(0, cssr_1.cE)('slides', `
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  display: flex;
  `, [(0, cssr_1.c)('> div', `
  overflow: hidden;
@@ -27,24 +27,24 @@ exports.default = (0, cssr_1.cB)('carousel', `
  display: flex;
  flex-wrap: nowrap;
  `), (0, cssr_1.cE)('dot', `
- height: var(--dot-size);
- width: var(--dot-size);
- background-color: var(--dot-color);
+ height: var(--n-dot-size);
+ width: var(--n-dot-size);
+ background-color: var(--n-dot-color);
  border-radius: 50%;
  cursor: pointer;
  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;
  `, [(0, cssr_1.c)('&:focus', `
- background-color: var(--dot-color-active);
+ background-color: var(--n-dot-color-active);
  `), (0, cssr_1.cM)('active', `
- background-color: var(--dot-color-active);
+ background-color: var(--n-dot-color-active);
  `), (0, cssr_1.c)('&:last-child', `
  margin-right: 0;
  `)]), (0, cssr_1.cE)('arrow', `
  position: absolute;
- transition: transform .3s var(--bezier);
+ transition: transform .3s var(--n-bezier);
  transform: scale(1);
  cursor: pointer;
  height: 48px;
@@ -52,7 +52,7 @@ exports.default = (0, cssr_1.cB)('carousel', `
  display: flex;
  align-items: center;
  justify-content: center;
- color: var(--arrow-color);
+ color: var(--n-arrow-color);
  `, [(0, cssr_1.cM)('right', `
  transform: translateY(-50%);
  top: 50%;

package/lib/cascader/src/Cascader.d.ts

@@ -82,6 +82,8 @@ declare const cascaderProps: {
     };
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(show: Boolean) => void>>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -714,6 +716,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    readonly 'onUpdate:show': PropType<MaybeArray<(show: Boolean) => void>>;
+    readonly onUpdateShow: PropType<MaybeArray<(show: Boolean) => void>>;
     readonly onBlur: PropType<(e: FocusEvent) => void>;
     readonly onFocus: PropType<(e: FocusEvent) => void>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
@@ -1670,23 +1674,23 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--menu-border-radius': string;
-        '--menu-box-shadow': string;
-        '--menu-height': string;
-        '--column-width': string;
-        '--menu-color': string;
-        '--menu-divider-color': string;
-        '--option-height': string;
-        '--option-font-size': string;
-        '--option-text-color': string;
-        '--option-text-color-disabled': string;
-        '--option-text-color-active': string;
-        '--option-color-hover': string;
-        '--option-check-mark-color': string;
-        '--option-arrow-color': string;
-        '--menu-mask-color': string;
-        '--loading-color': string;
+        '--n-bezier': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-box-shadow': string;
+        '--n-menu-height': string;
+        '--n-column-width': string;
+        '--n-menu-color': string;
+        '--n-menu-divider-color': string;
+        '--n-option-height': string;
+        '--n-option-font-size': string;
+        '--n-option-text-color': string;
+        '--n-option-text-color-disabled': string;
+        '--n-option-text-color-active': string;
+        '--n-option-color-hover': string;
+        '--n-option-check-mark-color': string;
+        '--n-option-arrow-color': string;
+        '--n-menu-mask-color': string;
+        '--n-loading-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;
@@ -1718,6 +1722,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly childrenField?: unknown;
     readonly 'onUpdate:value'?: unknown;
     readonly onUpdateValue?: unknown;
+    readonly 'onUpdate:show'?: unknown;
+    readonly onUpdateShow?: unknown;
     readonly onBlur?: unknown;
     readonly onFocus?: unknown;
     readonly onChange?: unknown;
@@ -2304,6 +2310,8 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     bordered?: boolean | undefined;
+    "onUpdate:show"?: MaybeArray<(show: Boolean) => void> | undefined;
+    onUpdateShow?: MaybeArray<(show: Boolean) => void> | undefined;
     maxTagCount?: number | "responsive" | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;

package/lib/cascader/src/Cascader.js

@@ -62,7 +62,7 @@ const cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, childrenField: {
         type: String,
         default: 'children'
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onBlur: Function, onFocus: Function, 
+    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, 
     // deprecated
     onChange: [Function, Array] });
 // TODO refactor cascader menu keyboard scroll (use virtual list)
@@ -166,6 +166,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow) {
+                (0, _utils_1.call)(onUpdateShow, value);
+            }
+            if (_onUpdateShow) {
+                (0, _utils_1.call)(_onUpdateShow, value);
+            }
+            uncontrolledShowRef.value = value;
+        }
         function doUpdateValue(value, option, optionPath) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -339,7 +349,7 @@ exports.default = (0, vue_1.defineComponent)({
         function openMenu() {
             if (!mergedDisabledRef.value) {
                 patternRef.value = '';
-                uncontrolledShowRef.value = true;
+                doUpdateShow(true);
                 if (props.filterable) {
                     focusSelectionInput();
                 }
@@ -349,7 +359,7 @@ exports.default = (0, vue_1.defineComponent)({
             if (returnFocus) {
                 focusSelection();
             }
-            uncontrolledShowRef.value = false;
+            doUpdateShow(false);
             patternRef.value = '';
         }
         function handleCascaderMenuClickOutside(e) {
@@ -700,23 +710,23 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { optionArrowColor, optionTextColor, optionTextColorActive, optionTextColorDisabled, optionCheckMarkColor, menuColor, menuBoxShadow, menuDividerColor, menuBorderRadius, menuHeight, optionColorHover, optionHeight, optionFontSize, loadingColor, columnWidth }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-height': menuHeight,
-                    '--column-width': columnWidth,
-                    '--menu-color': menuColor,
-                    '--menu-divider-color': menuDividerColor,
-                    '--option-height': optionHeight,
-                    '--option-font-size': optionFontSize,
-                    '--option-text-color': optionTextColor,
-                    '--option-text-color-disabled': optionTextColorDisabled,
-                    '--option-text-color-active': optionTextColorActive,
-                    '--option-color-hover': optionColorHover,
-                    '--option-check-mark-color': optionCheckMarkColor,
-                    '--option-arrow-color': optionArrowColor,
-                    '--menu-mask-color': (0, seemly_1.changeColor)(menuColor, { alpha: 0.75 }),
-                    '--loading-color': loadingColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-height': menuHeight,
+                    '--n-column-width': columnWidth,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-divider-color': menuDividerColor,
+                    '--n-option-height': optionHeight,
+                    '--n-option-font-size': optionFontSize,
+                    '--n-option-text-color': optionTextColor,
+                    '--n-option-text-color-disabled': optionTextColorDisabled,
+                    '--n-option-text-color-active': optionTextColorActive,
+                    '--n-option-color-hover': optionColorHover,
+                    '--n-option-check-mark-color': optionCheckMarkColor,
+                    '--n-option-arrow-color': optionArrowColor,
+                    '--n-menu-mask-color': (0, seemly_1.changeColor)(menuColor, { alpha: 0.75 }),
+                    '--n-loading-color': loadingColor
                 };
             })
         };

package/lib/cascader/src/CascaderMenu.js

@@ -108,7 +108,7 @@ exports.default = (0, vue_1.defineComponent)({
                 if (!this.show)
                     return null;
                 return (0, vue_1.withDirectives)((0, vue_1.h)("div", { tabindex: "0", ref: "selfElRef", class: `${mergedClsPrefix}-cascader-menu`, onMousedown: this.onMousedown, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.onKeyup, style: {
-                        '--col-count': this.menuModel.length
+                        '--n-col-count': this.menuModel.length
                     } },
                     this.menuModel[0].length ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-submenu-wrapper` },
                         this.menuModel.map((submenuOptions, index) => ((0, vue_1.h)(CascaderSubmenu_1.default, { ref: ((instance) => {

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

@@ -13,21 +13,21 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-height
-// --menu-color
-// --menu-divider-color
-// --option-height
-// --option-font-size
-// --option-text-color
-// --option-text-color-disabled
-// --option-text-color-active
-// --option-color-hover
-// --option-check-mark-color
-// --option-arrow-color
-// --menu-mask-color
-// --loading-color
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-height
+// --n-menu-color
+// --n-menu-divider-color
+// --n-option-height
+// --n-option-font-size
+// --n-option-text-color
+// --n-option-text-color-disabled
+// --n-option-text-color-active
+// --n-option-color-hover
+// --n-option-check-mark-color
+// --n-option-arrow-color
+// --n-menu-mask-color
+// --n-loading-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
@@ -36,11 +36,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
  margin: 4px 0;
  display: flex;
  flex-flow: column nowrap;
- border-radius: var(--menu-border-radius);
+ border-radius: var(--n-menu-border-radius);
  overflow: hidden;
- box-shadow: var(--menu-box-shadow);
- color: var(--option-text-color);
- background-color: var(--menu-color);
+ box-shadow: var(--n-menu-box-shadow);
+ color: var(--n-option-text-color);
+ background-color: var(--n-menu-color);
  `, [(0, fade_in_scale_up_cssr_1.default)({
   transformOrigin: 'inherit',
   duration: '0.2s'
@@ -54,37 +54,37 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
   // not correct, which won't change after select menu width is set
   width: '100%'
 }), (0, cssr_1.cB)('base-menu-mask', {
-  backgroundColor: 'var(--menu-mask-color)'
+  backgroundColor: 'var(--n-menu-mask-color)'
 }), (0, cssr_1.cB)('base-loading', {
-  color: 'var(--loading-color)'
+  color: 'var(--n-loading-color)'
 }), (0, cssr_1.cB)('cascader-submenu-wrapper', `
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  `), (0, cssr_1.cB)('cascader-submenu', `
- height: var(--menu-height);
- min-width: var(--column-width);
+ height: var(--n-menu-height);
+ min-width: var(--n-column-width);
  position: relative;
  `, [(0, cssr_1.cM)('virtual', `
- width: var(--column-width);
+ width: var(--n-column-width);
  `), (0, cssr_1.cB)('scrollbar-content', {
   position: 'relative'
 }), (0, cssr_1.c)('&:first-child', `
- border-top-left-radius: var(--menu-border-radius);
- border-bottom-left-radius: var(--menu-border-radius);
+ border-top-left-radius: var(--n-menu-border-radius);
+ border-bottom-left-radius: var(--n-menu-border-radius);
  `), (0, cssr_1.c)('&:last-child', `
- border-top-right-radius: var(--menu-border-radius);
- border-bottom-right-radius: var(--menu-border-radius);
+ border-top-right-radius: var(--n-menu-border-radius);
+ border-bottom-right-radius: var(--n-menu-border-radius);
  `), (0, cssr_1.c)('&:not(:first-child)', `
- border-left: 1px solid var(--menu-divider-color);
+ border-left: 1px solid var(--n-menu-divider-color);
  `)]), (0, cssr_1.cB)('cascader-menu-action', `
  box-sizing: border-box;
  padding: 8px;
- border-top: 1px solid var(--menu-divider-color);
+ border-top: 1px solid var(--n-menu-divider-color);
  `), (0, cssr_1.cB)('cascader-option', `
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--option-font-size);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-option-font-size);
  padding: 0 0 0 18px;
  box-sizing: border-box;
  min-width: 182px;
@@ -95,8 +95,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
  position: relative;
  cursor: pointer;
  transition:
- background-color .2s var(--bezier),
- color 0.2s var(--bezier);
+ background-color .2s var(--n-bezier),
+ color 0.2s var(--n-bezier);
  `, [(0, cssr_1.cM)('show-prefix', {
   paddingLeft: 0
 }), (0, cssr_1.cE)('label', `
@@ -120,24 +120,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('cascader-menu', `
   height: '16px',
   fontSize: '16px'
 }, [(0, cssr_1.cB)('cascader-option-icon', [(0, cssr_1.cM)('checkmark', {
-  color: 'var(--option-check-mark-color)'
+  color: 'var(--n-option-check-mark-color)'
 }, [(0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.cM)('arrow', {
-  color: 'var(--option-arrow-color)'
+  color: 'var(--n-option-arrow-color)'
 })])]), (0, cssr_1.cM)('selected', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 }), (0, cssr_1.cM)('active', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.cM)('pending', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--option-color-hover)'
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.cM)('disabled', `
- color: var(--option-text-color-disabled);
+ color: var(--n-option-text-color-disabled);
  background-color: #0000;
  cursor: not-allowed;
  `, [(0, cssr_1.cB)('cascader-option-icon', [(0, cssr_1.cM)('arrow', {
-  color: 'var(--option-text-color-disabled)'
+  color: 'var(--n-option-text-color-disabled)'
 })])])])]), (0, cssr_1.cB)('cascader', `
  z-index: auto;
  position: relative;

package/lib/cascader/styles/light.js

@@ -15,7 +15,7 @@ const self = (vars) => {
         menuColor: popoverColor,
         menuBoxShadow: boxShadow2,
         menuDividerColor: dividerColor,
-        menuHeight: 'calc(var(--option-height) * 6.6)',
+        menuHeight: 'calc(var(--n-option-height) * 6.6)',
         optionArrowColor: textColor3,
         optionHeight: heightMedium,
         optionFontSize: fontSizeMedium,