text: "use strict";
  
  exports.__esModule = true;
  exports.default = void 0;
  
  var _utils = require("../utils");
  
  var _touch = require("../mixins/touch");
  
  var _event = require("../utils/dom/event");
  
  var _createNamespace = (0, _utils.createNamespace)('slider'),
      createComponent = _createNamespace[0],
      bem = _createNamespace[1];
  
  var _default = createComponent({
    mixins: [_touch.TouchMixin],
    props: {
      disabled: Boolean,
      vertical: Boolean,
      activeColor: String,
      inactiveColor: String,
      min: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 100
      },
      step: {
        type: Number,
        default: 1
      },
      value: {
        type: Number,
        default: 0
      },
      barHeight: {
        type: [Number, String],
        default: 2
      }
    },
    data: function data() {
      return {
        dragStatus: ''
      };
    },
    computed: {
      range: function range() {
        return this.max - this.min;
      }
    },
    created: function created() {
      // format initial value
      this.updateValue(this.value);
    },
    methods: {
      onTouchStart: function onTouchStart(event) {
        if (this.disabled) {
          return;
        }
  
        this.touchStart(event);
        this.startValue = this.format(this.value);
        this.dragStatus = 'start';
      },
      onTouchMove: function onTouchMove(event) {
        if (this.disabled) {
          return;
        }
  
        if (this.dragStatus === 'start') {
          this.$emit('drag-start');
        }
  
        (0, _event.preventDefault)(event, true);
        this.touchMove(event);
        this.dragStatus = 'draging';
        var rect = this.$el.getBoundingClientRect();
        var delta = this.vertical ? this.deltaY : this.deltaX;
        var total = this.vertical ? rect.height : rect.width;
        var diff = delta / total * this.range;
        this.newValue = this.startValue + diff;
        this.updateValue(this.newValue);
      },
      onTouchEnd: function onTouchEnd() {
        if (this.disabled) {
          return;
        }
  
        if (this.dragStatus === 'draging') {
          this.updateValue(this.newValue, true);
          this.$emit('drag-end');
        }
  
        this.dragStatus = '';
      },
      onClick: function onClick(event) {
        event.stopPropagation();
        if (this.disabled) return;
        var rect = this.$el.getBoundingClientRect();
        var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
        var total = this.vertical ? rect.height : rect.width;
        var value = delta / total * this.range + this.min;
        this.startValue = this.value;
        this.updateValue(value, true);
      },
      updateValue: function updateValue(value, end) {
        value = this.format(value);
  
        if (value !== this.value) {
          this.$emit('input', value);
        }
  
        if (end && value !== this.startValue) {
          this.$emit('change', value);
        }
      },
      format: function format(value) {
        return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
      }
    },
    render: function render() {
      var _barStyle;
  
      var h = arguments[0];
      var vertical = this.vertical;
      var style = {
        background: this.inactiveColor
      };
      var mainAxis = vertical ? 'height' : 'width';
      var crossAxis = vertical ? 'width' : 'height';
      var barStyle = (_barStyle = {}, _barStyle[mainAxis] = (this.value - this.min) * 100 / this.range + "%", _barStyle[crossAxis] = (0, _utils.addUnit)(this.barHeight), _barStyle.background = this.activeColor, _barStyle);
  
      if (this.dragStatus) {
        barStyle.transition = 'none';
      }
  
      return h("div", {
        "style": style,
        "class": bem({
          disabled: this.disabled,
          vertical: vertical
        }),
        "on": {
          "click": this.onClick
        }
      }, [h("div", {
        "class": bem('bar'),
        "style": barStyle
      }, [h("div", {
        "attrs": {
          "role": "slider",
          "tabindex": this.disabled ? -1 : 0,
          "aria-valuemin": this.min,
          "aria-valuenow": this.value,
          "aria-valuemax": this.max,
          "aria-orientation": this.vertical ? 'vertical' : 'horizontal'
        },
        "class": bem('button-wrapper'),
        "on": {
          "touchstart": this.onTouchStart,
          "touchmove": this.onTouchMove,
          "touchend": this.onTouchEnd,
          "touchcancel": this.onTouchEnd
        }
      }, [this.slots('button') || h("div", {
        "class": bem('button')
      })])])]);
    }
  });
  
  exports.default = _default;