naive-ui 2.18.0 → 2.19.1

package/lib/select/src/Select.js

@@ -59,7 +59,7 @@ const selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
         default: true
     }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], 
     // for jsx
-    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], 
+    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], 
     /** deprecated */
     onChange: {
         type: [Function, Array],
@@ -139,68 +139,60 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         });
+        function getMergedOptions(values) {
+            const remote = props.remote;
+            const { value: memoValOptMap } = memoValOptMapRef;
+            const { value: valOptMap } = valOptMapRef;
+            const { value: wrappedFallbackOption } = wrappedFallbackOptionRef;
+            const options = [];
+            values.forEach((value) => {
+                if (valOptMap.has(value)) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    options.push(valOptMap.get(value));
+                }
+                else if (remote && memoValOptMap.has(value)) {
+                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                    options.push(memoValOptMap.get(value));
+                }
+                else if (wrappedFallbackOption) {
+                    const option = wrappedFallbackOption(value);
+                    if (option) {
+                        options.push(option);
+                    }
+                }
+            });
+            return options;
+        }
         const selectedOptionsRef = (0, vue_1.computed)(() => {
             if (props.multiple) {
                 const { value: values } = mergedValueRef;
                 if (!Array.isArray(values))
                     return [];
-                const remote = props.remote;
-                const { value: memoValOptMap } = memoValOptMapRef;
-                const { value: valOptMap } = valOptMapRef;
-                const { value: wrappedFallbackOption } = wrappedFallbackOptionRef;
-                const options = [];
-                values.forEach((value) => {
-                    if (valOptMap.has(value)) {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        options.push(valOptMap.get(value));
-                    }
-                    else if (remote && memoValOptMap.has(value)) {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        options.push(memoValOptMap.get(value));
-                    }
-                    else if (wrappedFallbackOption) {
-                        const option = wrappedFallbackOption(value);
-                        if (option) {
-                            options.push(option);
-                        }
-                    }
-                });
-                return options;
+                return getMergedOptions(values);
             }
             return null;
         });
         const selectedOptionRef = (0, vue_1.computed)(() => {
             const { value: mergedValue } = mergedValueRef;
             if (!props.multiple && !Array.isArray(mergedValue)) {
-                const { value: valOptMap } = valOptMapRef;
-                const { value: wrappedFallbackOption } = wrappedFallbackOptionRef;
                 if (mergedValue === null)
                     return null;
-                let selectedOption = null;
-                if (valOptMap.has(mergedValue)) {
-                    selectedOption = valOptMap.get(mergedValue);
-                }
-                else if (props.remote) {
-                    selectedOption = memoValOptMapRef.value.get(mergedValue);
-                }
-                return (selectedOption ||
-                    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-                    (wrappedFallbackOption && wrappedFallbackOption(mergedValue)) ||
-                    null);
+                return getMergedOptions([mergedValue])[0] || null;
             }
             return null;
         });
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
-        function doUpdateValue(value) {
+        function doUpdateValue(value, option) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
             if (onChange)
-                (0, _utils_1.call)(onChange, value);
+                (0, _utils_1.call)(onChange, value, option);
             if (onUpdateValue)
-                (0, _utils_1.call)(onUpdateValue, value);
-            if (_onUpdateValue)
-                (0, _utils_1.call)(_onUpdateValue, value);
+                (0, _utils_1.call)(onUpdateValue, value, option);
+            if (_onUpdateValue) {
+                (0, _utils_1.call)(_onUpdateValue, value, option);
+            }
             uncontrolledValueRef.value = value;
             nTriggerFormChange();
             nTriggerFormInput();
@@ -254,9 +246,18 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         // menu related methods
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow)
+                (0, _utils_1.call)(onUpdateShow, value);
+            if (_onUpdateShow)
+                (0, _utils_1.call)(_onUpdateShow, value);
+            uncontrolledShowRef.value = value;
+        }
         function openMenu() {
             if (!mergedDisabledRef.value) {
                 patternRef.value = '';
+                doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
                     focusSelectionInput();
@@ -264,7 +265,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function closeMenu() {
-            uncontrolledShowRef.value = false;
+            doUpdateShow(false);
         }
         function handleMenuLeave() {
             patternRef.value = '';
@@ -377,8 +378,7 @@ exports.default = (0, vue_1.defineComponent)({
                     changedValue.push(option.value);
                     patternRef.value = '';
                 }
-                focusSelectionInput();
-                doUpdateValue(changedValue);
+                doUpdateValue(changedValue, getMergedOptions(changedValue));
             }
             else {
                 if (tag && !remote) {
@@ -394,7 +394,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 focusSelection();
                 closeMenu();
-                doUpdateValue(option.value);
+                doUpdateValue(option.value, option);
             }
         }
         function getCreatedOptionIndex(optionValue) {
@@ -432,10 +432,10 @@ exports.default = (0, vue_1.defineComponent)({
             }
             doClear();
             if (multiple) {
-                doUpdateValue([]);
+                doUpdateValue([], []);
             }
             else {
-                doUpdateValue(null);
+                doUpdateValue(null, null);
             }
         }
         function handleMenuMousedown(e) {
@@ -449,7 +449,7 @@ exports.default = (0, vue_1.defineComponent)({
         // keyboard events
         // also for menu keyup
         function handleKeyUp(e) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             switch (e.code) {
                 case 'Space':
                     if (props.filterable)
@@ -458,12 +458,11 @@ exports.default = (0, vue_1.defineComponent)({
                 case 'Enter':
                 case 'NumpadEnter':
                     if (mergedShowRef.value) {
-                        const menu = menuRef.value;
-                        const pendingOptionData = menu === null || menu === void 0 ? void 0 : menu.getPendingTmNode();
-                        if (pendingOptionData) {
-                            handleToggleByTmNode(pendingOptionData);
+                        const pendingTmNode = (_a = menuRef.value) === null || _a === void 0 ? void 0 : _a.getPendingTmNode();
+                        if (pendingTmNode) {
+                            handleToggleByTmNode(pendingTmNode);
                         }
-                        else {
+                        else if (!props.filterable) {
                             closeMenu();
                             focusSelection();
                         }
@@ -477,14 +476,14 @@ exports.default = (0, vue_1.defineComponent)({
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
-                        (_a = menuRef.value) === null || _a === void 0 ? void 0 : _a.prev();
+                        (_b = menuRef.value) === null || _b === void 0 ? void 0 : _b.prev();
                     }
                     break;
                 case 'ArrowDown':
                     if (props.loading)
                         return;
                     if (mergedShowRef.value) {
-                        (_b = menuRef.value) === null || _b === void 0 ? void 0 : _b.next();
+                        (_c = menuRef.value) === null || _c === void 0 ? void 0 : _c.next();
                     }
                     else {
                         openMenu();
@@ -492,7 +491,7 @@ exports.default = (0, vue_1.defineComponent)({
                     break;
                 case 'Escape':
                     closeMenu();
-                    (_c = triggerRef.value) === null || _c === void 0 ? void 0 : _c.focus();
+                    (_d = triggerRef.value) === null || _d === void 0 ? void 0 : _d.focus();
                     break;
             }
         }

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

@@ -31,8 +31,8 @@ export interface SelectIgnoredOption {
 }
 export declare type ValueAtom = string | number;
 export declare type Value = ValueAtom | string[] | number[] | ValueAtom[];
-export declare type OnUpdateValue = (value: string & number & ValueAtom & string[] & number[] & ValueAtom[] & (ValueAtom | null) & (string[] | null) & (number[] | null) & (ValueAtom[] | null)) => void;
-export declare type OnUpdateValueImpl = (value: ValueAtom | string[] | number[] | ValueAtom[] | (ValueAtom | null) | (string[] | null) | (number[] | null) | (ValueAtom[] | null)) => void;
+export declare type OnUpdateValue = (value: string & number & ValueAtom & string[] & number[] & ValueAtom[] & (ValueAtom | null) & (string[] | null) & (number[] | null) & (ValueAtom[] | null), option: SelectBaseOption & null & SelectBaseOption[]) => void;
+export declare type OnUpdateValueImpl = (value: ValueAtom | string[] | number[] | ValueAtom[] | (ValueAtom | null) | (string[] | null) | (number[] | null) | (ValueAtom[] | null), option: SelectBaseOption | null | SelectBaseOption[]) => void;
 export declare type SelectTreeMate = TreeMate<SelectBaseOption, SelectGroupOption, SelectIgnoredOption>;
 export declare type Size = 'small' | 'medium' | 'large';
 export declare type SelectOption = SelectBaseOption<string | number>;

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

@@ -56,6 +56,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         fontSizeLarge: string;
         paddingSingle: string;
         clearSize: string;
+        arrowSize: string;
     }, {
         Popover: import("../../_mixins").Theme<"Popover", {
             fontSize: string;
@@ -92,6 +93,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;

package/lib/spin/src/Spin.d.ts

@@ -1,10 +1,8 @@
 import { PropType } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const spinProps: {
-    stroke: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
+    stroke: StringConstructor;
     size: {
         type: PropType<number | "small" | "medium" | "large">;
         default: string;
@@ -13,20 +11,19 @@ declare const spinProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    strokeWidth: {
-        type: NumberConstructor;
-        default: undefined;
+    strokeWidth: NumberConstructor;
+    rotate: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     spinning: {
         type: BooleanConstructor;
         validator: () => boolean;
         default: undefined;
     };
-    rotate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     theme: PropType<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -36,6 +33,8 @@ declare const spinProps: {
         opacitySpinning: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -45,6 +44,8 @@ declare const spinProps: {
         opacitySpinning: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -56,10 +57,8 @@ declare const spinProps: {
 };
 export declare type SpinProps = ExtractPublicPropTypes<typeof spinProps>;
 declare const _default: import("vue").DefineComponent<{
-    stroke: {
-        type: StringConstructor;
-        default: undefined;
-    };
+    description: StringConstructor;
+    stroke: StringConstructor;
     size: {
         type: PropType<number | "small" | "medium" | "large">;
         default: string;
@@ -68,20 +67,19 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    strokeWidth: {
-        type: NumberConstructor;
-        default: undefined;
+    strokeWidth: NumberConstructor;
+    rotate: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     spinning: {
         type: BooleanConstructor;
         validator: () => boolean;
         default: undefined;
     };
-    rotate: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     theme: PropType<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -91,6 +89,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -100,6 +100,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -117,14 +119,16 @@ declare const _default: import("vue").DefineComponent<{
         '--opacity-spinning': string;
         '--size': string;
         '--color': string;
+        '--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;
     stroke?: unknown;
     size?: unknown;
     show?: unknown;
     strokeWidth?: unknown;
-    spinning?: unknown;
     rotate?: unknown;
+    spinning?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
@@ -133,9 +137,12 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean;
     rotate: boolean;
 } & {
+    description?: string | undefined;
     stroke?: string | undefined;
     strokeWidth?: number | undefined;
     theme?: import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -145,6 +152,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any> | undefined;
     themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -154,6 +163,8 @@ declare const _default: import("vue").DefineComponent<{
         opacitySpinning: string;
     }, any>> | undefined;
     builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Spin", {
+        fontSize: string;
+        textColor: string;
         sizeTiny: string;
         sizeSmall: string;
         sizeMedium: string;
@@ -166,9 +177,7 @@ declare const _default: import("vue").DefineComponent<{
 }>, {
     size: number | "small" | "medium" | "large";
     show: boolean;
-    stroke: string;
     rotate: boolean;
-    strokeWidth: number;
     spinning: boolean;
 }>;
 export default _default;

package/lib/spin/src/Spin.js

@@ -13,33 +13,33 @@ const STROKE_WIDTH = {
     medium: 18,
     large: 16
 };
-const spinProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { stroke: {
-        type: String,
-        default: undefined
-    }, size: {
+const spinProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { description: String, stroke: String, size: {
         type: [String, Number],
         default: 'medium'
     }, show: {
         type: Boolean,
         default: true
-    }, strokeWidth: {
-        type: Number,
-        default: undefined
+    }, strokeWidth: Number, rotate: {
+        type: Boolean,
+        default: true
     }, spinning: {
         type: Boolean,
         validator: () => {
-            (0, _utils_1.warn)('spin', '`spinning` is deprecated, please use `show` instead.');
             return true;
         },
         default: undefined
-    }, rotate: {
-        type: Boolean,
-        default: true
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Spin',
     props: spinProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.spinning !== undefined) {
+                    (0, _utils_1.warnOnce)('spin', '`spinning` is deprecated, please use `show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Spin', 'Spin', index_cssr_1.default, styles_1.spinLight, props, mergedClsPrefixRef);
         return {
@@ -55,7 +55,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { size: spinSize } = props;
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { opacitySpinning, color } = self;
+                const { opacitySpinning, color, textColor } = self;
                 const size = typeof spinSize === 'number'
                     ? (0, seemly_1.pxfy)(spinSize)
                     : self[(0, _utils_1.createKey)('size', spinSize)];
@@ -63,18 +63,25 @@ exports.default = (0, vue_1.defineComponent)({
                     '--bezier': cubicBezierEaseInOut,
                     '--opacity-spinning': opacitySpinning,
                     '--size': size,
-                    '--color': color
+                    '--color': color,
+                    '--text-color': textColor
                 };
             })
         };
     },
     render() {
-        const { $slots, mergedClsPrefix } = this;
+        var _a;
+        const { $slots, mergedClsPrefix, description } = this;
         const rotate = $slots.icon && this.rotate;
-        const icon = $slots.icon ? ((0, vue_1.h)("div", { class: [
-                `${mergedClsPrefix}-spin`,
-                rotate && `${mergedClsPrefix}-spin--rotate`
-            ], style: $slots.default ? '' : this.cssVars }, $slots.icon())) : ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }));
+        const descriptionNode = (description || $slots.description) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-description` }, description || ((_a = $slots.description) === null || _a === void 0 ? void 0 : _a.call($slots))));
+        const icon = $slots.icon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-body` },
+            (0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-spin`,
+                    rotate && `${mergedClsPrefix}-spin--rotate`
+                ], style: $slots.default ? '' : this.cssVars }, $slots.icon()),
+            descriptionNode)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-body` },
+            (0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }),
+            descriptionNode));
         return $slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-spin-container`, style: this.cssVars },
             (0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-spin-content`,

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

@@ -11,6 +11,8 @@ const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr"); //
 // --opacity-spinning
 // --size
 // --color
+// --text-color
+// --font-size
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
@@ -22,19 +24,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
  }
  `), (0, cssr_1.cB)('spin-container', {
   position: 'relative'
-}, [(0, cssr_1.cB)('spin', `
+}, [(0, cssr_1.cB)('spin-body', `
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
- `, [(0, fade_in_cssr_1.default)()]), (0, cssr_1.cB)('spin-content', `
- opacity: 1;
- transition: opacity .3s var(--bezier);
- pointer-events: all;
- `, [(0, cssr_1.cM)('spinning', {
-  pointerEvents: 'none',
-  opacity: 'var(--opacity-spinning)'
-})])]), (0, cssr_1.cB)('spin', `
+ `, [(0, fade_in_cssr_1.default)()])]), (0, cssr_1.cB)('spin-body', `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ `), (0, cssr_1.cB)('spin', `
  display: inline-flex;
  height: var(--size);
  width: var(--size);
@@ -42,4 +42,18 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
  color: var(--color);
  `, [(0, cssr_1.cM)('rotate', `
  animation: spin-rotate 2s linear infinite;
+ `)]), (0, cssr_1.cB)('spin-description', `
+ display: inline-block;
+ font-size: var(--font-size);
+ color: var(--text-color);
+ transition: color .3s var(--bezier);
+ margin-top: 8px;
+ `), (0, cssr_1.cB)('spin-content', `
+ opacity: 1;
+ transition: opacity .3s var(--bezier);
+ pointer-events: all;
+ `, [(0, cssr_1.cM)('spinning', `
+ user-select: none;
+ pointer-events: none;
+ opacity: var(--opacity-spinning);
  `)])]);

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

@@ -1,6 +1,8 @@
 import { Theme } from '../../_mixins';
 import type { ThemeCommonVars } from '../../_styles/common';
 export declare const self: (vars: ThemeCommonVars) => {
+    fontSize: string;
+    textColor: string;
     sizeTiny: string;
     sizeSmall: string;
     sizeMedium: string;

package/lib/spin/styles/light.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { opacityDisabled, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, primaryColor } = vars;
+    const { opacityDisabled, heightTiny, heightSmall, heightMedium, heightLarge, heightHuge, primaryColor, fontSize } = vars;
     return {
+        fontSize,
+        textColor: primaryColor,
         sizeTiny: heightTiny,
         sizeSmall: heightSmall,
         sizeMedium: heightMedium,

package/lib/steps/src/Steps.js

@@ -47,6 +47,6 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-steps`,
                 this.vertical && `${mergedClsPrefix}-steps--vertical`
-            ] }, stepsWithIndex((0, _utils_1.getSlot)(this))));
+            ] }, stepsWithIndex((0, _utils_1.flatten)((0, _utils_1.getSlot)(this)))));
     }
 });

package/lib/styles.d.ts

@@ -38,6 +38,7 @@ export { messageDark } from './message/styles';
 export { modalDark } from './modal/styles';
 export { notificationDark } from './notification/styles';
 export { paginationDark } from './pagination/styles';
+export { pageHeaderRtl as unstablePageHeaderRtl } from './page-header/styles';
 export { popconfirmDark } from './popconfirm/styles';
 export { popoverDark } from './popover/styles';
 export { popselectDark } from './popselect/styles';