naive-ui 2.20.0 → 2.21.0

package/es/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/es/tabs/src/Tabs.js

@@ -1,4 +1,4 @@
-import { h, ref, defineComponent, computed, provide, watch, toRef, nextTick, withDirectives, vShow, watchEffect } from 'vue';
+import { h, ref, defineComponent, computed, provide, watch, toRef, nextTick, withDirectives, vShow, watchEffect, cloneVNode } from 'vue';
 import { VResizeObserver, VXScroll } from 'vueuc';
 import { throttle } from 'lodash-es';
 import { useCompitable, onFontsReady, useMergedState } from 'vooks';
@@ -14,7 +14,7 @@ const tabsProps = Object.assign(Object.assign({}, useTheme.props), { value: [Str
     }, 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], 
@@ -53,7 +53,10 @@ export default defineComponent({
             ? flatten(slots.default())[0].props.name
             : null));
         const mergedValueRef = useMergedState(compitableValueRef, uncontrolledValueRef);
-        const nextTabNameRef = { value: mergedValueRef.value };
+        const tabChangeIdRef = { id: 0 };
+        watch(mergedValueRef, () => {
+            tabChangeIdRef.id = 0;
+        });
         const tabWrapperStyleRef = computed(() => {
             if (!props.justifyContent || props.type === 'card')
                 return undefined;
@@ -191,12 +194,13 @@ export default defineComponent({
         }, 64);
         provide(tabsInjectionKey, {
             tabStyleRef: toRef(props, 'tabStyle'),
+            paneClassRef: toRef(props, 'paneClass'),
             paneStyleRef: toRef(props, 'paneStyle'),
             mergedClsPrefixRef,
             typeRef: toRef(props, 'type'),
             closableRef: toRef(props, 'closable'),
             valueRef: mergedValueRef,
-            nextTabNameRef,
+            tabChangeIdRef,
             onBeforeLeaveRef: toRef(props, 'onBeforeLeave'),
             handleTabClick,
             handleClose,
@@ -281,11 +285,17 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix, type, addTabFixed, addable, mergedSize, $slots: { default: defaultSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
-        const children = defaultSlot
+        const tabPaneChildren = defaultSlot
             ? flatten(defaultSlot()).filter((v) => {
                 return v.type.__TAB_PANE__ === true;
             })
             : [];
+        const tabChildren = defaultSlot
+            ? 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';
@@ -306,27 +316,48 @@ export default defineComponent({
                     `${mergedClsPrefix}-tabs-nav`
                 ] },
                 prefix ? (h("div", { class: `${mergedClsPrefix}-tabs-nav__prefix` }, prefix)) : null,
-                isSegment ? (h("div", { class: `${mergedClsPrefix}-tabs-rail` }, children.map((tabPaneVNode, index) => {
-                    return (h(Tab, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 }), tabPaneVNode.children
-                        ? {
-                            default: tabPaneVNode.children.tab
+                isSegment ? (h("div", { class: `${mergedClsPrefix}-tabs-rail` }, showPane
+                    ? tabPaneChildren.map((tabPaneVNode, index) => {
+                        return (h(Tab, Object.assign({}, tabPaneVNode.props, { internalLeftPadded: index !== 0 }), tabPaneVNode.children
+                            ? {
+                                default: tabPaneVNode.children.tab
+                            }
+                            : undefined));
+                    })
+                    : tabChildren.map((tabVNode, index) => {
+                        if (index === 0) {
+                            return tabVNode;
                         }
-                        : undefined));
-                }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
+                        else {
+                            return createLeftPaddedTabVNode(tabVNode);
+                        }
+                    }))) : (h(VResizeObserver, { onResize: this.handleNavResize }, {
                     default: () => (h("div", { class: `${mergedClsPrefix}-tabs-nav-scroll-wrapper`, ref: "scrollWrapperElRef" },
                         h(VXScroll, { ref: "xScrollInstRef", onScroll: this.handleScroll }, {
                             default: () => {
                                 const rawWrappedTabs = (h("div", { style: this.tabWrapperStyle, class: `${mergedClsPrefix}-tabs-wrapper` },
                                     mergedJustifyContent ? null : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } })),
-                                    children.map((tabPaneVNode, index) => {
-                                        return (h(Tab, Object.assign({}, tabPaneVNode.props, { leftPadded: index !== 0 && !mergedJustifyContent }), tabPaneVNode.children
-                                            ? {
-                                                default: tabPaneVNode.children.tab
+                                    showPane
+                                        ? tabPaneChildren.map((tabPaneVNode, index) => {
+                                            return (h(Tab, 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 : (h("div", { class: `${mergedClsPrefix}-tabs-scroll-padding`, style: { width: `${this.tabsPadding}px` } }))));
                                 let wrappedTabs = rawWrappedTabs;
@@ -346,7 +377,8 @@ export default defineComponent({
                     ? createAddTag(addable, true)
                     : null,
                 suffix ? (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) {
@@ -370,6 +402,18 @@ function filterMapTabPanes(tabPaneVNodes, value, renderedNames) {
     });
     return children;
 }
-function createAddTag(addable, leftPadded) {
-    return (h(Tab, { ref: "addTabInstRef", key: "__addable", name: "__addable", addable: true, leftPadded: leftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+function createAddTag(addable, internalLeftPadded) {
+    return (h(Tab, { ref: "addTabInstRef", key: "__addable", name: "__addable", internalAddable: true, internalLeftPadded: internalLeftPadded, disabled: typeof addable === 'object' && addable.disabled }));
+}
+function createLeftPaddedTabVNode(tabVNode) {
+    const modifiedVNode = cloneVNode(tabVNode);
+    if (modifiedVNode.props) {
+        modifiedVNode.props.internalLeftPadded = true;
+    }
+    else {
+        modifiedVNode.props = {
+            internalLeftPadded: true
+        };
+    }
+    return modifiedVNode;
 }

package/es/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/es/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/es/tag/src/Tag.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, computed, ref } from 'vue';
+import { h, defineComponent, computed, ref, provide, toRef } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { NBaseClose } from '../../_internal';
 import { warn, createKey, call } from '../../_utils';
@@ -23,6 +23,7 @@ const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props),
         },
         default: undefined
     } });
+export const tagInjectionKey = Symbol('tag');
 export default defineComponent({
     name: 'Tag',
     props: tagProps,
@@ -30,6 +31,9 @@ export default defineComponent({
         const contentRef = ref(null);
         const { mergedBorderedRef, mergedClsPrefixRef, NConfigProvider } = useConfig(props);
         const themeRef = useTheme('Tag', 'Tag', style, tagLight, props, mergedClsPrefixRef);
+        provide(tagInjectionKey, {
+            roundRef: toRef(props, 'round')
+        });
         function handleClick(e) {
             if (!props.disabled) {
                 if (props.checkable) {
@@ -67,6 +71,7 @@ export default 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, [createKey('closeSize', size)]: closeSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeColor', type)]: closeColor, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
                 return {
+                    '--avatar-size-override': `calc(${height} - 8px)`,
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
                     '--border': border,
@@ -96,7 +101,7 @@ export default defineComponent({
             }) });
     },
     render() {
-        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {} } = this;
+        const { mergedClsPrefix, rtlEnabled, color: { borderColor } = {}, $slots } = this;
         return (h("div", { class: [
                 `${mergedClsPrefix}-tag`,
                 {
@@ -107,6 +112,9 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--round`]: this.round
                 }
             ], style: this.cssVars, onClick: this.handleClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            $slots.avatar && (h("div", { class: `${mergedClsPrefix}-tag__avatar` }, {
+                default: $slots.avatar
+            })),
             h("span", { class: `${mergedClsPrefix}-tag__content`, ref: "contentRef" }, this.$slots),
             !this.checkable && this.closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-tag__close`, disabled: this.disabled, onClick: this.handleCloseClick })) : null,
             !this.checkable && this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-tag__border`, style: { borderColor } })) : null));

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

@@ -42,7 +42,7 @@ export default 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);
 `, [cE('border', `
@@ -55,6 +55,9 @@ export default cB('tag', `
  border-radius: inherit;
  border: var(--border);
  transition: border-color .3s var(--bezier);
+ `), cE('avatar', `
+ display: flex;
+ margin-right: 6px;
  `), cE('close', `
  font-size: var(--close-size);
  margin: var(--close-margin);
@@ -63,10 +66,12 @@ export default cB('tag', `
  `), cM('round', `
  padding: 0 calc(var(--height) / 2);
  border-radius: calc(var(--height) / 2);
- `), cM('disabled', {
-  cursor: 'not-allowed !important',
-  opacity: 'var(--opacity-disabled)'
-}), cM('checkable', `
+ `, [cE('avatar', `
+ margin-left: calc((var(--height) - 8px) / -2);
+ `)]), cM('disabled', `
+ cursor: not-allowed !important;
+ opacity: var(--opacity-disabled);
+ `), cM('checkable', `
  cursor: pointer;
  box-shadow: none;
  color: var(--text-color-checkable);

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

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

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