@king-design/react 2.0.0-beta.1 → 2.0.2

package/components/table/row.vdt.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, createUnknownComponentVNode as _$cc } from 'intact-react';
+import { TransitionGroup } from 'intact';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
@@ -108,11 +109,18 @@ export default function ($props, $blocks, $__proto__) {
       'hasChildren': hasChildren,
       'key': columnKey
     }, columnKey));
-  }); // for performance, no normalize
+  });
+
+  var rows = _$cc(TransitionGroup, {
+    'name': 'k-fade-expand',
+    'move': false,
+    'children': vNodes
+  });
+  /* const rows = vNodes; */
+  // for performance, no normalize
+
 
-  return createElementVNode(2, 'tr', vNodes, 8
-  /* HasKeyedChildren */
-  , cx(classNameObj), {
+  return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,
     'ev-mouseleave': this.onMouseLeave,

package/components/table/styles.js

@@ -4,6 +4,11 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.large;
+  },
+
+  // transition: '15000s',
   border: "1px solid #e5e5e5",
   fontSize: "12px",
   bgColor: "#fff",
@@ -77,7 +82,7 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom:none;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", theme.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", theme.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", theme.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}");
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}");
 }
 export function makeGroupMenuStyles() {
   return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");

package/components/table/table.d.ts

@@ -33,6 +33,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     resizable?: boolean;
     minColWidth?: number;
     widthStoreKey?: string;
+    draggable?: boolean;
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];

package/components/table/table.js

@@ -55,7 +55,8 @@ var typeDefs = {
   showIndeterminate: Boolean,
   resizable: Boolean,
   minColWidth: Number,
-  widthStoreKey: String
+  widthStoreKey: String,
+  draggable: Boolean
 };
 
 var defaults = function defaults() {

package/components/table/table.vdt.js

@@ -66,7 +66,6 @@ export default function ($props, $blocks, $__proto__) {
       maxCols = _this$columns$getData.maxCols;
 
   var _this$fixedColumns = this.fixedColumns,
-      setScrollPosition = _this$fixedColumns.setScrollPosition,
       scrollPosition = _this$fixedColumns.scrollPosition,
       hasFixed = _this$fixedColumns.hasFixed,
       getHasFixedLeft = _this$fixedColumns.getHasFixedLeft,
@@ -131,16 +130,21 @@ export default function ($props, $blocks, $__proto__) {
           'children': _$cc(FixedColumnsContext.Provider, {
             'value': offsetMap,
             'children': _$ce(2, 'thead', _$ma(columns, function ($value, $key) {
-              return _$ce(2, 'tr', [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
-                fixed: hasFixedLeft ? 'left' : false
-              }, 0), {
-                'rowspan': maxRows
-              }), checkType === 'checkbox' ? _$cc(Checkbox, {
-                'value': allCheckedStatus === AllCheckedStatus.All,
-                'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
-                'ev-$change:value': toggleCheckedAll,
-                'disabled': !hasData
-              }) : undefined) : undefined, $value], 0);
+              return _$ce(2, 'tr', _$cc(TransitionGroup, {
+                'name': 'k-fade-expand',
+                'move': false,
+                'children': [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
+                  fixed: hasFixedLeft ? 'left' : false
+                }, 0), {
+                  'rowspan': maxRows,
+                  'key': '$checktype'
+                }), checkType === 'checkbox' ? _$cc(Checkbox, {
+                  'value': allCheckedStatus === AllCheckedStatus.All,
+                  'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
+                  'ev-$change:value': toggleCheckedAll,
+                  'disabled': !hasData
+                }) : undefined) : undefined, $value]
+              }), 2);
             }, $this), 4)
           })
         })
