buefy 0.9.26 → 0.9.28

package/dist/cjs/slider.js

@@ -0,0 +1,603 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-8b2e54ad.js');
+var Tooltip = require('./Tooltip-c1df7ee3.js');
+var config = require('./config-8cfb5a4a.js');
+var plugins = require('./plugins-7f41b028.js');
+var helpers = require('./helpers.js');
+
+var script$2 = {
+  name: 'BSliderThumb',
+  components: _rollupPluginBabelHelpers._defineProperty({}, Tooltip.Tooltip.name, Tooltip.Tooltip),
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: ''
+    },
+    tooltip: {
+      type: Boolean,
+      default: true
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    customFormatter: Function,
+    format: {
+      type: String,
+      default: 'raw',
+      validator: function validator(value) {
+        return ['raw', 'percent'].indexOf(value) >= 0;
+      }
+    },
+    locale: {
+      type: [String, Array],
+      default: function _default() {
+        return config.config.defaultLocale;
+      }
+    },
+    tooltipAlways: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      isFocused: false,
+      dragging: false,
+      startX: 0,
+      startPosition: 0,
+      newPosition: null,
+      oldValue: this.value
+    };
+  },
+  computed: {
+    disabled: function disabled() {
+      return this.$parent.disabled;
+    },
+    max: function max() {
+      return this.$parent.max;
+    },
+    min: function min() {
+      return this.$parent.min;
+    },
+    step: function step() {
+      return this.$parent.step;
+    },
+    precision: function precision() {
+      return this.$parent.precision;
+    },
+    currentPosition: function currentPosition() {
+      return "".concat((this.value - this.min) / (this.max - this.min) * 100, "%");
+    },
+    wrapperStyle: function wrapperStyle() {
+      return {
+        left: this.currentPosition
+      };
+    },
+    formattedValue: function formattedValue() {
+      if (typeof this.customFormatter !== 'undefined') {
+        return this.customFormatter(this.value);
+      }
+      if (this.format === 'percent') {
+        return new Intl.NumberFormat(this.locale, {
+          style: 'percent'
+        }).format((this.value - this.min) / (this.max - this.min));
+      }
+      return new Intl.NumberFormat(this.locale).format(this.value);
+    }
+  },
+  methods: {
+    onFocus: function onFocus() {
+      this.isFocused = true;
+    },
+    onBlur: function onBlur() {
+      this.isFocused = false;
+    },
+    onButtonDown: function onButtonDown(event) {
+      if (this.disabled) return;
+      event.preventDefault();
+      this.onDragStart(event);
+      if (typeof window !== 'undefined') {
+        document.addEventListener('mousemove', this.onDragging);
+        document.addEventListener('touchmove', this.onDragging);
+        document.addEventListener('mouseup', this.onDragEnd);
+        document.addEventListener('touchend', this.onDragEnd);
+        document.addEventListener('contextmenu', this.onDragEnd);
+      }
+    },
+    onLeftKeyDown: function onLeftKeyDown() {
+      if (this.disabled || this.value === this.min) return;
+      this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;
+      this.setPosition(this.newPosition);
+      this.$parent.emitValue('change');
+    },
+    onRightKeyDown: function onRightKeyDown() {
+      if (this.disabled || this.value === this.max) return;
+      this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;
+      this.setPosition(this.newPosition);
+      this.$parent.emitValue('change');
+    },
+    onHomeKeyDown: function onHomeKeyDown() {
+      if (this.disabled || this.value === this.min) return;
+      this.newPosition = 0;
+      this.setPosition(this.newPosition);
+      this.$parent.emitValue('change');
+    },
+    onEndKeyDown: function onEndKeyDown() {
+      if (this.disabled || this.value === this.max) return;
+      this.newPosition = 100;
+      this.setPosition(this.newPosition);
+      this.$parent.emitValue('change');
+    },
+    onDragStart: function onDragStart(event) {
+      this.dragging = true;
+      this.$emit('dragstart');
+      if (event.type === 'touchstart') {
+        event.clientX = event.touches[0].clientX;
+      }
+      this.startX = event.clientX;
+      this.startPosition = parseFloat(this.currentPosition);
+      this.newPosition = this.startPosition;
+    },
+    onDragging: function onDragging(event) {
+      if (this.dragging) {
+        if (event.type === 'touchmove') {
+          event.clientX = event.touches[0].clientX;
+        }
+        var diff = (event.clientX - this.startX) / this.$parent.sliderSize() * 100;
+        this.newPosition = this.startPosition + diff;
+        this.setPosition(this.newPosition);
+      }
+    },
+    onDragEnd: function onDragEnd() {
+      this.dragging = false;
+      this.$emit('dragend');
+      if (this.value !== this.oldValue) {
+        this.$parent.emitValue('change');
+      }
+      this.setPosition(this.newPosition);
+      if (typeof window !== 'undefined') {
+        document.removeEventListener('mousemove', this.onDragging);
+        document.removeEventListener('touchmove', this.onDragging);
+        document.removeEventListener('mouseup', this.onDragEnd);
+        document.removeEventListener('touchend', this.onDragEnd);
+        document.removeEventListener('contextmenu', this.onDragEnd);
+      }
+    },
+    setPosition: function setPosition(percent) {
+      if (percent === null || isNaN(percent)) return;
+      if (percent < 0) {
+        percent = 0;
+      } else if (percent > 100) {
+        percent = 100;
+      }
+      var stepLength = 100 / ((this.max - this.min) / this.step);
+      var steps = Math.round(percent / stepLength);
+      var value = steps * stepLength / 100 * (this.max - this.min) + this.min;
+      value = parseFloat(value.toFixed(this.precision));
+      this.$emit('input', value);
+      if (!this.dragging && value !== this.oldValue) {
+        this.oldValue = value;
+      }
+    }
+  },
+  beforeDestroy: function beforeDestroy() {
+    document.removeEventListener('mousemove', this.onDragging);
+    document.removeEventListener('touchmove', this.onDragging);
+    document.removeEventListener('mouseup', this.onDragEnd);
+    document.removeEventListener('touchend', this.onDragEnd);
+    document.removeEventListener('contextmenu', this.onDragEnd);
+  }
+};
+
+/* script */
+const __vue_script__$2 = script$2;
+
+/* template */
+var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"b-slider-thumb-wrapper",class:{ 'is-dragging': _vm.dragging, 'has-indicator': _vm.indicator},style:(_vm.wrapperStyle)},[_c('b-tooltip',{attrs:{"label":_vm.formattedValue,"type":_vm.type,"always":_vm.dragging || _vm.isFocused || _vm.tooltipAlways,"active":!_vm.disabled && _vm.tooltip}},[_c('div',_vm._b({staticClass:"b-slider-thumb",attrs:{"tabindex":_vm.disabled ? false : 0},on:{"mousedown":_vm.onButtonDown,"touchstart":_vm.onButtonDown,"focus":_vm.onFocus,"blur":_vm.onBlur,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }$event.preventDefault();return _vm.onLeftKeyDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }$event.preventDefault();return _vm.onRightKeyDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onLeftKeyDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onRightKeyDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.preventDefault();return _vm.onHomeKeyDown($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.preventDefault();return _vm.onEndKeyDown($event)}]}},'div',_vm.$attrs,false),[(_vm.indicator)?_c('span',[_vm._v(_vm._s(_vm.formattedValue))]):_vm._e()])])],1)};
+var __vue_staticRenderFns__$2 = [];
+
+  /* style */
+  const __vue_inject_styles__$2 = undefined;
+  /* scoped */
+  const __vue_scope_id__$2 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$2 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$2 = /*#__PURE__*/plugins.normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+  var SliderThumb = __vue_component__$2;
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+var script$1 = {
+  name: 'BSliderTick',
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    position: function position() {
+      var pos = (this.value - this.$parent.min) / (this.$parent.max - this.$parent.min) * 100;
+      return pos >= 0 && pos <= 100 ? pos : 0;
+    },
+    hidden: function hidden() {
+      return this.value === this.$parent.min || this.value === this.$parent.max;
+    }
+  },
+  methods: {
+    getTickStyle: function getTickStyle(position) {
+      return {
+        'left': position + '%'
+      };
+    }
+  },
+  created: function created() {
+    if (!this.$parent.$data._isSlider) {
+      this.$destroy();
+      throw new Error('You should wrap bSliderTick on a bSlider');
+    }
+  }
+};
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"b-slider-tick",class:{ 'is-tick-hidden': _vm.hidden },style:(_vm.getTickStyle(_vm.position))},[(_vm.$slots.default)?_c('span',{staticClass:"b-slider-tick-label"},[_vm._t("default")],2):_vm._e()])};
+var __vue_staticRenderFns__$1 = [];
+
+  /* style */
+  const __vue_inject_styles__$1 = undefined;
+  /* scoped */
+  const __vue_scope_id__$1 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1 = /*#__PURE__*/plugins.normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+  var SliderTick = __vue_component__$1;
+
+var script = {
+  name: 'BSlider',
+  components: _rollupPluginBabelHelpers._defineProperty(_rollupPluginBabelHelpers._defineProperty({}, SliderThumb.name, SliderThumb), SliderTick.name, SliderTick),
+  props: {
+    value: {
+      type: [Number, Array],
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    type: {
+      type: String,
+      default: 'is-primary'
+    },
+    size: String,
+    ticks: {
+      type: Boolean,
+      default: false
+    },
+    tooltip: {
+      type: Boolean,
+      default: true
+    },
+    tooltipType: String,
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+    customFormatter: Function,
+    ariaLabel: [String, Array],
+    biggerSliderFocus: {
+      type: Boolean,
+      default: false
+    },
+    indicator: {
+      type: Boolean,
+      default: false
+    },
+    format: {
+      type: String,
+      default: 'raw',
+      validator: function validator(value) {
+        return ['raw', 'percent'].indexOf(value) >= 0;
+      }
+    },
+    locale: {
+      type: [String, Array],
+      default: function _default() {
+        return config.config.defaultLocale;
+      }
+    },
+    tooltipAlways: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      value1: null,
+      value2: null,
+      dragging: false,
+      isRange: false,
+      _isSlider: true,
+      // Used by Thumb and Tick
+      timeOutID: null
+    };
+  },
+  computed: {
+    newTooltipType: function newTooltipType() {
+      return this.tooltipType ? this.tooltipType : this.type;
+    },
+    tickValues: function tickValues() {
+      if (!this.ticks || this.min > this.max || this.step === 0) return [];
+      var result = [];
+      for (var i = this.min + this.step; i < this.max; i = i + this.step) {
+        result.push(i);
+      }
+      return result;
+    },
+    minValue: function minValue() {
+      return Math.min(this.value1, this.value2);
+    },
+    maxValue: function maxValue() {
+      return Math.max(this.value1, this.value2);
+    },
+    barSize: function barSize() {
+      return this.isRange ? "".concat(100 * (this.maxValue - this.minValue) / (this.max - this.min), "%") : "".concat(100 * (this.value1 - this.min) / (this.max - this.min), "%");
+    },
+    barStart: function barStart() {
+      return this.isRange ? "".concat(100 * (this.minValue - this.min) / (this.max - this.min), "%") : '0%';
+    },
+    precision: function precision() {
+      var precisions = [this.min, this.max, this.step].map(function (item) {
+        var decimal = ('' + item).split('.')[1];
+        return decimal ? decimal.length : 0;
+      });
+      return Math.max.apply(Math, _rollupPluginBabelHelpers._toConsumableArray(precisions));
+    },
+    barStyle: function barStyle() {
+      return {
+        width: this.barSize,
+        left: this.barStart
+      };
+    },
+    rootClasses: function rootClasses() {
+      return {
+        'is-rounded': this.rounded,
+        'is-dragging': this.dragging,
+        'is-disabled': this.disabled,
+        'slider-focus': this.biggerSliderFocus
+      };
+    }
+  },
+  watch: {
+    /**
+    * When v-model is changed set the new active step.
+    */
+    value: function value(_value) {
+      this.setValues(_value);
+    },
+    value1: function value1() {
+      this.onInternalValueUpdate();
+    },
+    value2: function value2() {
+      this.onInternalValueUpdate();
+    },
+    min: function min() {
+      this.setValues(this.value);
+    },
+    max: function max() {
+      this.setValues(this.value);
+    }
+  },
+  methods: {
+    setValues: function setValues(newValue) {
+      if (this.min > this.max) {
+        return;
+      }
+      if (Array.isArray(newValue)) {
+        this.isRange = true;
+        var smallValue = typeof newValue[0] !== 'number' || isNaN(newValue[0]) ? this.min : helpers.bound(newValue[0], this.min, this.max);
+        var largeValue = typeof newValue[1] !== 'number' || isNaN(newValue[1]) ? this.max : helpers.bound(newValue[1], this.min, this.max);
+        this.value1 = this.isThumbReversed ? largeValue : smallValue;
+        this.value2 = this.isThumbReversed ? smallValue : largeValue;
+      } else {
+        this.isRange = false;
+        this.value1 = isNaN(newValue) ? this.min : helpers.bound(newValue, this.min, this.max);
+        this.value2 = null;
+      }
+    },
+    onInternalValueUpdate: function onInternalValueUpdate() {
+      if (this.isRange) {
+        this.isThumbReversed = this.value1 > this.value2;
+      }
+      if (!this.lazy || !this.dragging) {
+        this.emitValue('input');
+      }
+      if (this.dragging) {
+        this.emitValue('dragging');
+      }
+    },
+    sliderSize: function sliderSize() {
+      return this.$refs.slider.getBoundingClientRect().width;
+    },
+    onSliderClick: function onSliderClick(event) {
+      if (this.disabled || this.isTrackClickDisabled) return;
+      var sliderOffsetLeft = this.$refs.slider.getBoundingClientRect().left;
+      var percent = (event.clientX - sliderOffsetLeft) / this.sliderSize() * 100;
+      var targetValue = this.min + percent * (this.max - this.min) / 100;
+      var diffFirst = Math.abs(targetValue - this.value1);
+      if (!this.isRange) {
+        if (diffFirst < this.step / 2) return;
+        this.$refs.button1.setPosition(percent);
+      } else {
+        var diffSecond = Math.abs(targetValue - this.value2);
+        if (diffFirst <= diffSecond) {
+          if (diffFirst < this.step / 2) return;
+          this.$refs['button1'].setPosition(percent);
+        } else {
+          if (diffSecond < this.step / 2) return;
+          this.$refs['button2'].setPosition(percent);
+        }
+      }
+      this.emitValue('change');
+    },
+    onDragStart: function onDragStart() {
+      this.dragging = true;
+      this.$emit('dragstart');
+    },
+    onDragEnd: function onDragEnd() {
+      var _this = this;
+      this.isTrackClickDisabled = true;
+      this.timeOutID = setTimeout(function () {
+        // avoid triggering onSliderClick after dragend
+        _this.isTrackClickDisabled = false;
+      }, 0);
+      this.dragging = false;
+      this.$emit('dragend');
+      if (this.lazy) {
+        this.emitValue('input');
+      }
+    },
+    emitValue: function emitValue(type) {
+      this.$emit(type, this.isRange ? [this.minValue, this.maxValue] : this.value1);
+    }
+  },
+  created: function created() {
+    this.isThumbReversed = false;
+    this.isTrackClickDisabled = false;
+    this.setValues(this.value);
+  },
+  beforeDestroy: function beforeDestroy() {
+    clearTimeout(this.timeOutID);
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"b-slider",class:[_vm.size, _vm.type, _vm.rootClasses ],on:{"click":_vm.onSliderClick}},[_c('div',{ref:"slider",staticClass:"b-slider-track"},[_c('div',{staticClass:"b-slider-fill",style:(_vm.barStyle)}),(_vm.ticks)?_vm._l((_vm.tickValues),function(val,key){return _c('b-slider-tick',{key:key,attrs:{"value":val}})}):_vm._e(),_vm._t("default"),_c('b-slider-thumb',{ref:"button1",attrs:{"tooltip-always":_vm.tooltipAlways,"type":_vm.newTooltipType,"tooltip":_vm.tooltip,"custom-formatter":_vm.customFormatter,"indicator":_vm.indicator,"format":_vm.format,"locale":_vm.locale,"role":"slider","aria-valuenow":_vm.value1,"aria-valuemin":_vm.min,"aria-valuemax":_vm.max,"aria-orientation":"horizontal","aria-label":Array.isArray(_vm.ariaLabel) ? _vm.ariaLabel[0] : _vm.ariaLabel,"aria-disabled":_vm.disabled},on:{"dragstart":_vm.onDragStart,"dragend":_vm.onDragEnd},model:{value:(_vm.value1),callback:function ($$v) {_vm.value1=$$v;},expression:"value1"}}),(_vm.isRange)?_c('b-slider-thumb',{ref:"button2",attrs:{"tooltip-always":_vm.tooltipAlways,"type":_vm.newTooltipType,"tooltip":_vm.tooltip,"custom-formatter":_vm.customFormatter,"indicator":_vm.indicator,"format":_vm.format,"locale":_vm.locale,"role":"slider","aria-valuenow":_vm.value2,"aria-valuemin":_vm.min,"aria-valuemax":_vm.max,"aria-orientation":"horizontal","aria-label":Array.isArray(_vm.ariaLabel) ? _vm.ariaLabel[1] : '',"aria-disabled":_vm.disabled},on:{"dragstart":_vm.onDragStart,"dragend":_vm.onDragEnd},model:{value:(_vm.value2),callback:function ($$v) {_vm.value2=$$v;},expression:"value2"}}):_vm._e()],2)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/plugins.normalizeComponent(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+  var Slider = __vue_component__;
+
+var Plugin = {
+  install: function install(Vue) {
+    plugins.registerComponent(Vue, Slider);
+    plugins.registerComponent(Vue, SliderTick);
+  }
+};
+plugins.use(Plugin);
+
+exports.BSlider = Slider;
+exports.BSliderTick = SliderTick;
+exports["default"] = Plugin;