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

package/components/select/base.vdt.js

@@ -4,16 +4,19 @@ import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as
 import { TransitionGroup, Transition } from 'intact';
 import { Input } from '../input';
 import { Icon } from '../icon';
-import { isNullOrUndefined } from 'intact-shared';
+import { isNullOrUndefined, isStringOrNumber } from 'intact-shared';
 import makeStyles from './styles';
 import { Dropdown } from '../dropdown';
 import { getRestProps, addStyle } from '../utils';
+import { Wave } from '../wave';
+import { context as ErrorContext } from '../form/useError';
 var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
 };
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj;
+  var _classNameObj,
+      _this = this;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -53,64 +56,57 @@ export default function ($props, $blocks, $__proto__) {
   var _this$focusout = this.focusout,
       onFocusout = _this$focusout.onFocusout,
       triggerRef = _this$focusout.triggerRef;
-  return _$cc(Dropdown, {
-    'trigger': 'click',
-    'ref': this.dropdownRef,
-    'disabled': disabled,
-    'container': container,
-    'children': [_$cv('div', _extends({}, getRestProps(this), {
-      'className': _$cn(classNameObj),
-      'tabindex': disabled ? '-1' : '0',
-      'ev-keydown': this.onKeydown,
-      'ev-focusout': onFocusout,
-      'style': !isNullOrUndefined(width) ? addStyle(style, {
-        width: width + "px"
-      }) : style,
-      'ref': triggerRef
-    }), [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
-      return null;
-    }, __$blocks['prefix'] = function ($super, data) {
-      var block = $blocks['prefix'];
+  return _$cc(ErrorContext.Consumer, {
+    'defaultValue': false,
+    'children': function children(isInvalid) {
+      return _$cc(Wave, {
+        'disabled': disabled || isInvalid || inline,
+        'inset': '-2px',
+        'children': _$cc(Dropdown, {
+          'trigger': 'click',
+          'ref': _this.dropdownRef,
+          'disabled': disabled,
+          'container': container,
+          'children': [_$cv('div', _extends({}, getRestProps(_this), {
+            'className': _$cn(classNameObj),
+            'tabindex': disabled ? '-1' : '0',
+            'ev-keydown': _this.onKeydown,
+            'ev-focusout': onFocusout,
+            'style': !isNullOrUndefined(width) ? addStyle(style, {
+              width: width + "px"
+            }) : style,
+            'ref': triggerRef
+          }), [$blocks.prefix ? _$ce(2, 'div', (_$blocks['prefix'] = function ($super) {
+            return null;
+          }, __$blocks['prefix'] = function ($super, data) {
+            var block = $blocks['prefix'];
 
-      var callBlock = function callBlock() {
-        return _$blocks['prefix'].call($this, $super, data);
-      };
+            var callBlock = function callBlock() {
+              return _$blocks['prefix'].call($this, $super, data);
+            };
 
-      return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['prefix'](_$no)), 0, 'k-select-prefix') : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
-      'type': 'hidden',
-      'value': value,
-      'name': name
-    }, 'hidden-input'), null, _$cc(TransitionGroup, {
-      'name': 'k-fade',
-      'appear': false,
-      'children': !multiple && filterable ? _$cc(Input, {
-        'value': _show ? keywords : label,
-        'ev-$change:value': onInput,
-        'disabled': disabled,
-        'placeholder': label || placeholder,
-        'ref': inputRef,
-        'size': size,
-        'fluid': true,
-        'inline': true,
-        'key': 'input',
-        'readonly': !_show
-      }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, 'k-select-placeholder c-ellipsis', null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
-        return label;
-      }, __$blocks['value'] = function ($super, data) {
-        var block = $blocks['value'];
-
-        var callBlock = function callBlock() {
-          return _$blocks['value'].call($this, $super, data);
-        };
-
-        return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [_$cc(TransitionGroup, {
-        'name': 'k-fade',
-        'children': (_$blocks['values'] = function ($super) {
-          return _$ma(label, function ($label, $key) {
-            return _$ce(2, 'div', [_$ce(2, 'span', (_$blocks['value'] = function ($super) {
-              return $label;
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['prefix'](_$no)), 0, 'k-select-prefix') : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
+            'type': 'hidden',
+            'value': value,
+            'name': name
+          }, 'hidden-input'), null, _$cc(TransitionGroup, {
+            'name': 'k-fade',
+            'appear': false,
+            'children': !multiple && filterable ? _$cc(Input, {
+              'value': _show ? keywords : label,
+              'ev-$change:value': onInput,
+              'disabled': disabled,
+              'placeholder': label || placeholder,
+              'ref': inputRef,
+              'size': size,
+              'fluid': true,
+              'inline': true,
+              'key': 'input',
+              'readonly': !_show,
+              'waveDisabled': true
+            }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, 'k-select-placeholder c-ellipsis', null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
+              return label;
             }, __$blocks['value'] = function ($super, data) {
               var block = $blocks['value'];
 
@@ -119,74 +115,92 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
-              'className': 'ion-ios-close k-select-close',
-              'ev-click': this.delete.bind(this, $key),
-              'hoverable': !disabled
-            })], 4, 'k-select-tag', null, $label);
-          }, $this);
-        }, __$blocks['values'] = function ($super, data) {
-          var block = _valuesInstanceProperty($blocks);
+            }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [_$cc(TransitionGroup, {
+              'name': 'k-fade',
+              'children': (_$blocks['values'] = function ($super) {
+                return _$ma(label, function ($label, $key) {
+                  return _$ce(2, 'div', [_$ce(2, 'span', (_$blocks['value'] = function ($super) {
+                    return $label;
+                  }, __$blocks['value'] = function ($super, data) {
+                    var block = $blocks['value'];
+
+                    var callBlock = function callBlock() {
+                      return _$blocks['value'].call($this, $super, data);
+                    };
+
+                    return block ? block.call($this, callBlock, data) : callBlock();
+                  }, __$blocks['value'](_$no, [value[$key], $label])), 0, 'k-select-text'), _$cc(Icon, {
+                    'className': 'ion-ios-close k-select-close',
+                    'ev-click': this.delete.bind(this, $key),
+                    'hoverable': !disabled
+                  })], 4, 'k-select-tag', null, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : undefined);
+                }, $this);
+              }, __$blocks['values'] = function ($super, data) {
+                var block = _valuesInstanceProperty($blocks);
 
-          var callBlock = function callBlock() {
-            return _valuesInstanceProperty(_$blocks).call($this, $super, data);
-          };
+                var callBlock = function callBlock() {
+                  return _valuesInstanceProperty(_$blocks).call($this, $super, data);
+                };
 
-          return block ? block.call($this, callBlock, data) : callBlock();
-        }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label]))
-      }), filterable ? _$cc(Input, {
-        'className': 'k-select-input',
-        'value': keywords,
-        'ev-$change:value': onInput,
-        'disabled': disabled,
-        'placeholder': !hasValue ? placeholder : '',
-        'ref': inputRef,
-        'autoWidth': true,
-        'inline': true,
-        'size': size,
-        'key': 'filter',
-        'readonly': !_show
-      }, 'filter', inputRef) : undefined], 0, _$cn({
-        "k-select-values": true,
-        "k-with-values": _valuesInstanceProperty($blocks)
-      }), null, 'values')
-    })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
-      'className': _$cn({
-        "k-select-clear ion-ios-close": true,
-        "k-show": hasValue
-      }),
-      'ev-click': this.clear,
-      'hoverable': true
-    }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
-      return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-        'className': _$cn({
-          "k-select-arrow ion-ios-arrow-down": true,
-          'k-disabled': $props.isDisableArrow
-        })
-      }) : undefined;
-    }, __$blocks['suffix'] = function ($super, data) {
-      var block = $blocks['suffix'];
+                return block ? block.call($this, callBlock, data) : callBlock();
+              }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label]))
+            }), filterable ? _$cc(Input, {
+              'className': 'k-select-input',
+              'value': keywords,
+              'ev-$change:value': onInput,
+              'disabled': disabled,
+              'placeholder': !hasValue ? placeholder : '',
+              'ref': inputRef,
+              'autoWidth': true,
+              'inline': true,
+              'size': size,
+              'key': 'filter',
+              'readonly': !_show,
+              'waveDisabled': true
+            }, 'filter', inputRef) : undefined], 0, _$cn({
+              "k-select-values": true,
+              "k-with-values": _valuesInstanceProperty($blocks)
+            }), null, 'values')
+          })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
+            'className': _$cn({
+              "k-select-clear ion-ios-close": true,
+              "k-show": hasValue
+            }),
+            'ev-click': _this.clear,
+            'hoverable': true
+          }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
+            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
+              'className': _$cn({
+                "k-select-arrow ion-ios-arrow-down": true,
+                'k-disabled': $props.isDisableArrow
+              })
+            }) : undefined;
+          }, __$blocks['suffix'] = function ($super, data) {
+            var block = $blocks['suffix'];
 
-      var callBlock = function callBlock() {
-        return _$blocks['suffix'].call($this, $super, data);
-      };
+            var callBlock = function callBlock() {
+              return _$blocks['suffix'].call($this, $super, data);
+            };
 
-      return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['suffix'](_$no)), 0, 'k-select-suffix-icon')], 0, 'k-select-suffix') : undefined]), (_$blocks['base-menu'] = function ($super) {
-      return _$ce(2, 'div', 'should be implemeted', 16);
-    }, __$blocks['base-menu'] = function ($super, data) {
-      var block = $blocks['base-menu'];
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['suffix'](_$no)), 0, 'k-select-suffix-icon')], 0, 'k-select-suffix') : undefined]), (_$blocks['base-menu'] = function ($super) {
+            return _$ce(2, 'div', 'should be implemeted', 16);
+          }, __$blocks['base-menu'] = function ($super, data) {
+            var block = $blocks['base-menu'];
 
-      var callBlock = function callBlock() {
-        return _$blocks['base-menu'].call($this, $super, data);
-      };
+            var callBlock = function callBlock() {
+              return _$blocks['base-menu'].call($this, $super, data);
+            };
 
-      return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['base-menu'](_$no))],
-    'ev-$model:value': function ev$modelValue($v) {
-      $this.set('_show', $v);
-    },
-    'value': $this.get('_show')
-  }, null, this.dropdownRef);
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['base-menu'](_$no))],
+          'ev-$model:value': function ev$modelValue($v) {
+            $this.set('_show', $v);
+          },
+          'value': $this.get('_show')
+        }, null, _this.dropdownRef)
+      });
+    }
+  });
 }
 ;

