naive-ui 2.18.0 → 2.19.1

package/es/select/src/Select.js

@@ -57,7 +57,7 @@ const selectProps = Object.assign(Object.assign({}, useTheme.props), { to: useAd
         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],
@@ -137,68 +137,60 @@ export default 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 = 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 = 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 = 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)
-                call(onChange, value);
+                call(onChange, value, option);
             if (onUpdateValue)
-                call(onUpdateValue, value);
-            if (_onUpdateValue)
-                call(_onUpdateValue, value);
+                call(onUpdateValue, value, option);
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value, option);
+            }
             uncontrolledValueRef.value = value;
             nTriggerFormChange();
             nTriggerFormInput();
@@ -252,9 +244,18 @@ export default defineComponent({
             }
         }
         // menu related methods
+        function doUpdateShow(value) {
+            const { onUpdateShow, 'onUpdate:show': _onUpdateShow } = props;
+            if (onUpdateShow)
+                call(onUpdateShow, value);
+            if (_onUpdateShow)
+                call(_onUpdateShow, value);
+            uncontrolledShowRef.value = value;
+        }
         function openMenu() {
             if (!mergedDisabledRef.value) {
                 patternRef.value = '';
+                doUpdateShow(true);
                 uncontrolledShowRef.value = true;
                 if (props.filterable) {
                     focusSelectionInput();
@@ -262,7 +263,7 @@ export default defineComponent({
             }
         }
         function closeMenu() {
-            uncontrolledShowRef.value = false;
+            doUpdateShow(false);
         }
         function handleMenuLeave() {
             patternRef.value = '';
@@ -375,8 +376,7 @@ export default defineComponent({
                     changedValue.push(option.value);
                     patternRef.value = '';
                 }
-                focusSelectionInput();
-                doUpdateValue(changedValue);
+                doUpdateValue(changedValue, getMergedOptions(changedValue));
             }
             else {
                 if (tag && !remote) {
@@ -392,7 +392,7 @@ export default defineComponent({
                 }
                 focusSelection();
                 closeMenu();
-                doUpdateValue(option.value);
+                doUpdateValue(option.value, option);
             }
         }
         function getCreatedOptionIndex(optionValue) {
@@ -430,10 +430,10 @@ export default defineComponent({
             }
             doClear();
             if (multiple) {
-                doUpdateValue([]);
+                doUpdateValue([], []);
             }
             else {
-                doUpdateValue(null);
+                doUpdateValue(null, null);
             }
         }
         function handleMenuMousedown(e) {
@@ -447,7 +447,7 @@ export default 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)
@@ -456,12 +456,11 @@ export default 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();
                         }
@@ -475,14 +474,14 @@ export default 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();
@@ -490,7 +489,7 @@ export default 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/es/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/es/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/es/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/es/spin/src/Spin.js

@@ -1,9 +1,9 @@
-import { computed, defineComponent, h, Transition } from 'vue';
+import { computed, defineComponent, h, Transition, watchEffect } from 'vue';
 import { useCompitable } from 'vooks';
 import { pxfy } from 'seemly';
 import { NBaseLoading } from '../../_internal';
 import { useConfig, useTheme } from '../../_mixins';
-import { createKey, warn } from '../../_utils';
+import { createKey, warnOnce } from '../../_utils';
 import { spinLight } from '../styles';
 import style from './styles/index.cssr';
 const STROKE_WIDTH = {
@@ -11,33 +11,33 @@ const STROKE_WIDTH = {
     medium: 18,
     large: 16
 };
-const spinProps = Object.assign(Object.assign({}, useTheme.props), { stroke: {
-        type: String,
-        default: undefined
-    }, size: {
+const spinProps = Object.assign(Object.assign({}, 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: () => {
-            warn('spin', '`spinning` is deprecated, please use `show` instead.');
             return true;
         },
         default: undefined
-    }, rotate: {
-        type: Boolean,
-        default: true
     } });
 export default defineComponent({
     name: 'Spin',
     props: spinProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.spinning !== undefined) {
+                    warnOnce('spin', '`spinning` is deprecated, please use `show` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('Spin', 'Spin', style, spinLight, props, mergedClsPrefixRef);
         return {
@@ -53,7 +53,7 @@ export default defineComponent({
             cssVars: 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'
                     ? pxfy(spinSize)
                     : self[createKey('size', spinSize)];
@@ -61,18 +61,25 @@ export default 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 ? (h("div", { class: [
-                `${mergedClsPrefix}-spin`,
-                rotate && `${mergedClsPrefix}-spin--rotate`
-            ], style: $slots.default ? '' : this.cssVars }, $slots.icon())) : (h(NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }));
+        const descriptionNode = (description || $slots.description) && (h("div", { class: `${mergedClsPrefix}-spin-description` }, description || ((_a = $slots.description) === null || _a === void 0 ? void 0 : _a.call($slots))));
+        const icon = $slots.icon ? (h("div", { class: `${mergedClsPrefix}-spin-body` },
+            h("div", { class: [
+                    `${mergedClsPrefix}-spin`,
+                    rotate && `${mergedClsPrefix}-spin--rotate`
+                ], style: $slots.default ? '' : this.cssVars }, $slots.icon()),
+            descriptionNode)) : (h("div", { class: `${mergedClsPrefix}-spin-body` },
+            h(NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }),
+            descriptionNode));
         return $slots.default ? (h("div", { class: `${mergedClsPrefix}-spin-container`, style: this.cssVars },
             h("div", { class: [
                     `${mergedClsPrefix}-spin-content`,

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

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

package/es/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/es/spin/styles/light.js

@@ -1,7 +1,9 @@
 import { commonLight } from '../../_styles/common';
 export 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/es/steps/src/Steps.js

@@ -2,7 +2,7 @@ import { h, defineComponent, provide } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { stepsLight } from '../styles';
 import style from './styles/index.cssr';
-import { getSlot } from '../../_utils';
+import { flatten, getSlot } from '../../_utils';
 function stepWithIndex(step, i) {
     if (typeof step !== 'object' || step === null || Array.isArray(step)) {
         return null;
@@ -44,6 +44,6 @@ export default defineComponent({
         return (h("div", { class: [
                 `${mergedClsPrefix}-steps`,
                 this.vertical && `${mergedClsPrefix}-steps--vertical`
-            ] }, stepsWithIndex(getSlot(this))));
+            ] }, stepsWithIndex(flatten(getSlot(this)))));
     }
 });

package/es/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';

package/es/styles.js

@@ -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';

package/es/tabs/src/Tab.d.ts

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     style: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
     clsPrefix: import("vue").Ref<string>;
     value: import("vue").Ref<string | number | null>;
-    type: import("vue").Ref<"bar" | "line" | "card">;
+    type: import("vue").Ref<import("./interface").TabsType>;
     handleClose(e: MouseEvent): void;
     handleClick(): void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/es/tabs/src/Tab.js

@@ -51,12 +51,10 @@ export default defineComponent({
             this.leftPadded ? (h("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
             h("div", { key: name, "data-name": name, "data-disabled": disabled ? true : undefined, class: [
                     `${clsPrefix}-tabs-tab`,
-                    {
-                        [`${clsPrefix}-tabs-tab--active`]: value === name,
-                        [`${clsPrefix}-tabs-tab--disabled`]: disabled,
-                        [`${clsPrefix}-tabs-tab--closable`]: mergedClosable,
-                        [`${clsPrefix}-tabs-tab--addable`]: addable
-                    }
+                    value === name && `${clsPrefix}-tabs-tab--active`,
+                    disabled && `${clsPrefix}-tabs-tab--disabled`,
+                    mergedClosable && `${clsPrefix}-tabs-tab--closable`,
+                    addable && `${clsPrefix}-tabs-tab--addable`
                 ], onClick: this.handleClick, style: addable ? undefined : style },
                 h("span", { class: `${clsPrefix}-tabs-tab__label` }, addable ? (h(NBaseIcon, { clsPrefix: clsPrefix }, {
                     default: () => h(AddIcon, null)