naive-ui 2.22.0 → 2.24.0

package/lib/carousel/src/utils.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextIndex = exports.getPrevIndex = exports.getRealIndex = exports.getDisplayIndex = exports.resolveSpeed = exports.clampValue = exports.calculateSize = exports.isTouchEvent = void 0;
+function isTouchEvent(e) {
+    return window.TouchEvent && e instanceof window.TouchEvent;
+}
+exports.isTouchEvent = isTouchEvent;
+function calculateSize(element, innerOnly) {
+    let width = element.clientWidth;
+    let height = element.clientHeight;
+    if (innerOnly) {
+        const style = getComputedStyle(element);
+        width =
+            width -
+                parseFloat(style.getPropertyValue('padding-left')) -
+                parseFloat(style.getPropertyValue('padding-right'));
+        height =
+            height -
+                parseFloat(style.getPropertyValue('padding-top')) -
+                parseFloat(style.getPropertyValue('padding-bottom'));
+        return { width, height };
+    }
+    return { width, height };
+}
+exports.calculateSize = calculateSize;
+function clampValue(value, min, max) {
+    return value < min ? min : value > max ? max : value;
+}
+exports.clampValue = clampValue;
+function resolveSpeed(value) {
+    if (value === undefined)
+        return 0;
+    if (typeof value === 'number')
+        return value;
+    const timeRE = /^((\d+)?\.?\d+?)(ms|s)?$/;
+    const match = value.match(timeRE);
+    if (match) {
+        const [, number, , unit = 'ms'] = match;
+        return Number(number) * (unit === 'ms' ? 1 : 1000);
+    }
+    return 0;
+}
+exports.resolveSpeed = resolveSpeed;
+function getDisplayIndex(current, length, duplicatedable) {
+    return !duplicatedable
+        ? current
+        : current === 0
+            ? length - 3
+            : current === length - 1
+                ? 0
+                : current - 1;
+}
+exports.getDisplayIndex = getDisplayIndex;
+function getRealIndex(current, duplicatedable) {
+    return !duplicatedable ? current : current + 1;
+}
+exports.getRealIndex = getRealIndex;
+function getPrevIndex(current, length, duplicatedable) {
+    if (current < 0)
+        return null;
+    return current === 0 ? (duplicatedable ? length - 1 : null) : current - 1;
+}
+exports.getPrevIndex = getPrevIndex;
+function getNextIndex(current, length, duplicatedable) {
+    if (current > length - 1)
+        return null;
+    return current === length - 1 ? (duplicatedable ? 0 : null) : current + 1;
+}
+exports.getNextIndex = getNextIndex;

package/lib/carousel/styles/light.d.ts

@@ -4,6 +4,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     dotSize: string;
     dotColor: string;
     dotColorActive: string;
+    dotColorFocus: string;
+    dotLineWidth: string;
+    dotLineWidthActive: string;
     arrowColor: string;
 };
 export declare type CarouselThemeVars = ReturnType<typeof self>;

package/lib/carousel/styles/light.js

@@ -5,9 +5,12 @@ const common_1 = require("../../_styles/common");
 const self = (vars) => {
     return {
         dotSize: '8px',
-        dotColor: 'rgba(255, 255, 255, .3)',
+        dotColor: 'rgba(255, 255, 255, .25)',
         dotColorActive: 'rgba(255, 255, 255, 1)',
-        arrowColor: 'rgba(255, 255, 255, .6)'
+        dotColorFocus: 'rgba(255, 255, 255, .5)',
+        dotLineWidth: '16px',
+        dotLineWidthActive: '24px',
+        arrowColor: 'rgba(255, 255, 255, .5)'
     };
 };
 exports.self = self;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeChild } from 'vue';
 import { CheckStrategy } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { SelectBaseOption } from '../../select/src/interface';
@@ -80,8 +80,11 @@ declare const cascaderProps: {
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly renderLabel: PropType<(option: CascaderOption, checked: boolean) => VNodeChild>;
     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>;
@@ -712,8 +715,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "children";
     };
