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

package/components/slider/styles.js

@@ -3,6 +3,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   height: '4px',
   bgColor: '#e5e5e5',
 
@@ -73,5 +77,5 @@ setDefault(function () {
   }).slider;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.k-slider-main{flex:1;}.k-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.k-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.k-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", theme.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", theme.transition, ";z-index:1;}.k-slider-thumb{height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", theme.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.k-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.k-slider-spinner{margin-left:", slider.spinnerGap, ";}&.k-dragging{.k-slider-bar{transition:none;}.k-slider-thumb-wrapper{transition:none;}}&.k-disabled{color:", slider.disabled.color, ";.k-slider-track-wrapper{cursor:not-allowed;}.k-slider-bar{background-color:", slider.disabled.color, ";}.k-slider-thumb{border-color:", slider.disabled.color, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.k-slider-ends{span{cursor:not-allowed;}}}.k-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.k-active{border-color:", slider.point.activeBorderColor, ";}}.k-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.k-active{color:", slider.marks.activeColor, ";}}}.k-slider-tooltip{white-space:nowrap;}");
+  return /*#__PURE__*/css("position:relative;outline:none;display:flex;.k-slider-main{flex:1;}.k-slider-track-wrapper{cursor:pointer;height:32px;display:flex;align-items:center;}.k-slider-track{flex:1;height:", slider.height, ";background-color:", slider.bgColor, ";border-radius:", slider.borderRadius, ";position:relative;user-select:none;}.k-slider-bar{background-color:", slider.barColor, ";position:absolute;height:100%;border-radius:", slider.borderRadius, ";transition:all ", slider.transition, ";}.k-slider-thumb-wrapper{position:absolute;top:50%;transform:translate(-50%, -50%);transition:left ", slider.transition, ";z-index:1;}.k-slider-thumb{height:", slider.thumb.height, ";width:", slider.thumb.width, ";transition:all ", slider.transition, ";border:", slider.thumb.border, ";border-radius:", slider.thumb.borderRadius, ";background-color:", slider.thumb.bgColor, ";outline:none;&:hover,&:focus{transform:", slider.thumb.hoverTransform, ";cursor:grab;background-color:", slider.thumb.hoverBgColor, ";}}.k-slider-ends{display:flex;justify-content:space-between;span{cursor:pointer;}}.k-slider-spinner{margin-left:", slider.spinnerGap, ";}&.k-dragging{.k-slider-bar{transition:none;}.k-slider-thumb-wrapper{transition:none;}}&.k-disabled{color:", slider.disabled.color, ";.k-slider-track-wrapper{cursor:not-allowed;}.k-slider-bar{background-color:", slider.disabled.color, ";}.k-slider-thumb{border-color:", slider.disabled.color, ";&:hover,&:focus{background-color:", slider.disabled.bgColor, ";cursor:not-allowed;transform:none;}}.k-slider-ends{span{cursor:not-allowed;}}}.k-slider-point{position:absolute;top:calc((", slider.height, " - ", slider.point.height, ") / 2 );width:", slider.point.width, ";height:", slider.point.height, ";background:", slider.point.bgColor, ";transform:translateX(-50%);border-radius:", slider.point.borderRadius, ";border:", slider.point.border, ";&.k-active{border-color:", slider.point.activeBorderColor, ";}}.k-slider-marks{position:relative;height:", slider.marks.height, ";>span{position:absolute;transform:translateX(-50%);white-space:nowrap;cursor:pointer;&:first-child{transform:none;}&:last-child{transform:translateX(-100%);}&.k-active{color:", slider.marks.activeColor, ";}}}.k-slider-tooltip{white-space:nowrap;}");
 }

package/components/spinner/index.d.ts

@@ -2,8 +2,8 @@ import { Component, TypeDefs } from 'intact-react';
 import { Sizes } from '../../styles/utils';
 import type { Events } from '../types';
 export interface SpinnerProps {
-    disabled?: boolean;
     value?: number;
+    disabled?: boolean;
     max?: number;
     min?: number;
     step?: number | StepObject | StepFunction;

package/components/spinner/index.js

@@ -11,8 +11,8 @@ import { useFormatter } from './useFormatter';
 import { useValue } from './useValue';
 import { useChange } from './useChange';
 var typeDefs = {
-  disabled: Boolean,
   value: Number,
+  disabled: Boolean,
   max: Number,
   min: Number,
   step: [Number, Object, Function],

package/components/split/style.js

@@ -20,7 +20,7 @@ var defaults = {
   },
 
   get transition() {
-    return theme.transition;
+    return theme.transition.middle;
   },
 
   get boderColor() {

package/components/steps/context.d.ts

@@ -1,4 +1,4 @@
 export declare const context: {
     Provider: import("misstime").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
-    Consumer: import("misstime").ComponentConstructor<import("intact").Component<{}, {}, {}, {}>>;
+    Consumer: import("misstime").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };

package/components/steps/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   get height() {
     return theme.default.height;
   },
@@ -150,5 +154,5 @@ export function makeStepsStyles() {
   }), ";.k-step,.k-step-main{color:", steps.simple.color, ";}.k-step-head{padding-right:", steps.simple.headPaddingRight, ";vertical-align:top;}}&.k-clickable{.k-done{cursor:pointer;}}");
 }
 export function makeStepStyles() {
-  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", theme.transition, ";}");
+  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", steps.transition, ";}");
 }

package/components/switch/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
+  get transition() {
+    return theme.transition.middle;
+  },
+
   bgColor: "#fff",
   fontSize: "12px",
 
@@ -75,7 +79,7 @@ setDefault(function () {
   }).switch;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;border:", kswitch.border, ";box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", theme.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", theme.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";transition:background ", theme.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;border:", kswitch.border, ";box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var _kswitch$size = kswitch[size],
         width = _kswitch$size.width,
         height = _kswitch$size.height,

package/components/table/index.d.ts

@@ -1,2 +1,3 @@
 export * from './table';
 export * from './column';
+export type { TableMerge, TableMergeConfig } from './useMerge';

package/components/table/index.spec.js

@@ -25,7 +25,8 @@ import MergeCellDemo from '~/components/table/demos/mergeCell';
 import { AllCheckedStatus } from './useChecked';
 describe('Table', function () {
   afterEach(function () {
-    return unmount();
+    unmount();
+    localStorage.removeItem('resizableTable');
   });
   it('check & uncheck', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, table, checked, spy, _element$querySelecto, tr1, tr2, all;

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,