naive-ui 2.22.0 → 2.24.0

package/lib/drawer/src/Drawer.js

@@ -31,56 +31,33 @@ const drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, nativeScrollbar: {
         type: Boolean,
         default: true
-    }, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 
     /** @deprecated */
-    drawerStyle: {
-        type: [Object, String],
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, 
-    /** @deprecated */
-    drawerClass: {
-        type: String,
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, target: {
-        validator: process.env.NODE_ENV !== 'production'
-            ? () => {
-                (0, _utils_1.warn)('drawer', '`target` is deprecated, please use `to` instead.');
-                return true;
-            }
-            : undefined,
-        default: undefined
-    }, onShow: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    }, onHide: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
-            return true;
-        },
-        default: undefined
-    } });
+    drawerStyle: [String, Object], drawerClass: String, target: null, onShow: Function, onHide: Function });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Drawer',
     inheritAttrs: false,
     props: drawerProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.drawerStyle !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-style` is deprecated, please use `style` instead.');
+                }
+                if (props.drawerClass !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`drawer-class` is deprecated, please use `class` instead.');
+                }
+                if (props.target !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`target` is deprecated, please use `to` instead.');
+                }
+                if (props.onShow !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-show` is deprecated, please use `on-update:show` instead.');
+                }
+                if (props.onHide !== undefined) {
+                    (0, _utils_1.warnOnce)('drawer', '`on-hide` is deprecated, please use `on-update:show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
         const themeRef = (0, _mixins_1.useTheme)('Drawer', 'Drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
@@ -115,6 +92,11 @@ exports.default = (0, vue_1.defineComponent)({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleKeydown(e) {
+            if (e.code === 'Escape') {
+                doUpdateShow(false);
+            }
+        }
         function doUpdateShow(show) {
             const { onHide, onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
             if (onUpdateShow)
@@ -136,29 +118,30 @@ exports.default = (0, vue_1.defineComponent)({
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
             handleMaskClick,
+            handleKeydown,
             mergedTheme: themeRef,
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
                 return {
-                    '--line-height': lineHeight,
-                    '--color': color,
-                    '--text-color': textColor,
-                    '--box-shadow': boxShadow,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--bezier-out': cubicBezierEaseOut,
-                    '--bezier-in': cubicBezierEaseIn,
-                    '--header-padding': headerPadding,
-                    '--body-padding': bodyPadding,
-                    '--footer-padding': footerPadding,
-                    '--title-text-color': titleTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--header-border-bottom': headerBorderBottom,
-                    '--footer-border-top': footerBorderTop,
-                    '--close-color': closeColor,
-                    '--close-color-hover': closeColorHover,
-                    '--close-color-pressed': closeColorPressed,
-                    '--close-size': closeSize
+                    '--n-line-height': lineHeight,
+                    '--n-color': color,
+                    '--n-text-color': textColor,
+                    '--n-box-shadow': boxShadow,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-bezier-out': cubicBezierEaseOut,
+                    '--n-bezier-in': cubicBezierEaseIn,
+                    '--n-header-padding': headerPadding,
+                    '--n-body-padding': bodyPadding,
+                    '--n-footer-padding': footerPadding,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-header-border-bottom': headerBorderBottom,
+                    '--n-footer-border-top': footerBorderTop,
+                    '--n-close-color': closeColor,
+                    '--n-close-color-hover': closeColorHover,
+                    '--n-close-color-pressed': closeColorPressed,
+                    '--n-close-size': closeSize
                 };
             }),
             isMounted: isMountedRef
@@ -168,11 +151,11 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars },
+                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars, onKeydown: this.handleKeydown, role: "none" },
                     (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted }, {
-                        default: () => this.show ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
+                        default: () => this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
+const vueuc_1 = require("vueuc");
 const _internal_1 = require("../../_internal");
 const interface_1 = require("../../popover/src/interface");
 const interface_2 = require("../../modal/src/interface");
@@ -63,19 +64,26 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return this.displayDirective === 'show' || this.displayed || this.show
-            ? (0, vue_1.withDirectives)((0, vue_1.h)("div", null,
-                (0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
-                    default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
-                        ref: 'bodyRef',
-                        class: [
-                            `${mergedClsPrefix}-drawer`,
-                            `${mergedClsPrefix}-drawer--${this.placement}-placement`,
-                            this.nativeScrollbar &&
-                                `${mergedClsPrefix}-drawer--native-scrollbar`
-                        ]
-                    }), [
-                        this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
-                    ]), [[vue_1.vShow, this.show]])
+            ? (0, vue_1.withDirectives)(
+            /* Keep the wrapper dom. Make sure the drawer has a host.
+              Nor the detached content will disappear without transition */
+            (0, vue_1.h)("div", { role: "none" },
+                (0, vue_1.h)(vueuc_1.VFocusTrap, { active: this.show, focusFirstDescendant: true }, {
+                    default: () => ((0, vue_1.h)(vue_1.Transition, { name: this.transitionName, appear: this.isMounted, onAfterLeave: this.handleAfterLeave }, {
+                        default: () => (0, vue_1.withDirectives)((0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+                            role: 'dialog',
+                            ref: 'bodyRef',
+                            'aria-modal': 'true',
+                            class: [
+                                `${mergedClsPrefix}-drawer`,
+                                `${mergedClsPrefix}-drawer--${this.placement}-placement`,
+                                this.nativeScrollbar &&
+                                    `${mergedClsPrefix}-drawer--native-scrollbar`
+                            ]
+                        }), [
+                            this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
+                        ]), [[vue_1.vShow, this.show]])
+                    }))
                 })), [
                 [
                     vue_1.vShow,

package/lib/drawer/src/DrawerContent.js

@@ -36,16 +36,16 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
-        return ((0, vue_1.h)("div", { class: [
+        return ((0, vue_1.h)("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main` }, $slots.header !== undefined ? $slots.header() : title),
+            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
                 closable && ((0, vue_1.h)(_internal_1.NBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close` })))) : null,
-            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle }, $slots.footer())) : null));
+            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
+                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
+            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
     }
 });

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

@@ -21,37 +21,37 @@ const slide_in_from_top_1 = __importDefault(require("../../../_styles/transition
 const slide_in_from_bottom_1 = __importDefault(require("../../../_styles/transitions/slide-in-from-bottom"));
 
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr")); // vars:
-// --line-height
-// --color
-// --text-color
-// --box-shadow
-// --bezier
-// --bezier-out
-// --bezier-in
-// --body-padding
-// --header-padding
-// --footer-padding
-// --title-font-size
-// --title-text-color
-// --title-font-weight
-// --header-border-bottom
-// --footer-border-top
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --close-size
+// --n-line-height
+// --n-color
+// --n-text-color
+// --n-box-shadow
+// --n-bezier
+// --n-bezier-out
+// --n-bezier-in
+// --n-body-padding
+// --n-header-padding
+// --n-footer-padding
+// --n-title-font-size
+// --n-title-text-color
+// --n-title-font-weight
+// --n-header-border-bottom
+// --n-footer-border-top
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-close-size
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('drawer', `
- line-height: var(--line-height);
+ line-height: var(--n-line-height);
  position: absolute;
  pointer-events: all;
- box-shadow: var(--box-shadow);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
- background-color: var(--color);
- color: var(--text-color);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
  box-sizing: border-box;
  `, [(0, slide_in_from_right_1.default)(), (0, slide_in_from_left_1.default)(), (0, slide_in_from_top_1.default)(), (0, slide_in_from_bottom_1.default)(), (0, cssr_1.cM)('native-scrollbar', [(0, cssr_1.cB)('drawer-content-wrapper', `
  overflow: auto;
@@ -67,30 +67,31 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('drawer', `
  overflow: auto;
  `)]), (0, cssr_1.cB)('drawer-body', `
  flex: 1 0 0;
+ overflow: hidden;
  `), (0, cssr_1.cB)('drawer-body-content-wrapper', `
  box-sizing: border-box;
- padding: var(--body-padding);
+ padding: var(--n-body-padding);
  `), (0, cssr_1.cB)('drawer-header', `
- font-weight: var(--title-font-weight);
+ font-weight: var(--n-title-font-weight);
  line-height: 1;
- font-size: var(--title-font-size);
- color: var(--title-text-color);
- padding: var(--header-padding);
- transition: border .3s var(--bezier);
- border-bottom: 1px solid var(--divider-color);
- border-bottom: var(--header-border-bottom);
+ font-size: var(--n-title-font-size);
+ color: var(--n-title-text-color);
+ padding: var(--n-header-padding);
+ transition: border .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-divider-color);
+ border-bottom: var(--n-header-border-bottom);
  display: flex;
  justify-content: space-between;
  align-items: center;
  `, [(0, cssr_1.cE)('close', `
- transition: color .3s var(--bezier);
- font-size: var(--close-size);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-close-size);
  `)]), (0, cssr_1.cB)('drawer-footer', `
  display: flex;
  justify-content: flex-end;
- border-top: var(--footer-border-top);
- transition: border .3s var(--bezier);
- padding: var(--footer-padding);
+ border-top: var(--n-footer-border-top);
+ transition: border .3s var(--n-bezier);
+ padding: var(--n-footer-padding);
  `)]), (0, cssr_1.cM)('right-placement', `
  top: 0;
  bottom: 0;
@@ -129,6 +130,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('drawer', `
  `, [(0, fade_in_cssr_1.default)({
   enterDuration: '0.2s',
   leaveDuration: '0.2s',
-  enterCubicBezier: 'var(--bezier-in)',
-  leaveCubicBezier: 'var(--bezier-out)'
+  enterCubicBezier: 'var(--n-bezier-in)',
+  leaveCubicBezier: 'var(--n-bezier-out)'
 })])]);

package/lib/dropdown/src/Dropdown.d.ts

@@ -321,6 +321,7 @@ declare const dropdownProps: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -633,6 +634,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    readonly internalTrapFocus: BooleanConstructor;
     readonly onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly onHide: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     readonly arrow: {
@@ -871,6 +873,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly to?: unknown;
     readonly internalSyncTargetWithParent?: unknown;
     readonly internalInheritedEventHandlers?: unknown;
+    readonly internalTrapFocus?: unknown;
     readonly onShow?: unknown;
     readonly onHide?: unknown;
     readonly arrow?: unknown;
@@ -889,6 +892,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -1146,6 +1150,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/dropdown/src/Dropdown.js

@@ -241,46 +241,48 @@ exports.default = (0, vue_1.defineComponent)({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { padding, dividerColor, borderRadius, optionOpacityDisabled, [(0, _utils_1.createKey)('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [(0, _utils_1.createKey)('optionSuffixWidth', size)]: optionSuffixWidth, [(0, _utils_1.createKey)('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [(0, _utils_1.createKey)('optionPrefixWidth', size)]: optionPrefixWidth, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('optionHeight', size)]: optionHeight, [(0, _utils_1.createKey)('optionIconSize', size)]: optionIconSize } = self;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--padding': padding,
-                    '--border-radius': borderRadius,
-                    '--option-height': optionHeight,
-                    '--option-prefix-width': optionPrefixWidth,
-                    '--option-icon-prefix-width': optionIconPrefixWidth,
-                    '--option-suffix-width': optionSuffixWidth,
-                    '--option-icon-suffix-width': optionIconSuffixWidth,
-                    '--option-icon-size': optionIconSize,
-                    '--divider-color': dividerColor,
-                    '--option-opacity-disabled': optionOpacityDisabled
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-padding': padding,
+                    '--n-border-radius': borderRadius,
+                    '--n-option-height': optionHeight,
+                    '--n-option-prefix-width': optionPrefixWidth,
+                    '--n-option-icon-prefix-width': optionIconPrefixWidth,
+                    '--n-option-suffix-width': optionSuffixWidth,
+                    '--n-option-icon-suffix-width': optionIconSuffixWidth,
+                    '--n-option-icon-size': optionIconSize,
+                    '--n-divider-color': dividerColor,
+                    '--n-option-opacity-disabled': optionOpacityDisabled
                 };
                 // writing like this is the fastest method
                 if (inverted) {
-                    vars['--color'] = self.colorInverted;
-                    vars['--option-color-hover'] = self.optionColorHoverInverted;
-                    vars['--option-color-active'] = self.optionColorActiveInverted;
-                    vars['--option-text-color'] = self.optionTextColorInverted;
-                    vars['--option-text-color-hover'] = self.optionTextColorHoverInverted;
-                    vars['--option-text-color-active'] =
+                    vars['--n-color'] = self.colorInverted;
+                    vars['--n-option-color-hover'] = self.optionColorHoverInverted;
+                    vars['--n-option-color-active'] = self.optionColorActiveInverted;
+                    vars['--n-option-text-color'] = self.optionTextColorInverted;
+                    vars['--n-option-text-color-hover'] =
+                        self.optionTextColorHoverInverted;
+                    vars['--n-option-text-color-active'] =
                         self.optionTextColorActiveInverted;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActiveInverted;
-                    vars['--prefix-color'] = self.prefixColorInverted;
-                    vars['--suffix-color'] = self.suffixColorInverted;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColorInverted;
+                    vars['--n-prefix-color'] = self.prefixColorInverted;
+                    vars['--n-suffix-color'] = self.suffixColorInverted;
+                    vars['--n-group-header-text-color'] =
+                        self.groupHeaderTextColorInverted;
                 }
                 else {
-                    vars['--color'] = self.color;
-                    vars['--option-color-hover'] = self.optionColorHover;
-                    vars['--option-color-active'] = self.optionColorActive;
-                    vars['--option-text-color'] = self.optionTextColor;
-                    vars['--option-text-color-hover'] = self.optionTextColorHover;
-                    vars['--option-text-color-active'] = self.optionTextColorActive;
-                    vars['--option-text-color-child-active'] =
+                    vars['--n-color'] = self.color;
+                    vars['--n-option-color-hover'] = self.optionColorHover;
+                    vars['--n-option-color-active'] = self.optionColorActive;
+                    vars['--n-option-text-color'] = self.optionTextColor;
+                    vars['--n-option-text-color-hover'] = self.optionTextColorHover;
+                    vars['--n-option-text-color-active'] = self.optionTextColorActive;
+                    vars['--n-option-text-color-child-active'] =
                         self.optionTextColorChildActive;
-                    vars['--prefix-color'] = self.prefixColor;
-                    vars['--suffix-color'] = self.suffixColor;
-                    vars['--group-header-text-color'] = self.groupHeaderTextColor;
+                    vars['--n-prefix-color'] = self.prefixColor;
+                    vars['--n-suffix-color'] = self.suffixColor;
+                    vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
                 }
                 return vars;
             })

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

@@ -13,40 +13,40 @@ 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:
-// --bezier
-// --font-size
-// --padding
-// --border-radius
-// --option-height
-// --option-prefix-width
-// --option-icon-prefix-width
-// --option-suffix-width
-// --option-icon-suffix-width
-// --color
-// --option-color-hover
-// --option-color-active
-// --divider-color
-// --option-text-color
-// --option-text-color-hover
-// --option-text-color-active
-// --option-text-color-child-active
-// --prefix-color
-// --suffix-color
-// --option-icon-size
-// --option-opacity-disabled
+// --n-bezier
+// --n-font-size
+// --n-padding
+// --n-border-radius
+// --n-option-height
+// --n-option-prefix-width
+// --n-option-icon-prefix-width
+// --n-option-suffix-width
+// --n-option-icon-suffix-width
+// --n-color
+// --n-option-color-hover
+// --n-option-color-active
+// --n-divider-color
+// --n-option-text-color
+// --n-option-text-color-hover
+// --n-option-text-color-active
+// --n-option-text-color-child-active
+// --n-prefix-color
+// --n-suffix-color
+// --n-option-icon-size
+// --n-option-opacity-disabled
 // shared with popover
-// --box-shadow
+// --n-box-shadow
 
 
 exports.default = (0, cssr_1.cB)('dropdown-menu', `
  transform-origin: inherit;
- padding: var(--padding);
- background-color: var(--color);
- border-radius: var(--border-radius);
- box-shadow: var(--box-shadow);
+ padding: var(--n-padding);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
 `, [(0, fade_in_scale_up_cssr_1.default)(), (0, cssr_1.cB)('dropdown-option', `
  position: relative;
  `, [(0, cssr_1.c)('a', `
@@ -62,48 +62,48 @@ exports.default = (0, cssr_1.cB)('dropdown-menu', `
  `)]), (0, cssr_1.cB)('dropdown-option-body', `
  display: flex;
  cursor: pointer;
- height: var(--option-height);
- line-height: var(--option-height);
- font-size: var(--font-size);
- color: var(--option-text-color);
+ height: var(--n-option-height);
+ line-height: var(--n-option-height);
+ font-size: var(--n-font-size);
+ color: var(--n-option-text-color);
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('pending', [(0, cssr_1.cNotM)('disabled', {
-  color: 'var(--option-text-color-hover)',
-  backgroundColor: 'var(--option-color-hover)'
+  color: 'var(--n-option-text-color-hover)',
+  backgroundColor: 'var(--n-option-color-hover)'
 }), (0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--option-text-color-hover)'
+  color: 'var(--n-option-text-color-hover)'
 })]), (0, cssr_1.cM)('active', [(0, cssr_1.cNotM)('disabled', {
-  color: 'var(--option-text-color-active)',
-  backgroundColor: 'var(--option-color-active)'
+  color: 'var(--n-option-text-color-active)',
+  backgroundColor: 'var(--n-option-color-active)'
 }), (0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--option-text-color-active)'
+  color: 'var(--n-option-text-color-active)'
 })]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed',
-  opacity: 'var(--option-opacity-disabled)'
+  opacity: 'var(--n-option-opacity-disabled)'
 }), (0, cssr_1.cM)('child-active', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 }, [(0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--option-text-color-child-active)'
+  color: 'var(--n-option-text-color-child-active)'
 })]), (0, cssr_1.cM)('group', {
-  fontSize: 'calc(var(--font-size) - 1px)',
-  color: 'var(--group-header-text-color)'
+  fontSize: 'calc(var(--n-font-size) - 1px)',
+  color: 'var(--n-group-header-text-color)'
 }, [(0, cssr_1.cE)('prefix', {
-  width: 'calc(var(--option-prefix-width) / 2)'
+  width: 'calc(var(--n-option-prefix-width) / 2)'
 }, [(0, cssr_1.cM)('show-icon', {
-  width: 'calc(var(--option-icon-prefix-width) / 2)'
+  width: 'calc(var(--n-option-icon-prefix-width) / 2)'
 })])]), (0, cssr_1.cE)('prefix', `
- width: var(--option-prefix-width);
+ width: var(--n-option-prefix-width);
  display: flex;
  justify-content: center;
  align-items: center;
- color: var(--prefix-color);
- transition: color .3s var(--bezier);
+ color: var(--n-prefix-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('show-icon', {
-  width: 'var(--option-icon-prefix-width)'
+  width: 'var(--n-option-icon-prefix-width)'
 }), (0, cssr_1.cB)('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), (0, cssr_1.cE)('label', {
   whiteSpace: 'nowrap',
   flex: 1
@@ -114,14 +114,14 @@ exports.default = (0, cssr_1.cB)('dropdown-menu', `
  display: flex;
  justify-content: flex-end;
  align-items: center;
- min-width: var(--option-suffix-width);
+ min-width: var(--n-option-suffix-width);
  padding: 0 8px;
- transition: color .3s var(--bezier);
- color: var(--suffix-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-suffix-color);
  `, [(0, cssr_1.cM)('has-submenu', {
-  width: 'var(--option-icon-suffix-width)'
+  width: 'var(--n-option-icon-suffix-width)'
 }), (0, cssr_1.cB)('icon', {
-  fontSize: 'var(--option-icon-size)'
+  fontSize: 'var(--n-option-icon-size)'
 })]), (0, cssr_1.cB)('dropdown-menu', {
   pointerEvents: 'all'
 })]), (0, cssr_1.cB)('dropdown-offset-container', `
@@ -132,8 +132,8 @@ exports.default = (0, cssr_1.cB)('dropdown-menu', `
  top: -4px;
  bottom: -4px;
  `)]), (0, cssr_1.cB)('dropdown-divider', `
- transition: background-color .3s var(--bezier);
- background-color: var(--divider-color);
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-divider-color);
  height: 1px;
  margin: 4px 0;
  `), (0, cssr_1.cB)('dropdown-menu-wrapper', `