naive-ui 2.20.3 → 2.21.3

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/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/lib/switch/src/Switch.js

@@ -32,7 +32,7 @@ const switchProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, uncheckedValue: {
         type: [String, Number, Boolean],
         default: false
-    }, 
+    }, railStyle: Function, 
     /** @deprecated */
     onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
@@ -53,7 +53,17 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        const checkedRef = (0, vue_1.computed)(() => {
+            return mergedValueRef.value === props.checkedValue;
+        });
         const pressedRef = (0, vue_1.ref)(false);
+        const focusedRef = (0, vue_1.ref)(false);
+        const mergedRailStyleRef = (0, vue_1.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;
@@ -86,9 +96,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleFocus() {
+            focusedRef.value = true;
             doFocus();
         }
         function handleBlur() {
+            focusedRef.value = false;
             doBlur();
             pressedRef.value = false;
         }
@@ -110,9 +122,11 @@ exports.default = (0, vue_1.defineComponent)({
             handleFocus,
             handleKeyup,
             handleKeydown,
+            mergedRailStyle: mergedRailStyleRef,
             pressed: pressedRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedValue: mergedValueRef,
+            checked: checkedRef,
             mergedDisabled: mergedDisabledRef,
             cssVars: (0, vue_1.computed)(() => {
                 const { value: size } = mergedSizeRef;
@@ -147,8 +161,7 @@ exports.default = (0, vue_1.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 ((0, vue_1.h)("div", { role: "switch", "aria-checked": checked, class: [
                 `${mergedClsPrefix}-switch`,
@@ -157,7 +170,7 @@ exports.default = (0, vue_1.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 },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true" },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true", style: mergedRailStyle },
                 (checkedSlot || uncheckedSlot) && ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
                         (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), checkedSlot === null || checkedSlot === void 0 ? void 0 :

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

@@ -106,7 +106,7 @@ exports.default = (0, cssr_1.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);
  `, [(0, cssr_1.cE)('button', `

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, tableColorStriped, 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, tableColorStriped), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorStriped), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorStriped), 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; } });