naive-ui 2.21.1 → 2.21.2

package/lib/_internal/scrollbar/src/ScrollBar.js

@@ -33,6 +33,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         // dom ref
+        const wrapperRef = (0, vue_1.ref)(null);
         const containerRef = (0, vue_1.ref)(null);
         const contentRef = (0, vue_1.ref)(null);
         const yRailRef = (0, vue_1.ref)(null);
@@ -291,6 +292,10 @@ const Scrollbar = (0, vue_1.defineComponent)({
             syncPositionState();
             syncScrollState();
         }
+        function isMouseUpAway(e) {
+            var _a;
+            return !((_a = wrapperRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target));
+        }
         function handleXScrollMouseDown(e) {
             e.preventDefault();
             e.stopPropagation();
@@ -335,8 +340,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleXScrollMouseUp, true);
             xBarPressed = false;
             sync();
-            const { value: container } = mergedContainerRef;
-            if (!(container === null || container === void 0 ? void 0 : container.contains(e.target))) {
+            if (isMouseUpAway(e)) {
                 hideBar();
             }
         }
@@ -381,8 +385,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
             yBarPressed = false;
             sync();
-            const { value: container } = mergedContainerRef;
-            if (!(container === null || container === void 0 ? void 0 : container.contains(e.target))) {
+            if (isMouseUpAway(e)) {
                 hideBar();
             }
         }
@@ -438,6 +441,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             scrollTo,
             mergedClsPrefix: mergedClsPrefixRef,
             containerScrollTop: containerScrollTopRef,
+            wrapperRef,
             containerRef,
             contentRef,
             yRailRef,
@@ -476,6 +480,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
         if (!this.scrollable)
             return (0, vue_1.renderSlot)($slots, 'default');
         const createChildren = () => (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+            ref: 'wrapperRef',
             class: `${mergedClsPrefix}-scrollbar`,
             style: this.cssVars,
             onMouseenter: this.handleMouseEnterWrapper,

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -279,6 +279,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/_internal/selection/src/Selection.d.ts

@@ -332,6 +332,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/_styles/common/dark.js

@@ -23,6 +23,7 @@ const base = {
     alphaDisabledInput: '0.06',
     alphaPending: '0.09',
     alphaTablePending: '0.06',
+    alphaTableStriped: '0.05',
     alphaPressed: '0.05',
     alphaAvatar: '0.18',
     alphaRail: '0.2',
@@ -92,5 +93,5 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // close
     closeColorHover: overlay(Number(base.alphaClose) * 1.25), closeColor: overlay(Number(base.alphaClose)), closeColorPressed: overlay(Number(base.alphaClose) * 0.8), closeColorDisabled: overlay(base.alpha4), 
     // clear
-    clearColor: overlay(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), invertedColor: base.neutralBase, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .06)', buttonColor2Hover: 'rgba(255, 255, 255, .09)', buttonColor2Pressed: 'rgba(255, 255, 255, .05)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
+    clearColor: overlay(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 1.25 }), clearColorPressed: (0, seemly_1.scaleColor)(overlay(base.alpha4), { alpha: 0.8 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: overlay(base.alphaProgressRail), railColor: overlay(base.alphaRail), popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: neutral(base.alphaTag), avatarColor: overlay(base.alphaAvatar), invertedColor: base.neutralBase, inputColor: overlay(base.alphaInput), codeColor: overlay(base.alphaCode), tabColor: overlay(base.alphaTab), actionColor: overlay(base.alphaAction), tableHeaderColor: overlay(base.alphaAction), hoverColor: overlay(base.alphaPending), tableColorHover: overlay(base.alphaTablePending), tableColorStriped: overlay(base.alphaTableStriped), pressedColor: overlay(base.alphaPressed), opacityDisabled: base.alphaDisabled, inputColorDisabled: overlay(base.alphaDisabledInput), buttonColor2: 'rgba(255, 255, 255, .06)', buttonColor2Hover: 'rgba(255, 255, 255, .09)', buttonColor2Pressed: 'rgba(255, 255, 255, .05)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -67,6 +67,7 @@ declare const derived: {
     tableHeaderColor: string;
     hoverColor: string;
     tableColorHover: string;
+    tableColorStriped: string;
     pressedColor: string;
     opacityDisabled: string;
     inputColorDisabled: string;

package/lib/_styles/common/light.js

@@ -94,7 +94,7 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // clear
     clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
     // use color with alpha since it can be nested with header filter & sorter effect
-    tableColorHover: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 
+    tableColorHover: 'rgba(0, 0, 100, 0.03)', tableColorStriped: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', 
     // secondary button color
     // can also be used in tertiary button & quaternary button
     buttonColor2: 'rgba(46, 51, 56, .05)', buttonColor2Hover: 'rgba(46, 51, 56, .09)', buttonColor2Pressed: 'rgba(46, 51, 56, .13)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });

package/lib/alert/src/Alert.d.ts

@@ -437,6 +437,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -891,6 +891,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/auto-complete/src/AutoComplete.js

@@ -237,7 +237,10 @@ exports.default = (0, vue_1.defineComponent)({
                                 });
                             }
                             const { mergedTheme } = this;
-                            return ((0, vue_1.h)(input_1.NInput, { theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, bordered: this.mergedBordered, value: this.mergedValue, placeholder: this.placeholder, size: this.mergedSize, disabled: this.mergedDisabled, clearable: this.clearable, loading: this.loading, inputProps: this.inputProps, onClear: this.handleClear, onFocus: this.handleFocus, onUpdateValue: this.handleInput, onBlur: this.handleBlur }));
+                            return ((0, vue_1.h)(input_1.NInput, { theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, bordered: this.mergedBordered, value: this.mergedValue, placeholder: this.placeholder, size: this.mergedSize, disabled: this.mergedDisabled, clearable: this.clearable, loading: this.loading, inputProps: this.inputProps, onClear: this.handleClear, onFocus: this.handleFocus, onUpdateValue: this.handleInput, onBlur: this.handleBlur }, {
+                                suffix: this.$slots.suffix,
+                                prefix: this.$slots.prefix
+                            }));
                         }
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { show: this.active, to: this.adjustedTo, containerClass: this.namespace, zIndex: this.zIndex, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: "bottom-start", width: "target" }, {

package/lib/calendar/src/Calendar.d.ts

@@ -1484,6 +1484,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/card/src/Card.d.ts

@@ -340,6 +340,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/cascader/src/Cascader.d.ts

@@ -1316,6 +1316,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/cascader/src/CascaderOption.d.ts

@@ -89,6 +89,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/cascader/src/CascaderSelectMenu.d.ts

@@ -101,6 +101,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/cascader/src/CascaderSubmenu.d.ts

@@ -82,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/checkbox/src/Checkbox.d.ts

@@ -311,6 +311,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/collapse/src/Collapse.d.ts

@@ -189,6 +189,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/color-picker/src/ColorInputUnit.d.ts

@@ -84,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/DataTable.d.ts

@@ -3939,6 +3939,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -80,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -105,6 +105,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
@@ -170,7 +171,7 @@ declare const _default: import("vue").DefineComponent<{
             thColorHoverPopover: string;
             tdColorPopover: string;
             boxShadowBefore: string;
-            boxShadowAfter: string;
+            boxShadowAfter: string; /** this branch is for compatibility */
             loadingColor: string;
             loadingSize: string;
             opacityLoading: string;

package/lib/data-table/src/TableParts/Body.d.ts

@@ -92,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/TableParts/Cell.d.ts

@@ -85,6 +85,7 @@ declare const _default: import("vue").DefineComponent<{
                 tableHeaderColor: string;
                 hoverColor: string;
                 tableColorHover: string;
+                tableColorStriped: string;
                 pressedColor: string;
                 opacityDisabled: string;
                 inputColorDisabled: string;
@@ -1048,6 +1049,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/TableParts/Header.d.ts

@@ -92,6 +92,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/data-table/src/styles/index.cssr.js

@@ -99,7 +99,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  margin-right: 8px;
  cursor: pointer;
  font-size: 16px;
- vertical-align: -.125em;
+ vertical-align: -0.2em;
  `), (0, cssr_1.cB)('data-table-thead', {
   transition: 'background-color .3s var(--bezier)',
   backgroundColor: 'var(--merged-th-color)'
@@ -107,7 +107,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('data-table', `
  box-sizing: border-box;
  background-clip: padding-box;
  transition: background-color .3s var(--bezier);
- `, [(0, cssr_1.c)('&:hover', 'background-color: var(--merged-td-color-hover);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-hover);')]), (0, cssr_1.cM)('striped', 'background-color: var(--merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-striped);')])]), (0, cssr_1.cB)('data-table-th', `
+ `, [(0, cssr_1.cM)('striped', 'background-color: var(--merged-td-color-striped);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-striped);')]), (0, cssr_1.c)('&:hover', 'background-color: var(--merged-td-color-hover);', [(0, cssr_1.cB)('data-table-td', 'background-color: var(--merged-td-color-hover);')])]), (0, cssr_1.cB)('data-table-th', `
  padding: var(--th-padding);
  position: relative;
  text-align: start;

package/lib/data-table/src/use-table-data.js

@@ -211,7 +211,7 @@ function useTableData(props, { dataRelatedColsRef }) {
     const mergedPaginationRef = (0, vue_1.computed)(() => {
         return Object.assign(Object.assign({}, props.pagination), { 
             // reset deprecated methods
-            onChange: undefined, onPageSizeChange: undefined, 'onUpdate:page': mergedOnUpdatePage, 'onUpdate:pageSize': mergedOnUpdatePageSize, 
+            onChange: undefined, onUpdatePage: undefined, onUpdatePageSize: undefined, onPageSizeChange: undefined, 'onUpdate:page': mergedOnUpdatePage, 'onUpdate:pageSize': mergedOnUpdatePageSize, 
             // writing merged props after pagination to avoid
             // pagination[key] === undefined
             // key still exists but value is undefined
@@ -223,10 +223,10 @@ function useTableData(props, { dataRelatedColsRef }) {
         const { 'onUpdate:page': _onUpdatePage, onPageChange, onUpdatePage } = props;
         if (onUpdatePage)
             (0, _utils_1.call)(onUpdatePage, page);
-        if (onPageChange)
-            (0, _utils_1.call)(onPageChange, page);
         if (_onUpdatePage)
             (0, _utils_1.call)(_onUpdatePage, page);
+        if (onPageChange)
+            (0, _utils_1.call)(onPageChange, page);
         uncontrolledCurrentPageRef.value = page;
     }
     function doUpdatePageSize(pageSize) {

package/lib/data-table/styles/light.js

@@ -17,16 +17,16 @@ const styles_8 = require("../../empty/styles");
 const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { cardColor, modalColor, popoverColor, textColor2, textColor1, tableHeaderColor, tableColorHover, iconColor, primaryColor, fontWeightStrong, borderRadius, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge, dividerColor, heightSmall, opacityDisabled } = vars;
+    const { cardColor, modalColor, popoverColor, textColor2, textColor1, tableHeaderColor, tableColorHover, iconColor, primaryColor, fontWeightStrong, borderRadius, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge, dividerColor, heightSmall, opacityDisabled, tableColorStriped } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { actionDividerColor: dividerColor, lineHeight,
         borderRadius,
         fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), tdColorHover: (0, seemly_1.composite)(cardColor, tableColorHover), tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorHover), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorHover: (0, seemly_1.composite)((0, seemly_1.composite)(cardColor, tableHeaderColor), tableColorHover), tdColor: cardColor, tdTextColor: textColor2, thTextColor: textColor1, thFontWeight: fontWeightStrong, thButtonColorHover: tableColorHover, thIconColor: iconColor, thIconColorActive: primaryColor, 
+        fontSizeLarge, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), tdColorHover: (0, seemly_1.composite)(cardColor, tableColorHover), tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorStriped), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorHover: (0, seemly_1.composite)((0, seemly_1.composite)(cardColor, tableHeaderColor), tableColorHover), tdColor: cardColor, tdTextColor: textColor2, thTextColor: textColor1, thFontWeight: fontWeightStrong, thButtonColorHover: tableColorHover, thIconColor: iconColor, thIconColorActive: primaryColor, 
         // modal
-        borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), tdColorHoverModal: (0, seemly_1.composite)(modalColor, tableColorHover), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorHover), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorHoverModal: (0, seemly_1.composite)((0, seemly_1.composite)(modalColor, tableHeaderColor), tableColorHover), tdColorModal: modalColor, 
+        borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), tdColorHoverModal: (0, seemly_1.composite)(modalColor, tableColorHover), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorStriped), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorHoverModal: (0, seemly_1.composite)((0, seemly_1.composite)(modalColor, tableHeaderColor), tableColorHover), tdColorModal: modalColor, 
         // popover
-        borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColorHoverPopover: (0, seemly_1.composite)(popoverColor, tableColorHover), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorHover), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thColorHoverPopover: (0, seemly_1.composite)((0, seemly_1.composite)(popoverColor, tableHeaderColor), tableColorHover), tdColorPopover: popoverColor, boxShadowBefore: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)', boxShadowAfter: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)', 
+        borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColorHoverPopover: (0, seemly_1.composite)(popoverColor, tableColorHover), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorStriped), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thColorHoverPopover: (0, seemly_1.composite)((0, seemly_1.composite)(popoverColor, tableHeaderColor), tableColorHover), tdColorPopover: popoverColor, boxShadowBefore: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)', boxShadowAfter: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)', 
         // loading
         loadingColor: primaryColor, loadingSize: heightSmall, opacityLoading: opacityDisabled });
 };

