import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import "../../../src/scss/number-spinner.scss";
import Vue from 'vue';
export default Vue.extend().extend({
  name: 'w-number-spinner',
  props: {
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    step: {
      type: Number,
      default: 1
    },
    inputWidth: {
      type: String,
      default: '3em'
    },
    readonly: Boolean,
    disabled: Boolean,
    align: {
      type: String,
      default: 'center'
    },
    fillable: {
      type: Boolean,
      default: true
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      currentValue: this.value
    };
  },
  inheritAttrs: false,
  model: {
    event: 'change'
  },
  computed: {
    increasable: function increasable() {
      var num = this.currentValue;
      return Number.isNaN(num) || num < this.max;
    },
    decreasable: function decreasable() {
      var num = this.currentValue;
      return Number.isNaN(num) || num > this.min;
    },
    inputStyle: function inputStyle() {
      return {
        width: this.inputWidth,
        textAlign: this.align
      };
    },
    listeners: function listeners() {
      var listeners = _objectSpread({}, this.$listeners);

      delete listeners.change;
      return listeners;
    }
  },
  created: function created() {
    if (this.min < this.max) {
      this.currentValue = Math.min(this.max, Math.max(this.min, this.value));
    }
  },
  methods: {
    decrease: function decrease() {
      if (this.decreasable) {
        var currentValue = this.currentValue;

        if (Number.isNaN(currentValue)) {
          currentValue = 0;
        }

        this.setValue(Math.min(this.max, Math.max(this.min, currentValue - this.step)));
      }
    },
    increase: function increase() {
      if (this.increasable) {
        var currentValue = this.currentValue;

        if (Number.isNaN(currentValue)) {
          currentValue = 0;
        }

        this.setValue(Math.min(this.max, Math.max(this.min, currentValue + this.step)));
      }
    },
    onChange: function onChange(e) {
      this.setValue(Math.min(this.max, Math.max(this.min, Number(e.target.value))));
    },
    onPaste: function onPaste(e) {
      if (!this.fillable || !/^-?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?$/.test(e.clipboardData.getData('text'))) {
        e.preventDefault();
      }
    },
    onKeypress: function onKeypress(e) {
      if (!this.fillable) {
        e.preventDefault();
      }
    },
    setValue: function setValue(val) {
      var oldValue = this.currentValue;
      this.currentValue = val;
      this.$emit('change', val, oldValue);
      this.$refs.input.value = val.toString();
    }
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$emit('input', val);
      this.$emit('change', val);
    },
    value: function value(val) {
      if (typeof val === 'number') {
        if (val <= this.min) {
          this.currentValue = this.min;
        } else if (val >= this.max) {
          this.currentValue = this.max;
        } else {
          this.currentValue = val;
        }
      }
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h("div", _mergeJSXProps([{
      "class": "wv-number-spinner"
    }, {
      "on": this.listeners
    }]), [h("button", {
      "class": "spinner-btn btn-minus",
      "on": {
        "click": function click() {
          _this.decrease();
        }
      },
      "attrs": {
        "disabled": this.disabled || this.readonly || !this.decreasable
      }
    }), h("input", {
      "ref": "input",
      "attrs": {
        "type": "number",
        "min": this.min,
        "max": this.max,
        "step": this.step,
        "disabled": this.disabled || !this.decreasable && !this.increasable,
        "readonly": this.readonly
      },
      "domProps": {
        "value": this.currentValue
      },
      "on": {
        "change": this.onChange,
        "paste": this.onPaste,
        "keypress": this.onKeypress
      },
      "style": this.inputStyle
    }), h("button", {
      "class": "spinner-btn btn-plus",
      "on": {
        "click": function click() {
          _this.increase();
        }
      },
      "attrs": {
        "disabled": this.disabled || this.readonly || !this.increasable
      }
    })]);
  }
});
//# sourceMappingURL=WNumberSpinner.js.map