buefy
Version:
Lightweight UI components for Vue.js based on Bulma
769 lines (662 loc) • 24.5 kB
JavaScript
/*! 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.Dialog = {}, global.Vue));
}(this, function (exports, Vue) { 'use strict';
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
var config = {
defaultContainerElement: null,
defaultIconPack: 'mdi',
defaultIconComponent: null,
defaultDialogConfirmText: null,
defaultDialogCancelText: null,
defaultSnackbarDuration: 3500,
defaultSnackbarPosition: null,
defaultToastDuration: 2000,
defaultToastPosition: null,
defaultNotificationDuration: 2000,
defaultNotificationPosition: null,
defaultTooltipType: 'is-primary',
defaultTooltipAnimated: false,
defaultTooltipDelay: 0,
defaultInputAutocomplete: 'on',
defaultDateFormatter: null,
defaultDateParser: null,
defaultDateCreator: null,
defaultDayNames: null,
defaultMonthNames: null,
defaultFirstDayOfWeek: null,
defaultUnselectableDaysOfWeek: null,
defaultTimeFormatter: null,
defaultTimeParser: null,
defaultModalCanCancel: ['escape', 'x', 'outside', 'button'],
defaultModalScroll: null,
defaultDatepickerMobileNative: true,
defaultTimepickerMobileNative: true,
defaultNoticeQueue: true,
defaultInputHasCounter: true,
defaultTaginputHasCounter: true,
defaultUseHtml5Validation: true,
defaultDropdownMobileModal: true,
defaultFieldLabelPosition: null,
defaultDatepickerYearsRange: [-100, 3],
defaultDatepickerNearbyMonthDays: true,
defaultDatepickerNearbySelectableMonthDays: false,
defaultDatepickerShowWeekNumber: false
};
var config$1 = config;
//
var script = {
name: 'BIcon',
props: {
type: [String, Object],
pack: String,
icon: String,
size: String,
customSize: String,
customClass: String,
both: Boolean // This is used internally to show both MDI and FA icon
},
computed: {
/**
* Internal icon name based on the pack.
* If pack is 'fa', gets the equivalent FA icon name of the MDI,
* internal icons are always MDI.
*/
newIcon: function newIcon() {
return this.newPack === 'mdi' ? "".concat(this.newPack, "-").concat(this.icon) : this.addFAPrefix(this.getEquivalentIconOf(this.icon));
},
newPack: function newPack() {
return this.pack || config$1.defaultIconPack;
},
newType: function newType() {
if (!this.type) return;
var splitType = [];
if (typeof this.type === 'string') {
splitType = this.type.split('-');
} else {
for (var key in this.type) {
if (this.type[key]) {
splitType = key.split('-');
break;
}
}
}
if (splitType.length <= 1) return;
return "has-text-".concat(splitType[1]);
},
newCustomSize: function newCustomSize() {
return this.customSize || this.customSizeByPack;
},
customSizeByPack: function customSizeByPack() {
var defaultSize = this.newPack === 'mdi' ? 'mdi-24px' : this.addFAPrefix('lg');
var mediumSize = this.newPack === 'mdi' ? 'mdi-36px' : this.addFAPrefix('2x');
var largeSize = this.newPack === 'mdi' ? 'mdi-48px' : this.addFAPrefix('3x');
switch (this.size) {
case 'is-small':
return;
case 'is-medium':
return mediumSize;
case 'is-large':
return largeSize;
default:
return defaultSize;
}
},
useIconComponent: function useIconComponent() {
return config$1.defaultIconComponent;
}
},
methods: {
addFAPrefix: function addFAPrefix(value) {
if (this.useIconComponent) {
return value;
}
return "fa-".concat(value);
},
/**
* Equivalent FA icon name of the MDI.
*/
getEquivalentIconOf: function getEquivalentIconOf(value) {
// Only transform the class if the both prop is set to true
if (!this.both) {
return value;
}
switch (value) {
case 'check':
return 'check';
case 'information':
return 'info-circle';
case 'check-circle':
return 'check-circle';
case 'alert':
return 'exclamation-triangle';
case 'alert-circle':
return 'exclamation-circle';
case 'arrow-up':
return 'arrow-up';
case 'chevron-right':
return 'angle-right';
case 'chevron-left':
return 'angle-left';
case 'chevron-down':
return 'angle-down';
case 'eye':
return 'eye';
case 'eye-off':
return 'eye-slash';
case 'menu-down':
return 'caret-down';
case 'menu-up':
return 'caret-up';
default:
return value;
}
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* 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('span',{staticClass:"icon",class:[_vm.newType, _vm.size]},[(!_vm.useIconComponent)?_c('i',{class:[_vm.newPack, _vm.newIcon, _vm.newCustomSize, _vm.customClass]}):_c(_vm.useIconComponent,{tag:"component",class:[_vm.customClass],attrs:{"icon":[_vm.newPack, _vm.newIcon],"size":_vm.newCustomSize}})],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 Icon = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
/**
* Get value of an object property/path even if it's nested
*/
function removeElement(el) {
if (typeof el.remove !== 'undefined') {
el.remove();
} else if (typeof el.parentNode !== 'undefined') {
el.parentNode.removeChild(el);
}
}
//
var script$1 = {
name: 'BModal',
props: {
active: Boolean,
component: [Object, Function],
content: String,
programmatic: Boolean,
props: Object,
events: Object,
width: {
type: [String, Number],
default: 960
},
hasModalCard: Boolean,
animation: {
type: String,
default: 'zoom-out'
},
canCancel: {
type: [Array, Boolean],
default: function _default() {
return config$1.defaultModalCanCancel;
}
},
onCancel: {
type: Function,
default: function _default() {}
},
scroll: {
type: String,
default: function _default() {
return config$1.defaultModalScroll ? config$1.defaultModalScroll : 'clip';
},
validator: function validator(value) {
return ['clip', 'keep'].indexOf(value) >= 0;
}
},
fullScreen: Boolean,
customClass: String
},
data: function data() {
return {
isActive: this.active || false,
savedScrollTop: null,
newWidth: typeof this.width === 'number' ? this.width + 'px' : this.width
};
},
computed: {
cancelOptions: function cancelOptions() {
return typeof this.canCancel === 'boolean' ? this.canCancel ? config$1.defaultModalCanCancel : [] : this.canCancel;
},
showX: function showX() {
return this.cancelOptions.indexOf('x') >= 0;
},
customStyle: function customStyle() {
if (!this.fullScreen) {
return {
maxWidth: this.newWidth
};
}
return null;
}
},
watch: {
active: function active(value) {
this.isActive = value;
},
isActive: function isActive() {
this.handleScroll();
}
},
methods: {
handleScroll: function handleScroll() {
if (typeof window === 'undefined') return;
if (this.scroll === 'clip') {
if (this.isActive) {
document.documentElement.classList.add('is-clipped');
} else {
document.documentElement.classList.remove('is-clipped');
}
return;
}
this.savedScrollTop = !this.savedScrollTop ? document.documentElement.scrollTop : this.savedScrollTop;
if (this.isActive) {
document.body.classList.add('is-noscroll');
} else {
document.body.classList.remove('is-noscroll');
}
if (this.isActive) {
document.body.style.top = "-".concat(this.savedScrollTop, "px");
return;
}
document.documentElement.scrollTop = this.savedScrollTop;
document.body.style.top = null;
this.savedScrollTop = null;
},
/**
* Close the Modal if canCancel and call the onCancel prop (function).
*/
cancel: function cancel(method) {
if (this.cancelOptions.indexOf(method) < 0) return;
this.onCancel.apply(null, arguments);
this.close();
},
/**
* Call the onCancel prop (function).
* Emit events, and destroy modal if it's programmatic.
*/
close: function close() {
var _this = this;
this.$emit('close');
this.$emit('update:active', false); // Timeout for the animation complete before destroying
if (this.programmatic) {
this.isActive = false;
setTimeout(function () {
_this.$destroy();
removeElement(_this.$el);
}, 150);
}
},
/**
* Keypress event that is bound to the document.
*/
keyPress: function keyPress(event) {
// Esc key
if (this.isActive && event.keyCode === 27) this.cancel('escape');
}
},
created: function created() {
if (typeof window !== 'undefined') {
document.addEventListener('keyup', this.keyPress);
}
},
beforeMount: function beforeMount() {
// Insert the Modal component in body tag
// only if it's programmatic
this.programmatic && document.body.appendChild(this.$el);
},
mounted: function mounted() {
if (this.programmatic) this.isActive = true;else if (this.isActive) this.handleScroll();
},
beforeDestroy: function beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('keyup', this.keyPress); // reset scroll
document.documentElement.classList.remove('is-clipped');
var savedScrollTop = !this.savedScrollTop ? document.documentElement.scrollTop : this.savedScrollTop;
document.body.classList.remove('is-noscroll');
document.documentElement.scrollTop = savedScrollTop;
document.body.style.top = null;
}
}
};
/* 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('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"modal is-active",class:[{'is-full-screen': _vm.fullScreen}, _vm.customClass]},[_c('div',{staticClass:"modal-background",on:{"click":function($event){_vm.cancel('outside');}}}),_vm._v(" "),_c('div',{staticClass:"animation-content",class:{ 'modal-content': !_vm.hasModalCard },style:(_vm.customStyle)},[(_vm.component)?_c(_vm.component,_vm._g(_vm._b({tag:"component",on:{"close":_vm.close}},'component',_vm.props,false),_vm.events)):(_vm.content)?_c('div',{domProps:{"innerHTML":_vm._s(_vm.content)}}):_vm._t("default")],2),_vm._v(" "),(_vm.showX)?_c('button',{staticClass:"modal-close is-large",attrs:{"type":"button"},on:{"click":function($event){_vm.cancel('x');}}}):_vm._e()]):_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 */
var Modal = normalizeComponent_1(
{ 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 script$2 = {
name: 'BDialog',
components: _defineProperty({}, Icon.name, Icon),
extends: Modal,
props: {
title: String,
message: String,
icon: String,
iconPack: String,
hasIcon: Boolean,
type: {
type: String,
default: 'is-primary'
},
size: String,
confirmText: {
type: String,
default: function _default() {
return config$1.defaultDialogConfirmText ? config$1.defaultDialogConfirmText : 'OK';
}
},
cancelText: {
type: String,
default: function _default() {
return config$1.defaultDialogCancelText ? config$1.defaultDialogCancelText : 'Cancel';
}
},
hasInput: Boolean,
// Used internally to know if it's prompt
inputAttrs: {
type: Object,
default: function _default() {
return {};
}
},
onConfirm: {
type: Function,
default: function _default() {}
},
focusOn: {
type: String,
default: 'confirm'
}
},
data: function data() {
var prompt = this.hasInput ? this.inputAttrs.value || '' : '';
return {
prompt: prompt,
isActive: false,
validationMessage: ''
};
},
computed: {
/**
* Icon name (MDI) based on the type.
*/
iconByType: function iconByType() {
switch (this.type) {
case 'is-info':
return 'information';
case 'is-success':
return 'check-circle';
case 'is-warning':
return 'alert';
case 'is-danger':
return 'alert-circle';
default:
return null;
}
},
showCancel: function showCancel() {
return this.cancelOptions.indexOf('button') >= 0;
}
},
methods: {
/**
* If it's a prompt Dialog, validate the input.
* Call the onConfirm prop (function) and close the Dialog.
*/
confirm: function confirm() {
var _this = this;
if (this.$refs.input !== undefined) {
if (!this.$refs.input.checkValidity()) {
this.validationMessage = this.$refs.input.validationMessage;
this.$nextTick(function () {
return _this.$refs.input.select();
});
return;
}
}
this.onConfirm(this.prompt);
this.close();
},
/**
* Close the Dialog.
*/
close: function close() {
var _this2 = this;
this.isActive = false; // Timeout for the animation complete before destroying
setTimeout(function () {
_this2.$destroy();
removeElement(_this2.$el);
}, 150);
}
},
beforeMount: function beforeMount() {
var _this3 = this;
// Insert the Dialog component in body tag
if (typeof window !== 'undefined') {
this.$nextTick(function () {
document.body.appendChild(_this3.$el);
});
}
},
mounted: function mounted() {
var _this4 = this;
this.isActive = true;
if (typeof this.inputAttrs.required === 'undefined') {
this.$set(this.inputAttrs, 'required', true);
}
this.$nextTick(function () {
// Handle which element receives focus
if (_this4.hasInput) {
_this4.$refs.input.focus();
} else if (_this4.focusOn === 'cancel' && _this4.showCancel) {
_this4.$refs.cancelButton.focus();
} else {
_this4.$refs.confirmButton.focus();
}
});
}
};
/* 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('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"dialog modal is-active",class:_vm.size},[_c('div',{staticClass:"modal-background",on:{"click":function($event){_vm.cancel('outside');}}}),_vm._v(" "),_c('div',{staticClass:"modal-card animation-content"},[(_vm.title)?_c('header',{staticClass:"modal-card-head"},[_c('p',{staticClass:"modal-card-title"},[_vm._v(_vm._s(_vm.title))])]):_vm._e(),_vm._v(" "),_c('section',{staticClass:"modal-card-body",class:{ 'is-titleless': !_vm.title, 'is-flex': _vm.hasIcon }},[_c('div',{staticClass:"media"},[(_vm.hasIcon)?_c('div',{staticClass:"media-left"},[_c('b-icon',{attrs:{"icon":_vm.icon ? _vm.icon : _vm.iconByType,"pack":_vm.iconPack,"type":_vm.type,"both":!_vm.icon,"size":"is-large"}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"media-content"},[_c('p',{domProps:{"innerHTML":_vm._s(_vm.message)}}),_vm._v(" "),(_vm.hasInput)?_c('div',{staticClass:"field"},[_c('div',{staticClass:"control"},[_c('input',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.prompt),expression:"prompt"}],ref:"input",staticClass:"input",class:{ 'is-danger': _vm.validationMessage },domProps:{"value":(_vm.prompt)},on:{"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }_vm.confirm($event);},"input":function($event){if($event.target.composing){ return; }_vm.prompt=$event.target.value;}}},'input',_vm.inputAttrs,false))]),_vm._v(" "),_c('p',{staticClass:"help is-danger"},[_vm._v(_vm._s(_vm.validationMessage))])]):_vm._e()])])]),_vm._v(" "),_c('footer',{staticClass:"modal-card-foot"},[(_vm.showCancel)?_c('button',{ref:"cancelButton",staticClass:"button",on:{"click":function($event){_vm.cancel('button');}}},[_vm._v("\n "+_vm._s(_vm.cancelText)+"\n ")]):_vm._e(),_vm._v(" "),_c('button',{ref:"confirmButton",staticClass:"button",class:_vm.type,on:{"click":_vm.confirm}},[_vm._v("\n "+_vm._s(_vm.confirmText)+"\n ")])])])]):_vm._e()])};
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 */
var Dialog = normalizeComponent_1(
{ 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,
undefined,
undefined
);
var use = function use(plugin) {
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
};
var registerComponent = function registerComponent(Vue, component) {
Vue.component(component.name, component);
};
var registerComponentProgrammatic = function registerComponentProgrammatic(Vue, property, component) {
if (!Vue.prototype.$buefy) Vue.prototype.$buefy = {};
Vue.prototype.$buefy[property] = component;
};
function open(propsData) {
var vm = typeof window !== 'undefined' && window.Vue ? window.Vue : Vue;
var DialogComponent = vm.extend(Dialog);
return new DialogComponent({
el: document.createElement('div'),
propsData: propsData
});
}
var DialogProgrammatic = {
alert: function alert(params) {
var message;
if (typeof params === 'string') message = params;
var defaultParam = {
canCancel: false,
message: message
};
var propsData = Object.assign(defaultParam, params);
return open(propsData);
},
confirm: function confirm(params) {
var defaultParam = {};
var propsData = Object.assign(defaultParam, params);
return open(propsData);
},
prompt: function prompt(params) {
var defaultParam = {
hasInput: true,
confirmText: 'Done'
};
var propsData = Object.assign(defaultParam, params);
return open(propsData);
}
};
var Plugin = {
install: function install(Vue) {
registerComponent(Vue, Dialog);
registerComponentProgrammatic(Vue, 'dialog', DialogProgrammatic);
}
};
use(Plugin);
exports.DialogProgrammatic = DialogProgrammatic;
exports.default = Plugin;
Object.defineProperty(exports, '__esModule', { value: true });
}));