@king-design/react 3.0.0-beta.0 → 3.0.0-beta.2

package/components/select/base.vdt.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
-import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
 import { TransitionGroup, Transition } from 'intact';
 import { Input } from '../input';
 import { Icon } from '../icon';
@@ -10,6 +11,7 @@ import { Dropdown } from '../dropdown';
 import { getRestProps, addStyle } from '../utils';
 import { Wave } from '../wave';
 import { context as ErrorContext } from '../form/useError';
+import { Tags, Tag } from '../tag';
 var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
@@ -40,12 +42,16 @@ export default function ($props, $blocks, $__proto__) {
       inline = _this$get.inline,
       style = _this$get.style,
       width = _this$get.width,
-      show = _this$get.show;
+      show = _this$get.show,
+      position = _this$get.position,
+      flat = _flatInstanceProperty(_this$get),
+      nowrap = _this$get.nowrap,
+      draggable = _this$get.draggable;
 
   var classNameObj = (_classNameObj = {
     'k-select': true,
     'k-disabled': disabled
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
+  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj['k-nowrap'] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
   var placeholder = this.getPlaceholder();
   var label = this.getLabel();
   var hasValue = this.hasValue();
@@ -56,6 +62,21 @@ export default function ($props, $blocks, $__proto__) {
   var _this$focusout = this.focusout,
       onFocusout = _this$focusout.onFocusout,
       triggerRef = _this$focusout.triggerRef;
+  var filterInput = 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,
+    'flat': flat
+  }, 'filter', inputRef) : undefined;
   return _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
@@ -67,6 +88,7 @@ export default function ($props, $blocks, $__proto__) {
           'ref': _this.dropdownRef,
           'disabled': disabled,
           'container': container,
+          'position': position,
           'children': [_$cv('div', _extends({}, getRestProps(_this), {
             'className': _$cn(classNameObj),
             'tabindex': disabled ? '-1' : '0',
@@ -104,7 +126,8 @@ export default function ($props, $blocks, $__proto__) {
               'inline': true,
               'key': 'input',
               'readonly': !show,
-              'waveDisabled': true
+              'waveDisabled': true,
+              'flat': flat
             }, '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) {
@@ -115,53 +138,58 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               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;
-                  }, __$blocks['value'] = function ($super, data) {
-                    var block = $blocks['value'];
+            }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
+              return label && label.length || filterable ? _$cc(Tags, {
+                'nowrap': nowrap,
+                'size': size,
+                'draggable': draggable,
+                'ev-dragend': this.draggable,
+                'children': _$ma(label, function ($label, $key) {
+                  return _$cc(Tag, {
+                    'key': isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key,
+                    'closable': true,
+                    'ev-close': this.delete.bind(this, $key),
+                    'disabled': disabled,
+                    'size': size,
+                    'children': (_$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]))
+                  }, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key);
+                }, $this),
+                '$blocks': function ($blocks) {
+                  var _$blocks = {},
+                      __$blocks = _$ex({}, $blocks);
+
+                  return (_$blocks['append'] = function ($super) {
+                    return filterInput;
+                  }, __$blocks['append'] = function ($super, data) {
+                    var block = $blocks['append'];
 
                     var callBlock = function callBlock() {
-                      return _$blocks['value'].call($this, $super, data);
+                      return _$blocks['append'].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': 'k-icon-close k-select-close',
-                    'ev-click': this.delete.bind(this, $key),
-                    'hoverable': !disabled,
-                    'disabled': 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);
-                };
-
-                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')
+                  }), __$blocks;
+                }.call($this, _$em)
+              }) : undefined;
+            }, __$blocks['values'] = function ($super, data) {
+              var block = _valuesInstanceProperty($blocks);
+
+              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])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : undefined], 0, 'k-select-values', 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,
@@ -171,7 +199,7 @@ export default function ($props, $blocks, $__proto__) {
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
             return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-              'className': 'k-select-arrow ion-ios-arrow-down',
+              'className': 'k-select-arrow k-icon-down',
               'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {

package/components/select/index.spec.js

@@ -73,7 +73,7 @@ describe('Select', function () {
           case 5:
             dropdown = getElement('.k-select-menu');
             expect(dropdown.innerHTML).to.matchSnapshot();
-            close = element.querySelector('.k-select-close');
+            close = element.querySelector('.k-tag-close');
             close.click();
             _context2.next = 11;
             return wait();
@@ -180,7 +180,7 @@ describe('Select', function () {
             expect(dropdown.innerHTML).to.matchSnapshot();
             expect(instance.get('days')).to.eql(['Monday', 'Tuesday']); // delete
 
-            deleteBtn = element.querySelector('.k-select-close');
+            deleteBtn = element.querySelector('.k-tag-close');
             deleteBtn.click();
             _context5.next = 17;
             return wait();
@@ -473,7 +473,7 @@ describe('Select', function () {
     }, _callee9);
   })));
   it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _mount11, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, confirm, cancel, input;
+    var _mount11, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
 
     return _regeneratorRuntime.wrap(function _callee10$(_context12) {
       while (1) {
@@ -488,44 +488,56 @@ describe('Select', function () {
           case 5:
             dropdown = getElement('.k-select-menu');
             _dropdown$querySelect2 = dropdown.querySelectorAll('.k-select-op .k-btn'), selectAll = _dropdown$querySelect2[0], toggleSelect = _dropdown$querySelect2[1], unselectAll = _dropdown$querySelect2[2];
-            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), confirm = _dropdown$querySelect3[0], cancel = _dropdown$querySelect3[1]; // select all
+            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect3[0], confirm = _dropdown$querySelect3[1]; // select all
 
             selectAll.click();
             confirm.click();
+            _context12.next = 12;
+            return wait();
+
+          case 12:
             expect(instance.get('days')).have.length(7); // unselect all
 
             select.click();
-            _context12.next = 14;
+            _context12.next = 16;
             return wait();
 
-          case 14:
+          case 16:
             unselectAll.click();
             confirm.click();
+            _context12.next = 20;
+            return wait();
+
+          case 20:
             expect(instance.get('days')).have.length(0); // toggle select
 
             select.click();
-            _context12.next = 20;
+            _context12.next = 24;
             return wait();
 
-          case 20:
+          case 24:
             instance.set('days', ['Monday', 'Tuesday']);
-            _context12.next = 23;
+            _context12.next = 27;
             return wait();
 
-          case 23:
+          case 27:
             input = dropdown.querySelector('.k-input-inner');
             input.value = 's';
             dispatchEvent(input, 'input');
-            _context12.next = 28;
+            _context12.next = 32;
             return wait();
 
-          case 28:
+          case 32:
             toggleSelect.click();
             confirm.click();
+            _context12.next = 36;
+            return wait();
+
+          case 36:
             expect(instance.get('days')).have.length(5);
             expect(instance.get('days')).include('Monday');
 
-          case 32:
+          case 38:
           case "end":
             return _context12.stop();
         }

package/components/select/menu.vdt.js

@@ -11,7 +11,7 @@ import { Icon } from '../icon';
 import { context } from './useSearchable';
 import { Tabs, Tab } from '../tabs';
 var _$tmp0 = {
-  'className': 'ion-ios-search'
+  'className': 'k-icon-search'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -46,7 +46,7 @@ export default function ($props, $blocks, $__proto__) {
 
     children = [_$cc(Tabs, {
       'vertical': true,
-      'type': 'border-card',
+      'type': 'card',
       'value': activeIndex.value,
       'ev-$change:value': activeIndex.set,
       'children': _$ma(labels, function ($value, $key) {
@@ -117,14 +117,14 @@ export default function ($props, $blocks, $__proto__) {
         'ev-click': unselectAll,
         'children': _$('清空')
       })], 4, 'k-select-op') : undefined], 0, 'k-select-header'), _$ce(2, 'div', children, 0, 'k-select-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+        'size': 'small',
+        'ev-click': this.select.hide,
+        'children': _$('取消')
+      }), _$cc(Button, {
         'type': 'primary',
         'size': 'small',
         'ev-click': confirm,
         'children': _$('确定')
-      }), _$cc(Button, {
-        'size': 'small',
-        'ev-click': this.select.hide,
-        'children': _$('取消')
       })], 4, 'k-select-footer') : undefined]
     });
   }

