naive-ui 2.20.3 → 2.21.3

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/switch/src/Switch.d.ts

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { CSSProperties, PropType } from 'vue';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const switchProps: {
@@ -33,6 +33,10 @@ declare const switchProps: {
         readonly type: PropType<string | number | boolean>;
         readonly default: false;
     };
+    readonly railStyle: PropType<(params: {
+        focused: boolean;
+        checked: boolean;
+    }) => string | CSSProperties>;
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
@@ -162,6 +166,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<string | number | boolean>;
         readonly default: false;
     };
+    readonly railStyle: PropType<(params: {
+        focused: boolean;
+        checked: boolean;
+    }) => string | CSSProperties>;
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
@@ -263,9 +271,11 @@ declare const _default: import("vue").DefineComponent<{
     handleFocus: () => void;
     handleKeyup: (e: KeyboardEvent) => void;
     handleKeydown: (e: KeyboardEvent) => void;
+    mergedRailStyle: import("vue").ComputedRef<string | CSSProperties | undefined>;
     pressed: import("vue").Ref<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedValue: import("vue").ComputedRef<string | number | boolean>;
+    checked: import("vue").ComputedRef<boolean>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<{
         '--bezier': string;
@@ -299,6 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onUpdateValue?: unknown;
     readonly checkedValue?: unknown;
     readonly uncheckedValue?: unknown;
+    readonly railStyle?: unknown;
     readonly onChange?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
@@ -409,6 +420,10 @@ declare const _default: import("vue").DefineComponent<{
     }, any>> | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
     onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
+    railStyle?: ((params: {
+        focused: boolean;
+        checked: boolean;
+    }) => string | CSSProperties) | undefined;
 }>, {
     value: string | number | boolean | undefined;
     round: boolean;

package/es/switch/src/Switch.js

@@ -27,7 +27,7 @@ const switchProps = Object.assign(Object.assign({}, useTheme.props), { size: {
     }, uncheckedValue: {
         type: [String, Number, Boolean],
         default: false
-    }, 
+    }, railStyle: Function, 
     /** @deprecated */
     onChange: [Function, Array] });
 export default defineComponent({
@@ -48,7 +48,17 @@ export default defineComponent({
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        const checkedRef = computed(() => {
+            return mergedValueRef.value === props.checkedValue;
+        });
         const pressedRef = ref(false);
+        const focusedRef = ref(false);
+        const mergedRailStyleRef = computed(() => {
+            const { railStyle } = props;
+            if (!railStyle)
+                return undefined;
+            return railStyle({ focused: focusedRef.value, checked: checkedRef.value });
+        });
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onChange, onUpdateValue } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -81,9 +91,11 @@ export default defineComponent({
             }
         }
         function handleFocus() {
+            focusedRef.value = true;
             doFocus();
         }
         function handleBlur() {
+            focusedRef.value = false;
             doBlur();
             pressedRef.value = false;
         }
@@ -105,9 +117,11 @@ export default defineComponent({
             handleFocus,
             handleKeyup,
             handleKeydown,
+            mergedRailStyle: mergedRailStyleRef,
             pressed: pressedRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedValue: mergedValueRef,
+            checked: checkedRef,
             mergedDisabled: mergedDisabledRef,
             cssVars: computed(() => {
                 const { value: size } = mergedSizeRef;
@@ -142,8 +156,7 @@ export default defineComponent({
         };
     },
     render() {
-        const { mergedClsPrefix, mergedValue, mergedDisabled, checkedValue, $slots } = this;
-        const checked = mergedValue === checkedValue;
+        const { mergedClsPrefix, mergedDisabled, checked, mergedRailStyle, $slots } = this;
         const { checked: checkedSlot, unchecked: uncheckedSlot } = $slots;
         return (h("div", { role: "switch", "aria-checked": checked, class: [
                 `${mergedClsPrefix}-switch`,
@@ -152,7 +165,7 @@ export default defineComponent({
                 this.round && `${mergedClsPrefix}-switch--round`,
                 this.pressed && `${mergedClsPrefix}-switch--pressed`
             ], tabindex: !this.mergedDisabled ? 0 : undefined, style: this.cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
-            h("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true" },
+            h("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true", style: mergedRailStyle },
                 (checkedSlot || uncheckedSlot) && (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
                     h("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
                         h("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), checkedSlot === null || checkedSlot === void 0 ? void 0 :

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

@@ -92,7 +92,7 @@ export default cB('switch', `
  cursor: pointer;
  position: relative;
  transition:
- background-color .3s var(--bezier),
+ background .3s var(--bezier),
  box-shadow .3s var(--bezier);
  background-color: var(--rail-color);
  `, [cE('button', `

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';