buefy 0.8.1 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Buefy Changelog
 
+## 0.8.2
+
+* Add range selection using ``range`` prop to datepicker (thanks @afifsohaili)
+
+### Fixes
+
+* Fix #1624 autosizing slider into container (thanks @yxngl)
+* Fix #1625 Buefy global name in UMD format
+* Fix #1626 include CSS files as side effects (thanks @modularcoder)
+
 ## 0.8.1
 
 ### New features

package/dist/buefy.css

@@ -1,4 +1,4 @@
-/*! Buefy v0.8.1 | MIT License | github.com/buefy/buefy */
+/*! Buefy v0.8.2 | MIT License | github.com/buefy/buefy */
 .is-noscroll {
   position: fixed;
   overflow-y: hidden;
@@ -11762,11 +11762,50 @@ label.panel-block:hover {
   cursor: pointer;
 }
 
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable.is-within-hovered-range.is-first-hovered {
+  background-color: #7a7a7a;
+  color: #dbdbdb;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable.is-within-hovered-range.is-within-hovered {
+  background-color: whitesmoke;
+  color: #0a0a0a;
+  border-radius: 0;
+}
+
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selectable.is-within-hovered-range.is-last-hovered {
+  background-color: #7a7a7a;
+  color: #dbdbdb;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
 .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected {
   background-color: #7957d5;
   color: white;
 }
 
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-first-selected {
+  background-color: #7957d5;
+  color: white;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-within-selected {
+  background-color: rgba(121, 87, 213, 0.5);
+  border-radius: 0;
+}
+
+.datepicker .datepicker-table .datepicker-body .datepicker-cell.is-selected.is-last-selected {
+  background-color: #7957d5;
+  color: white;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
 .datepicker .datepicker-table .datepicker-body .datepicker-cell.is-nearby:not(.is-selected) {
   color: #b5b5b5;
 }

package/dist/buefy.js

@@ -1,8 +1,8 @@
-/*! Buefy v0.8.1 | MIT License | github.com/buefy/buefy */
+/*! Buefy v0.8.2 | MIT License | github.com/buefy/buefy */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
-  (global = global || self, factory(global.buefy = {}, global.Vue));
+  (global = global || self, factory(global.Buefy = {}, global.Vue));
 }(this, function (exports, Vue) { 'use strict';
 
   Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
@@ -3342,10 +3342,14 @@
   //
   //
   //
+  //
   var script$e = {
     name: 'BDatepickerTableRow',
     props: {
-      selectedDate: Date,
+      selectedDate: {
+        type: [Date, Array]
+      },
+      hoveredDateRange: Array,
       week: {
         type: Array,
         required: true
@@ -3512,17 +3516,45 @@
             return false;
           }
 
+          if (Array.isArray(dateTwo)) {
+            return dateTwo.some(function (date) {
+              return dateOne.getDate() === date.getDate() && dateOne.getFullYear() === date.getFullYear() && dateOne.getMonth() === date.getMonth();
+            });
+          }
+
           return dateOne.getDate() === dateTwo.getDate() && dateOne.getFullYear() === dateTwo.getFullYear() && dateOne.getMonth() === dateTwo.getMonth();
         }
 
+        function dateWithin(dateOne, dates) {
+          if (!Array.isArray(dates)) {
+            return false;
+          }
+
+          return dateOne > dates[0] && dateOne < dates[1];
+        }
+
         return {
-          'is-selected': dateMatch(day, this.selectedDate),
+          'is-selected': dateMatch(day, this.selectedDate) || dateWithin(day, this.selectedDate),
+          'is-first-selected': dateMatch(day, Array.isArray(this.selectedDate) && this.selectedDate[0]),
+          'is-within-selected': dateWithin(day, this.selectedDate),
+          'is-last-selected': dateMatch(day, Array.isArray(this.selectedDate) && this.selectedDate[1]),
+          'is-within-hovered-range': this.hoveredDateRange && this.hoveredDateRange.length === 2 && (dateMatch(day, this.hoveredDateRange) || dateWithin(day, this.hoveredDateRange)),
+          'is-first-hovered': dateMatch(day, Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[0]),
+          'is-within-hovered': dateWithin(day, this.hoveredDateRange),
+          'is-last-hovered': dateMatch(day, Array.isArray(this.hoveredDateRange) && this.hoveredDateRange[1]),
           'is-today': dateMatch(day, this.dateCreator()),
           'is-selectable': this.selectableDate(day) && !this.disabled,
           'is-unselectable': !this.selectableDate(day) || this.disabled,
           'is-invisible': !this.nearbyMonthDays && day.getMonth() !== this.month,
           'is-nearby': this.nearbySelectableMonthDays && day.getMonth() !== this.month
         };
+      },
+      setRangeHoverEndDate: function setRangeHoverEndDate(day) {
+        var isRangeInput = Array.isArray(this.selectedDate);
+
+        if (isRangeInput) {
+          this.$emit('rangeHoverEndDate', day);
+        }
       }
     }
   };
@@ -3531,7 +3563,7 @@
   const __vue_script__$e = script$e;
 
   /* template */
-  var __vue_render__$d = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"datepicker-row"},[(_vm.showWeekNumber)?_c('a',{staticClass:"datepicker-cell is-week-number"},[_vm._v("\n        "+_vm._s(_vm.getWeekNumber(_vm.week[6]))+"\n    ")]):_vm._e(),_vm._v(" "),_vm._l((_vm.week),function(day,index){return [(_vm.selectableDate(day) && !_vm.disabled)?_c('a',{key:index,staticClass:"datepicker-cell",class:[_vm.classObject(day), {'has-event': _vm.eventsDateMatch(day)}, _vm.indicators],attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.emitChosenDate(day);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.emitChosenDate(day);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.emitChosenDate(day);}]}},[_vm._v("\n            "+_vm._s(day.getDate())+"\n            "),(_vm.eventsDateMatch(day))?_c('div',{staticClass:"events"},_vm._l((_vm.eventsDateMatch(day)),function(event,index){return _c('div',{key:index,staticClass:"event",class:event.type})})):_vm._e()]):_c('div',{key:index,staticClass:"datepicker-cell",class:_vm.classObject(day)},[_vm._v("\n            "+_vm._s(day.getDate())+"\n        ")])]})],2)};
+  var __vue_render__$d = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"datepicker-row"},[(_vm.showWeekNumber)?_c('a',{staticClass:"datepicker-cell is-week-number"},[_vm._v("\n        "+_vm._s(_vm.getWeekNumber(_vm.week[6]))+"\n    ")]):_vm._e(),_vm._v(" "),_vm._l((_vm.week),function(day,index){return [(_vm.selectableDate(day) && !_vm.disabled)?_c('a',{key:index,staticClass:"datepicker-cell",class:[_vm.classObject(day), {'has-event': _vm.eventsDateMatch(day)}, _vm.indicators],attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.emitChosenDate(day);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.emitChosenDate(day);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.emitChosenDate(day);}],"mouseenter":function($event){_vm.setRangeHoverEndDate(day);}}},[_vm._v("\n            "+_vm._s(day.getDate())+"\n            "),(_vm.eventsDateMatch(day))?_c('div',{staticClass:"events"},_vm._l((_vm.eventsDateMatch(day)),function(event,index){return _c('div',{key:index,staticClass:"event",class:event.type})})):_vm._e()]):_c('div',{key:index,staticClass:"datepicker-cell",class:_vm.classObject(day)},[_vm._v("\n            "+_vm._s(day.getDate())+"\n        ")])]})],2)};
   var __vue_staticRenderFns__$d = [];
 
     /* style */
