buefy
Version:
Lightweight UI components for Vue.js based on Bulma
448 lines (403 loc) • 17.9 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var __chunk_1 = require('./chunk-9f6a8079.js');
require('./chunk-59b91990.js');
require('./chunk-545f01b1.js');
require('./chunk-c146745e.js');
var __chunk_5 = require('./chunk-60061aa8.js');
var __chunk_6 = require('./chunk-13e039f5.js');
var __chunk_7 = require('./chunk-f0c597f9.js');
var __chunk_10 = require('./chunk-c2aec7a9.js');
var __chunk_11 = require('./chunk-544a95da.js');
var __chunk_12 = require('./chunk-ef4753d5.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 = __chunk_6.__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 = {}, __chunk_1._defineProperty(_components, ClockpickerFace.name, ClockpickerFace), __chunk_1._defineProperty(_components, __chunk_7.Input.name, __chunk_7.Input), __chunk_1._defineProperty(_components, __chunk_12.Field.name, __chunk_12.Field), __chunk_1._defineProperty(_components, __chunk_5.Icon.name, __chunk_5.Icon), __chunk_1._defineProperty(_components, __chunk_11.Dropdown.name, __chunk_11.Dropdown), __chunk_1._defineProperty(_components, __chunk_11.DropdownItem.name, __chunk_11.DropdownItem), _components),
mixins: [__chunk_10.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 = __chunk_6.__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) {
__chunk_6.registerComponent(Vue, Clockpicker);
}
};
__chunk_6.use(Plugin);
exports.Clockpicker = Clockpicker;
exports.default = Plugin;