naive-ui 2.20.3 → 2.21.0

package/lib/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/lib/slider/src/styles/index.cssr.js

@@ -39,6 +39,7 @@ const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transi
 // --rail-color
 // --rail-color-hover
 // --rail-height
+// --rail-width-vertical
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
@@ -48,15 +49,56 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  z-index: 0;
  width: 100%;
  cursor: pointer;
- `, [(0, cssr_1.cB)('slider-marks', `
- position: absolute;
- top: 18px;
- left: calc(var(--handle-size) / 2);
- right: calc(var(--handle-size) / 2);
- `, [(0, cssr_1.cB)('slider-mark', {
-  position: 'absolute',
-  transform: 'translateX(-50%)'
-})]), (0, cssr_1.cM)('disabled', `
+ user-select: none;
+ `, [(0, cssr_1.cM)('reverse', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle', `
+ transform: translate(50%, -50%);
+ `)]), (0, cssr_1.cB)('slider-dots', [(0, cssr_1.cB)('slider-dot', `
+ transform: translateX(50%, -50%);
+ `)]), (0, cssr_1.cM)('vertical', [(0, cssr_1.cB)('slider-handles', [(0, cssr_1.cB)('slider-handle', `
+ transform: translate(-50%, -50%);
+ `)]), (0, cssr_1.cB)('slider-marks', [(0, cssr_1.cB)('slider-mark', `
+ transform: translateY(calc(-50% + var(--dot-height) / 2));
+ `)]), (0, cssr_1.cB)('slider-dots', [(0, cssr_1.cB)('slider-dot', `
+ transform: translateX(-50%) translateY(0);
+ `)])])]), (0, cssr_1.cM)('vertical', `
+ padding: 0 calc((var(--handle-size) - var(--rail-height)) / 2);
+ width: var(--rail-width-vertical);
+ height: 100%;
+ `, [(0, cssr_1.cB)('slider-handles', `
+ top: calc(var(--handle-size) / 2);
+ right: 0;
+ bottom: calc(var(--handle-size) / 2);
+ left: 0;
+ `, [(0, cssr_1.cB)('slider-handle', `
+ top: unset;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ `)]), (0, cssr_1.cB)('slider-rail', `
+ height: 100%;
+ `, [(0, cssr_1.cE)('fill', `
+ top: unset;
+ right: 0;
+ bottom: unset;
+ left: 0;
+ `)]), (0, cssr_1.cM)('with-mark', `
+ width: var(--rail-width-vertical);
+ margin: 0 32px 0 8px;
+ `), (0, cssr_1.cB)('slider-marks', `
+ top: calc(var(--handle-size) / 2);
+ right: unset;
+ bottom: calc(var(--handle-size) / 2);
+ left: 22px;
+ `, [(0, cssr_1.cB)('slider-mark', `
+ transform: translateY(50%);
+ white-space: nowrap;
+ `)]), (0, cssr_1.cB)('slider-dots', `
+ top: calc(var(--handle-size) / 2);
+ right: unset;
+ bottom: calc(var(--handle-size) / 2);
+ left: 50%;
+ `, [(0, cssr_1.cB)('slider-dot', `
+ transform: translateX(-50%) translateY(50%);
+ `)])]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  `, [(0, cssr_1.cB)('slider-handle', `
@@ -76,6 +118,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
   backgroundColor: 'var(--fill-color-hover)'
 })]), (0, cssr_1.cB)('slider-handle', {
   boxShadow: 'var(--handle-box-shadow-hover)'
+})]), (0, cssr_1.cB)('slider-marks', `
+ position: absolute;
+ top: 18px;
+ left: calc(var(--handle-size) / 2);
+ right: calc(var(--handle-size) / 2);
+ `, [(0, cssr_1.cB)('slider-mark', {
+  position: 'absolute',
+  transform: 'translateX(-50%)'
 })]), (0, cssr_1.cB)('slider-rail', `
  width: 100%;
  position: relative;
@@ -90,15 +140,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
  border-radius: calc(var(--rail-height) / 2);
  transition: background-color .3s var(--bezier);
  background-color: var(--fill-color);
- `)]), (0, cssr_1.cB)('slider-handle', `
+ `)]), (0, cssr_1.cB)('slider-handles', `
+ position: absolute;
+ top: 0;
+ right: calc(var(--handle-size) / 2);
+ bottom: 0;
+ left: calc(var(--handle-size) / 2);
+ `, [(0, cssr_1.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);
@@ -109,7 +165,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
   boxShadow: 'var(--handle-box-shadow-active)'
 }), (0, cssr_1.c)('&:focus', {
   boxShadow: 'var(--handle-box-shadow-focus)'
-})]), (0, cssr_1.cB)('slider-dots', `
+})])]), (0, cssr_1.cB)('slider-dots', `
  position: absolute;
  top: 50%;
  left: calc(var(--handle-size) / 2);
@@ -122,7 +178,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.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);
@@ -135,12 +191,26 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('slider', `
 })])])]), (0, cssr_1.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);
