naive-ui 2.20.0 → 2.21.0

package/lib/tabs/src/TabPane.js

@@ -43,10 +43,11 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return {
             style: NTab.paneStyleRef,
+            class: NTab.paneClassRef,
             mergedClsPrefix: NTab.mergedClsPrefixRef
         };
     },
     render() {
-        return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-tab-pane`, style: this.style }, this.$slots));
+        return ((0, vue_1.h)("div", { class: [`${this.mergedClsPrefix}-tab-pane`, this.class], style: this.style }, this.$slots));
     }
 });

package/lib/tabs/src/Tabs.d.ts

@@ -18,6 +18,7 @@ declare const tabsProps: {
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
     readonly tabsPadding: {
@@ -234,6 +235,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly tabStyle: PropType<string | CSSProperties>;
+    readonly paneClass: StringConstructor;
     readonly paneStyle: PropType<string | CSSProperties>;
     readonly addable: PropType<Addable>;
     readonly tabsPadding: {
@@ -521,6 +523,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly justifyContent?: unknown;
     readonly size?: unknown;
     readonly tabStyle?: unknown;
+    readonly paneClass?: unknown;
     readonly paneStyle?: unknown;
     readonly addable?: unknown;
     readonly tabsPadding?: unknown;
@@ -736,6 +739,7 @@ declare const _default: import("vue").DefineComponent<{
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
     addable?: Addable | undefined;
     tabStyle?: string | CSSProperties | undefined;
+    paneClass?: string | undefined;
     paneStyle?: string | CSSProperties | undefined;
     onAdd?: (() => void) | undefined;
     labelSize?: "small" | "medium" | "large" | undefined;

package/lib/tabs/src/Tabs.js

@@ -19,7 +19,7 @@ const tabsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { v
     }, closable: Boolean, justifyContent: String, size: {
         type: String,
         default: 'medium'
-    }, tabStyle: [String, Object], paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
+    }, tabStyle: [String, Object], paneClass: String, paneStyle: [String, Object], addable: [Boolean, Object], tabsPadding: {
         type: Number,
         default: 0
     }, onBeforeLeave: Function, onAdd: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onClose: [Function, Array], 
@@ -58,7 +58,10 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _utils_1.flatten)(slots.default())[0].props.name
             : null));
         const mergedValueRef = (0, vooks_1.useMergedState)(compitableValueRef, uncontrolledValueRef);
-        const nextTabNameRef = { value: mergedValueRef.value };
+        const tabChangeIdRef = { id: 0 };
+        (0, vue_1.watch)(mergedValueRef, () => {
+            tabChangeIdRef.id = 0;
+        });
         const tabWrapperStyleRef = (0, vue_1.computed)(() => {
             if (!props.justifyContent || props.type === 'card')
                 return undefined;
@@ -196,12 +199,13 @@ exports.default = (0, vue_1.defineComponent)({
         }, 64);
         (0, vue_1.provide)(interface_1.tabsInjectionKey, {
             tabStyleRef: (0, vue_1.toRef)(props, 'tabStyle'),
+            paneClassRef: (0, vue_1.toRef)(props, 'paneClass'),
             paneStyleRef: (0, vue_1.toRef)(props, 'paneStyle'),
             mergedClsPrefixRef,
             typeRef: (0, vue_1.toRef)(props, 'type'),
             closableRef: (0, vue_1.toRef)(props, 'closable'),
             valueRef: mergedValueRef,
-            nextTabNameRef,
+            tabChangeIdRef,
             onBeforeLeaveRef: (0, vue_1.toRef)(props, 'onBeforeLeave'),
             handleTabClick,
             handleClose,
@@ -286,11 +290,17 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
-        const children = defaultSlot
+        const tabPaneChildren = defaultSlot
             ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
                 return v.type.__TAB_PANE__ === true;
             })
             : [];
+        const tabChildren = defaultSlot
+            ? (0, _utils_1.flatten)(defaultSlot()).filter((v) => {
+                return v.type.__TAB__ === true;
+            })
+            : [];
+        const showPane = !tabChildren.length;
         const prefix = prefixSlot ? prefixSlot() : null;
         const suffix = suffixSlot ? suffixSlot() : null;
         const isCard = type === 'card';
@@ -311,27 +321,48 @@ exports.default = (0, vue_1.defineComponent)({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
-                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, children.map((tabPaneVNode, index) => {
-                    return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 }), tabPaneVNode.children
-                        ? {
-                            default: tabPaneVNode.children.tab
+                isSegment ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-rail` }, showPane
+                    ? tabPaneChildren.map((tabPaneVNode, index) => {
+                        return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 }), tabPaneVNode.children
+                            ? {
+                                default: tabPaneVNode.children.tab
+                            }
+                            : undefined));
+                    })
+                    : tabChildren.map((tabVNode, index) => {
+                        if (index === 0) {
+                            return tabVNode;
                         }
-                        : undefined));
-                }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
+                        else {
+                            return createLeftPaddedTabVNode(tabVNode);
+                        }
+                    }))) : ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
                         (0, vue_1.h)(vueuc_1.VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                             default: () => {
                                 const rawWrappedTabs = ((0, vue_1.h)("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
                                     mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
-                                    children.map((tabPaneVNode, index) => {
-                                        return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
-                                            ? {
-                                                default: tabPaneVNode.children.tab
+                                    showPane
+                                        ? tabPaneChildren.map((tabPaneVNode, index) => {
+                                            return ((0, vue_1.h)(Tab_1.default, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
+                                                ? {
+                                                    default: tabPaneVNode.children.tab
+                                                }
+                                                : undefined));
+                                        })
+                                        : tabChildren.map((tabVNode, index) => {
+                                            if (index !== 0 &&
+                                                !mergedJustifyContent) {
+                                                return createLeftPaddedTabVNode(tabVNode);
+                                            }
+                                            else {
+                                                return tabVNode;
                                             }
-                                            : undefined));
-                                    }),
+                                        }),
                                     !addTabFixed && addable && isCard
-                                        ? createAddTag(addable, children.length !== 0)
+                                        ? createAddTag(addable, (showPane
+                                            ? tabPaneChildren.length
+                                            : tabChildren.length) !== 0)
                                         : null,
                                     mergedJustifyContent ? null : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
                                 let wrappedTabs = rawWrappedTabs;
@@ -351,7 +382,8 @@ exports.default = (0, vue_1.defineComponent)({
                     ? createAddTag(addable, true)
                     : null,
                 suffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tabs-nav__suffix` }, suffix)) : null),
-            filterMapTabPanes(children, this.mergedValue, this.renderedNames)));
+            showPane &&
+                filterMapTabPanes(tabPaneChildren, this.mergedValue, this.renderedNames)));
     }
 });
 function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
@@ -375,6 +407,18 @@ function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
     });
     return children;
 }
-function createAddTag(addable, leftPadded) {
-    return ((0, vue_1.h)(Tab_1.default, { ref: "addTabInstRef", key: "__addable", name: "__addable", addable: true, leftPadded: leftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+function createAddTag(addable, internalLeftPadded) {
+    return ((0, vue_1.h)(Tab_1.default, { ref: "addTabInstRef", key: "__addable", name: "__addable", internalAddable: true, internalLeftPadded: internalLeftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+}
+function createLeftPaddedTabVNode(tabVNode) {
+    const modifiedVNode = (0, vue_1.cloneVNode)(tabVNode);
+    if (modifiedVNode.props) {
+        modifiedVNode.props.internalLeftPadded = true;
+    }
+    else {
+        modifiedVNode.props = {
+            internalLeftPadded: true
+        };
+    }
+    return modifiedVNode;
 }

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

@@ -12,9 +12,10 @@ export interface TabsInjection {
     typeRef: Ref<TabsType>;
     closableRef: Ref<boolean>;
     tabStyleRef: Ref<string | CSSProperties | undefined>;
+    paneClassRef: Ref<string | undefined>;
     paneStyleRef: Ref<string | CSSProperties | undefined>;
-    nextTabNameRef: {
-        value: string | number | null;
+    tabChangeIdRef: {
+        id: number;
     };
     onBeforeLeaveRef: Ref<OnBeforeLeave | undefined>;
     handleTabClick: (panelName: string | number) => void;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, InjectionKey, Ref } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 export interface TagPublicMethods {
     setTextContent: (textContent: string) => void;
@@ -226,6 +226,10 @@ declare const tagProps: {
         closeMarginRtl: string;
     }, any>>>;
 };
+interface TagInjection {
+    roundRef: Ref<boolean>;
+}
+export declare const tagInjectionKey: InjectionKey<TagInjection>;
 export declare type TagProps = ExtractPublicPropTypes<typeof tagProps>;
 declare const _default: import("vue").DefineComponent<{
     bordered: {
@@ -447,13 +451,14 @@ declare const _default: import("vue").DefineComponent<{
         closeMarginRtl: string;
     }, any>>>;
 }, {
-    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
+    rtlEnabled: Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    contentRef: import("vue").Ref<HTMLElement | null>;
+    contentRef: Ref<HTMLElement | null>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     handleClick: (e: MouseEvent) => void;
     handleCloseClick: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
+        '--avatar-size-override': string;
         '--bezier': string;
         '--border-radius': string;
         '--border': string;

package/lib/tag/src/Tag.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.tagInjectionKey = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -28,6 +29,7 @@ const tagProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useThem
         },
         default: undefined
     } });
+exports.tagInjectionKey = Symbol('tag');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Tag',
     props: tagProps,
@@ -35,6 +37,9 @@ exports.default = (0, vue_1.defineComponent)({
         const contentRef = (0, vue_1.ref)(null);
         const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Tag', 'Tag', index_cssr_1.default, styles_1.tagLight, props, mergedClsPrefixRef);
+        (0, vue_1.provide)(exports.tagInjectionKey, {
+            roundRef: (0, vue_1.toRef)(props, 'round')
+        });
         function handleClick(e) {
             if (!props.disabled) {
                 if (props.checkable) {
@@ -72,6 +77,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const { type, size, color: { color, textColor } = {} } = props;
                 const { common: { cubicBezierEaseInOut }, self: { padding, closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeColor', type)]: closeColor, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
+                    '--avatar-size-override': `calc(${height} - 8px)`,
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
                     '--border': border,
@@ -101,7 +107,7 @@ exports.default = (0, vue_1.defineComponent)({
             }) });
     },
     render() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {} } = this;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-tag`,
                 {
@@ -112,6 +118,9 @@ exports.default = (0, vue_1.defineComponent)({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            $slots.avatar && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
+                default: $slots.avatar
+            })),
             (0, vue_1.h)("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
             !this.checkable && this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));

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

@@ -49,7 +49,7 @@ exports.default = (0, cssr_1.cB)('tag', `
  color .3s var(--bezier),
  box-shadow .3s var(--bezier),
  opacity .3s var(--bezier);
- line-height: 1.5;
+ line-height: 1;
  height: var(--height);
  font-size: var(--font-size);
 `, [(0, cssr_1.cE)('border', `
@@ -62,6 +62,9 @@ exports.default = (0, cssr_1.cB)('tag', `
  border-radius: inherit;
  border: var(--border);
  transition: border-color .3s var(--bezier);
+ `), (0, cssr_1.cE)('avatar', `
+ display: flex;
+ margin-right: 6px;
  `), (0, cssr_1.cE)('close', `
  font-size: var(--close-size);
  margin: var(--close-margin);
@@ -70,10 +73,12 @@ exports.default = (0, cssr_1.cB)('tag', `
  `), (0, cssr_1.cM)('round', `
  padding: 0 calc(var(--height) / 2);
  border-radius: calc(var(--height) / 2);
- `), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed !important',
-  opacity: 'var(--opacity-disabled)'
-}), (0, cssr_1.cM)('checkable', `
+ `, [(0, cssr_1.cE)('avatar', `
+ margin-left: calc((var(--height) - 8px) / -2);
+ `)]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed !important;
+ opacity: var(--opacity-disabled);
+ `), (0, cssr_1.cM)('checkable', `
  cursor: pointer;
  box-shadow: none;
  color: var(--text-color-checkable);

package/lib/tag/src/styles/rtl.cssr.js

@@ -10,4 +10,10 @@ exports.default = (0, cssr_1.cB)('tag', [(0, cssr_1.cM)('rtl', `
  direction: rtl;
  `, [(0, cssr_1.cE)('close', `
  margin: var(--close-margin-rtl);
- `)])]);
+ `), (0, cssr_1.cE)('avatar', `
+ margin-left: 6px;
+ margin-right: 0;
+ `), (0, cssr_1.cM)('round', [(0, cssr_1.cE)('avatar', {
+  marginLeft: '6px',
+  marginRight: '-5px'
+})])])]);

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -82,6 +82,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         pressedColor: string;
         opacityDisabled: string;
         inputColorDisabled: string;
+        buttonColor2: string;
+        buttonColor2Hover: string;
+        buttonColor2Pressed: string;
         boxShadow1: string;
         boxShadow2: string;
         boxShadow3: string;

package/lib/time-picker/src/Panel.d.ts

@@ -149,6 +149,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -212,20 +215,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -372,9 +385,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;