buefy 0.7.9 → 0.8.2

package/dist/esm/clockpicker.js

@@ -0,0 +1,443 @@
+import { _ as _defineProperty } from './chunk-d6200087.js';
+import './chunk-e5fce48f.js';
+import './chunk-9e3207cc.js';
+import './chunk-10c85529.js';
+import { I as Icon } from './chunk-e84b4047.js';
+import { _ as __vue_normalize__, r as registerComponent, u as use } from './chunk-cca88db8.js';
+import { I as Input } from './chunk-98e86f40.js';
+import { T as TimepickerMixin } from './chunk-07e19446.js';
+import { D as Dropdown, a as DropdownItem } from './chunk-00e3e67f.js';
+import { F as Field } from './chunk-531b8274.js';
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// These should match the variables in clockpicker.scss
+var indicatorSize = 40;
+var paddingInner = 5;
+var script = {
+  name: 'BClockpickerFace',
+  props: {
+    pickerSize: Number,
+    min: Number,
+    max: Number,
+    double: Boolean,
+    value: Number,
+    faceNumbers: Array,
+    disabledValues: Function
+  },
+  data: function data() {
+    return {
+      isDragging: false,
+      inputValue: this.value,
+      prevAngle: 720
+    };
+  },
+  computed: {
+    /**
+    * How many number indicators are shown on the face
+    */
+    count: function count() {
+      return this.max - this.min + 1;
+    },
+
+    /**
+    * How many number indicators are shown per ring on the face
+    */
+    countPerRing: function countPerRing() {
+      return this.double ? this.count / 2 : this.count;
+    },
+
+    /**
+    * Radius of the clock face
+    */
+    radius: function radius() {
+      return this.pickerSize / 2;
+    },
+
+    /**
+    * Radius of the outer ring of number indicators
+    */
+    outerRadius: function outerRadius() {
+      return this.radius - paddingInner - indicatorSize / 2;
+    },
+
+    /**
+    * Radius of the inner ring of number indicators
+    */
+    innerRadius: function innerRadius() {
+      return Math.max(this.outerRadius * 0.6, this.outerRadius - paddingInner - indicatorSize); // 48px gives enough room for the outer ring of numbers
+    },
+
+    /**
+    * The angle for each selectable value
+    * For hours this ends up being 30 degrees, for minutes 6 degrees
+    */
+    degreesPerUnit: function degreesPerUnit() {
+      return 360 / this.countPerRing;
+    },
+
+    /**
+    * Used for calculating x/y grid location based on degrees
+    */
+    degrees: function degrees() {
+      return this.degreesPerUnit * Math.PI / 180;
+    },
+
+    /**
+    * Calculates the angle the clock hand should be rotated for the
+    * selected value
+    */
+    handRotateAngle: function handRotateAngle() {
+      var currentAngle = this.prevAngle;
+
+      while (currentAngle < 0) {
+        currentAngle += 360;
+      }
+
+      var targetAngle = this.calcHandAngle(this.displayedValue);
+      var degreesDiff = this.shortestDistanceDegrees(currentAngle, targetAngle);
+      var angle = this.prevAngle + degreesDiff;
+      return angle;
+    },
+
+    /**
+    * Determines how long the selector hand is based on if the
+    * selected value is located along the outer or inner ring
+    */
+    handScale: function handScale() {
+      return this.calcHandScale(this.displayedValue);
+    },
+    handStyle: function handStyle() {
+      return {
+        transform: "rotate(".concat(this.handRotateAngle, "deg) scaleY(").concat(this.handScale, ")"),
+        transition: '.3s cubic-bezier(.25,.8,.50,1)'
+      };
+    },
+
+    /**
+    * The value the hand should be pointing at
+    */
+    displayedValue: function displayedValue() {
+      return this.inputValue == null ? this.min : this.inputValue;
+    }
+  },
+  watch: {
+    value: function value(_value) {
+      if (_value !== this.inputValue) {
+        this.prevAngle = this.handRotateAngle;
+      }
+
+      this.inputValue = _value;
+    }
+  },
+  methods: {
+    isDisabled: function isDisabled(value) {
+      return this.disabledValues && this.disabledValues(value);
+    },
+
+    /**
+    * Calculates the distance between two points
+    */
+    euclidean: function euclidean(p0, p1) {
+      var dx = p1.x - p0.x;
+      var dy = p1.y - p0.y;
+      return Math.sqrt(dx * dx + dy * dy);
+    },
+    shortestDistanceDegrees: function shortestDistanceDegrees(start, stop) {
+      var modDiff = (stop - start) % 360;
+      var shortestDistance = 180 - Math.abs(Math.abs(modDiff) - 180);
+      return (modDiff + 360) % 360 < 180 ? shortestDistance * 1 : shortestDistance * -1;
+    },
+
+    /**
+    * Calculates the angle of the line from the center point
+    * to the given point.
+    */
+    coordToAngle: function coordToAngle(center, p1) {
+      var value = 2 * Math.atan2(p1.y - center.y - this.euclidean(center, p1), p1.x - center.x);
+      return Math.abs(value * 180 / Math.PI);
+    },
+
+    /**
+    * Generates the inline style translate() property for a
+    * number indicator, which determines it's location on the
+    * clock face
+    */
+    getNumberTranslate: function getNumberTranslate(value) {
+      var _this$getNumberCoords = this.getNumberCoords(value),
+          x = _this$getNumberCoords.x,
+          y = _this$getNumberCoords.y;
+
+      return "translate(".concat(x, "px, ").concat(y, "px)");
+    },
+
+    /***
+    * Calculates the coordinates on the clock face for a number
+    * indicator value
+    */
+    getNumberCoords: function getNumberCoords(value) {
+      var radius = this.isInnerRing(value) ? this.innerRadius : this.outerRadius;
+      return {
+        x: Math.round(radius * Math.sin((value - this.min) * this.degrees)),
+        y: Math.round(-radius * Math.cos((value - this.min) * this.degrees))
+      };
+    },
+    getFaceNumberClasses: function getFaceNumberClasses(num) {
+      return {
+        'active': num.value === this.displayedValue,
+        'disabled': this.isDisabled(num.value)
+      };
+    },
+
+    /**
+    * Determines if a value resides on the inner ring
+    */
+    isInnerRing: function isInnerRing(value) {
+      return this.double && value - this.min >= this.countPerRing;
+    },
+    calcHandAngle: function calcHandAngle(value) {
+      var angle = this.degreesPerUnit * (value - this.min);
+      if (this.isInnerRing(value)) angle -= 360;
+      return angle;
+    },
+    calcHandScale: function calcHandScale(value) {
+      return this.isInnerRing(value) ? this.innerRadius / this.outerRadius : 1;
+    },
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+      this.isDragging = true;
+      this.onDragMove(e);
+    },
+    onMouseUp: function onMouseUp() {
+      this.isDragging = false;
+
+      if (!this.isDisabled(this.inputValue)) {
+        this.$emit('change', this.inputValue);
+      }
+    },
+    onDragMove: function onDragMove(e) {
+      e.preventDefault();
+      if (!this.isDragging && e.type !== 'click') return;
+
+      var _this$$refs$clock$get = this.$refs.clock.getBoundingClientRect(),
+          width = _this$$refs$clock$get.width,
+          top = _this$$refs$clock$get.top,
+          left = _this$$refs$clock$get.left;
+
+      var _ref = 'touches' in e ? e.touches[0] : e,
+          clientX = _ref.clientX,
+          clientY = _ref.clientY;
+
+      var center = {
+        x: width / 2,
+        y: -width / 2
+      };
+      var coords = {
+        x: clientX - left,
+        y: top - clientY
+      };
+      var handAngle = Math.round(this.coordToAngle(center, coords) + 360) % 360;
+      var insideClick = this.double && this.euclidean(center, coords) < (this.outerRadius + this.innerRadius) / 2 - 16;
+      var value = Math.round(handAngle / this.degreesPerUnit) + this.min + (insideClick ? this.countPerRing : 0); // Necessary to fix edge case when selecting left part of max value
+
+      if (handAngle >= 360 - this.degreesPerUnit / 2) {
+        value = insideClick ? this.max : this.min;
+      }
+
+      this.update(value);
+    },
+    update: function update(value) {
+      if (this.inputValue !== value && !this.isDisabled(value)) {
+        this.prevAngle = this.handRotateAngle;
+        this.inputValue = value;
+        this.$emit('input', value);
+      }
+    }
+  }
+};
+
+/* 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-clockpicker-face",on:{"mousedown":_vm.onMouseDown,"mouseup":_vm.onMouseUp,"mousemove":_vm.onDragMove,"touchstart":_vm.onMouseDown,"touchend":_vm.onMouseUp,"touchmove":_vm.onDragMove}},[_c('div',{ref:"clock",staticClass:"b-clockpicker-face-outer-ring"},[_c('div',{staticClass:"b-clockpicker-face-hand",style:(_vm.handStyle)}),_vm._v(" "),_vm._l((_vm.faceNumbers),function(num,index){return _c('span',{key:index,staticClass:"b-clockpicker-face-number",class:_vm.getFaceNumberClasses(num),style:({ transform: _vm.getNumberTranslate(num.value) })},[_c('span',[_vm._v(_vm._s(num.label))])])})],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 */
+  
+
+  
+  var ClockpickerFace = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    undefined,
+    undefined
+  );
+
+var _components;
+var outerPadding = 12;
+var script$1 = {
+  name: 'BClockpicker',
+  components: (_components = {}, _defineProperty(_components, ClockpickerFace.name, ClockpickerFace), _defineProperty(_components, Input.name, Input), _defineProperty(_components, Field.name, Field), _defineProperty(_components, Icon.name, Icon), _defineProperty(_components, Dropdown.name, Dropdown), _defineProperty(_components, DropdownItem.name, DropdownItem), _components),
+  mixins: [TimepickerMixin],
+  props: {
+    pickerSize: {
+      type: Number,
+      default: 290
+    },
+    hourFormat: {
+      type: String,
+      default: '12',
+      validator: function validator(value) {
+        return value === '24' || value === '12';
+      }
+    },
+    incrementMinutes: {
+      type: Number,
+      default: 5
+    },
+    autoSwitch: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'is-primary'
+    }
+  },
+  data: function data() {
+    return {
+      isSelectingHour: true,
+      isDragging: false,
+      _isClockpicker: true
+    };
+  },
+  computed: {
+    hoursDisplay: function hoursDisplay() {
+      if (this.hoursSelected == null) return '--';
+      if (this.isHourFormat24) return this.pad(this.hoursSelected);
+      var display = this.hoursSelected;
+      if (this.meridienSelected === this.PM) display -= 12;
+      if (display === 0) display = 12;
+      return display;
+    },
+    minutesDisplay: function minutesDisplay() {
+      return this.minutesSelected == null ? '--' : this.pad(this.minutesSelected);
+    },
+    minFaceValue: function minFaceValue() {
+      return this.isSelectingHour && !this.isHourFormat24 && this.meridienSelected === this.PM ? 12 : 0;
+    },
+    maxFaceValue: function maxFaceValue() {
+      return this.isSelectingHour ? !this.isHourFormat24 && this.meridienSelected === this.AM ? 11 : 23 : 59;
+    },
+    faceSize: function faceSize() {
+      return this.pickerSize - outerPadding * 2;
+    },
+    faceDisabledValues: function faceDisabledValues() {
+      return this.isSelectingHour ? this.isHourDisabled : this.isMinuteDisabled;
+    }
+  },
+  methods: {
+    onClockInput: function onClockInput(value) {
+      if (this.isSelectingHour) {
+        this.hoursSelected = value;
+        this.onHoursChange(value);
+      } else {
+        this.minutesSelected = value;
+        this.onMinutesChange(value);
+      }
+    },
+    onClockChange: function onClockChange(value) {
+      if (this.autoSwitch && this.isSelectingHour) {
+        this.isSelectingHour = !this.isSelectingHour;
+      }
+    },
+    onMeridienClick: function onMeridienClick(value) {
+      if (this.meridienSelected !== value) {
+        this.meridienSelected = value;
+        this.onMeridienChange(value);
+      }
+    }
+  }
+};
+
+/* 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-clockpicker control",class:[_vm.size, _vm.type, {'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,"loading":_vm.loading,"disabled":_vm.disabled,"readonly":!_vm.editable,"rounded":_vm.rounded,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":function($event){_vm.onBlur() && _vm.checkHtml5Validity();}},nativeOn:{"click":function($event){$event.stopPropagation();_vm.toggle(true);},"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.toggle(true);},"change":function($event){_vm.onChangeNativePicker($event);}},slot:"trigger"},'b-input',_vm.$attrs,false)):_vm._e(),_vm._v(" "),_c('div',{staticClass:"card",attrs:{"disabled":_vm.disabled,"custom":""}},[(_vm.inline)?_c('header',{staticClass:"card-header"},[_c('div',{staticClass:"b-clockpicker-header card-header-title"},[_c('div',{staticClass:"b-clockpicker-time"},[_c('span',{staticClass:"b-clockpicker-btn",class:{ active: _vm.isSelectingHour },on:{"click":function($event){_vm.isSelectingHour = true;}}},[_vm._v(_vm._s(_vm.hoursDisplay))]),_vm._v(" "),_c('span',[_vm._v(":")]),_vm._v(" "),_c('span',{staticClass:"b-clockpicker-btn",class:{ active: !_vm.isSelectingHour },on:{"click":function($event){_vm.isSelectingHour = false;}}},[_vm._v(_vm._s(_vm.minutesDisplay))])]),_vm._v(" "),(!_vm.isHourFormat24)?_c('div',{staticClass:"b-clockpicker-period"},[_c('div',{staticClass:"b-clockpicker-btn",class:{ active: _vm.meridienSelected == _vm.AM },on:{"click":function($event){_vm.onMeridienClick(_vm.AM);}}},[_vm._v("am")]),_vm._v(" "),_c('div',{staticClass:"b-clockpicker-btn",class:{ active: _vm.meridienSelected == _vm.PM },on:{"click":function($event){_vm.onMeridienClick(_vm.PM);}}},[_vm._v("pm")])]):_vm._e()])]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"card-content"},[_c('div',{staticClass:"b-clockpicker-body",style:({ width: _vm.faceSize + 'px', height: _vm.faceSize + 'px' })},[(!_vm.inline)?_c('div',{staticClass:"b-clockpicker-time"},[_c('div',{staticClass:"b-clockpicker-btn",class:{ active: _vm.isSelectingHour },on:{"click":function($event){_vm.isSelectingHour = true;}}},[_vm._v("Hours")]),_vm._v(" "),_c('span',{staticClass:"b-clockpicker-btn",class:{ active: !_vm.isSelectingHour },on:{"click":function($event){_vm.isSelectingHour = false;}}},[_vm._v("Min")])]):_vm._e(),_vm._v(" "),(!_vm.isHourFormat24 && !_vm.inline)?_c('div',{staticClass:"b-clockpicker-period"},[_c('div',{staticClass:"b-clockpicker-btn",class:{ active: _vm.meridienSelected == _vm.AM },on:{"click":function($event){_vm.onMeridienClick(_vm.AM);}}},[_vm._v(_vm._s(_vm.AM))]),_vm._v(" "),_c('div',{staticClass:"b-clockpicker-btn",class:{ active: _vm.meridienSelected == _vm.PM },on:{"click":function($event){_vm.onMeridienClick(_vm.PM);}}},[_vm._v(_vm._s(_vm.PM))])]):_vm._e(),_vm._v(" "),_c('b-clockpicker-face',{attrs:{"picker-size":_vm.faceSize,"min":_vm.minFaceValue,"max":_vm.maxFaceValue,"face-numbers":_vm.isSelectingHour ? _vm.hours : _vm.minutes,"disabled-values":_vm.faceDisabledValues,"double":_vm.isSelectingHour && _vm.isHourFormat24,"value":_vm.isSelectingHour ? _vm.hoursSelected : _vm.minutesSelected},on:{"input":_vm.onClockInput,"change":_vm.onClockChange}})],1)]),_vm._v(" "),(_vm.$slots.default !== undefined && _vm.$slots.default.length)?_c('footer',{staticClass:"b-clockpicker-footer card-footer"},[_vm._t("default")],2):_vm._e()])],1):_c('b-input',_vm._b({ref:"input",attrs:{"type":"time","autocomplete":"off","value":_vm.formatHHMMSS(_vm.computedValue),"placeholder":_vm.placeholder,"size":_vm.size,"icon":_vm.icon,"icon-pack":_vm.iconPack,"loading":_vm.loading,"max":_vm.formatHHMMSS(_vm.maxTime),"min":_vm.formatHHMMSS(_vm.minTime),"disabled":_vm.disabled,"readonly":false,"use-html5-validation":_vm.useHtml5Validation},on:{"focus":_vm.handleOnFocus,"blur":function($event){_vm.onBlur() && _vm.checkHtml5Validity();}},nativeOn:{"click":function($event){$event.stopPropagation();_vm.toggle(true);},"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.toggle(true);},"change":function($event){_vm.onChangeNativePicker($event);}}},'b-input',_vm.$attrs,false))],1)};
+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 */
+  
+
+  
+  var Clockpicker = __vue_normalize__(
+    { 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,
+    undefined,
+    undefined
+  );
+
+var Plugin = {
+  install: function install(Vue) {
+    registerComponent(Vue, Clockpicker);
+  }
+};
+use(Plugin);
+
+export default Plugin;
+export { Clockpicker };

package/dist/esm/collapse.js

@@ -0,0 +1,98 @@
+import { _ as __vue_normalize__, r as registerComponent, u as use } from './chunk-cca88db8.js';
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script = {
+  name: 'BCollapse',
+  props: {
+    open: {
+      type: Boolean,
+      default: true
+    },
+    animation: {
+      type: String,
+      default: 'fade'
+    },
+    ariaId: {
+      type: String,
+      default: ''
+    }
+  },
+  data: function data() {
+    return {
+      isOpen: this.open
+    };
+  },
+  watch: {
+    open: function open(value) {
+      this.isOpen = value;
+    }
+  },
+  methods: {
+    /**
+    * Toggle and emit events
+    */
+    toggle: function toggle() {
+      this.isOpen = !this.isOpen;
+      this.$emit('update:open', this.isOpen);
+      this.$emit(this.isOpen ? 'open' : 'close');
+    }
+  }
+};
+
+/* 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:"collapse"},[_c('div',{staticClass:"collapse-trigger",on:{"click":_vm.toggle}},[_vm._t("trigger",null,{open:_vm.isOpen})],2),_vm._v(" "),_c('transition',{attrs:{"name":_vm.animation}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isOpen),expression:"isOpen"}],staticClass:"collapse-content",attrs:{"id":_vm.ariaId,"aria-expanded":_vm.isOpen}},[_vm._t("default")],2)])],1)};
+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 */
+  
+
+  
+  var Collapse = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    undefined,
+    undefined
+  );
+
+var Plugin = {
+  install: function install(Vue) {
+    registerComponent(Vue, Collapse);
+  }
+};
+use(Plugin);
+
+export default Plugin;
+export { Collapse };