+    readonly renderLabel: PropType<(option: CascaderOption, checked: boolean) => VNodeChild>;
     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>;
@@ -1308,7 +1314,7 @@ declare const _default: import("vue").DefineComponent<{
         value: import("treemate").Key;
     }[]>;
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
-    menuModel: import("vue").ComputedRef<import("treemate").TreeNode<CascaderOption, CascaderOption, CascaderOption>[][]>;
+    menuModel: import("vue").ComputedRef<any>;
     handleMenuTabout: () => void;
     handleMenuFocus: (e: FocusEvent) => void;
     handleMenuBlur: (e: FocusEvent) => void;
@@ -1670,23 +1676,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;
@@ -1716,8 +1722,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly valueField?: unknown;
     readonly labelField?: unknown;
     readonly childrenField?: unknown;
+    readonly renderLabel?: 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 +2313,9 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     bordered?: boolean | undefined;
+    renderLabel?: ((option: CascaderOption, checked: boolean) => VNodeChild) | 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, 
+    }, renderLabel: 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) {
@@ -648,6 +658,7 @@ exports.default = (0, vue_1.defineComponent)({
             optionHeightRef,
             localeRef,
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
+            renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             syncCascaderMenuPosition,
             syncSelectMenuPosition,
             updateKeyboardKey,
@@ -700,23 +711,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/CascaderOption.d.ts

@@ -368,6 +368,7 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateValue: () => void;
     mergedHandleMouseEnter: import("vue").ComputedRef<(() => void) | undefined>;
     mergedHandleMouseMove: import("vue").ComputedRef<(() => void) | undefined>;
+    renderLabel: import("vue").Ref<((option: import("./interface").CascaderOption, checked: boolean) => import("vue").VNodeChild) | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     tmNode?: unknown;
 } & {

package/lib/cascader/src/CascaderOption.js

@@ -16,7 +16,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck
+        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck, renderLabelRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const valueRef = (0, vue_1.computed)(() => props.tmNode.key);
@@ -153,11 +153,12 @@ exports.default = (0, vue_1.defineComponent)({
             handleClick,
             handleCheckboxUpdateValue,
             mergedHandleMouseEnter: mergedHandleMouseEnterRef,
-            mergedHandleMouseMove: mergedHandleMouseMoveRef
+            mergedHandleMouseMove: mergedHandleMouseMoveRef,
+            renderLabel: renderLabelRef
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, renderLabel } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-cascader-option`,
                 {
@@ -168,7 +169,9 @@ exports.default = (0, vue_1.defineComponent)({
             ], onMouseenter: this.mergedHandleMouseEnter, onMousemove: this.mergedHandleMouseMove, onClick: this.handleClick },
             this.showCheckbox ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option__prefix` },
                 (0, vue_1.h)(checkbox_1.NCheckbox, { focusable: false, "data-checkbox": true, disabled: this.disabled, checked: this.checked, indeterminate: this.indeterminate, theme: this.mergedTheme.peers.Checkbox, themeOverrides: this.mergedTheme.peerOverrides.Checkbox, onUpdateChecked: this.handleCheckboxUpdateValue }))) : null,
-            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-cascader-option__label` }, this.label),
+            (0, vue_1.h)("span", { class: `${mergedClsPrefix}-cascader-option__label` }, renderLabel
+                ? renderLabel(this.tmNode.rawNode, this.checked)
+                : this.label),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option__suffix` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option-icon-placeholder` }, !this.isLeaf ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, scale: 0.85, strokeWidth: 24, show: this.isLoading, class: `${mergedClsPrefix}-cascader-option-icon` }, {
                     default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, key: "arrow", class: `${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow` }, {

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

@@ -2,7 +2,7 @@ import { CheckStrategy, TreeNode } from 'treemate';
 import type { MergedTheme } from '../../_mixins';
 import type { NLocale } from '../../locales';
 import type { CascaderTheme } from '../styles';
-import { InjectionKey, Ref } from 'vue';
+import { InjectionKey, Ref, VNodeChild } from 'vue';
 export declare type ValueAtom = string | number;
 export declare type Value = ValueAtom | ValueAtom[];
 export declare type Key = ValueAtom;
@@ -52,6 +52,7 @@ export interface CascaderInjection {
     closeMenu: (returnFocus?: boolean) => void;
     handleSelectMenuClickOutside: (e: MouseEvent) => void;
     handleCascaderMenuClickOutside: (e: MouseEvent) => void;
+    renderLabelRef: Ref<((option: CascaderOption, checked: boolean) => VNodeChild) | undefined>;
 }
 export interface CascaderSubmenuInstance {
     scroll: (index: number, elSize: number) => void;

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,

package/lib/checkbox/src/Checkbox.d.ts

@@ -383,29 +383,29 @@ declare const _default: import("vue").DefineComponent<{
     handleKeyUp: (e: KeyboardEvent) => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--size': string;
-        '--bezier': string;
-        '--border-radius': string;
-        '--border': string;
-        '--border-checked': string;
-        '--border-focus': string;
-        '--border-disabled': string;
-        '--border-disabled-checked': string;
-        '--box-shadow-focus': string;
-        '--color': string;
-        '--color-checked': string;
-        '--color-table-header': string;
-        '--color-table-header-modal': string;
-        '--color-table-header-popover': string;
-        '--color-disabled': string;
-        '--color-disabled-checked': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--check-mark-color': string;
-        '--check-mark-color-disabled': string;
-        '--check-mark-color-disabled-checked': string;
-        '--font-size': string;
-        '--label-padding': string;
+        '--n-size': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-border': string;
+        '--n-border-checked': string;
+        '--n-border-focus': string;
+        '--n-border-disabled': string;
+        '--n-border-disabled-checked': string;
+        '--n-box-shadow-focus': string;
+        '--n-color': string;
+        '--n-color-checked': string;
+        '--n-color-table-header': string;
+        '--n-color-table-header-modal': string;
+        '--n-color-table-header-popover': string;
+        '--n-color-disabled': string;
+        '--n-color-disabled-checked': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-check-mark-color': string;
+        '--n-check-mark-color-disabled': string;
+        '--n-check-mark-color-disabled-checked': string;
+        '--n-font-size': string;
+        '--n-label-padding': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/lib/checkbox/src/Checkbox.js

@@ -169,29 +169,29 @@ exports.default = (0, vue_1.defineComponent)({
                 const { value: mergedSize } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;
                 return {
-                    '--size': size,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--border': border,
-                    '--border-checked': borderChecked,
-                    '--border-focus': borderFocus,
-                    '--border-disabled': borderDisabled,
-                    '--border-disabled-checked': borderDisabledChecked,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--color': color,
-                    '--color-checked': colorChecked,
-                    '--color-table-header': colorTableHeader,
-                    '--color-table-header-modal': colorTableHeaderModal,
-                    '--color-table-header-popover': colorTableHeaderPopover,
-                    '--color-disabled': colorDisabled,
-                    '--color-disabled-checked': colorDisabledChecked,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--check-mark-color': checkMarkColor,
-                    '--check-mark-color-disabled': checkMarkColorDisabled,
-                    '--check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
-                    '--font-size': fontSize,
-                    '--label-padding': labelPadding
+                    '--n-size': size,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-border': border,
+                    '--n-border-checked': borderChecked,
+                    '--n-border-focus': borderFocus,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-disabled-checked': borderDisabledChecked,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-color': color,
+                    '--n-color-checked': colorChecked,
+                    '--n-color-table-header': colorTableHeader,
+                    '--n-color-table-header-modal': colorTableHeaderModal,
+                    '--n-color-table-header-popover': colorTableHeaderPopover,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-disabled-checked': colorDisabledChecked,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-check-mark-color': checkMarkColor,
+                    '--n-check-mark-color-disabled': checkMarkColorDisabled,
+                    '--n-check-mark-color-disabled-checked': checkMarkColorDisabledChecked,
+                    '--n-font-size': fontSize,
+                    '--n-label-padding': labelPadding
                 };
             })
         });