@@ -3559,11 +3591,17 @@
       undefined
     );
 
+  var isDefined = function isDefined(d) {
+    return d !== undefined;
+  };
+
   var script$f = {
     name: 'BDatepickerTable',
     components: _defineProperty({}, DatepickerTableRow.name, DatepickerTableRow),
     props: {
-      value: Date,
+      value: {
+        type: [Date, Array]
+      },
       dayNames: Array,
       monthNames: Array,
       firstDayOfWeek: Number,
@@ -3590,7 +3628,15 @@
         default: function _default() {
           return 4;
         }
-      }
+      },
+      range: Boolean
+    },
+    data: function data() {
+      return {
+        selectedBeginDate: undefined,
+        selectedEndDate: undefined,
+        hoveredEndDate: undefined
+      };
     },
     computed: {
       visibleDayNames: function visibleDayNames() {
@@ -3665,6 +3711,21 @@
         }
 
         return weeksInThisMonth;
+      },
+      hoveredDateRange: function hoveredDateRange() {
+        if (!this.range) {
+          return [];
+        }
+
+        if (!isNaN(this.selectedEndDate)) {
+          return [];
+        }
+
+        if (this.hoveredEndDate < this.selectedBeginDate) {
+          return [this.hoveredEndDate, this.selectedBeginDate].filter(isDefined);
+        }
+
+        return [this.selectedBeginDate, this.hoveredEndDate].filter(isDefined);
       }
     },
     methods: {
@@ -3672,7 +3733,34 @@
       * Emit input event with selected date as payload for v-model in parent
       */
       updateSelectedDate: function updateSelectedDate(date) {
-        this.$emit('input', date);
+        if (!this.range) {
+          this.$emit('input', date);
+        } else {
+          this.handleSelectRangeDate(date);
+        }
+      },
+
+      /*
+      * If both begin and end dates are set, reset the end date and set the begin date.
+      * If only begin date is selected, emit an array of the begin date and the new date.
+      * If not set, only set the begin date.
+      */
+      handleSelectRangeDate: function handleSelectRangeDate(date) {
+        if (this.selectedBeginDate && this.selectedEndDate) {
+          this.selectedBeginDate = date;
+          this.selectedEndDate = undefined;
+        } else if (this.selectedBeginDate && !this.selectedEndDate) {
+          if (this.selectedBeginDate > date) {
+            this.selectedEndDate = this.selectedBeginDate;
+            this.selectedBeginDate = date;
+          } else {
+            this.selectedEndDate = date;
+          }
+
+          this.$emit('input', [this.selectedBeginDate, this.selectedEndDate]);
+        } else {
+          this.selectedBeginDate = date;
+        }
       },
 
       /*
@@ -3712,6 +3800,9 @@
             return weekDate.getTime() === timed;
           });
         });
+      },
+      setRangeHoverEndDate: function setRangeHoverEndDate(day) {
+        this.hoveredEndDate = day;
       }
     }
   };
@@ -3720,7 +3811,7 @@
   const __vue_script__$f = script$f;
 
   /* template */
-  var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"datepicker-table"},[_c('header',{staticClass:"datepicker-header"},_vm._l((_vm.visibleDayNames),function(day,index){return _c('div',{key:index,staticClass:"datepicker-cell"},[_vm._v("\n            "+_vm._s(day)+"\n        ")])})),_vm._v(" "),_c('div',{staticClass:"datepicker-body",class:{'has-events':_vm.hasEvents}},_vm._l((_vm.weeksInThisMonth),function(week,index){return _c('b-datepicker-table-row',{key:index,attrs:{"selected-date":_vm.value,"week":week,"month":_vm.focused.month,"min-date":_vm.minDate,"max-date":_vm.maxDate,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.eventsInThisWeek(week),"indicators":_vm.indicators,"date-creator":_vm.dateCreator,"nearby-month-days":_vm.nearbyMonthDays,"nearby-selectable-month-days":_vm.nearbySelectableMonthDays,"show-week-number":_vm.showWeekNumber,"first-day-of-week":_vm.firstDayOfWeek,"rules-for-first-week":_vm.rulesForFirstWeek},on:{"select":_vm.updateSelectedDate}})}))])};
+  var __vue_render__$e = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:"datepicker-table"},[_c('header',{staticClass:"datepicker-header"},_vm._l((_vm.visibleDayNames),function(day,index){return _c('div',{key:index,staticClass:"datepicker-cell"},[_vm._v("\n            "+_vm._s(day)+"\n        ")])})),_vm._v(" "),_c('div',{staticClass:"datepicker-body",class:{'has-events':_vm.hasEvents}},_vm._l((_vm.weeksInThisMonth),function(week,index){return _c('b-datepicker-table-row',{key:index,attrs:{"selected-date":_vm.value,"week":week,"month":_vm.focused.month,"min-date":_vm.minDate,"max-date":_vm.maxDate,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.eventsInThisWeek(week),"indicators":_vm.indicators,"date-creator":_vm.dateCreator,"nearby-month-days":_vm.nearbyMonthDays,"nearby-selectable-month-days":_vm.nearbySelectableMonthDays,"show-week-number":_vm.showWeekNumber,"first-day-of-week":_vm.firstDayOfWeek,"rules-for-first-week":_vm.rulesForFirstWeek,"range":_vm.range,"hovered-date-range":_vm.hoveredDateRange},on:{"select":_vm.updateSelectedDate,"rangeHoverEndDate":_vm.setRangeHoverEndDate}})}))])};
   var __vue_staticRenderFns__$e = [];
 
     /* style */