package/components/select/option.vdt.js

@@ -7,7 +7,8 @@ import { Icon } from '../icon';
 import { Checkbox } from '../checkbox';
 import { context } from './useSearchable';
 var _$tmp0 = {
-  'className': 'k-select-checkmark ion-ios-checkmark-empty'
+  'className': 'k-select-checkmark ion-ios-checkmark-empty',
+  'color': 'primary'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,

package/components/select/styles.js

@@ -1,4 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
@@ -141,6 +142,13 @@ var defaults = deepDefaults({
       gap: "8px",
       btnGap: "8px"
     }
+  },
+  // flat
+  flat: {
+    get color() {
+      return theme.color.lightBlack;
+    }
+
   }
 }, sizes.reduce(function (memo, size) {
   memo[size] = {
@@ -154,10 +162,8 @@ var defaults = deepDefaults({
 
     get fontSize() {
       return theme[size].fontSize;
-    },
+    }
 
-    multipleGap: "1px",
-    multipleMargin: "0 2px 1px 0"
   };
   return memo;
 }, {}));
@@ -168,12 +174,12 @@ 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 ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";margin-top:2px;}.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-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), ";width:100%;&.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, ";max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}.k-select-text{max-width:calc(100% - 18px);word-break:break-word;}.k-select-close{margin-left:", select.tag.delete.gap, ";font-size:", select.tag.delete.fontSize, ";}", _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;min-width:0;}.k-select-prefix,.k-select-suffix{display:flex;align-items:center;position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.k-input .k-input-inner{background:transparent;}&.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-flex;align-items:center;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.k-tags{padding:3px 0;}.k-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _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;
     return /*#__PURE__*/css("&.k-", size, "{", className, ";}");
-  }), "&.k-inline{width:auto;border:none;min-height:0;background:transparent;.k-select-placeholder,.k-select-value{line-height:inherit;}}");
+  }), "&.k-inline{width:auto;border:none;min-height:0;background:transparent;.k-select-placeholder,.k-select-value{line-height:inherit;}}&.k-flat{border:none;background:", theme.color.bg, ";color:", _flatInstanceProperty(defaults).color, ";.k-tag{background:", select.tag.disabledBgColor, ";}}&.k-disabled{color:", select.disabled.color, ";cursor:not-allowed;background:", select.disabled.bgColor, ";border-color:", select.disabled.borderColor, ";.k-tag{background:", select.tag.disabledBgColor, ";}}&.k-nowrap{.k-select-values{display:flex;align-items:center;}.k-tags{flex:1;}.k-select-text{white-space:nowrap;overflow:hidden;text-overlay:ellipsis;}}");
 }
 export function makeMenuStyles() {
   var searchable = select.searchable;

package/components/select/useDraggble.d.ts

@@ -0,0 +1,2 @@
+import type { TagsDragEndParam } from '../tag';
+export declare function useDraggable(): ({ key, from, to }: TagsDragEndParam) => void;

package/components/select/useDraggble.js

@@ -0,0 +1,11 @@
+import { useInstance } from 'intact-react';
+import { swap } from '../utils';
+export function useDraggable() {
+  var instance = useInstance();
+  return function onEnd(_ref) {
+    var key = _ref.key,
+        from = _ref.from,
+        to = _ref.to;
+    instance.set('value', swap(instance.get('value'), from, to));
+  };
+}

package/components/slider/index.spec.js

@@ -80,15 +80,15 @@ describe('Slider', function () {
     }, _callee);
   })));
   it('range test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-    var _mount2, instance, element, windowWidth, _element$querySelecto2, first, second, wrapper;
+    var _mount2, instance, element, windowWidth, _element$querySelecto2, first, second, wrapper, increaseBtn, decreaseBtn, _element$querySelecto3, firstInput, secondInput;
 
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            _mount2 = mount(RangeDemo), instance = _mount2[0], element = _mount2[1];
-            windowWidth = 800; //document.documentElement.clientWidth;
+            _mount2 = mount(RangeDemo), instance = _mount2[0], element = _mount2[1]; // const windowWidth = 800; //document.documentElement.clientWidth;
 
+            windowWidth = element.querySelector('.k-slider-main').clientWidth;
             _element$querySelecto2 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto2[0], second = _element$querySelecto2[1]; // drag
 
             dispatchEvent(first, 'mousedown', {
@@ -145,9 +145,48 @@ describe('Slider', function () {
             return wait();
 
           case 33:
-            expect(instance.get('values')).eql([1, 1]);
+            expect(instance.get('values')).eql([1, 1]); // increase first value
 
-          case 34:
+            increaseBtn = element.querySelector('.k-right');
+            increaseBtn.click();
+            _context2.next = 38;
+            return wait();
+
+          case 38:
+            expect(instance.get('values')).eql([2, 2]); // should disable second spinner's decrease button
+
+            decreaseBtn = element.querySelector('.k-spinner:last-of-type .k-left');
+            decreaseBtn.click();
+            _context2.next = 43;
+            return wait();
+
+          case 43:
+            expect(instance.get('values')).eql([2, 2]); // input value
+
+            _element$querySelecto3 = element.querySelectorAll('.k-input-inner'), firstInput = _element$querySelecto3[0], secondInput = _element$querySelecto3[1];
+            dispatchEvent(firstInput, 'focusin');
+            firstInput.value = '5';
+            dispatchEvent(firstInput, 'input');
+            firstInput.value = '50';
+            dispatchEvent(firstInput, 'input');
+            dispatchEvent(firstInput, 'change');
+            dispatchEvent(secondInput, 'focusin');
+            _context2.next = 54;
+            return wait();
+
+          case 54:
+            secondInput.value = '6';
+            dispatchEvent(secondInput, 'input');
+            secondInput.value = '60';
+            dispatchEvent(secondInput, 'input');
+            dispatchEvent(secondInput, 'change');
+            _context2.next = 61;
+            return wait();
+
+          case 61:
+            expect(instance.get('values')).eql([50, 60]);
+
+          case 62:
           case "end":
             return _context2.stop();
         }
@@ -155,14 +194,14 @@ describe('Slider', function () {
     }, _callee2);
   })));
   it('keyboard operation for basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _mount3, instance, element, _element$querySelecto3, slider, handle;
+    var _mount3, instance, element, _element$querySelecto4, slider, handle;
 
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
-            _element$querySelecto3 = element.querySelectorAll('.k-slider'), slider = _element$querySelecto3[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-slider'), slider = _element$querySelecto4[1];
             handle = slider.querySelector('.k-slider-thumb');
             dispatchEvent(handle, 'focusin');
             dispatchEvent(handle, 'keydown', {
@@ -198,14 +237,14 @@ describe('Slider', function () {
     }, _callee3);
   })));
   it('keyboard operation for range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var _mount4, instance, element, _element$querySelecto4, first, second;
+    var _mount4, instance, element, _element$querySelecto5, first, second;
 
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
             _mount4 = mount(RangeDemo), instance = _mount4[0], element = _mount4[1];
-            _element$querySelecto4 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto4[0], second = _element$querySelecto4[1];
+            _element$querySelecto5 = element.querySelectorAll('.k-slider-thumb'), first = _element$querySelecto5[0], second = _element$querySelecto5[1];
             instance.set('values', [50, 51]);
             _context4.next = 5;
             return wait();

package/components/slider/index.vdt.js

@@ -48,7 +48,10 @@ export default function ($props, $blocks, $__proto__) {
       thumbFirstStyle = _this$styles.thumbFirstStyle,
       thumbSecondStyle = _this$styles.thumbSecondStyle;
 
-  var onSpinnerChange = this.value.onSpinnerChange;
+  var _this$value = this.value,
+      onSpinnerChange = _this$value.onSpinnerChange,
+      onLeftSpinnerChange = _this$value.onLeftSpinnerChange,
+      onRightSpinnerChange = _this$value.onRightSpinnerChange;
   var _this$keyboard = this.keyboard,
       onKeydown = _this$keyboard.onKeydown,
       onKeyup = _this$keyboard.onKeyup;
@@ -137,16 +140,24 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': linkEvent(min, setOneValue)
   }), _$ce(2, 'span', max + unit, 0, null, {
     'ev-click': linkEvent(max, setOneValue)
-  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput && !range ? _$ce(2, 'div', _$cc(Spinner, _extends({
-    'disabled': disabled,
-    'max': max,
-    'min': min,
-    'step': step || 0.01,
-    'vertical': true,
-    'value': value,
-    'suffix': unit,
-    'forceStep': !!step && forceStep,
-    'ev-$change:value': onSpinnerChange
-  }, spinnerProps)), 2, 'k-slider-spinner') : undefined]);
+  })], 4, 'k-slider-ends') : undefined], 0, 'k-slider-main'), showInput ? _$ce(2, 'div', function () {
+    var props = {
+      disabled: disabled,
+      min: min,
+      max: max,
+      step: step || 0.01,
+      vertical: true,
+      suffix: unit,
+      forceStep: !!step && forceStep
+    };
+    return [_$cc(Spinner, _extends({}, props, {
+      'value': range ? value[0] : value,
+      'ev-$change:value': range ? onLeftSpinnerChange : onSpinnerChange
+    }, spinnerProps)), range ? [_$ce(2, 'span', '-', 16, 'k-slider-spinner-sep'), _$cc(Spinner, _extends({}, props, {
+      'min': value[0],
+      'value': range ? value[1] : value,
+      'ev-$change:value': onRightSpinnerChange
+    }, spinnerProps))] : undefined];
+  }(), 0, 'k-slider-spinner') : undefined]);
 }
 ;

