@king-design/intact 2.1.1 → 3.0.0-beta.1

package/es/components/select/base.js

@@ -13,6 +13,7 @@ import { Dropdown } from '../dropdown';
 import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
+import { useDraggable } from './useDraggble';
 var typeDefs = {
   value: null,
   multiple: Boolean,
@@ -29,7 +30,10 @@ var typeDefs = {
   container: [Function, String],
   width: [String, Number],
   show: Boolean,
-  position: Dropdown.typeDefs.position
+  position: Dropdown.typeDefs.position,
+  flat: Boolean,
+  nowrap: Boolean,
+  draggable: Boolean
 };
 
 var defaults = function defaults() {
@@ -60,6 +64,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     _this.dropdownRef = createRef();
     _this.input = useInput(_this.resetKeywords);
     _this.focusout = useFocusout();
+    _this.draggable = useDraggable();
     return _this;
   }
 
@@ -67,8 +72,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
 
   _proto.init = function init() {
     provide(SELECT, this);
-    useShowHideEvents('show'); // this.input = useInput();
-
+    useShowHideEvents('show');
     this.watch('value', this.position, {
       presented: true
     });

package/es/components/select/base.vdt.js

@@ -1,4 +1,5 @@
 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';
 import { TransitionGroup, Transition } from 'intact';
@@ -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
@@ -41,12 +43,15 @@ export default function ($props, $blocks, $__proto__) {
       style = _this$get.style,
       width = _this$get.width,
       show = _this$get.show,
-      position = _this$get.position;
+      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();
@@ -106,7 +111,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) {
@@ -117,36 +123,42 @@ 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 ? _$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);
-                    };
+                      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);
+                      return block ? block.call($this, callBlock, data) : callBlock();
+                    }, __$blocks['value'](_$no, [value[$key], $label]))
+                  }, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key);
+                }, $this)
+              }) : undefined;
+            }, __$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, {
+              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,
@@ -158,11 +170,9 @@ export default function ($props, $blocks, $__proto__) {
               'size': size,
               'key': 'filter',
               'readonly': !show,
-              'waveDisabled': true
-            }, 'filter', inputRef) : undefined], 0, _$cn({
-              "k-select-values": true,
-              "k-with-values": _valuesInstanceProperty($blocks)
-            }), null, 'values')
+              'waveDisabled': true,
+              'flat': flat
+            }, 'filter', inputRef) : 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,
@@ -172,10 +182,8 @@ 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': _$cn({
-                "k-select-arrow ion-ios-arrow-down": true,
-                'k-disabled': $props.isDisableArrow
-              })
+              'className': 'k-select-arrow ion-ios-arrow-down',
+              'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
             var block = $blocks['suffix'];

package/es/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();

package/es/components/select/menu.vdt.js

@@ -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) {

package/es/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';
@@ -33,10 +34,6 @@ var defaults = deepDefaults({
     return "1px solid " + theme.color.primary;
   },
 
-  get iconColor() {
-    return theme.color.placeholder;
-  },
-
   get activeColor() {
     return theme.color.primary;
   },
@@ -46,7 +43,6 @@ var defaults = deepDefaults({
   },
 
   suffixGap: '10px',
-  disabledArrowColor: '#e5e5e5',
   clearGap: "8px",
 
   get placeholderColor() {
@@ -94,7 +90,7 @@ var defaults = deepDefaults({
   },
   tag: {
     margin: "3px 8px 3px 0",
-    padding: "3px 8px",
+    padding: "1px 8px",
 
     get borderRadius() {
       return theme.borderRadius;
@@ -104,13 +100,13 @@ var defaults = deepDefaults({
       return theme.color.bg;
     },
 
-    disabledBgColor: '#eee',
+    disabledBgColor: '#f8f9fa',
     delete: {
       gap: "8px",
       fontSize: '14px',
 
       get color() {
-        return theme.color.placeholder;
+        return theme.color.lightBlack;
       }
 
     }
@@ -146,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] = {
@@ -159,26 +162,9 @@ var defaults = deepDefaults({
 
     get fontSize() {
       return theme[size].fontSize;
-    },
+    }
 
-    multipleGap: "1px",
-    multipleMargin: "0 2px 1px 0"
   };
-
-  if (size === 'large') {
-    // use default padding for large size
-    Object.defineProperty(memo.large, 'padding', {
-      get: function get() {
-        return "0 " + theme.default.padding;
-      }
-    });
-    Object.defineProperty(memo.large, 'fontSize', {
-      get: function get() {
-        return theme.default.fontSize;
-      }
-    });
-  }
-
   return memo;
 }, {}));
 var select;
@@ -188,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{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), ";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, ";color:", select.tag.delete.color, ";}", _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{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-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-tags{padding:3px 0;}.k-tag{word-break:break-word;height:auto;}", _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/es/components/select/useDraggble.d.ts

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

package/es/components/select/useDraggble.js

@@ -0,0 +1,11 @@
+import { useInstance } from 'intact';
+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/es/components/select/useNowrap.d.ts

@@ -0,0 +1,3 @@
+export declare function useNowrap(): {
+    containerRef: import("intact").RefObject<HTMLDivElement>;
+};

package/es/components/select/useNowrap.js

@@ -0,0 +1,19 @@
+import { useInstance, createRef } from 'intact';
+export function useNowrap() {
+  var instance = useInstance();
+  var containerRef = createRef();
+  instance.watch('value', refresh, {
+    presented: true
+  });
+
+  function refresh() {
+    if (!instance.get('multiple')) return;
+    var container = containerRef.value;
+    var width = container.getBoundingClientRect().width;
+    console.log('aaa', width);
+  }
+
+  return {
+    containerRef: containerRef
+  };
+}

package/es/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/es/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/es/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/es/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;

package/es/components/slider/useValue.js

@@ -80,6 +80,16 @@ export function useValue(getStep, getDragging) {
     });
   }
 
+  function onLeftSpinnerChange(v) {
+    var secondValue = showValue.value[1];
+    onSpinnerChange([v, Math.max(v, secondValue)]);
+  }
+
+  function onRightSpinnerChange(v) {
+    var firstValue = showValue.value[0];
+    onSpinnerChange([Math.min(v, firstValue), v]);
+  }
+
   function triggerChangeEvent(oldValue) {
     var _instance$get3 = instance.get(),
         value = _instance$get3.value;
@@ -91,6 +101,8 @@ export function useValue(getStep, getDragging) {
   return {
     showValue: showValue,
     onSpinnerChange: onSpinnerChange,
+    onLeftSpinnerChange: onLeftSpinnerChange,
+    onRightSpinnerChange: onRightSpinnerChange,
     setValue: setValue,
     triggerChangeEvent: triggerChangeEvent,
     fixValue: fixValue

package/es/components/spinner/index.d.ts

@@ -39,6 +39,5 @@ export declare class Spinner extends Component<SpinnerProps, SpinnerEvents> {
     private change;
     private isDisabledDecrease;
     private isDisabledIncrease;
-    private onInput;
 }
 export {};