@@ -3983,12 +4074,15 @@
   var _components$1;
 
   var defaultDateFormatter = function defaultDateFormatter(date, vm) {
-    var yyyyMMdd = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
-    var d = new Date(yyyyMMdd);
-    return !vm.isTypeMonth ? d.toLocaleDateString() : d.toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: '2-digit'
-    });
+    var targetDates = Array.isArray(date) ? date : [date];
+    return targetDates.map(function (date) {
+      var yyyyMMdd = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
+      var d = new Date(yyyyMMdd);
+      return !vm.isTypeMonth ? d.toLocaleDateString() : d.toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: '2-digit'
+      });
+    }).join(' - ');
   };
 
   var defaultDateParser = function defaultDateParser(date, vm) {
@@ -4013,7 +4107,9 @@
     mixins: [FormElementMixin],
     inheritAttrs: false,
     props: {
-      value: Date,
+      value: {
+        type: [Date, Array]
+      },
       dayNames: {
         type: Array,
         default: function _default() {
@@ -4137,10 +4233,14 @@
         default: function _default() {
           return 4;
         }
+      },
+      range: {
+        type: Boolean,
+        default: false
       }
     },
     data: function data() {
-      var focusedDate = this.value || this.focusedDate || this.dateCreator();
+      var focusedDate = Array.isArray(this.value) ? this.value[0] : this.value || this.focusedDate || this.dateCreator();
       return {
         dateSelected: this.value,
         focusedDateData: {
@@ -4267,11 +4367,14 @@
       * Format date into string
       */
       formatValue: function formatValue(value) {
-        if (value && !isNaN(value)) {
-          return this.dateFormatter(value, this);
-        } else {
-          return null;
+        if (Array.isArray(value)) {
+          var isArrayWithValidDates = Array.isArray(value) && value.every(function (v) {
+            return !isNaN(v);
+          });
+          return isArrayWithValidDates ? this.dateFormatter(value, this) : null;
         }
+
+        return value && !isNaN(value) ? this.dateFormatter(value, this) : null;
       },
 
       /*
@@ -4354,7 +4457,7 @@
         this.computedValue = date ? new Date(date + ' 00:00:00') : null;
       },
       updateInternalState: function updateInternalState(value) {
-        var currentDate = !value ? this.dateCreator() : value;
+        var currentDate = Array.isArray(value) ? value[0] : !value ? this.dateCreator() : value;
         this.focusedDateData = {
           month: currentDate.getMonth(),
           year: currentDate.getFullYear()
@@ -4406,8 +4509,8 @@
       },
 
       /**
-      * Keypress event that is bound to the document.
-      */
+       * Keypress event that is bound to the document.
+       */
       keyPress: function keyPress(event) {
         // Esc key
         if (this.$refs.dropdown && this.$refs.dropdown.isActive && event.keyCode === 27) {
@@ -4431,7 +4534,7 @@
   const __vue_script__$h = script$h;
 
   /* template */
-  var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"datepicker control",class:[_vm.size, {'is-expanded': _vm.expanded}]},[(!_vm.isMobile || _vm.inline)?_c('b-dropdown',{ref:"dropdown",attrs:{"position":_vm.position,"disabled":_vm.disabled,"inline":_vm.inline}},[(!_vm.inline)?_c('b-input',_vm._b({ref:"input",attrs:{"slot":"trigger","autocomplete":"off","value":_vm.formatValue(_vm.computedValue),"placeholder":_vm.placeholder,"size":_vm.size,"icon":_vm.icon,"icon-pack":_vm.iconPack,"rounded":_vm.rounded,"loading":_vm.loading,"disabled":_vm.disabled,"readonly":!_vm.editable,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":_vm.onBlur},nativeOn:{"click":function($event){_vm.onInputClick($event);},"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.togglePicker(true);},"change":function($event){_vm.onChange($event.target.value);}},slot:"trigger"},'b-input',_vm.$attrs,false)):_vm._e(),_vm._v(" "),_c('b-dropdown-item',{attrs:{"disabled":_vm.disabled,"custom":""}},[_c('header',{staticClass:"datepicker-header"},[(_vm.$slots.header !== undefined && _vm.$slots.header.length)?[_vm._t("header")]:_c('div',{staticClass:"pagination field is-centered",class:_vm.size},[_c('a',{directives:[{name:"show",rawName:"v-show",value:(!_vm.showPrev && !_vm.disabled),expression:"!showPrev && !disabled"}],staticClass:"pagination-previous",attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.prev($event);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.prev($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.prev($event);}]}},[_c('b-icon',{attrs:{"icon":"chevron-left","pack":_vm.iconPack,"both":"","type":"is-primary is-clickable"}})],1),_vm._v(" "),_c('a',{directives:[{name:"show",rawName:"v-show",value:(!_vm.showNext && !_vm.disabled),expression:"!showNext && !disabled"}],staticClass:"pagination-next",attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.next($event);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.next($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.next($event);}]}},[_c('b-icon',{attrs:{"icon":"chevron-right","pack":_vm.iconPack,"both":"","type":"is-primary is-clickable"}})],1),_vm._v(" "),_c('div',{staticClass:"pagination-list"},[_c('b-field',[(!_vm.isTypeMonth)?_c('b-select',{attrs:{"disabled":_vm.disabled,"size":_vm.size},model:{value:(_vm.focusedDateData.month),callback:function ($$v) {_vm.$set(_vm.focusedDateData, "month", $$v);},expression:"focusedDateData.month"}},_vm._l((_vm.monthNames),function(month,index){return _c('option',{key:month,domProps:{"value":index}},[_vm._v("\n                                    "+_vm._s(month)+"\n                                ")])})):_vm._e(),_vm._v(" "),_c('b-select',{attrs:{"disabled":_vm.disabled,"size":_vm.size},model:{value:(_vm.focusedDateData.year),callback:function ($$v) {_vm.$set(_vm.focusedDateData, "year", $$v);},expression:"focusedDateData.year"}},_vm._l((_vm.listOfYears),function(year){return _c('option',{key:year,domProps:{"value":year}},[_vm._v("\n                                    "+_vm._s(year)+"\n                                ")])}))],1)],1)])],2),_vm._v(" "),(!_vm.isTypeMonth)?_c('div',{staticClass:"datepicker-content"},[_c('b-datepicker-table',{attrs:{"day-names":_vm.dayNames,"month-names":_vm.monthNames,"first-day-of-week":_vm.firstDayOfWeek,"rules-for-first-week":_vm.rulesForFirstWeek,"min-date":_vm.minDate,"max-date":_vm.maxDate,"focused":_vm.focusedDateData,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.events,"indicators":_vm.indicators,"date-creator":_vm.dateCreator,"type-month":_vm.isTypeMonth,"nearby-month-days":_vm.nearbyMonthDays,"nearby-selectable-month-days":_vm.nearbySelectableMonthDays,"show-week-number":_vm.showWeekNumber},on:{"close":function($event){_vm.togglePicker(false);}},model:{value:(_vm.computedValue),callback:function ($$v) {_vm.computedValue=$$v;},expression:"computedValue"}})],1):_c('div',[_c('b-datepicker-month',{attrs:{"month-names":_vm.monthNames,"min-date":_vm.minDate,"max-date":_vm.maxDate,"focused":_vm.focusedDateData,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.events,"indicators":_vm.indicators,"date-creator":_vm.dateCreator},on:{"close":function($event){_vm.togglePicker(false);}},model:{value:(_vm.computedValue),callback:function ($$v) {_vm.computedValue=$$v;},expression:"computedValue"}})],1),_vm._v(" "),(_vm.$slots.default !== undefined && _vm.$slots.default.length)?_c('footer',{staticClass:"datepicker-footer"},[_vm._t("default")],2):_vm._e()])],1):_c('b-input',_vm._b({ref:"input",attrs:{"type":!_vm.isTypeMonth ? 'date' : 'month',"autocomplete":"off","value":_vm.formatNative(_vm.computedValue),"placeholder":_vm.placeholder,"size":_vm.size,"icon":_vm.icon,"icon-pack":_vm.iconPack,"loading":_vm.loading,"max":_vm.formatNative(_vm.maxDate),"min":_vm.formatNative(_vm.minDate),"disabled":_vm.disabled,"readonly":false,"show-week-number":_vm.showWeekNumber,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":_vm.onBlur},nativeOn:{"change":function($event){_vm.onChangeNativePicker($event);}}},'b-input',_vm.$attrs,false))],1)};
+  var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"datepicker control",class:[_vm.size, {'is-expanded': _vm.expanded}]},[(!_vm.isMobile || _vm.inline)?_c('b-dropdown',{ref:"dropdown",attrs:{"position":_vm.position,"disabled":_vm.disabled,"inline":_vm.inline}},[(!_vm.inline)?_c('b-input',_vm._b({ref:"input",attrs:{"slot":"trigger","autocomplete":"off","value":_vm.formatValue(_vm.computedValue),"placeholder":_vm.placeholder,"size":_vm.size,"icon":_vm.icon,"icon-pack":_vm.iconPack,"rounded":_vm.rounded,"loading":_vm.loading,"disabled":_vm.disabled,"readonly":!_vm.editable,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":_vm.onBlur},nativeOn:{"click":function($event){_vm.onInputClick($event);},"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.togglePicker(true);},"change":function($event){_vm.onChange($event.target.value);}},slot:"trigger"},'b-input',_vm.$attrs,false)):_vm._e(),_vm._v(" "),_c('b-dropdown-item',{attrs:{"disabled":_vm.disabled,"custom":""}},[_c('header',{staticClass:"datepicker-header"},[(_vm.$slots.header !== undefined && _vm.$slots.header.length)?[_vm._t("header")]:_c('div',{staticClass:"pagination field is-centered",class:_vm.size},[_c('a',{directives:[{name:"show",rawName:"v-show",value:(!_vm.showPrev && !_vm.disabled),expression:"!showPrev && !disabled"}],staticClass:"pagination-previous",attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.prev($event);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.prev($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.prev($event);}]}},[_c('b-icon',{attrs:{"icon":"chevron-left","pack":_vm.iconPack,"both":"","type":"is-primary is-clickable"}})],1),_vm._v(" "),_c('a',{directives:[{name:"show",rawName:"v-show",value:(!_vm.showNext && !_vm.disabled),expression:"!showNext && !disabled"}],staticClass:"pagination-next",attrs:{"role":"button","href":"#","disabled":_vm.disabled},on:{"click":function($event){$event.preventDefault();_vm.next($event);},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.next($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"space",32,$event.key)){ return null; }$event.preventDefault();_vm.next($event);}]}},[_c('b-icon',{attrs:{"icon":"chevron-right","pack":_vm.iconPack,"both":"","type":"is-primary is-clickable"}})],1),_vm._v(" "),_c('div',{staticClass:"pagination-list"},[_c('b-field',[(!_vm.isTypeMonth)?_c('b-select',{attrs:{"disabled":_vm.disabled,"size":_vm.size},model:{value:(_vm.focusedDateData.month),callback:function ($$v) {_vm.$set(_vm.focusedDateData, "month", $$v);},expression:"focusedDateData.month"}},_vm._l((_vm.monthNames),function(month,index){return _c('option',{key:month,domProps:{"value":index}},[_vm._v("\n                                    "+_vm._s(month)+"\n                                ")])})):_vm._e(),_vm._v(" "),_c('b-select',{attrs:{"disabled":_vm.disabled,"size":_vm.size},model:{value:(_vm.focusedDateData.year),callback:function ($$v) {_vm.$set(_vm.focusedDateData, "year", $$v);},expression:"focusedDateData.year"}},_vm._l((_vm.listOfYears),function(year){return _c('option',{key:year,domProps:{"value":year}},[_vm._v("\n                                    "+_vm._s(year)+"\n                                ")])}))],1)],1)])],2),_vm._v(" "),(!_vm.isTypeMonth)?_c('div',{staticClass:"datepicker-content"},[_c('b-datepicker-table',{attrs:{"day-names":_vm.dayNames,"month-names":_vm.monthNames,"first-day-of-week":_vm.firstDayOfWeek,"rules-for-first-week":_vm.rulesForFirstWeek,"min-date":_vm.minDate,"max-date":_vm.maxDate,"focused":_vm.focusedDateData,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.events,"indicators":_vm.indicators,"date-creator":_vm.dateCreator,"type-month":_vm.isTypeMonth,"nearby-month-days":_vm.nearbyMonthDays,"nearby-selectable-month-days":_vm.nearbySelectableMonthDays,"show-week-number":_vm.showWeekNumber,"range":_vm.range},on:{"close":function($event){_vm.togglePicker(false);}},model:{value:(_vm.computedValue),callback:function ($$v) {_vm.computedValue=$$v;},expression:"computedValue"}})],1):_c('div',[_c('b-datepicker-month',{attrs:{"month-names":_vm.monthNames,"min-date":_vm.minDate,"max-date":_vm.maxDate,"focused":_vm.focusedDateData,"disabled":_vm.disabled,"unselectable-dates":_vm.unselectableDates,"unselectable-days-of-week":_vm.unselectableDaysOfWeek,"selectable-dates":_vm.selectableDates,"events":_vm.events,"indicators":_vm.indicators,"date-creator":_vm.dateCreator},on:{"close":function($event){_vm.togglePicker(false);}},model:{value:(_vm.computedValue),callback:function ($$v) {_vm.computedValue=$$v;},expression:"computedValue"}})],1),_vm._v(" "),(_vm.$slots.default !== undefined && _vm.$slots.default.length)?_c('footer',{staticClass:"datepicker-footer"},[_vm._t("default")],2):_vm._e()])],1):_c('b-input',_vm._b({ref:"input",attrs:{"type":!_vm.isTypeMonth ? 'date' : 'month',"autocomplete":"off","value":_vm.formatNative(_vm.computedValue),"placeholder":_vm.placeholder,"size":_vm.size,"icon":_vm.icon,"icon-pack":_vm.iconPack,"loading":_vm.loading,"max":_vm.formatNative(_vm.maxDate),"min":_vm.formatNative(_vm.minDate),"disabled":_vm.disabled,"readonly":false,"show-week-number":_vm.showWeekNumber,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":_vm.onBlur},nativeOn:{"change":function($event){_vm.onChangeNativePicker($event);}}},'b-input',_vm.$attrs,false))],1)};
   var __vue_staticRenderFns__$g = [];
 
     /* style */
@@ -7219,6 +7322,9 @@
           left: this.barStart
         };
       },
+      sliderSize: function sliderSize() {
+        return this.$refs.slider['clientWidth'];
+      },
       rootClasses: function rootClasses() {
         return {
           'is-rounded': this.rounded,
@@ -7298,9 +7404,6 @@
 
         this.emitChange();
       },
-      setSize: function setSize() {
-        this.sliderSize = this.$refs.slider['clientWidth'];
-      },
       emitChange: function emitChange() {
         this.$emit('change', this.isRange ? [this.minValue, this.maxValue] : this.value1);
       }
@@ -7308,18 +7411,6 @@
     created: function created() {
       this.setValues(this.value);
       this.isThumbReversed = false;
-    },
-    mounted: function mounted() {
-      this.setSize();
-
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', this.setSize);
-      }
-    },
-    beforeDestroy: function beforeDestroy() {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', this.setSize);
-      }
     }
   };