package/components/slider/styles.js

@@ -7,27 +7,38 @@ var defaults = {
     return theme.transition.middle;
   },
 
-  height: '4px',
-  bgColor: '#e5e5e5',
+  height: '6px',
+  bgColor: '#F0F2F4',
 
   get barColor() {
     return theme.color.primary;
   },
 
-  borderRadius: '2px',
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
   thumb: {
     height: '12px',
     width: '12px',
 
     get border() {
-      return "2px solid " + slider.barColor;
+      return "3px solid #fff";
     },
 
     borderRadius: '50%',
-    bgColor: '#fff',
-    hoverTransform: 'scale(1.5)',
-    hoverBgColor: '#fff',
-    disabledBgColor: '#fff'
+
+    get bgColor() {
+      return slider.barColor;
+    },
+
+    hoverTransform: 'scale(1.25)',
+
+    get hoverBgColor() {
+      return slider.barColor;
+    },
+
+    boxShadow: '0px 0px 5px 0px rgba(0, 0, 0, 0.08)'
   },
   endPadding: '10px 0 0',
   disabled: {
@@ -35,15 +46,13 @@ var defaults = {
       return theme.color.disabled;
     },
 
-    get bgColor() {
-      return theme.color.disabledBg;
-    }
-
+    // might be calculate according to the bar color
+    bgColor: '#B5E3FF'
   },
   // spinnerWidth: '124px',
   spinnerGap: '16px',
   point: {
-    width: '8px',
+    width: '10px',
 
     get height() {
       return slider.point.width;
@@ -77,5 +86,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 ", 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;}");
+  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{box-sizing:content-box;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, ";box-shadow:", slider.thumb.boxShadow, ";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-slider-spinner-sep{display:inline-block;margin:auto 8px;}&.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.bgColor, ";}.k-slider-thumb{border-color:#fff;background-color:", slider.disabled.bgColor, ";&: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/slider/useValue.d.ts

@@ -2,7 +2,9 @@ import { NormalizedGetStep } from '../spinner/useStep';
 export declare type Value<Range extends boolean = boolean> = Range extends true ? [number, number] : number;
 export declare function useValue(getStep: NormalizedGetStep, getDragging: () => boolean): {
     showValue: import("../../hooks/useState").State<number | [number, number]>;
-    onSpinnerChange: (v: number) => void;
+    onSpinnerChange: (v: Value) => void;
+    onLeftSpinnerChange: (v: number) => void;
+    onRightSpinnerChange: (v: number) => void;
     setValue: (value: Value) => void;
     triggerChangeEvent: (oldValue: Value) => void;
     fixValue: (value: Value, fixShowValue: boolean) => void;