naive-ui 2.18.1 → 2.19.2

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

@@ -6,6 +6,14 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
     menuBoxShadow: string;
 }, {
     InternalSelection: import("../../_mixins").Theme<"InternalSelection", {
+        fontSizeTiny: string;
+        fontSizeSmall: string;
+        fontSizeMedium: string;
+        fontSizeLarge: string;
+        heightTiny: string;
+        heightSmall: string;
+        heightMedium: string;
+        heightLarge: string;
         borderRadius: string;
         textColor: string;
         textColorDisabled: string;
@@ -46,16 +54,9 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         clearColor: string;
         clearColorHover: string;
         clearColorPressed: string;
-        heightTiny: string;
-        heightSmall: string;
-        heightMedium: string;
-        heightLarge: string;
-        fontSizeTiny: string;
-        fontSizeSmall: string;
-        fontSizeMedium: string;
-        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/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)