package/components/select/index.spec.js

@@ -16,7 +16,7 @@ import SearchableDemo from '~/components/select/demos/searchable';
 describe('Select', function () {
   afterEach(function (done) {
     unmount();
-    setTimeout(done, 400);
+    setTimeout(done, 500);
   });
   it('should select value correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, trigger, dropdown, item, _dropdown;

package/components/select/menu.vdt.js

@@ -84,6 +84,7 @@ export default function ($props, $blocks, $__proto__) {
         'value': keywords.value,
         'ev-$change:value': onInput,
         'clearable': true,
+        'waveDisabled': true,
         '$blocks': function ($blocks) {
           var _$blocks = {},
               __$blocks = _$ex({}, $blocks);

package/components/select/styles.js

@@ -4,6 +4,10 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
 import '../../styles/global';
 var defaults = deepDefaults({
+  get transition() {
+    return theme.transition.middle;
+  },
+
   width: "300px",
 
   get height() {
@@ -24,8 +28,9 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
+  // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
   get hoverBorder() {
-    return "1px solid " + theme.color.darkBorder;
+    return "1px solid " + theme.color.primary;
   },
 
   get iconColor() {
@@ -89,7 +94,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "4px 8px",
+    padding: "5px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -183,7 +188,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", theme.transition, ",background ", theme.transition, ",box-shadow ", theme.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", theme.transition, ",color ", theme.transition, "!important;pointer-events:none;position:absolute;z-index:1;}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", theme.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", theme.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotate(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;}.k-select-prefix,.k-select-suffix{color:", select.iconColor, ";position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";&.k-disabled{color:", select.disabledArrowColor, ";}}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-select-tag{background:", select.tag.disabledBgColor, ";}}.k-select-values{display:inline-block;margin-right:-", getRight(select.tag.margin), ";&.k-with-values{margin:0;}}.k-select-tag{display:inline-flex;align-items:center;padding:", select.tag.padding, ";background:", select.tag.bgColor, ";border-radius:", select.tag.borderRadius, ";margin:", select.tag.margin, ";line-height:1;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";color:", select.tag.delete.color, ";}.k-select-input{margin-right:", getRight(select.tag.margin), ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;
@@ -192,7 +197,7 @@ export default function makeStyles() {
 }
 export function makeMenuStyles() {
   var searchable = select.searchable;
-  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", theme.transition, ",top ", theme.transition, ";}.k-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.k-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.k-active{color:", select.activeColor, ";}}&.k-card{display:flex;height:", select.card.height, ";.k-tabs{border:none;overflow:auto;}.k-select-group{flex:1;overflow:auto;}.k-select-option.k-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.k-searchable{max-height:none;padding:", searchable.padding, ";.k-select-option{padding:", searchable.optionPadding, ";}}.k-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.k-select-op{white-space:nowrap;.k-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.k-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.k-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.k-btn{margin-left:", searchable.footer.btnGap, ";}}.k-select-option{.k-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.k-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
+  return /*#__PURE__*/css("min-width:auto;max-height:", select.menuMaxHeight, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", select.transition, ",top ", select.transition, ";}.k-select-empty{padding:", select.empty.padding, ";color:", select.empty.color, ";text-align:center;}.k-select-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&.k-active{color:", select.activeColor, ";}}&.k-card{display:flex;height:", select.card.height, ";.k-tabs{border:none;overflow:auto;}.k-select-group{flex:1;overflow:auto;}.k-select-option.k-hover{background:", select.card.itemHoverBgColor, ";color:", select.card.itemHoverColor, ";}}&.k-searchable{max-height:none;padding:", searchable.padding, ";.k-select-option{padding:", searchable.optionPadding, ";}}.k-select-header{display:flex;padding:", searchable.header.padding, ";border-bottom:", searchable.border, ";margin-bottom:", searchable.header.gap, ";}.k-select-op{white-space:nowrap;.k-btn{padding:", searchable.header.btnPadding, ";margin-left:", searchable.header.btnGap, ";}}.k-select-body{max-height:", select.menuMaxHeight, ";overflow:auto;}.k-select-footer{border-top:", searchable.border, ";padding:", searchable.footer.padding, ";text-align:right;margin-top:", searchable.footer.gap, ";.k-btn{margin-left:", searchable.footer.btnGap, ";}}.k-select-option{.k-checkbox{margin:0 -", getRight(searchable.optionPadding), " 0 -", getLeft(searchable.optionPadding), ";padding:", searchable.optionPadding, ";}}.k-select-checkmark{float:right;height:100%;font-size:", select.multiple.checkmark.fontSize, ";}");
 }
 export function makeGroupStyles() {
   return /*#__PURE__*/css(".k-select-group-label{color:", select.group.labelColor, ";padding:", select.group.labelPadding, ";}");

package/components/select/useSearchable.d.ts

@@ -1,6 +1,6 @@
 export declare const context: {
     Provider: import('intact-vue-next').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 useSearchable(): {
     checkedKeys: import("../../hooks/useState").State<any[]>;

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-vue-next';
 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-vue-next').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-vue-next';
+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() {