- `, [(0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.insideModal)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', {
+ `, [(0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.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);
+ `, [(0, cssr_1.cM)('top', `
+ margin-bottom: 12px;
+ `), (0, cssr_1.cM)('right', `
+ margin-left: 12px;
+ `), (0, cssr_1.cM)('bottom', `
+ margin-top: 12px;
+ `), (0, cssr_1.cM)('left', `
+ margin-right: 12px;
+ `), (0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.insideModal)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', {
   backgroundColor: 'var(--dot-color-modal)'
 })])), (0, cssr_1.insidePopover)((0, cssr_1.cB)('slider', [(0, cssr_1.cB)('slider-dot', {
   backgroundColor: 'var(--dot-color-popover)'

package/lib/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/lib/slider/src/utils.js

@@ -1,7 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTouchEvent = void 0;
+exports.useRefs = exports.isTouchEvent = void 0;
+const vue_1 = require("vue");
 function isTouchEvent(e) {
     return window.TouchEvent && e instanceof window.TouchEvent;
 }
 exports.isTouchEvent = isTouchEvent;
+function useRefs() {
+    const refs = (0, vue_1.ref)(new Map());
+    const setRefs = (index) => (el) => {
+        refs.value.set(index, el);
+    };
+    (0, vue_1.onBeforeUpdate)(() => refs.value.clear());
+    return [refs, setRefs];
+}
+exports.useRefs = useRefs;

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

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

package/lib/slider/styles/_common.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     railHeight: '4px',
+    railWidthVertical: '4px',
     handleSize: '18px',
     dotHeight: '8px',
     dotWidth: '8px',

package/lib/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/lib/space/src/Space.js

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

package/lib/steps/src/Step.js

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

package/lib/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/lib/table/src/Table.js

@@ -17,7 +17,7 @@ const tableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, singleLine: {
         type: Boolean,
         default: true
-    }, singleColumn: Boolean, size: {
+    }, striped: Boolean, singleColumn: Boolean, size: {
         type: String,
         default: 'medium'
     } });
@@ -31,7 +31,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {
                 const { size } = props;
-                const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.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, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.createKey)('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--td-color': tdColor,
@@ -50,7 +50,10 @@ exports.default = (0, vue_1.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
                 };
             })
         };
@@ -63,7 +66,8 @@ exports.default = (0, vue_1.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/lib/table/src/styles/index.cssr.js

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

package/lib/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/lib/table/styles/light.js

@@ -8,12 +8,12 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
+    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, tableColorHover, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
         lineHeight,
-        borderRadius, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
+        borderRadius, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorHover), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorHover), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorHover), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
 };
 exports.self = self;
 const tableLight = {

package/lib/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/lib/tabs/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NTabPane = exports.NTabs = void 0;
+exports.NTab = exports.NTabPane = exports.NTabs = void 0;
 var Tabs_1 = require("./src/Tabs");
 Object.defineProperty(exports, "NTabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
 var TabPane_1 = require("./src/TabPane");
 Object.defineProperty(exports, "NTabPane", { enumerable: true, get: function () { return __importDefault(TabPane_1).default; } });
+var Tab_1 = require("./src/Tab");
+Object.defineProperty(exports, "NTab", { enumerable: true, get: function () { return __importDefault(Tab_1).default; } });

package/lib/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/lib/tabs/src/Tab.js

@@ -6,19 +6,18 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
 const TabPane_1 = require("./TabPane");
+const typeProps = Object.assign({ internalLeftPadded: Boolean, internalAddable: Boolean }, (0, _utils_1.omit)(TabPane_1.tabPaneProps, ['displayDirective']));
 exports.default = (0, vue_1.defineComponent)({
+    __TAB__: true,
     name: 'Tab',
-    props: Object.assign({
-        leftPadded: Boolean,
-        addable: Boolean
-    }, TabPane_1.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
          } = (0, vue_1.inject)(interface_1.tabsInjectionKey);
         return {
             mergedClosable: (0, vue_1.computed)(() => {
-                if (props.addable)
+                if (props.internalAddable)
                     return false;
                 const { closable } = props;
                 if (closable === undefined)
@@ -38,7 +37,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleClick() {
                 if (props.disabled)
                     return;
-                if (props.addable) {
+                if (props.internalAddable) {
                     handleAdd();
                     return;
                 }
@@ -61,18 +60,18 @@ exports.default = (0, vue_1.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 ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-wrapper` },
-            this.leftPadded ? ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
+            this.internalLeftPadded ? ((0, vue_1.h)("div", { class: `${clsPrefix}-tabs-tab-pad` })) : null,
             (0, vue_1.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 },
-                (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, addable ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
+                    internalAddable && `${clsPrefix}-tabs-tab--addable`
+                ], onClick: this.handleClick, style: internalAddable ? undefined : style },
+                (0, vue_1.h)("span", { class: `${clsPrefix}-tabs-tab__label` }, internalAddable ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix }, {
                     default: () => (0, vue_1.h)(icons_1.AddIcon, null)
                 })) : defaultSlot ? (defaultSlot()) : typeof mergedTab === 'object' ? (mergedTab // VNode
                 ) : ((0, _utils_1.render)(mergedTab !== null && mergedTab !== void 0 ? mergedTab : name))),