@@ -165,23 +169,22 @@ export default function ($props, $blocks, $__proto__) {
       onRowDragEnd = _this$draggable.onRowDragEnd,
       draggingKey = _this$draggable.draggingKey;
 
-  var tbody = _$cc(TransitionGroup, {
-    'tag': 'tbody',
-    'name': 'k-fade',
-    'move': !draggingKey.value,
-    'children': !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
-      return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
-    }, __$blocks['empty'] = function ($super, data) {
-      var block = $blocks['empty'];
+  var tbody = _$ce(2, 'tbody', !hasData ? _$ce(2, 'tr', _$ce(2, 'td', (_$blocks['empty'] = function ($super) {
+    return _$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~');
+  }, __$blocks['empty'] = function ($super, data) {
+    var block = $blocks['empty'];
 
-      var callBlock = function callBlock() {
-        return _$blocks['empty'].call($this, $super, data);
-      };
+    var callBlock = function callBlock() {
+      return _$blocks['empty'].call($this, $super, data);
+    };
 
-      return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
-      'colspan': colCount
-    }), 2, null, null, 'table-empty') : function () {
+    return block ? block.call($this, callBlock, data) : callBlock();
+  }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
+    'colspan': colCount
+  }), 2, null, null, 'table-empty') : _$cc(TransitionGroup, {
+    'name': 'k-fade-in-left',
+    'move': !draggingKey.value,
+    'children': function () {
       var rows = [];
       loopData(function (value, index, level, hidden) {
         // don't render if row is hidden
@@ -286,7 +289,7 @@ export default function ($props, $blocks, $__proto__) {
       });
       return rows;
     }()
-  });
+  }), 0);
 
   var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
   var _this$stickyScrollbar = this.stickyScrollbar,

package/components/table/useColumns.d.ts

