kdutify 0.16.9-rc.0 → 2.6.1

package/es5/components/KSlider/KSlider.js

@@ -1,306 +1,532 @@
-require('../../../src/stylus/components/_sliders.styl');
+"use strict";
 
-import { addOnceEventListener, createRange } from '../../util/helpers';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-import Input from '../../mixins/input';
+require("..\\..\\..\\src\\components\\KSlider\\KSlider.sass");
 
-import ClickOutside from '../../directives/click-outside';
+var _KInput = _interopRequireDefault(require("../KInput"));
 
-export default {
-  name: 'k-slider',
+var _transitions = require("../transitions");
 
-  mixins: [Input],
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
 
-  directives: { ClickOutside: ClickOutside },
+var _loadable = _interopRequireDefault(require("../../mixins/loadable"));
 
-  data: function data() {
-    return {
-      app: {},
-      isActive: false,
-      keyPressed: 0
-    };
-  },
+var _clickOutside = _interopRequireDefault(require("../../directives/click-outside"));
+
+var _helpers = require("../../util/helpers");
+
+var _console = require("../../util/console");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default2 = (0, _mixins.default)(_KInput.default, _loadable.default
+/* @kdujs/component */
+).extend({
+  name: 'k-slider',
+  directives: {
+    ClickOutside: _clickOutside.default
+  },
+  mixins: [_loadable.default],
   props: {
-    color: {
-      type: String,
-      default: null
+    disabled: Boolean,
+    inverseLabel: Boolean,
+    max: {
+      type: [Number, String],
+      default: 100
     },
     min: {
       type: [Number, String],
       default: 0
     },
-    max: {
+    step: {
       type: [Number, String],
-      default: 100
+      default: 1
     },
-    step: {
+    thumbColor: String,
+    thumbLabel: {
+      type: [Boolean, String],
+      default: undefined,
+      validator: function validator(v) {
+        return typeof v === 'boolean' || v === 'always';
+      }
+    },
+    thumbSize: {
       type: [Number, String],
-      default: null
+      default: 32
+    },
+    tickLabels: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    ticks: {
+      type: [Boolean, String],
+      default: false,
+      validator: function validator(v) {
+        return typeof v === 'boolean' || v === 'always';
+      }
     },
-    thumbColor: {
-      type: String,
-      default: null
+    tickSize: {
+      type: [Number, String],
+      default: 2
     },
-    thumbLabel: Boolean,
+    trackColor: String,
+    trackFillColor: String,
     value: [Number, String],
-    snap: Boolean,
-    trackColor: {
-      type: String,
-      default: null
-    }
+    vertical: Boolean
+  },
+  data: function data() {
+    return {
+      app: null,
+      oldValue: null,
+      thumbPressed: false,
+      mouseTimeout: -1,
+      isFocused: false,
+      isActive: false,
+      noClick: false,
+      startOffset: 0
+    };
   },
-
   computed: {
     classes: function classes() {
-      return {
-        'input-group--slider': true,
-        'input-group--active': this.isActive,
-        'input-group--dirty': this.inputWidth > 0,
-        'input-group--disabled': this.disabled,
-        'input-group--ticks': !this.disabled && this.step
-      };
+      return _objectSpread(_objectSpread({}, _KInput.default.options.computed.classes.call(this)), {}, {
+        'k-input__slider': true,
+        'k-input__slider--vertical': this.vertical,
+        'k-input__slider--inverse-label': this.inverseLabel
+      });
     },
-
-    inputValue: {
+    internalValue: {
       get: function get() {
-        return this.value;
+        return this.lazyValue;
       },
       set: function set(val) {
-        var min = this.min,
-            max = this.max,
-            step = this.step,
-            snap = this.snap;
-
-        val = val < min && min || val > max && max || val;
-
-        // Round value to ensure the
+        val = isNaN(val) ? this.minValue : val; // Round value to ensure the
         // entire slider range can
         // be selected with step
-        var value = snap ? Math.round(val / step) * step : Math.round(val);
-        this.lazyValue = value;
 
-        if (value !== this.value) {
-          this.$emit('input', value);
-        }
+        var value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue));
+        if (value === this.lazyValue) return;
+        this.lazyValue = value;
+        this.$emit('input', value);
       }
     },
-    interval: function interval() {
-      return 100 / (this.max - this.min) * this.step;
+    trackTransition: function trackTransition() {
+      return this.thumbPressed ? this.showTicks || this.stepNumeric ? '0.1s cubic-bezier(0.25, 0.8, 0.5, 1)' : 'none' : '';
     },
-    thumbContainerClasses: function thumbContainerClasses() {
-      return {
-        'slider__thumb-container': true,
-        'slider__thumb-container--label': this.thumbLabel
-      };
+    minValue: function minValue() {
+      return parseFloat(this.min);
     },
-    thumbStyles: function thumbStyles() {
-      return {
-        transition: this.keyPressed >= 2 ? 'none' : '',
-        left: this.inputWidth + '%'
-      };
+    maxValue: function maxValue() {
+      return parseFloat(this.max);
     },
-    tickContainerStyles: function tickContainerStyles() {
-      return {
-        transform: 'translate3d(0, -50%, 0)'
-      };
+    stepNumeric: function stepNumeric() {
+      return this.step > 0 ? parseFloat(this.step) : 0;
     },
-    trackStyles: function trackStyles() {
-      var scaleX = this.calculateScale(1 - this.inputWidth / 100);
-      var offsetX = this.thumbLabel ? 0 : !this.isActive ? 8 : 12;
-      var translateX = offsetX + 'px';
-      return {
-        transition: this.keyPressed >= 2 ? 'none' : '',
-        transform: 'scaleX(' + scaleX + ') translateX(' + translateX + ')'
-      };
+    inputWidth: function inputWidth() {
+      var inputWidth = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100;
+      return isNaN(inputWidth) ? 0 : inputWidth;
     },
     trackFillStyles: function trackFillStyles() {
-      var inputWidth = this.inputWidth;
-      var scaleX = this.calculateScale(inputWidth / 100);
-      var translateX = inputWidth > 99 && !this.thumbLabel ? -8 + 'px' : 0;
-      return {
-        transition: this.keyPressed >= 2 ? 'none' : '',
-        transform: 'scaleX(' + scaleX + ') translateX(' + translateX + ')'
-      };
+      var _ref;
+
+      var startDir = this.vertical ? 'bottom' : 'left';
+      var endDir = this.vertical ? 'top' : 'right';
+      var valueDir = this.vertical ? 'height' : 'width';
+      var start = this.$kdutify.rtl ? 'auto' : '0';
+      var end = this.$kdutify.rtl ? '0' : 'auto';
+      var value = this.isDisabled ? "calc(".concat(this.inputWidth, "% - 10px)") : "".concat(this.inputWidth, "%");
+      return _ref = {
+        transition: this.trackTransition
+      }, _defineProperty(_ref, startDir, start), _defineProperty(_ref, endDir, end), _defineProperty(_ref, valueDir, value), _ref;
+    },
+    trackStyles: function trackStyles() {
+      var _ref2;
+
+      var startDir = this.vertical ? this.$kdutify.rtl ? 'bottom' : 'top' : this.$kdutify.rtl ? 'left' : 'right';
+      var endDir = this.vertical ? 'height' : 'width';
+      var start = '0px';
+      var end = this.isDisabled ? "calc(".concat(100 - this.inputWidth, "% - 10px)") : "calc(".concat(100 - this.inputWidth, "%)");
+      return _ref2 = {
+        transition: this.trackTransition
+      }, _defineProperty(_ref2, startDir, start), _defineProperty(_ref2, endDir, end), _ref2;
+    },
+    showTicks: function showTicks() {
+      return this.tickLabels.length > 0 || !!(!this.isDisabled && this.stepNumeric && this.ticks);
     },
     numTicks: function numTicks() {
-      return parseInt((this.max - this.min) / this.step);
+      return Math.ceil((this.maxValue - this.minValue) / this.stepNumeric);
     },
-    inputWidth: function inputWidth() {
-      var val = this.inputValue;
-      if (this.snap) {
-        val = Math.round(val / this.step) * this.step;
-      }
-
-      val = (val - this.min) / (this.max - this.min) * 100;
-
-      return val < 0.15 ? 0 : val;
+    showThumbLabel: function showThumbLabel() {
+      return !this.isDisabled && !!(this.thumbLabel || this.$scopedSlots['thumb-label']);
+    },
+    computedTrackColor: function computedTrackColor() {
+      if (this.isDisabled) return undefined;
+      if (this.trackColor) return this.trackColor;
+      if (this.isDark) return this.validationState;
+      return this.validationState || 'primary lighten-3';
+    },
+    computedTrackFillColor: function computedTrackFillColor() {
+      if (this.isDisabled) return undefined;
+      if (this.trackFillColor) return this.trackFillColor;
+      return this.validationState || this.computedColor;
+    },
+    computedThumbColor: function computedThumbColor() {
+      if (this.thumbColor) return this.thumbColor;
+      return this.validationState || this.computedColor;
     }
   },
-
   watch: {
-    isActive: function isActive(val) {
-      this.isFocused = val;
-    },
     min: function min(val) {
-      val > this.inputValue && this.$emit('input', val);
+      var parsed = parseFloat(val);
+      parsed > this.internalValue && this.$emit('input', parsed);
     },
     max: function max(val) {
-      val < this.inputValue && this.$emit('input', val);
+      var parsed = parseFloat(val);
+      parsed < this.internalValue && this.$emit('input', parsed);
     },
-    value: function value(val) {
-      this.inputValue = val;
+    value: {
+      handler: function handler(v) {
+        this.internalValue = v;
+      }
     }
   },
-
+  // If done in as immediate in
+  // value watcher, causes issues
+  // with kdu-test-utils
+  beforeMount: function beforeMount() {
+    this.internalValue = this.value;
+  },
   mounted: function mounted() {
-    this.inputValue = this.value;
-
     // Without a k-app, iOS does not work with body selectors
-    this.app = document.querySelector('[data-app]') || console.warn('The k-slider component requires the presence of k-app or a non-body wrapping element with the [data-app] attribute.');
+    this.app = document.querySelector('[data-app]') || (0, _console.consoleWarn)('Missing k-app or a non-body wrapping element with the [data-app] attribute', this);
   },
-
-
   methods: {
-    calculateScale: function calculateScale(scale) {
-      return this.disabled ? scale - 0.015 : scale;
+    genDefaultSlot: function genDefaultSlot() {
+      var children = [this.genLabel()];
+      var slider = this.genSlider();
+      this.inverseLabel ? children.unshift(slider) : children.push(slider);
+      children.push(this.genProgress());
+      return children;
     },
-    onMouseDown: function onMouseDown(e) {
-      this.keyPressed = 2;
-      var options = { passive: true };
-      this.isActive = true;
-
-      if ('touches' in e) {
-        this.app.addEventListener('touchmove', this.onMouseMove, options);
-        addOnceEventListener(this.app, 'touchend', this.onMouseUp);
-      } else {
-        this.app.addEventListener('mousemove', this.onMouseMove, options);
-        addOnceEventListener(this.app, 'mouseup', this.onMouseUp);
-      }
+    genSlider: function genSlider() {
+      return this.$createElement('div', {
+        class: _objectSpread({
+          'k-slider': true,
+          'k-slider--horizontal': !this.vertical,
+          'k-slider--vertical': this.vertical,
+          'k-slider--focused': this.isFocused,
+          'k-slider--active': this.isActive,
+          'k-slider--disabled': this.isDisabled,
+          'k-slider--readonly': this.isReadonly
+        }, this.themeClasses),
+        directives: [{
+          name: 'click-outside',
+          value: this.onBlur
+        }],
+        on: {
+          click: this.onSliderClick,
+          mousedown: this.onSliderMouseDown,
+          touchstart: this.onSliderMouseDown
+        }
+      }, this.genChildren());
     },
-    onMouseUp: function onMouseUp() {
-      this.keyPressed = 0;
-      var options = { passive: true };
-      this.isActive = false;
-      this.app.removeEventListener('touchmove', this.onMouseMove, options);
-      this.app.removeEventListener('mousemove', this.onMouseMove, options);
+    genChildren: function genChildren() {
+      return [this.genInput(), this.genTrackContainer(), this.genSteps(), this.genThumbContainer(this.internalValue, this.inputWidth, this.isActive, this.isFocused, this.onFocus, this.onBlur)];
     },
-    onMouseMove: function onMouseMove(e) {
-      var _$refs$track$getBound = this.$refs.track.getBoundingClientRect(),
-          offsetLeft = _$refs$track$getBound.left,
-          trackWidth = _$refs$track$getBound.width;
-
-      var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-      var left = (clientX - offsetLeft) / trackWidth * 100;
-
-      if (left >= 0 && left <= 100) {
-        this.inputValue = parseInt(this.min, 10) + left / 100 * (this.max - this.min);
-      }
+    genInput: function genInput() {
+      return this.$createElement('input', {
+        attrs: _objectSpread({
+          value: this.internalValue,
+          id: this.computedId,
+          disabled: true,
+          readonly: true,
+          tabindex: -1
+        }, this.$attrs)
+      });
     },
-    onKeyDown: function onKeyDown(e) {
-      if (e.keyCode === 37 || e.keyCode === 39) {
-        this.keyPressed += 1;
+    genTrackContainer: function genTrackContainer() {
+      var children = [this.$createElement('div', this.setBackgroundColor(this.computedTrackColor, {
+        staticClass: 'k-slider__track-background',
+        style: this.trackStyles
+      })), this.$createElement('div', this.setBackgroundColor(this.computedTrackFillColor, {
+        staticClass: 'k-slider__track-fill',
+        style: this.trackFillStyles
+      }))];
+      return this.$createElement('div', {
+        staticClass: 'k-slider__track-container',
+        ref: 'track'
+      }, children);
+    },
+    genSteps: function genSteps() {
+      var _this = this;
 
-        var direction = e.keyCode === 37 && -1 || e.keyCode === 39 && 1 || 0;
-        var multiplier = e.shiftKey && 3 || e.ctrlKey && 2 || 1;
-        var amount = this.snap && this.step || 1;
+      if (!this.step || !this.showTicks) return null;
+      var tickSize = parseFloat(this.tickSize);
+      var range = (0, _helpers.createRange)(this.numTicks + 1);
+      var direction = this.vertical ? 'bottom' : this.$kdutify.rtl ? 'right' : 'left';
+      var offsetDirection = this.vertical ? this.$kdutify.rtl ? 'left' : 'right' : 'top';
+      if (this.vertical) range.reverse();
+      var ticks = range.map(function (index) {
+        var _style;
+
+        var children = [];
+
+        if (_this.tickLabels[index]) {
+          children.push(_this.$createElement('div', {
+            staticClass: 'k-slider__tick-label'
+          }, _this.tickLabels[index]));
+        }
 
-        this.inputValue = this.inputValue + direction * amount * multiplier;
-      }
+        var width = index * (100 / _this.numTicks);
+        var filled = _this.$kdutify.rtl ? 100 - _this.inputWidth < width : width < _this.inputWidth;
+        return _this.$createElement('span', {
+          key: index,
+          staticClass: 'k-slider__tick',
+          class: {
+            'k-slider__tick--filled': filled
+          },
+          style: (_style = {
+            width: "".concat(tickSize, "px"),
+            height: "".concat(tickSize, "px")
+          }, _defineProperty(_style, direction, "calc(".concat(width, "% - ").concat(tickSize / 2, "px)")), _defineProperty(_style, offsetDirection, "calc(50% - ".concat(tickSize / 2, "px)")), _style)
+        }, children);
+      });
+      return this.$createElement('div', {
+        staticClass: 'k-slider__ticks-container',
+        class: {
+          'k-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0
+        }
+      }, ticks);
     },
-    onKeyUp: function onKeyUp(e) {
-      this.keyPressed = 0;
+    genThumbContainer: function genThumbContainer(value, valueWidth, isActive, isFocused, onFocus, onBlur) {
+      var ref = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'thumb';
+      var children = [this.genThumb()];
+      var thumbLabelContent = this.genThumbLabelContent(value);
+      this.showThumbLabel && children.push(this.genThumbLabel(thumbLabelContent));
+      return this.$createElement('div', this.setTextColor(this.computedThumbColor, {
+        ref: ref,
+        key: ref,
+        staticClass: 'k-slider__thumb-container',
+        class: {
+          'k-slider__thumb-container--active': isActive,
+          'k-slider__thumb-container--focused': isFocused,
+          'k-slider__thumb-container--show-label': this.showThumbLabel
+        },
+        style: this.getThumbContainerStyles(valueWidth),
+        attrs: {
+          role: 'slider',
+          tabindex: this.isDisabled ? -1 : this.$attrs.tabindex ? this.$attrs.tabindex : 0,
+          'aria-label': this.$attrs['aria-label'] || this.label,
+          'aria-valuemin': this.min,
+          'aria-valuemax': this.max,
+          'aria-valuenow': this.internalValue,
+          'aria-readonly': String(this.isReadonly),
+          'aria-orientation': this.vertical ? 'vertical' : 'horizontal'
+        },
+        on: {
+          focus: onFocus,
+          blur: onBlur,
+          keydown: this.onKeyDown
+        }
+      }), children);
     },
-    sliderMove: function sliderMove(e) {
-      if (!this.isActive) {
-        this.onMouseMove(e);
-      }
+    genThumbLabelContent: function genThumbLabelContent(value) {
+      return this.$scopedSlots['thumb-label'] ? this.$scopedSlots['thumb-label']({
+        value: value
+      }) : [this.$createElement('span', [String(value)])];
     },
-    genThumbLabel: function genThumbLabel(h) {
-      return h('k-scale-transition', {
-        props: { origin: 'bottom center' }
-      }, [h('div', {
-        'class': 'slider__thumb--label__container',
+    genThumbLabel: function genThumbLabel(content) {
+      var size = (0, _helpers.convertToUnit)(this.thumbSize);
+      var transform = this.vertical ? "translateY(20%) translateY(".concat(Number(this.thumbSize) / 3 - 1, "px) translateX(55%) rotate(135deg)") : "translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)";
+      return this.$createElement(_transitions.KScaleTransition, {
+        props: {
+          origin: 'bottom center'
+        }
+      }, [this.$createElement('div', {
+        staticClass: 'k-slider__thumb-label-container',
         directives: [{
           name: 'show',
-          value: this.isActive
+          value: this.isFocused || this.isActive || this.thumbLabel === 'always'
         }]
-      }, [h('div', { 'class': ['slider__thumb--label', this.thumbColor || this.color] }, [h('span', {}, parseInt(this.inputValue))])])]);
+      }, [this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
+        staticClass: 'k-slider__thumb-label',
+        style: {
+          height: size,
+          width: size,
+          transform: transform
+        }
+      }), [this.$createElement('div', content)])])]);
     },
-    genThumbContainer: function genThumbContainer(h) {
-      var children = [];
-      children.push(h('div', { 'class': ['slider__thumb', this.thumbColor || this.color] }));
+    genThumb: function genThumb() {
+      return this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
+        staticClass: 'k-slider__thumb'
+      }));
+    },
+    getThumbContainerStyles: function getThumbContainerStyles(width) {
+      var direction = this.vertical ? 'top' : 'left';
+      var value = this.$kdutify.rtl ? 100 - width : width;
+      value = this.vertical ? 100 - value : value;
+      return _defineProperty({
+        transition: this.trackTransition
+      }, direction, "".concat(value, "%"));
+    },
+    onSliderMouseDown: function onSliderMouseDown(e) {
+      var _e$target,
+          _this2 = this;
 
-      this.thumbLabel && children.push(this.genThumbLabel(h));
+      e.preventDefault();
+      this.oldValue = this.internalValue;
+      this.isActive = true;
 
-      return h('div', {
-        'class': this.thumbContainerClasses,
-        style: this.thumbStyles,
-        on: {
-          touchstart: this.onMouseDown,
-          mousedown: this.onMouseDown
-        },
-        ref: 'thumb'
-      }, children);
+      if ((_e$target = e.target) != null && _e$target.matches('.k-slider__thumb-container, .k-slider__thumb-container *')) {
+        this.thumbPressed = true;
+        var domRect = e.target.getBoundingClientRect();
+        var touch = 'touches' in e ? e.touches[0] : e;
+        this.startOffset = this.vertical ? touch.clientY - (domRect.top + domRect.height / 2) : touch.clientX - (domRect.left + domRect.width / 2);
+      } else {
+        this.startOffset = 0;
+        window.clearTimeout(this.mouseTimeout);
+        this.mouseTimeout = window.setTimeout(function () {
+          _this2.thumbPressed = true;
+        }, 300);
+      }
+
+      var mouseUpOptions = _helpers.passiveSupported ? {
+        passive: true,
+        capture: true
+      } : true;
+      var mouseMoveOptions = _helpers.passiveSupported ? {
+        passive: true
+      } : false;
+      var isTouchEvent = ('touches' in e);
+      this.onMouseMove(e);
+      this.app.addEventListener(isTouchEvent ? 'touchmove' : 'mousemove', this.onMouseMove, mouseMoveOptions);
+      (0, _helpers.addOnceEventListener)(this.app, isTouchEvent ? 'touchend' : 'mouseup', this.onSliderMouseUp, mouseUpOptions);
+      this.$emit('start', this.internalValue);
     },
-    genSteps: function genSteps(h) {
-      var _this = this;
+    onSliderMouseUp: function onSliderMouseUp(e) {
+      e.stopPropagation();
+      window.clearTimeout(this.mouseTimeout);
+      this.thumbPressed = false;
+      var mouseMoveOptions = _helpers.passiveSupported ? {
+        passive: true
+      } : false;
+      this.app.removeEventListener('touchmove', this.onMouseMove, mouseMoveOptions);
+      this.app.removeEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
+      this.$emit('mouseup', e);
+      this.$emit('end', this.internalValue);
+
+      if (!(0, _helpers.deepEqual)(this.oldValue, this.internalValue)) {
+        this.$emit('change', this.internalValue);
+        this.noClick = true;
+      }
 
-      var ticks = createRange(this.numTicks + 1).map(function (i) {
-        var span = h('span', {
-          class: 'slider__tick',
-          style: {
-            left: i * (100 / _this.numTicks) + '%'
-          }
-        });
+      this.isActive = false;
+    },
+    onMouseMove: function onMouseMove(e) {
+      if (e.type === 'mousemove') {
+        this.thumbPressed = true;
+      }
 
-        return span;
-      });
+      this.internalValue = this.parseMouseMove(e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (!this.isInteractive) return;
+      var value = this.parseKeyDown(e, this.internalValue);
+      if (value == null || value < this.minValue || value > this.maxValue) return;
+      this.internalValue = value;
+      this.$emit('change', value);
+    },
+    onSliderClick: function onSliderClick(e) {
+      if (this.noClick) {
+        this.noClick = false;
+        return;
+      }
 
-      return h('div', {
-        'class': 'slider__ticks-container',
-        style: this.tickContainerStyles
-      }, ticks);
+      var thumb = this.$refs.thumb;
+      thumb.focus();
+      this.onMouseMove(e);
+      this.$emit('change', this.internalValue);
     },
-    genTrackContainer: function genTrackContainer(h) {
-      var children = [h('div', {
-        'class': ['slider__track', this.trackColor],
-        style: this.trackStyles
-      }), h('div', {
-        'class': ['slider__track-fill', this.color],
-        style: this.trackFillStyles
-      })];
+    onBlur: function onBlur(e) {
+      this.isFocused = false;
+      this.$emit('blur', e);
+    },
+    onFocus: function onFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e);
+    },
+    parseMouseMove: function parseMouseMove(e) {
+      var start = this.vertical ? 'top' : 'left';
+      var length = this.vertical ? 'height' : 'width';
+      var click = this.vertical ? 'clientY' : 'clientX';
 
-      return h('div', {
-        'class': 'slider__track__container',
-        ref: 'track'
-      }, children);
-    }
-  },
+      var _this$$refs$track$get = this.$refs.track.getBoundingClientRect(),
+          trackStart = _this$$refs$track$get[start],
+          trackLength = _this$$refs$track$get[length];
 
-  render: function render(h) {
-    var children = [];
+      var clickOffset = 'touches' in e ? e.touches[0][click] : e[click]; // It is possible for left to be NaN, force to number
 
-    children.push(this.genTrackContainer(h));
-    this.step && children.push(this.genSteps(h));
-    children.push(this.genThumbContainer(h));
+      var clickPos = Math.min(Math.max((clickOffset - trackStart - this.startOffset) / trackLength, 0), 1) || 0;
+      if (this.vertical) clickPos = 1 - clickPos;
+      if (this.$kdutify.rtl) clickPos = 1 - clickPos;
+      return parseFloat(this.min) + clickPos * (this.maxValue - this.minValue);
+    },
+    parseKeyDown: function parseKeyDown(e, value) {
+      if (!this.isInteractive) return;
+      var pageup = _helpers.keyCodes.pageup,
+          pagedown = _helpers.keyCodes.pagedown,
+          end = _helpers.keyCodes.end,
+          home = _helpers.keyCodes.home,
+          left = _helpers.keyCodes.left,
+          right = _helpers.keyCodes.right,
+          down = _helpers.keyCodes.down,
+          up = _helpers.keyCodes.up;
+      if (![pageup, pagedown, end, home, left, right, down, up].includes(e.keyCode)) return;
+      e.preventDefault();
+      var step = this.stepNumeric || 1;
+      var steps = (this.maxValue - this.minValue) / step;
+
+      if ([left, right, down, up].includes(e.keyCode)) {
+        var increase = this.$kdutify.rtl ? [left, up] : [right, up];
+        var direction = increase.includes(e.keyCode) ? 1 : -1;
+        var multiplier = e.shiftKey ? 3 : e.ctrlKey ? 2 : 1;
+        value = value + direction * step * multiplier;
+      } else if (e.keyCode === home) {
+        value = this.minValue;
+      } else if (e.keyCode === end) {
+        value = this.maxValue;
+      } else {
+        var _direction = e.keyCode === pagedown ? 1 : -1;
 
-    var slider = h('div', { 'class': 'slider' }, children);
+        value = value - _direction * step * (steps > 100 ? steps / 10 : 10);
+      }
 
-    return this.genInputGroup([slider], {
-      attrs: {
-        role: 'slider',
-        tabindex: this.tabindex
-      },
-      on: Object.assign({}, {
-        mouseup: this.sliderMove,
-        keydown: this.onKeyDown,
-        keyup: this.onKeyUp
-      }, this.$listeners),
-      directives: [{
-        name: 'click-outside'
-      }]
-    });
+      return value;
+    },
+    roundValue: function roundValue(value) {
+      if (!this.stepNumeric) return value; // Format input value using the same number
+      // of decimals places as in the step prop
+
+      var trimmedStep = this.step.toString().trim();
+      var decimals = trimmedStep.indexOf('.') > -1 ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
+      var offset = this.minValue % this.stepNumeric;
+      var newValue = Math.round((value - offset) / this.stepNumeric) * this.stepNumeric + offset;
+      return parseFloat(Math.min(newValue, this.maxValue).toFixed(decimals));
+    }
   }
-};
+});
+
+exports.default = _default2;
+//# sourceMappingURL=KSlider.js.map