naive-ui 2.23.0 → 2.24.1

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', `

package/lib/dynamic-tags/src/DynamicTags.d.ts

@@ -2571,7 +2571,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--input-width': string;
+        '--n-input-width': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     closable?: unknown;

package/lib/dynamic-tags/src/DynamicTags.js

@@ -127,7 +127,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { inputWidth } } = themeRef.value;
                 return {
-                    '--input-width': inputWidth
+                    '--n-input-width': inputWidth
                 };
             })
         };

package/lib/dynamic-tags/src/styles/index.cssr.js

@@ -9,5 +9,5 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 
 
 exports.default = (0, cssr_1.cB)('dynamic-tags', [(0, cssr_1.cB)('input', {
-  minWidth: 'var(--input-width)'
+  minWidth: 'var(--n-input-width)'
 })]);

package/lib/empty/src/Empty.d.ts

@@ -1,14 +1,15 @@
 import { PropType, VNodeChild } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const emptyProps: {
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -56,14 +57,15 @@ declare const emptyProps: {
 };
 export declare type EmptyProps = ExtractPublicPropTypes<typeof emptyProps>;
 declare const _default: import("vue").DefineComponent<{
-    description: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
     showDescription: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     size: {
         type: PropType<"small" | "medium" | "large" | "huge">;
         default: string;
@@ -113,16 +115,17 @@ declare const _default: import("vue").DefineComponent<{
     mergedRenderIcon: import("vue").ComputedRef<() => VNodeChild>;
     localizedDescription: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--icon-size': string;
-        '--font-size': string;
-        '--bezier': string;
-        '--text-color': string;
-        '--icon-color': string;
-        '--extra-text-color': string;
+        '--n-icon-size': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-text-color': string;
+        '--n-icon-color': string;
+        '--n-extra-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     description?: unknown;
     showDescription?: unknown;
+    showIcon?: unknown;
     size?: unknown;
     renderIcon?: unknown;
     theme?: unknown;
@@ -131,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 } & {
     description?: string | undefined;
     theme?: import("../../_mixins").Theme<"Empty", {
@@ -174,8 +178,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     renderIcon?: (() => VNodeChild) | undefined;
 }>, {
-    description: string;
     size: "small" | "medium" | "large" | "huge";
     showDescription: boolean;
+    showIcon: boolean;
 }>;
 export default _default;

package/lib/empty/src/Empty.js

@@ -11,10 +11,10 @@ const _internal_1 = require("../../_internal");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const ConfigProvider_1 = require("../../config-provider/src/ConfigProvider");
-const emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: {
-        type: String,
-        default: undefined
-    }, showDescription: {
+const emptyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: String, showDescription: {
+        type: Boolean,
+        default: true
+    }, showIcon: {
         type: Boolean,
         default: true
     }, size: {
@@ -48,12 +48,12 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
                 return {
-                    '--icon-size': iconSize,
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--text-color': textColor,
-                    '--icon-color': iconColor,
-                    '--extra-text-color': extraTextColor
+                    '--n-icon-size': iconSize,
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-text-color': textColor,
+                    '--n-icon-color': iconColor,
+                    '--n-extra-text-color': extraTextColor
                 };
             })
         };
@@ -61,9 +61,9 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { $slots, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, (0, vue_1.renderSlot)($slots, 'icon', undefined, () => [
+            this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, (0, vue_1.renderSlot)($slots, 'icon', undefined, () => [
                 (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })
-            ])),
+            ]))) : null,
             this.showDescription ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__description` }, (0, vue_1.renderSlot)($slots, 'default', undefined, () => [
                 this.localizedDescription
             ]))) : null,