naive-ui 2.20.2 → 2.21.2

package/es/slider/src/interface.d.ts

@@ -1 +1 @@
-export declare type OnUpdateValueImpl = (value: number | [number, number]) => void;
+export declare type OnUpdateValueImpl = (value: number | number[]) => void;

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

@@ -26,6 +26,7 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
 // --rail-color
 // --rail-color-hover
 // --rail-height
+// --rail-width-vertical
 
 export default c([cB('slider', `
  display: block;
@@ -34,15 +35,56 @@ export default c([cB('slider', `
  z-index: 0;
  width: 100%;
  cursor: pointer;
- `, [cB('slider-marks', `
- position: absolute;
- top: 18px;
- left: calc(var(--handle-size) / 2);
- right: calc(var(--handle-size) / 2);
- `, [cB('slider-mark', {
-  position: 'absolute',
-  transform: 'translateX(-50%)'
-})]), cM('disabled', `
+ user-select: none;
+ `, [cM('reverse', [cB('slider-handles', [cB('slider-handle', `
+ transform: translate(50%, -50%);
+ `)]), cB('slider-dots', [cB('slider-dot', `
+ transform: translateX(50%, -50%);
+ `)]), cM('vertical', [cB('slider-handles', [cB('slider-handle', `
+ transform: translate(-50%, -50%);
+ `)]), cB('slider-marks', [cB('slider-mark', `
+ transform: translateY(calc(-50% + var(--dot-height) / 2));
+ `)]), cB('slider-dots', [cB('slider-dot', `
+ transform: translateX(-50%) translateY(0);
+ `)])])]), cM('vertical', `
+ padding: 0 calc((var(--handle-size) - var(--rail-height)) / 2);
+ width: var(--rail-width-vertical);
+ height: 100%;
+ `, [cB('slider-handles', `
+ top: calc(var(--handle-size) / 2);
+ right: 0;
+ bottom: calc(var(--handle-size) / 2);
+ left: 0;
+ `, [cB('slider-handle', `
+ top: unset;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ `)]), cB('slider-rail', `
+ height: 100%;
+ `, [cE('fill', `
+ top: unset;
+ right: 0;
+ bottom: unset;
+ left: 0;
+ `)]), cM('with-mark', `
+ width: var(--rail-width-vertical);
+ margin: 0 32px 0 8px;
+ `), cB('slider-marks', `
+ top: calc(var(--handle-size) / 2);
+ right: unset;
+ bottom: calc(var(--handle-size) / 2);
+ left: 22px;
+ `, [cB('slider-mark', `
+ transform: translateY(50%);
+ white-space: nowrap;
+ `)]), cB('slider-dots', `
+ top: calc(var(--handle-size) / 2);
+ right: unset;
+ bottom: calc(var(--handle-size) / 2);
+ left: 50%;
+ `, [cB('slider-dot', `
+ transform: translateX(-50%) translateY(50%);
+ `)])]), cM('disabled', `
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  `, [cB('slider-handle', `
@@ -62,6 +104,14 @@ export default c([cB('slider', `
   backgroundColor: 'var(--fill-color-hover)'
 })]), cB('slider-handle', {
   boxShadow: 'var(--handle-box-shadow-hover)'
+})]), cB('slider-marks', `
+ position: absolute;
+ top: 18px;
+ left: calc(var(--handle-size) / 2);
+ right: calc(var(--handle-size) / 2);
+ `, [cB('slider-mark', {
+  position: 'absolute',
+  transform: 'translateX(-50%)'
 })]), cB('slider-rail', `
  width: 100%;
  position: relative;
@@ -76,15 +126,21 @@ export default c([cB('slider', `
  border-radius: calc(var(--rail-height) / 2);
  transition: background-color .3s var(--bezier);
  background-color: var(--fill-color);
- `)]), cB('slider-handle', `
+ `)]), cB('slider-handles', `
+ position: absolute;
+ top: 0;
+ right: calc(var(--handle-size) / 2);
+ bottom: 0;
+ left: calc(var(--handle-size) / 2);
+ `, [cB('slider-handle', `
  outline: none;
  height: var(--handle-size);
  width: var(--handle-size);
  border-radius: 50%;
  transition: box-shadow .2s var(--bezier), background-color .3s var(--bezier);
  position: absolute;
- top: 0;
- transform: translateX(-50%);
+ top: 50%;
+ transform: translate(-50%, -50%);
  overflow: hidden;
  cursor: pointer;
  background-color: var(--handle-color);
@@ -95,7 +151,7 @@ export default c([cB('slider', `
   boxShadow: 'var(--handle-box-shadow-active)'
 }), c('&:focus', {
   boxShadow: 'var(--handle-box-shadow-focus)'
-})]), cB('slider-dots', `
+})])]), cB('slider-dots', `
  position: absolute;
  top: 50%;
  left: calc(var(--handle-size) / 2);
@@ -108,7 +164,7 @@ export default c([cB('slider', `
  box-shadow .3s var(--bezier),
  background-color .3s var(--bezier);
  position: absolute;
- transform: translateX(-50%) translateY(-50%);
+ transform: translate(-50%, -50%);
  height: var(--dot-height);
  width: var(--dot-width);
  border-radius: var(--dot-border-radius);
@@ -121,12 +177,26 @@ export default c([cB('slider', `
 })])])]), cB('slider-handle-indicator', `
  font-size: var(--font-size);
  padding: 6px 10px;
- margin-bottom: 12px;
  border-radius: var(--indicator-border-radius);
  color: var(--indicator-text-color);
  background-color: var(--indicator-color);
  box-shadow: var(--indicator-box-shadow);
- `, [fadeInScaleUpTransition()]), insideModal(cB('slider', [cB('slider-dot', {
+ `, [fadeInScaleUpTransition()]), cB('slider-handle-indicator', `
+ font-size: var(--font-size);
+ padding: 6px 10px;
+ border-radius: var(--indicator-border-radius);
+ color: var(--indicator-text-color);
+ background-color: var(--indicator-color);
+ box-shadow: var(--indicator-box-shadow);
+ `, [cM('top', `
+ margin-bottom: 12px;
+ `), cM('right', `
+ margin-left: 12px;
+ `), cM('bottom', `
+ margin-top: 12px;
+ `), cM('left', `
+ margin-right: 12px;
+ `), fadeInScaleUpTransition()]), insideModal(cB('slider', [cB('slider-dot', {
   backgroundColor: 'var(--dot-color-modal)'
 })])), insidePopover(cB('slider', [cB('slider-dot', {
   backgroundColor: 'var(--dot-color-popover)'

package/es/slider/src/utils.d.ts

@@ -1 +1,10 @@
-export declare function isTouchEvent(e: MouseEvent | TouchEvent): boolean;
+import { Ref, ComponentPublicInstance } from 'vue';
+export declare function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent;
+declare type RefType = HTMLElement | ComponentPublicInstance;
+declare type RefKey = number;
+declare type RefsValue<T extends RefType> = Map<RefKey, T>;
+export declare function useRefs<T extends RefType>(): [
+    Ref<RefsValue<T>>,
+    (key: RefKey) => (el: any) => void
+];
+export {};

package/es/slider/src/utils.js

@@ -1,3 +1,12 @@
+import { ref, onBeforeUpdate } from 'vue';
 export function isTouchEvent(e) {
     return window.TouchEvent && e instanceof window.TouchEvent;
 }
+export function useRefs() {
+    const refs = ref(new Map());
+    const setRefs = (index) => (el) => {
+        refs.value.set(index, el);
+    };
+    onBeforeUpdate(() => refs.value.clear());
+    return [refs, setRefs];
+}

package/es/slider/styles/_common.d.ts

@@ -1,5 +1,6 @@
 declare const _default: {
     railHeight: string;
+    railWidthVertical: string;
     handleSize: string;
     dotHeight: string;
     dotWidth: string;

package/es/slider/styles/_common.js

@@ -1,5 +1,6 @@
 export default {
     railHeight: '4px',
+    railWidthVertical: '4px',
     handleSize: '18px',
     dotHeight: '8px',
     dotWidth: '8px',

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

@@ -23,6 +23,7 @@ declare const self: (vars: ThemeCommonVars) => {
     dotBorderActive: string;
     dotBoxShadow: string;
     railHeight: string;
+    railWidthVertical: string;
     handleSize: string;
     dotHeight: string;
     dotWidth: string;

package/es/space/src/Space.js

@@ -47,6 +47,8 @@ export default defineComponent({
     render() {
         const { vertical, align, inline, justify, itemStyle, margin, wrap, mergedClsPrefix } = this;
         const children = flatten(getSlot(this));
+        if (!children.length)
+            return null;
         const horizontalMargin = `${margin.horizontal}px`;
         const semiHorizontalMargin = `${margin.horizontal / 2}px`;
         const verticalMargin = `${margin.vertical}px`;

package/es/steps/src/Step.js

@@ -94,7 +94,7 @@ export default defineComponent({
                 this.vertical ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
             h("div", { class: `${mergedClsPrefix}-step-content` },
                 h("div", { class: `${mergedClsPrefix}-step-content-header` },
-                    h("div", { class: `${mergedClsPrefix}-step-content-header__title` }, this.title),
+                    h("div", { class: `${mergedClsPrefix}-step-content-header__title` }, renderSlot(this.$slots, 'title', undefined, () => [this.title])),
                     !this.vertical ? (h("div", { class: `${mergedClsPrefix}-step-splitor` })) : null),
                 showDescription ? (h("div", { class: `${mergedClsPrefix}-step-content__description` }, renderSlot(this.$slots, 'default', undefined, () => [
                     this.description

package/es/table/src/Table.d.ts

@@ -13,6 +13,7 @@ declare const tableProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    striped: BooleanConstructor;
     singleColumn: BooleanConstructor;
     size: {
         type: PropType<"small" | "medium" | "large">;
@@ -30,6 +31,9 @@ declare const tableProps: {
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -55,6 +59,9 @@ declare const tableProps: {
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -80,6 +87,9 @@ declare const tableProps: {
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -108,6 +118,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    striped: BooleanConstructor;
     singleColumn: BooleanConstructor;
     size: {
         type: PropType<"small" | "medium" | "large">;
@@ -125,6 +136,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -150,6 +164,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -175,6 +192,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -209,11 +229,15 @@ declare const _default: import("vue").DefineComponent<{
         '--line-height': string;
         '--td-padding': string;
         '--th-padding': string;
+        '--td-color-striped': string;
+        '--td-color-striped-modal': string;
+        '--td-color-striped-popover': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     bordered?: unknown;
     bottomBordered?: unknown;
     singleLine?: unknown;
+    striped?: unknown;
     singleColumn?: unknown;
     size?: unknown;
     theme?: unknown;
@@ -223,6 +247,7 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large";
     bordered: boolean;
     bottomBordered: boolean;
+    striped: boolean;
     singleLine: boolean;
     singleColumn: boolean;
 } & {
@@ -238,6 +263,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -263,6 +291,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -288,6 +319,9 @@ declare const _default: import("vue").DefineComponent<{
         tdColor: string;
         tdColorModal: string;
         tdColorPopover: string;
+        tdColorStriped: string;
+        tdColorStripedModal: string;
+        tdColorStripedPopover: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -305,6 +339,7 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large";
     bordered: boolean;
     bottomBordered: boolean;
+    striped: boolean;
     singleLine: boolean;
     singleColumn: boolean;
 }>;

package/es/table/src/Table.js

@@ -12,7 +12,7 @@ const tableProps = Object.assign(Object.assign({}, useTheme.props), { bordered:
     }, singleLine: {
         type: Boolean,
         default: true
-    }, singleColumn: Boolean, size: {
+    }, striped: Boolean, singleColumn: Boolean, size: {
         type: String,
         default: 'medium'
     } });
@@ -26,7 +26,7 @@ export default defineComponent({
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {
                 const { size } = props;
-                const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, [createKey('fontSize', size)]: fontSize, [createKey('tdPadding', size)]: tdPadding, [createKey('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('tdPadding', size)]: tdPadding, [createKey('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--td-color': tdColor,
@@ -45,7 +45,10 @@ export default defineComponent({
                     '--th-text-color': thTextColor,
                     '--line-height': lineHeight,
                     '--td-padding': tdPadding,
-                    '--th-padding': thPadding
+                    '--th-padding': thPadding,
+                    '--td-color-striped': tdColorStriped,
+                    '--td-color-striped-modal': tdColorStripedModal,
+                    '--td-color-striped-popover': tdColorStripedPopover
                 };
             })
         };
@@ -58,7 +61,8 @@ export default defineComponent({
                     [`${mergedClsPrefix}-table--bottom-bordered`]: this.bottomBordered,
                     [`${mergedClsPrefix}-table--bordered`]: this.bordered,
                     [`${mergedClsPrefix}-table--single-line`]: this.singleLine,
-                    [`${mergedClsPrefix}-table--single-column`]: this.singleColumn
+                    [`${mergedClsPrefix}-table--single-column`]: this.singleColumn,
+                    [`${mergedClsPrefix}-table--striped`]: this.striped
                 }
             ], style: this.cssVars }, this.$slots));
     }

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

@@ -76,7 +76,7 @@ export default c([cB('table', `
  border-right: none;
  `)]), cM('single-column', [c('tr', [c('&:not(:last-child)', [c('td', `
  border-bottom: none;
- `)])])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
+ `)])])]), cM('striped', [c('tr:nth-of-type(even)', [c('td', 'background-color: var(--td-color-striped)')])]), cNotM('bottom-bordered', [c('tr', [c('&:last-child', [c('td', `
  border-bottom: none;
  `)])])])]), insideModal(cB('table', `
  background-color: var(--td-color-modal);

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

@@ -12,6 +12,9 @@ export declare const self: (vars: ThemeCommonVars) => {
     tdColor: string;
     tdColorModal: string;
     tdColorPopover: string;
+    tdColorStriped: string;
+    tdColorStripedModal: string;
+    tdColorStripedPopover: string;
     thColor: string;
     thColorModal: string;
     thColorPopover: string;

package/es/table/styles/light.js

@@ -2,12 +2,12 @@ import { composite } from 'seemly';
 import sizeVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
+    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, tableColorStriped, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, sizeVariables), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
         lineHeight,
-        borderRadius, borderColor: composite(cardColor, dividerColor), borderColorModal: composite(modalColor, dividerColor), borderColorPopover: composite(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, thColor: composite(cardColor, tableHeaderColor), thColorModal: composite(modalColor, tableHeaderColor), thColorPopover: composite(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
+        borderRadius, borderColor: composite(cardColor, dividerColor), borderColorModal: composite(modalColor, dividerColor), borderColorPopover: composite(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, tdColorStriped: composite(cardColor, tableColorStriped), tdColorStripedModal: composite(modalColor, tableColorStriped), tdColorStripedPopover: composite(popoverColor, tableColorStriped), thColor: composite(cardColor, tableHeaderColor), thColorModal: composite(modalColor, tableHeaderColor), thColorPopover: composite(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
 };
 const tableLight = {
     name: 'Table',

package/es/tabs/index.d.ts

@@ -2,3 +2,5 @@ export { default as NTabs } from './src/Tabs';
 export type { TabsProps } from './src/Tabs';
 export { default as NTabPane } from './src/TabPane';
 export type { TabPaneProps } from './src/TabPane';
+export { default as NTab } from './src/Tab';
+export type { TabProps } from './src/Tab';

package/es/tabs/index.js

@@ -1,2 +1,3 @@
 export { default as NTabs } from './src/Tabs';
 export { default as NTabPane } from './src/TabPane';
+export { default as NTab } from './src/Tab';

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

@@ -1,7 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
-    leftPadded: BooleanConstructor;
-    addable: BooleanConstructor;
-} & {
+import type { ExtractPublicPropTypes } from '../../_utils';
+declare const typeProps: {
     readonly label: {
         readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -9,22 +7,44 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
         readonly validator: () => boolean;
     };
+    readonly name: {
+        readonly type: import("vue").PropType<string | number>;
+        readonly required: true;
+    };
     readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | (() => import("vue").VNodeChild)>;
+    readonly disabled: BooleanConstructor;
+    readonly closable: {
+        readonly type: import("vue").PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
+};
+export declare type TabProps = ExtractPublicPropTypes<typeof typeProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly label: {
+        readonly type: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+            [key: string]: any;
+        }> | (() => import("vue").VNodeChild)>;
+        readonly default: undefined;
+        readonly validator: () => boolean;
+    };
     readonly name: {
         readonly type: import("vue").PropType<string | number>;
         readonly required: true;
     };
+    readonly tab: import("vue").PropType<string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }> | (() => import("vue").VNodeChild)>;
     readonly disabled: BooleanConstructor;
-    readonly displayDirective: {
-        readonly type: import("vue").PropType<"show" | "if" | "show:lazy">;
-        readonly default: "if";
-    };
     readonly closable: {
         readonly type: import("vue").PropType<boolean | undefined>;
         readonly default: undefined;
     };
+    readonly internalLeftPadded: BooleanConstructor;
+    readonly internalAddable: BooleanConstructor;
 }, {
     mergedClosable: import("vue").ComputedRef<boolean>;
     style: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
@@ -34,20 +54,18 @@ declare const _default: import("vue").DefineComponent<{
     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<{
-    leftPadded?: unknown;
-    addable?: unknown;
     readonly label?: unknown;
-    readonly tab?: unknown;
     readonly name?: unknown;
+    readonly tab?: unknown;
     readonly disabled?: unknown;
-    readonly displayDirective?: unknown;
     readonly closable?: unknown;
+    readonly internalLeftPadded?: unknown;
+    readonly internalAddable?: unknown;
 } & {
     name: string | number;
     disabled: boolean;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 } & {
     label?: string | number | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
@@ -62,8 +80,7 @@ declare const _default: import("vue").DefineComponent<{
     }> | (() => import("vue").VNodeChild);
     disabled: boolean;
     closable: boolean | undefined;
-    displayDirective: "show" | "if" | "show:lazy";
-    addable: boolean;
-    leftPadded: boolean;
+    internalLeftPadded: boolean;
+    internalAddable: boolean;
 }>;
 export default _default;

package/es/tabs/src/Tab.js

@@ -1,22 +1,21 @@
 import { h, defineComponent, inject, computed } from 'vue';
 import { AddIcon } from '../../_internal/icons';
 import { NBaseClose, NBaseIcon } from '../../_internal';
-import { render } from '../../_utils';
+import { render, omit } from '../../_utils';
 import { tabsInjectionKey } from './interface';
 import { tabPaneProps } from './TabPane';
+const typeProps = Object.assign({ internalLeftPadded: Boolean, internalAddable: Boolean }, omit(tabPaneProps, ['displayDirective']));
 export default defineComponent({
+    __TAB__: true,
     name: 'Tab',
-    props: Object.assign({
-        leftPadded: Boolean,
-        addable: Boolean
-    }, tabPaneProps),
+    props: typeProps,
     setup(props) {
         const { mergedClsPrefixRef, valueRef, typeRef, closableRef, tabStyleRef, tabChangeIdRef, onBeforeLeaveRef, handleAdd, handleTabClick, handleClose
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(tabsInjectionKey);
         return {
             mergedClosable: computed(() => {
-                if (props.addable)
+                if (props.internalAddable)
                     return false;
                 const { closable } = props;
                 if (closable === undefined)
@@ -36,7 +35,7 @@ export default defineComponent({
             handleClick() {
                 if (props.disabled)
                     return;
-                if (props.addable) {
+                if (props.internalAddable) {
                     handleAdd();
                     return;
                 }
@@ -59,18 +58,18 @@ export default defineComponent({
         };
     },
     render() {
-        const { addable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
+        const { internalAddable, clsPrefix, name, disabled, label, tab, value, mergedClosable, style, $slots: { default: defaultSlot } } = this;
         const mergedTab = label !== null && label !== void 0 ? label : tab;
         return (h("div", { class: `${clsPrefix}-tabs-tab-wrapper` },
-            this.leftPadded ? (h("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
+            this.internalLeftPadded ? (h("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
             h("div", { key: name, "data-name": name, "data-disabled": disabled ? true : undefined, class: [
                     `${clsPrefix}-tabs-tab`,
                     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 }, {
+                    internalAddable && `${clsPrefix}-tabs-tab--addable`
+                ], onClick: this.handleClick, style: internalAddable ? undefined : style },
+                h("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? (h(NBaseIcon, { clsPrefix: clsPrefix }, {
                     default: () => h(AddIcon, null)
                 })) : defaultSlot ? (defaultSlot()) : typeof mergedTab === 'object' ? (mergedTab // VNode
                 ) : (render(mergedTab !== null && mergedTab !== void 0 ? mergedTab : name))),