@@ -2,7 +2,7 @@ import { VNodeComponentClass, Props } from 'intact-react';
 import { TableColumn, TableColumnProps } from './column';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
 };
 export declare function useColumns(): {
     getColumns: () => VNodeComponentClass<TableColumn<any>>[][];

package/components/table/useFixedColumns.d.ts

@@ -6,7 +6,7 @@ import type { useScroll } from './useScroll';
 declare type ScrollPosition = 'left' | 'middle' | 'right';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useFixedColumns(getColumns: () => VNodeComponentClass<TableColumn>[][], { scrollRef, callbacks }: ReturnType<typeof useScroll>, widthMap: State<Record<TableRowKey, number>>): {
     scrollPosition: State<ScrollPosition | null>;

package/components/table/useFixedColumns.js

@@ -17,7 +17,10 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
   var offsetMap = {};
   callbacks.push(setScrollPosition);
   instance.on('$receive:children', handleFixedColumns);
-  watchState(widthMap, handleFixedColumns);
+  watchState(widthMap, function () {
+    handleFixedColumns();
+    updateScrollPositionOnResize();
+  });
   var throttleUpdate = throttle(function () {
     if (instance.$unmounted) return;
     updateScrollPositionOnResize();
@@ -102,7 +105,7 @@ export function useFixedColumns(getColumns, _ref, widthMap) {
     if (scrollDom.scrollWidth - scrollDom.offsetWidth <= 0) {
       scrollPosition.set(null);
     } else {
-      scrollPosition.set('left');
+      setScrollPosition(scrollRef.value.scrollLeft);
     }
   }
 

package/components/table/useGroup.d.ts

@@ -4,7 +4,7 @@ declare type ContextValue = {
 };
 export declare const context: {
     Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
 };
 export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;

package/components/table/useResizable.d.ts

@@ -3,7 +3,7 @@ import type { TableRowKey } from './table';
 import { State } from '../../hooks/useState';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useResizable(scrollRef: RefObject<HTMLElement>, tableRef: RefObject<HTMLElement>, tableWidth: State<number | null>, widthMap: State<Record<TableRowKey, number>>, storeWidth: () => void): {
     start: (e: MouseEvent) => void;

package/components/table/useSortable.d.ts

@@ -1,6 +1,6 @@
 export declare const context: {
     Provider: import('intact-react').ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("intact").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
     onChange: (key: string) => void;

package/components/table/useWidth.js

@@ -4,6 +4,7 @@ import { useInstance, onMounted, onBeforeUnmount, createRef } from 'intact-react
 import ResizeObserver from 'resize-observer-polyfill';
 import { useState } from '../../hooks/useState';
 import { debounce } from '../utils';
+import { scrollbarWidth } from '../position';
 var hasLocalStorage = typeof localStorage !== 'undefined';
 export function useWidth(scrollRef, getColumns) {
   var instance = useInstance();
@@ -75,7 +76,12 @@ export function useWidth(scrollRef, getColumns) {
     if (resizable) {
       var hasBorder = type === 'grid' || type === 'border';
       var _tableWidth = tableRef.value.offsetWidth;
-      var containerWidth = scrollRef.value.offsetWidth + (hasBorder ? -2 : 0);
+      var container = scrollRef.value;
+      var containerWidth = container.offsetWidth + (hasBorder ? -2 : 0); // detect whether the table has vertical scrollbar or not
+
+      if (container.scrollHeight > container.clientHeight) {
+        containerWidth = containerWidth - scrollbarWidth();
+      }
 
       if (_tableWidth < containerWidth) {
         tableWidth.set(isMount ? null : containerWidth);

package/components/tabs/index.spec.js

@@ -22,7 +22,7 @@ describe('Tabs', function () {
             instance._add();
 
             _context.next = 7;
-            return wait(300);
+            return wait(500);
 
           case 7:
             expect(tabs.outerHTML).to.matchSnapshot(); // prev & next

package/components/tabs/styles.js

@@ -10,6 +10,10 @@ var closeFontSizeMap = {
   mini: '16px'
 };
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   get borderColor() {
     return theme.color.border;
   },
@@ -55,7 +59,10 @@ var defaults = deepDefaults({
   },
   // no-border-card
   noBorderCard: {
-    bgColor: "#eee",
+    get bgColor() {
+      return theme.color.bg;
+    },
+
     gutter: "4px"
   }
 }, sizes.reduce(function (memo, size) {
@@ -86,7 +93,7 @@ setDefault(function () {
   }).tabs;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", theme.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}.k-vertical{border-right:none;.k-tab{margin-top:", tabs.noBorderCard.gutter, ";}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", theme.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("border-bottom:", tabs.border, ";position:relative;line-height:1;.k-tab{margin:", tabs.margin, ";cursor:pointer;display:inline-block;text-align:center;color:", tabs.color, ";position:relative;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover,&.k-active{color:", tabs.activeColor, ";}&.k-disabled{color:", theme.color.disabled, ";cursor:not-allowed;}}.k-tab-close{margin-right:-", tabs.closeGutter, ";margin-left:", tabs.closeGutter, ";position:relative;top:-1px;}.k-tabs-active-bar{transition:all ", tabs.transition, ";position:absolute;left:0;height:", tabs.highlight.height, ";background:", tabs.highlight.bgColor, ";bottom:calc(-", tabs.highlight.height, " / 2);}&.k-vertical{display:inline-block;border-bottom:none;border-right:", tabs.border, ";.k-tab{display:block;margin:0;padding:", tabs.verticalPadding, ";}.k-tabs-active-bar{left:auto;top:0;right:calc(-", tabs.highlight.height, " / 2);width:", tabs.highlight.height, ";height:auto;}}&.k-tabs-card{.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;border-left:", tabs.border, ";border-right:", tabs.border, ";&:before{content:'';display:block;position:absolute;height:", tabs.highlight.height, ";background:", theme.color.primary, ";top:0;left:-", tabs.borderWidth, ";right:-", tabs.borderWidth, ";}}&.k-vertical{.k-tabs-active-bar{left:0;width:auto;border-left:none;border-right:none;border-top:", tabs.border, ";border-bottom:", tabs.border, ";&:before{width:", tabs.highlight.height, ";left:0;right:auto;bottom:0;height:auto;}}}}&.k-tabs-border-card{border:", tabs.border, ";border-bottom:none;background:", tabs.borderCard.bgColor, ";.k-tab{margin:0;}.k-tabs-active-bar{background:#fff;top:0;height:auto;z-index:-1;}&.k-vertical{border-right:none;border-bottom:", tabs.border, ";.k-tabs-active-bar{width:auto;height:0;left:0;bottom:0;right:0;}}}&.k-tabs-no-border-card{border-bottom:none;.k-tab{margin-right:", tabs.noBorderCard.gutter, ";&:before{content:'';display:block;position:absolute;background:", tabs.noBorderCard.bgColor, ";top:0;bottom:0;left:0;right:0;z-index:-1;}}.k-tabs-acitve-bar{border:none;&:before{left:0;right:0;}}&.k-vertical{border-right:none;.k-tab:not(:first-of-type){margin:", tabs.noBorderCard.gutter, " 0 0;}.k-tabs-active-bar{border:none;}}}&:not(.k-vertical){.k-tabs-scroll{overflow:hidden;position:relative;padding-bottom:1px;margin-bottom:-1px;}&.k-tabs-border-card,&.k-tabs-no-border-card{.k-tabs-scroll{padding-bottom:0;margin-bottom:0;}}.k-tabs-wrapper{white-space:nowrap;float:left;transition:transform ", tabs.transition, ";}.k-tabs-prev,.k-tabs-next{position:absolute;top:0;width:", tabs.navigatorWidth, "!important;}.k-tabs-prev{left:0;}.k-tabs-next{right:0;}&.k-is-scroll{padding:0 ", tabs.navigatorWidth, ";}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = tabs[size];
     return "\n                &.k-" + size + " {\n                    .k-tab {\n                        font-size: " + styles.fontSize + ";\n                        height: " + styles.height + ";\n                        line-height: " + styles.height + ";\n                        padding: " + styles.padding + ";\n                    }\n                    .k-tab-close .k-icon {\n                        font-size: " + styles.closeFontSize + ";\n                    }\n                }\n            ";
   }), ";");

package/components/tabs/tab.vdt.js

@@ -5,7 +5,8 @@ import { Icon } from '../icon';
 import { getRestProps } from '../utils';
 import { isNullOrUndefined } from 'intact-shared';
 var _$tmp0 = {
-  'className': 'ion-ios-close-empty'
+  'className': 'ion-ios-close-empty',
+  'hoverable': true
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/tabs/useActiveBar.js

@@ -1,4 +1,4 @@
-import { useInstance, onMounted, onUpdated, findDomFromVNode } from 'intact-react';
+import { useInstance, onMounted, onUpdated, findDomFromVNode, nextTick } from 'intact-react';
 import { useState } from '../../hooks/useState';
 export function useActiveBar() {
   var instance = useInstance();
@@ -53,7 +53,10 @@ export function useActiveBar() {
     }
   }
 
-  onMounted(generateStyle);
-  onUpdated(generateStyle);
+  onMounted(generateStyle); // Tabs maybe embed into Transition, therefore handle style nextTick
+
+  onUpdated(function () {
+    return nextTick(generateStyle);
+  });
   return styles;
 }

package/components/tag/base.js

@@ -35,6 +35,7 @@ export var Tag = /*#__PURE__*/function (_Component) {
 
   _proto.onClose = function onClose(e) {
     e.stopPropagation();
+    if (this.get('disabled')) return;
     this.trigger('close', e);
 
     if (!e.defaultPrevented) {

package/components/tag/styles.js

@@ -60,6 +60,12 @@ var defaults = deepDefaults({
       fontSize: '16px',
       gap: '2px'
     }
+  },
+  none: {
+    get bgColor() {
+      return theme.color.bg;
+    }
+
   }
 }, types.reduce(function (memo, type) {
   if (type === 'disabled') return memo;
@@ -82,12 +88,12 @@ setDefault(function () {
   }).tag;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}", _mapInstanceProperty(types).call(types, function (t) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", tag.padding, ";border:1px solid ", tag.borderColor, ";border-radius:", tag.borderRadius, ";font-size:", tag.fontSize, ";height:", tag.height, ";.k-tag-close{font-size:", tag.close.fontSize, ";margin-left:", tag.close.gap, ";}&.k-none{border:none;background:", tag.none.bgColor, ";}", _mapInstanceProperty(types).call(types, function (t) {
     var styles = tag[t];
     return /*#__PURE__*/css("&.k-", t, "{color:", styles.color, ";border-color:", styles.color, ";background:", styles.bgColor, ";}");
   }), " ", _mapInstanceProperty(sizes).call(sizes, function (s) {
     if (s === 'default') return;
     var styles = tag[s];
     return /*#__PURE__*/css("&.k-", s, "{padding:", styles.padding, ";height:", styles.height, ";.k-tag-close{font-size:", styles.close.fontSize, ";margin-left:", styles.close.gap, ";}}");
-  }), "&.k-dashed{border-style:dashed;}&.k-none{border:none;}");
+  }), "&.k-dashed{border-style:dashed;}");
 }

package/components/timepicker/constants.d.ts

@@ -3,7 +3,8 @@ import { BasePickerProps, BasePickerEvents, BasePickerBlocks } from '../datepick
 import { TypeDefs } from 'intact-react';
 export declare const YEAR_FORMAT = "YYYY-MM-DD ";
 export declare const TIME_FORMAT = "HH:mm:ss";
-export declare const NOW: dayjs.Dayjs;
+export declare const NOW_START: dayjs.Dayjs;
+export declare const NOW_END: dayjs.Dayjs;
 export declare const PREFIX: string;
 export interface TimepickerProps<M extends boolean = boolean, R extends boolean = boolean> extends BasePickerProps<string, M, R> {
     step?: string;

package/components/timepicker/constants.js

@@ -3,8 +3,9 @@ import { getNowDate } from '../datepicker/helpers';
 import { BasePicker } from '../datepicker/basepicker';
 export var YEAR_FORMAT = 'YYYY-MM-DD ';
 export var TIME_FORMAT = 'HH:mm:ss';
-export var NOW = getNowDate();
-export var PREFIX = NOW.format(YEAR_FORMAT);
+export var NOW_START = getNowDate();
+export var NOW_END = getNowDate(true);
+export var PREFIX = NOW_START.format(YEAR_FORMAT);
 export var typeDefs = _extends({}, BasePicker.typeDefs, {
   value: [String, Array],
   min: String,

package/components/timepicker/index.spec.js

@@ -18,7 +18,7 @@ describe('Timepicker', function () {
           case 0:
             unmount();
             _context.next = 3;
-            return wait(400);
+            return wait(500);
 
           case 3:
           case "end":
@@ -34,106 +34,107 @@ describe('Timepicker', function () {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            this.timeout(0);
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
             _element$querySelecto = element.querySelectorAll('.k-select'), picker1 = _element$querySelecto[0], picker2 = _element$querySelecto[1];
             picker1.click();
-            _context2.next = 5;
-            return wait(300);
+            _context2.next = 6;
+            return wait(500);
 
-          case 5:
+          case 6:
             dropdown = getElement('.k-time-content');
             expect(dropdown.innerHTML).to.matchSnapshot();
             next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)');
             next.click();
-            _context2.next = 11;
+            _context2.next = 12;
             return wait();
 
-          case 11:
+          case 12:
             expect(dropdown.innerHTML).to.matchSnapshot();
             expect(instance.get('time')).to.be.null;
             next.click();
-            _context2.next = 16;
+            _context2.next = 17;
             return wait();
 
-          case 16:
+          case 17:
             expect(instance.get('time')).to.be.null;
             expect(dropdown.innerHTML).to.matchSnapshot();
             ok = dropdown.querySelector('.k-btn');
             ok.click();
-            _context2.next = 22;
-            return wait(300);
+            _context2.next = 23;
+            return wait(500);
 
-          case 22:
+          case 23:
             expect(instance.get('time')).to.eql('02:00:00');
             expect(dropdown.style.display).to.eql('none'); // set time
 
             instance.set('time', '03:03:03');
             picker1.click();
-            _context2.next = 28;
-            return wait(300);
+            _context2.next = 29;
+            return wait(500);
 
-          case 28:
+          case 29:
             expect(dropdown.innerHTML).to.matchSnapshot(); // multiple
 
             picker2.click();
-            _context2.next = 32;
-            return wait(300);
+            _context2.next = 33;
+            return wait(500);
 
-          case 32:
+          case 33:
             dropdown = getElement('.k-time-content');
             dropdown.querySelector('.k-scroll-select-item:nth-child(11)').click();
             ok2 = dropdown.querySelector('.k-btn');
             ok2.click();
             dropdown.querySelector('.k-scroll-select-item:nth-child(12)').click();
             ok2.click();
-            _context2.next = 40;
+            _context2.next = 41;
             return wait();
 
-          case 40:
+          case 41:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // click the same time will do nothing
 
             ok2.click();
-            _context2.next = 44;
+            _context2.next = 45;
             return wait();
 
-          case 44:
+          case 45:
             expect(instance.get('timeArray')).to.eql(['01:00:00', '02:00:00']); // remove one value
 
             _picker2$querySelecto = picker2.querySelectorAll('.k-select-close'), close = _picker2$querySelecto[1];
             close.click();
-            _context2.next = 49;
+            _context2.next = 50;
             return wait();
 
-          case 49:
+          case 50:
             expect(instance.get('timeArray')).to.eql(['01:00:00']);
             expect(dropdown.innerHTML).to.matchSnapshot(); // clear
 
             picker2.querySelector('.k-select-clear').click();
-            _context2.next = 54;
+            _context2.next = 55;
             return wait();
 
-          case 54:
+          case 55:
             expect(instance.get('timeArray')).to.eql([]);
             ok2.click();
-            _context2.next = 58;
+            _context2.next = 59;
             return wait();
 
-          case 58:
+          case 59:
             expect(instance.get('timeArray')).to.eql(['00:00:00']); // set value
 
             instance.set('timeArray', ['03:03:03', '03:03:04']);
-            _context2.next = 62;
+            _context2.next = 63;
             return wait();
 
-          case 62:
+          case 63:
             expect(dropdown.innerHTML).to.matchSnapshot();
 
-          case 63:
+          case 64:
           case "end":
             return _context2.stop();
         }
       }
-    }, _callee2);
+    }, _callee2, this);
   })));
   it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount2, instance, element, picker, dropdown, _dropdown$querySelect, start, end;
@@ -146,7 +147,7 @@ describe('Timepicker', function () {
             picker = element.querySelector('.k-select');
             picker.click();
             _context3.next = 5;
-            return wait(300);
+            return wait(500);
 
           case 5:
             dropdown = getElement('.k-time-content');
@@ -169,7 +170,7 @@ describe('Timepicker', function () {
             return wait();
 
           case 19:
-            expect(instance.get('time')).to.eql(['01:00:00', '02:00:00']);
+            expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
 
           case 20:
           case "end":
@@ -227,7 +228,7 @@ describe('Timepicker', function () {
 
           case 11:
             expect(dropdown.innerHTML).to.matchSnapshot();
-            end.querySelector('.k-active').nextElementSibling.click();
+            end.querySelector('.k-disabled').nextElementSibling.click();
             _context5.next = 15;
             return wait();
 
@@ -306,7 +307,7 @@ describe('Timepicker', function () {
             return wait();
 
           case 39:
-            expect(instance.get('time3')).eql(['00:30:00.000', '01:00:00.000']);
+            expect(instance.get('time3')).eql(['00:30:00.000', '00:30:00.000']);
             expect(input3.innerHTML).to.matchSnapshot();
 
           case 41:

package/components/timepicker/useStep.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { useInstance } from 'intact-react';
 import { useState } from '../../hooks/useState';
-import { NOW } from './constants';
+import { NOW_START, NOW_END } from './constants';
 import { useReceive } from '../../hooks/useReceive';
 export function useStep(_ref, _ref2) {
   var maxDate = _ref.maxDate,
@@ -18,9 +18,9 @@ export function useStep(_ref, _ref2) {
 
     if (step) {
       var data = [];
-      var maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+      var maxValue = maxDate.value || NOW_END;
       var stepValue = parseTime(step);
-      var value = minDate.value || NOW;
+      var value = minDate.value || NOW_START;
 
       var push = function push(value) {
         data.push({

package/components/timepicker/useValue.js

@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import { useInstance } from 'intact-react';
 import { last } from '../utils';
 import { useValue as useValueBase } from '../datepicker/basepicker';
-import { NOW } from './constants';
+import { NOW_START, NOW_END } from './constants';
 export function useValue(formats, disabled, panel) {
   var instance = useInstance();
 
@@ -34,7 +34,7 @@ export function useValue(formats, disabled, panel) {
   });
 
   function getPlaceholderDates() {
-    return instance.get('range') ? [NOW, NOW] : NOW;
+    return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
   }
 
   function onChangeTimeByStep(v, flag) {