package/lib/date-picker/src/DatePicker.d.ts

@@ -3909,6 +3909,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/date.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
-    handleTimePickerChange: (value: number) => void;
+    handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement;
     virtualListContent: () => HTMLElement;
@@ -127,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/daterange.d.ts

@@ -31,8 +31,8 @@ declare const _default: import("vue").DefineComponent<{
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     handleFocusDetectorFocus: () => void;
-    handleStartTimePickerChange: (value: number) => void;
-    handleEndTimePickerChange: (value: number) => void;
+    handleStartTimePickerChange: (value: number | null) => void;
+    handleEndTimePickerChange: (value: number | null) => void;
     handleStartDateInput: (value: string) => void;
     handleStartDateInputBlur: () => void;
     handleEndDateInput: (value: string) => void;
@@ -125,6 +125,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/datetime.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<{
     handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
-    handleTimePickerChange: (value: number) => void;
+    handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement;
     virtualListContent: () => HTMLElement;
@@ -127,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/datetimerange.d.ts

@@ -31,8 +31,8 @@ declare const _default: import("vue").DefineComponent<{
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     handleFocusDetectorFocus: () => void;
-    handleStartTimePickerChange: (value: number) => void;
-    handleEndTimePickerChange: (value: number) => void;
+    handleStartTimePickerChange: (value: number | null) => void;
+    handleEndTimePickerChange: (value: number | null) => void;
     handleStartDateInput: (value: string) => void;
     handleStartDateInputBlur: () => void;
     handleEndDateInput: (value: string) => void;
@@ -125,6 +125,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/month.d.ts

@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     handleDateClick: (dateItem: import("../utils").DateItem | MonthItem | YearItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
-    handleTimePickerChange: (value: number) => void;
+    handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement;
     virtualListContent: () => HTMLElement;
@@ -134,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/use-calendar.d.ts

@@ -32,7 +32,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
     handleDateClick: (dateItem: DateItem | MonthItem | YearItem) => void;
     handleDateInputBlur: () => void;
     handleDateInput: (value: string) => void;
-    handleTimePickerChange: (value: number) => void;
+    handleTimePickerChange: (value: number | null) => void;
     clearSelectedDateTime: () => void;
     virtualListContainer: () => HTMLElement;
     virtualListContent: () => HTMLElement;
@@ -131,6 +131,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/use-calendar.js

@@ -211,6 +211,8 @@ function useCalendar(props, type) {
         (_a = scrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.sync();
     }
     function handleTimePickerChange(value) {
+        if (value === null)
+            return;
         panelCommon.doUpdateValue(value, false);
     }
     function handleSingleShortcutMouseenter(shortcut) {

package/lib/date-picker/src/panel/use-dual-calendar.d.ts

@@ -35,8 +35,8 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
     startTimeValue: import("vue").ComputedRef<number | null>;
     endTimeValue: import("vue").ComputedRef<number | null>;
     handleFocusDetectorFocus: () => void;
-    handleStartTimePickerChange: (value: number) => void;
-    handleEndTimePickerChange: (value: number) => void;
+    handleStartTimePickerChange: (value: number | null) => void;
+    handleEndTimePickerChange: (value: number | null) => void;
     handleStartDateInput: (value: string) => void;
     handleStartDateInputBlur: () => void;
     handleEndDateInput: (value: string) => void;
@@ -129,6 +129,7 @@ declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarP
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/date-picker/src/panel/use-dual-calendar.js

@@ -420,9 +420,13 @@ function useDualCalendar(props, type = 'datetime') {
         endDateInputRef.value = (0, date_fns_1.format)(times[1], dateFormat, panelCommon.dateFnsOptions.value);
     }
     function handleStartTimePickerChange(value) {
+        if (value === null)
+            return;
         changeStartDateTime(value);
     }
     function handleEndTimePickerChange(value) {
+        if (value === null)
+            return;
         changeEndDateTime(value);
     }
     function handleRangeShortcutMouseenter(shortcut) {

package/lib/date-picker/src/panel/use-panel-common.d.ts

@@ -95,6 +95,7 @@ declare function usePanelCommon(props: UsePanelCommonProps): {
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/dialog/src/Dialog.d.ts

@@ -827,6 +827,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/drawer/src/Drawer.d.ts

@@ -333,6 +333,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -94,6 +94,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/drawer/src/DrawerContent.d.ts

@@ -103,6 +103,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;