naive-ui 2.32.0 → 2.32.2

package/es/select/src/Select.d.ts

@@ -1,7 +1,7 @@
 import { PropType, InputHTMLAttributes, HTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
-import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
+import { RenderLabel, RenderOption, NodeProps } from '../../_internal/select-menu/src/interface';
 import { RenderTag } from '../../_internal/selection/src/interface';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
@@ -89,6 +89,7 @@ export declare const selectProps: {
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -576,6 +577,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -1399,6 +1401,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;

package/es/select/src/Select.js

@@ -1,5 +1,5 @@
 import { h, ref, computed, toRef, defineComponent, watch, Transition, withDirectives, vShow, watchEffect } from 'vue';
-import { happensIn } from 'seemly';
+import { getPreciseEventTarget, happensIn } from 'seemly';
 import { createTreeMate } from 'treemate';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useIsMounted, useMergedState, useCompitable } from 'vooks';
@@ -55,7 +55,7 @@ export const selectProps = Object.assign(Object.assign({}, useTheme.props), { to
     }, childrenField: {
         type: String,
         default: 'children'
-    }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, 
+    }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, nodeProps: Function, 
     // for jsx
     onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], displayDirective: {
         type: String,
@@ -364,7 +364,7 @@ export default defineComponent({
         function handleMenuClickOutside(e) {
             var _a;
             if (mergedShowRef.value) {
-                if (!((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(e.target))) {
+                if (!((_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.$el.contains(getPreciseEventTarget(e)))) {
                     // outside select, don't need to return focus
                     closeMenu();
                 }
@@ -656,7 +656,7 @@ export default defineComponent({
                                         `${this.mergedClsPrefix}-select-menu`,
                                         this.themeClass,
                                         (_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.class
-                                    ], clsPrefix: this.mergedClsPrefix, focusable: true, labelField: this.labelField, valueField: this.valueField, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                    ], clsPrefix: this.mergedClsPrefix, focusable: true, labelField: this.labelField, valueField: this.valueField, autoPending: true, nodeProps: this.nodeProps, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
                                         .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: "medium", renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, showCheckmark: this.internalShowCheckmark, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
                                     empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
                                     action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }

package/es/skeleton/src/Skeleton.js

@@ -66,7 +66,7 @@ export default defineComponent({
         // Maybe it's a bug of chrome
         const child = h('div', mergeProps({
             class: `${mergedClsPrefix}-skeleton`,
-            style: style
+            style
         }, $attrs));
         if (repeat > 1) {
             return (h(Fragment, null, Array.apply(null, { length: repeat }).map((_) => [

package/es/slider/styles/dark.js

@@ -6,7 +6,8 @@ const sliderDark = {
     self(vars) {
         const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)';
         const { railColor, modalColor, primaryColorSuppl, popoverColor, textColor2, cardColor, borderRadius, fontSize, opacityDisabled } = vars;
-        return Object.assign(Object.assign({}, sizeVariables), { fontSize, railColor: railColor, railColorHover: railColor, fillColor: primaryColorSuppl, fillColorHover: primaryColorSuppl, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowHover: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowActive: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowFocus: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', indicatorColor: popoverColor, indicatorBoxShadow: boxShadow, indicatorTextColor: textColor2, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColorSuppl}`, dotBoxShadow: '' });
+        return Object.assign(Object.assign({}, sizeVariables), { fontSize,
+            railColor, railColorHover: railColor, fillColor: primaryColorSuppl, fillColorHover: primaryColorSuppl, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowHover: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowActive: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', handleBoxShadowFocus: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', indicatorColor: popoverColor, indicatorBoxShadow: boxShadow, indicatorTextColor: textColor2, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColorSuppl}`, dotBoxShadow: '' });
     }
 };
 export default sliderDark;

package/es/slider/styles/light.js

@@ -4,7 +4,8 @@ const self = (vars) => {
     const indicatorColor = 'rgba(0, 0, 0, .85)';
     const boxShadow = '0 2px 8px 0 rgba(0, 0, 0, 0.12)';
     const { railColor, primaryColor, baseColor, cardColor, modalColor, popoverColor, borderRadius, fontSize, opacityDisabled } = vars;
-    return Object.assign(Object.assign({}, sizeVariables), { fontSize, railColor: railColor, railColorHover: railColor, fillColor: primaryColor, fillColorHover: primaryColor, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowHover: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowActive: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowFocus: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', indicatorColor: indicatorColor, indicatorBoxShadow: boxShadow, indicatorTextColor: baseColor, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColor}`, dotBoxShadow: '' });
+    return Object.assign(Object.assign({}, sizeVariables), { fontSize,
+        railColor, railColorHover: railColor, fillColor: primaryColor, fillColorHover: primaryColor, opacityDisabled, handleColor: '#FFF', dotColor: cardColor, dotColorModal: modalColor, dotColorPopover: popoverColor, handleBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowHover: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowActive: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', handleBoxShadowFocus: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', indicatorColor, indicatorBoxShadow: boxShadow, indicatorTextColor: baseColor, indicatorBorderRadius: borderRadius, dotBorder: `2px solid ${railColor}`, dotBorderActive: `2px solid ${primaryColor}`, dotBoxShadow: '' });
 };
 const sliderLight = {
     name: 'Slider',

package/es/statistic/src/Statistic.d.ts

@@ -7,6 +7,7 @@ export declare const statisticProps: {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -16,6 +17,7 @@ export declare const statisticProps: {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -25,6 +27,7 @@ export declare const statisticProps: {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -40,6 +43,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -49,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -58,6 +63,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -72,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-label-font-weight': string;
         '--n-label-text-color': string;
         '--n-value-font-weight': string;
+        '--n-value-font-size': string;
         '--n-value-prefix-text-color': string;
         '--n-value-suffix-text-color': string;
         '--n-value-text-color': string;
@@ -86,6 +93,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -95,6 +103,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;
@@ -104,6 +113,7 @@ declare const _default: import("vue").DefineComponent<{
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
+        valueFontSize: string;
         labelTextColor: string;
         valuePrefixTextColor: string;
         valueSuffixTextColor: string;

package/es/statistic/src/Statistic.js

@@ -12,13 +12,14 @@ export default defineComponent({
         const themeRef = useTheme('Statistic', '-statistic', style, statisticLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('Statistic', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
-            const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { labelFontWeight, valueFontSize, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-label-font-size': labelFontSize,
                 '--n-label-font-weight': labelFontWeight,
                 '--n-label-text-color': labelTextColor,
                 '--n-value-font-weight': valueFontWeight,
+                '--n-value-font-size': valueFontSize,
                 '--n-value-prefix-text-color': valuePrefixTextColor,
                 '--n-value-suffix-text-color': valueSuffixTextColor,
                 '--n-value-text-color': valueTextColor

package/es/statistic/src/styles/index.cssr.js

@@ -4,6 +4,7 @@ import { cB, cE } from '../../../_utils/cssr'; // vars:
 // --n-label-font-weight
 // --n-label-text-color
 // --n-value-font-weight
+// --n-value-font-size
 // --n-value-prefix-text-color
 // --n-value-suffix-text-color
 // --n-value-text-color
@@ -18,18 +19,18 @@ export default cB('statistic', [cE('label', `
  font-weight: var(--n-value-font-weight);
  `, [cE('prefix', `
  margin: 0 4px 0 0;
- font-size: 24px;
+ font-size: var(--n-value-font-size);
  transition: .3s color var(--n-bezier);
  color: var(--n-value-prefix-text-color);
  `, [cB('icon', {
   verticalAlign: '-0.125em'
 })]), cE('content', `
- font-size: 24px;
+ font-size: var(--n-value-font-size);
  transition: .3s color var(--n-bezier);
  color: var(--n-value-text-color);
  `), cE('suffix', `
  margin: 0 0 0 4px;
- font-size: 24px;
+ font-size: var(--n-value-font-size);
  transition: .3s color var(--n-bezier);
  color: var(--n-value-suffix-text-color);
  `, [cB('icon', {

package/es/statistic/styles/light.d.ts

@@ -4,6 +4,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     labelFontSize: string;
     labelFontWeight: string;
     valueFontWeight: string;
+    valueFontSize: string;
     labelTextColor: string;
     valuePrefixTextColor: string;
     valueSuffixTextColor: string;

package/es/statistic/styles/light.js

@@ -5,6 +5,7 @@ export const self = (vars) => {
         labelFontSize: fontSize,
         labelFontWeight: fontWeight,
         valueFontWeight: fontWeight,
+        valueFontSize: '24px',
         labelTextColor: textColor3,
         valuePrefixTextColor: textColor2,
         valueSuffixTextColor: textColor2,

package/es/steps/src/Steps.d.ts

@@ -249,6 +249,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     current: NumberConstructor;
     status: {

package/es/steps/src/Steps.js

@@ -1,5 +1,5 @@
 import { h, defineComponent, provide } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useRtl } from '../../_mixins';
 import { createInjectionKey, flatten, getSlot } from '../../_utils';
 import { stepsLight } from '../styles';
 import style from './styles/index.cssr';
@@ -27,7 +27,8 @@ export default defineComponent({
     name: 'Steps',
     props: stepsProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
+        const rtlEnabledRef = useRtl('Steps', mergedRtlRef, mergedClsPrefixRef);
         const themeRef = useTheme('Steps', '-steps', style, stepsLight, props, mergedClsPrefixRef);
         provide(stepsInjectionKey, {
             props,
@@ -36,13 +37,15 @@ export default defineComponent({
             stepsSlots: slots
         });
         return {
-            mergedClsPrefix: mergedClsPrefixRef
+            mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef
         };
     },
     render() {
         const { mergedClsPrefix } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-steps`,
+                this.rtlEnabled && `${mergedClsPrefix}-steps--rtl`,
                 this.vertical && `${mergedClsPrefix}-steps--vertical`
             ] }, stepsWithIndex(flatten(getSlot(this)))));
     }

package/es/steps/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/steps/src/styles/rtl.cssr.js

@@ -0,0 +1,14 @@
+import { c, cB, cM, cE } from '../../../_utils/cssr';
+export default c([cB('steps', [cM('rtl', `
+ direction: rtl;
+ text-align: right;
+ `, [cB('step-content', [cB('step-content-header', `
+ margin-left: 0;
+ margin-right: 9px;
+ `), cE('description', `
+ margin-left: 0;
+ margin-right: 9px;
+ `)]), cM('vertical', [c('>', [cB('step', [c('>', [cB('step-indicator', [c('>', [cB('step-splitor', `
+ left: unset;
+ right: calc(var(--n-indicator-size) / 2);
+ `)])])])])])])])])]);

package/es/steps/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as stepsDark } from './dark';
 export { default as stepsLight } from './light';
+export { stepsRtl } from './rtl';
 export type { StepsThemeVars, StepsTheme } from './light';

package/es/steps/styles/index.js

@@ -1,2 +1,3 @@
 export { default as stepsDark } from './dark';
 export { default as stepsLight } from './light';
+export { stepsRtl } from './rtl';

package/es/steps/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const stepsRtl: RtlItem;

package/es/steps/styles/rtl.js

@@ -0,0 +1,5 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const stepsRtl = {
+    name: 'Steps',
+    style: rtlStyle
+};

package/es/styles.d.ts

@@ -9,6 +9,7 @@ export { badgeDark, badgeRtl as unstableBadgeRtl } from './badge/styles';
 export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { notificationRtl as unstableNotificationRtl } from './notification/styles';
+export { messageRtl as unstableMessageRtl } from './message/styles';
 export { buttonGroupDark, buttonGroupRtl as unstableButtonGroupRtl } from './button-group/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
@@ -21,7 +22,7 @@ export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
 export { dialogDark } from './dialog/styles';
 export { dividerDark } from './divider/styles';
-export { drawerDark } from './drawer/styles';
+export { drawerDark, drawerRtl as unstableDrawerRtl } from './drawer/styles';
 export { dropdownDark } from './dropdown/styles';
 export { dynamicInputDark, dynamicInputRtl as unstableDynamicInputRtl } from './dynamic-input/styles';
 export { dynamicTagsDark } from './dynamic-tags/styles';
@@ -33,7 +34,7 @@ export { iconDark } from './icon/styles';
 export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
 export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
 export { layoutDark } from './layout/styles';
-export { listDark } from './list/styles';
+export { listDark, listRtl as unstableListRtl } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';
 export { logDark } from './log/styles';
 export { mentionDark } from './mention/styles';
@@ -55,7 +56,7 @@ export { sliderDark } from './slider/styles';
 export { spaceDark, spaceRtl as unstableSpaceRtl } from './space/styles';
 export { spinDark } from './spin/styles';
 export { statisticDark, statisticRtl as unstableStatisticRtl } from './statistic/styles';
-export { stepsDark } from './steps/styles';
+export { stepsDark, stepsRtl as unstableStepsRtl } from './steps/styles';
 export { switchDark } from './switch/styles';
 export { tableDark, tableRtl as unstableTableRtl } from './table/styles';
 export { tabsDark } from './tabs/styles';

package/es/styles.js

@@ -9,6 +9,7 @@ export { badgeDark, badgeRtl as unstableBadgeRtl } from './badge/styles';
 export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { notificationRtl as unstableNotificationRtl } from './notification/styles';
+export { messageRtl as unstableMessageRtl } from './message/styles';
 export { buttonGroupDark, buttonGroupRtl as unstableButtonGroupRtl } from './button-group/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
@@ -21,7 +22,7 @@ export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
 export { dialogDark } from './dialog/styles';
 export { dividerDark } from './divider/styles';
-export { drawerDark } from './drawer/styles';
+export { drawerDark, drawerRtl as unstableDrawerRtl } from './drawer/styles';
 export { dropdownDark } from './dropdown/styles';
 export { dynamicInputDark, dynamicInputRtl as unstableDynamicInputRtl } from './dynamic-input/styles';
 export { dynamicTagsDark } from './dynamic-tags/styles';
@@ -33,7 +34,7 @@ export { iconDark } from './icon/styles';
 export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
 export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
 export { layoutDark } from './layout/styles';
-export { listDark } from './list/styles';
+export { listDark, listRtl as unstableListRtl } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';
 export { logDark } from './log/styles';
 export { mentionDark } from './mention/styles';
@@ -55,7 +56,7 @@ export { sliderDark } from './slider/styles';
 export { spaceDark, spaceRtl as unstableSpaceRtl } from './space/styles';
 export { spinDark } from './spin/styles';
 export { statisticDark, statisticRtl as unstableStatisticRtl } from './statistic/styles';
-export { stepsDark } from './steps/styles';
+export { stepsDark, stepsRtl as unstableStepsRtl } from './steps/styles';
 export { switchDark } from './switch/styles';
 export { tableDark, tableRtl as unstableTableRtl } from './table/styles';
 export { tabsDark } from './tabs/styles';

package/es/switch/src/Switch.js

@@ -33,6 +33,7 @@ export const switchProps = Object.assign(Object.assign({}, useTheme.props), { si
     }, 
     /** @deprecated */
     onChange: [Function, Array] });
+let supportCssMax;
 export default defineComponent({
     name: 'Switch',
     props: switchProps,
@@ -44,6 +45,21 @@ export default defineComponent({
                 }
             });
         }
+        if (supportCssMax === undefined) {
+            if (typeof CSS !== 'undefined') {
+                if (typeof CSS.supports !== 'undefined') {
+                    supportCssMax = CSS.supports('width', 'max(1px)');
+                }
+                else {
+                    supportCssMax = false;
+                }
+            }
+            else {
+                // If you are using SSR, we assume that you are targeting browsers with
+                // recent versions
+                supportCssMax = true;
+            }
+        }
         const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Switch', '-switch', style, switchLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
@@ -126,11 +142,22 @@ export default defineComponent({
         const cssVarsRef = computed(() => {
             const { value: size } = mergedSizeRef;
             const { self: { opacityDisabled, railColor, railColorActive, buttonBoxShadow, buttonColor, boxShadowFocus, loadingColor, textColor, iconColor, [createKey('buttonHeight', size)]: buttonHeight, [createKey('buttonWidth', size)]: buttonWidth, [createKey('buttonWidthPressed', size)]: buttonWidthPressed, [createKey('railHeight', size)]: railHeight, [createKey('railWidth', size)]: railWidth, [createKey('railBorderRadius', size)]: railBorderRadius, [createKey('buttonBorderRadius', size)]: buttonBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
-            const offset = pxfy((depx(railHeight) - depx(buttonHeight)) / 2);
-            const height = pxfy(Math.max(depx(railHeight), depx(buttonHeight)));
-            const width = depx(railHeight) > depx(buttonHeight)
-                ? railWidth
-                : pxfy(depx(railWidth) + depx(buttonHeight) - depx(railHeight));
+            let offset;
+            let height;
+            let width;
+            if (supportCssMax) {
+                offset = `calc((${railHeight} - ${buttonHeight}) / 2)`;
+                height = `max(${railHeight}, ${buttonHeight})`;
+                width = `max(${railWidth}, calc(${railWidth} + ${buttonHeight} - ${railHeight}))`;
+            }
+            else {
+                offset = pxfy((depx(railHeight) - depx(buttonHeight)) / 2);
+                height = pxfy(Math.max(depx(railHeight), depx(buttonHeight)));
+                width =
+                    depx(railHeight) > depx(buttonHeight)
+                        ? railWidth
+                        : pxfy(depx(railWidth) + depx(buttonHeight) - depx(railHeight));
+            }
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-button-border-radius': buttonBorderRadius,

package/es/switch/src/styles/index.cssr.js

@@ -74,7 +74,7 @@ export default cB('switch', `
  padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
  `), c('&:focus', [cE('rail', `
  box-shadow: var(--n-box-shadow-focus);
- `)]), cM('round', [cE('rail', 'border-radius: calc(var(--n-rail-height) / 2);', [cE('button', 'border-radius: calc(var(--n-button-height) / 2);')])]), cNotM('disabled', [cNotM('icon', [cM('rubber-band', [cM('pressed', [cE('rail', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cE('rail', [c('&:active', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cM('active', [cM('pressed', [cE('rail', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])]), cE('rail', [c('&:active', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])])])])])]), cM('active', [cE('rail', [cE('button', 'left: calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)')])]), cE('rail', `
+ `)]), cM('round', [cE('rail', 'border-radius: calc(var(--n-rail-height) / 2);', [cE('button', 'border-radius: calc(var(--n-button-height) / 2);')])]), cNotM('disabled', [cNotM('icon', [cM('rubber-band', [cM('pressed', [cE('rail', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cE('rail', [c('&:active', [cE('button', 'max-width: var(--n-button-width-pressed);')])]), cM('active', [cM('pressed', [cE('rail', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])]), cE('rail', [c('&:active', [cE('button', 'left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));')])])])])])]), cM('active', [cE('rail', [cE('button', 'left: calc(100% - var(--n-button-width) - var(--n-offset))')])]), cE('rail', `
  overflow: hidden;
  height: var(--n-rail-height);
  min-width: var(--n-rail-width);
@@ -103,7 +103,7 @@ export default cB('switch', `
  align-items: center; 
  top: var(--n-offset);
  left: var(--n-offset);
- height: var(--n-button-width);
+ height: var(--n-button-height);
  width: var(--n-button-width-pressed);
  max-width: var(--n-button-width);
  border-radius: var(--n-button-border-radius);

package/es/tag/src/Tag.d.ts

@@ -14,6 +14,7 @@ export declare const tagProps: {
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
     strong: BooleanConstructor;
+    triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
@@ -23,7 +24,6 @@ export declare const tagProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    internalStopClickPropagation: BooleanConstructor;
     onCheckedChange: {
         type: PropType<(checked: boolean) => void>;
         validator: () => boolean;
@@ -325,6 +325,7 @@ declare const _default: import("vue").DefineComponent<{
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
     strong: BooleanConstructor;
+    triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
@@ -334,7 +335,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    internalStopClickPropagation: BooleanConstructor;
     onCheckedChange: {
         type: PropType<(checked: boolean) => void>;
         validator: () => boolean;
@@ -674,6 +674,7 @@ declare const _default: import("vue").DefineComponent<{
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
     strong: BooleanConstructor;
+    triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
@@ -683,7 +684,6 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    internalStopClickPropagation: BooleanConstructor;
     onCheckedChange: {
         type: PropType<(checked: boolean) => void>;
         validator: () => boolean;
@@ -981,8 +981,8 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean | undefined;
     closable: boolean;
     checkable: boolean;
+    triggerClickOnClose: boolean;
     internalCloseFocusable: boolean;
-    internalStopClickPropagation: boolean;
     onCheckedChange: (checked: boolean) => void;
 }>;
 export default _default;

package/es/tag/src/Tag.js

@@ -9,12 +9,12 @@ import style from './styles/index.cssr';
 export const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { bordered: {
         type: Boolean,
         default: undefined
-    }, checked: Boolean, checkable: Boolean, strong: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
+    }, checked: Boolean, checkable: Boolean, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
     // private
     internalCloseFocusable: {
         type: Boolean,
         default: true
-    }, internalStopClickPropagation: Boolean, 
+    }, 
     // deprecated
     onCheckedChange: {
         type: Function,
@@ -52,7 +52,7 @@ export default defineComponent({
             }
         }
         function handleCloseClick(e) {
-            if (props.internalStopClickPropagation) {
+            if (!props.triggerClickOnClose) {
                 e.stopPropagation();
             }
             if (!props.disabled) {

package/es/tag/src/styles/index.cssr.js

@@ -72,7 +72,6 @@ export default cB('tag', `
  transition:
  background-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
- cursor: pointer;
  `), cM('round', `
  padding: 0 calc(var(--n-height) / 3);
  border-radius: calc(var(--n-height) / 2);

package/es/tag/styles/light.js

@@ -8,7 +8,10 @@ const self = (vars) => {
         // checked
         textColorCheckable: textColor2, textColorHoverCheckable: textColor2, textColorPressedCheckable: textColor2, textColorChecked: baseColor, colorCheckable: '#0000', colorHoverCheckable: buttonColor2Hover, colorPressedCheckable: buttonColor2Pressed, colorChecked: primaryColor, colorCheckedHover: primaryColorHover, colorCheckedPressed: primaryColorPressed, 
         // default
-        border: `1px solid ${borderColor}`, textColor: textColor2, color: tagColor, colorBordered: 'rgb(250, 250, 252)', closeIconColor: closeIconColor, closeIconColorHover: closeIconColorHover, closeIconColorPressed: closeIconColorPressed, closeColorHover,
+        border: `1px solid ${borderColor}`, textColor: textColor2, color: tagColor, colorBordered: 'rgb(250, 250, 252)', closeIconColor,
+        closeIconColorHover,
+        closeIconColorPressed,
+        closeColorHover,
         closeColorPressed, borderPrimary: `1px solid ${changeColor(primaryColor, { alpha: 0.3 })}`, textColorPrimary: primaryColor, colorPrimary: changeColor(primaryColor, { alpha: 0.12 }), colorBorderedPrimary: changeColor(primaryColor, { alpha: 0.1 }), closeIconColorPrimary: primaryColor, closeIconColorHoverPrimary: primaryColor, closeIconColorPressedPrimary: primaryColor, closeColorHoverPrimary: changeColor(primaryColor, { alpha: 0.12 }), closeColorPressedPrimary: changeColor(primaryColor, { alpha: 0.18 }), borderInfo: `1px solid ${changeColor(infoColor, { alpha: 0.3 })}`, textColorInfo: infoColor, colorInfo: changeColor(infoColor, { alpha: 0.12 }), colorBorderedInfo: changeColor(infoColor, { alpha: 0.1 }), closeIconColorInfo: infoColor, closeIconColorHoverInfo: infoColor, closeIconColorPressedInfo: infoColor, closeColorHoverInfo: changeColor(infoColor, { alpha: 0.12 }), closeColorPressedInfo: changeColor(infoColor, { alpha: 0.18 }), borderSuccess: `1px solid ${changeColor(successColor, { alpha: 0.3 })}`, textColorSuccess: successColor, colorSuccess: changeColor(successColor, { alpha: 0.12 }), colorBorderedSuccess: changeColor(successColor, { alpha: 0.1 }), closeIconColorSuccess: successColor, closeIconColorHoverSuccess: successColor, closeIconColorPressedSuccess: successColor, closeColorHoverSuccess: changeColor(successColor, { alpha: 0.12 }), closeColorPressedSuccess: changeColor(successColor, { alpha: 0.18 }), borderWarning: `1px solid ${changeColor(warningColor, { alpha: 0.35 })}`, textColorWarning: warningColor, colorWarning: changeColor(warningColor, { alpha: 0.15 }), colorBorderedWarning: changeColor(warningColor, { alpha: 0.12 }), closeIconColorWarning: warningColor, closeIconColorHoverWarning: warningColor, closeIconColorPressedWarning: warningColor, closeColorHoverWarning: changeColor(warningColor, { alpha: 0.12 }), closeColorPressedWarning: changeColor(warningColor, { alpha: 0.18 }), borderError: `1px solid ${changeColor(errorColor, { alpha: 0.23 })}`, textColorError: errorColor, colorError: changeColor(errorColor, { alpha: 0.1 }), colorBorderedError: changeColor(errorColor, { alpha: 0.08 }), closeIconColorError: errorColor, closeIconColorHoverError: errorColor, closeIconColorPressedError: errorColor, closeColorHoverError: changeColor(errorColor, { alpha: 0.12 }), closeColorPressedError: changeColor(errorColor, { alpha: 0.18 }) });
 };
 const tagLight = {