buefy
Version:
Lightweight UI components for Vue.js based on Bulma
353 lines (306 loc) • 10.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var __chunk_1 = require('./chunk-9f6a8079.js');
require('./chunk-545f01b1.js');
var __chunk_5 = require('./chunk-60061aa8.js');
var __chunk_6 = require('./chunk-13e039f5.js');
var __chunk_20 = require('./chunk-3dffe6e7.js');
var _components;
var script = {
name: 'BSteps',
components: (_components = {}, __chunk_1._defineProperty(_components, __chunk_5.Icon.name, __chunk_5.Icon), __chunk_1._defineProperty(_components, __chunk_20.SlotComponent.name, __chunk_20.SlotComponent), _components),
props: {
value: Number,
type: [String, Object],
size: String,
animated: {
type: Boolean,
default: true
},
destroyOnHide: {
type: Boolean,
default: false
},
iconPack: String,
hasNavigation: {
type: Boolean,
default: true
},
ariaNextLabel: String,
ariaPreviousLabel: String
},
data: function data() {
return {
activeStep: this.value || 0,
stepItems: [],
contentHeight: 0,
isTransitioning: false,
_isSteps: true // Used internally by StepItem
};
},
computed: {
mainClasses: function mainClasses() {
return [this.type, this.size];
},
reversedStepItems: function reversedStepItems() {
return this.stepItems.slice().reverse();
},
/**
* Check the first visible step index.
*/
firstVisibleStepIndex: function firstVisibleStepIndex() {
return this.stepItems.findIndex(function (step, idx) {
return step.visible;
});
},
/**
* Check if previous button is available.
*/
hasPrev: function hasPrev() {
return this.firstVisibleStepIndex >= 0 && this.activeStep > this.firstVisibleStepIndex;
},
/**
* Check the last visible step index.
*/
lastVisibleStepIndex: function lastVisibleStepIndex() {
var idx = this.reversedStepItems.findIndex(function (step, idx) {
return step.visible;
});
if (idx >= 0) {
return this.stepItems.length - 1 - idx;
}
return idx;
},
/**
* Check if next button is available.
*/
hasNext: function hasNext() {
return this.lastVisibleStepIndex >= 0 && this.activeStep < this.lastVisibleStepIndex;
}
},
watch: {
/**
* When v-model is changed set the new active step.
*/
value: function value(_value) {
this.changeStep(_value);
},
/**
* When step-items are updated, set active one.
*/
stepItems: function stepItems() {
if (this.activeStep < this.stepItems.length) {
this.stepItems[this.activeStep].isActive = true;
}
}
},
methods: {
/**
* Change the active step and emit change event.
*/
changeStep: function changeStep(newIndex) {
if (this.activeStep === newIndex) return;
if (this.activeStep < this.stepItems.length) {
this.stepItems[this.activeStep].deactivate(this.activeStep, newIndex);
}
this.stepItems[newIndex].activate(this.activeStep, newIndex);
this.activeStep = newIndex;
this.$emit('change', newIndex);
},
/**
* Return if the step should be clickable or not.
*/
isItemClickable: function isItemClickable(stepItem, index) {
if (stepItem.clickable === undefined) {
return this.activeStep > index;
}
return stepItem.clickable;
},
/**
* Step click listener, emit input event and change active step.
*/
stepClick: function stepClick(value) {
this.$emit('input', value);
this.changeStep(value);
},
/**
* Previous button click listener.
*/
prev: function prev() {
var _this = this;
if (!this.hasPrev) return;
var prevItemIdx = this.reversedStepItems.findIndex(function (step, idx) {
return _this.stepItems.length - 1 - idx < _this.activeStep && step.visible;
});
if (prevItemIdx >= 0) {
prevItemIdx = this.stepItems.length - 1 - prevItemIdx;
}
this.$emit('input', prevItemIdx);
this.changeStep(prevItemIdx);
},
/**
* Previous button click listener.
*/
next: function next() {
var _this2 = this;
if (!this.hasNext) return;
var nextItemIdx = this.stepItems.findIndex(function (step, idx) {
return idx > _this2.activeStep && step.visible;
});
this.$emit('input', nextItemIdx);
this.changeStep(nextItemIdx);
}
},
mounted: function mounted() {
if (this.activeStep < this.stepItems.length) {
this.stepItems[this.activeStep].isActive = true;
}
}
};
/* 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-steps"},[_c('nav',{staticClass:"steps",class:_vm.mainClasses},[_c('ul',{staticClass:"step-items"},_vm._l((_vm.stepItems),function(stepItem,index){return _c('li',{directives:[{name:"show",rawName:"v-show",value:(stepItem.visible),expression:"stepItem.visible"}],key:index,staticClass:"step-item",class:[stepItem.type || _vm.type, {
'is-active': _vm.activeStep === index,
'is-previous': _vm.activeStep > index
}]},[_c('a',{staticClass:"step-link",class:{'is-clickable': _vm.isItemClickable(stepItem, index)},on:{"click":function($event){_vm.isItemClickable(stepItem, index) && _vm.stepClick(index);}}},[_c('div',{staticClass:"step-marker"},[(stepItem.icon)?_c('b-icon',{attrs:{"icon":stepItem.icon,"pack":stepItem.iconPack,"size":_vm.size}}):_vm._e()],1),_vm._v(" "),_c('div',{staticClass:"step-details"},[_c('span',{staticClass:"step-title"},[_vm._v(_vm._s(stepItem.label))])])])])}))]),_vm._v(" "),_c('section',{staticClass:"step-content",class:{'is-transitioning': _vm.isTransitioning}},[_vm._t("default")],2),_vm._v(" "),(_vm.hasNavigation)?_c('nav',{staticClass:"step-navigation"},[_c('a',{staticClass:"pagination-previous",attrs:{"role":"button","href":"#","disabled":!_vm.hasPrev,"aria-label":_vm.ariaPreviousLabel},on:{"click":function($event){$event.preventDefault();_vm.prev($event);}}},[_c('b-icon',{attrs:{"icon":"chevron-left","pack":_vm.iconPack,"both":"","aria-hidden":"true"}})],1),_vm._v(" "),_c('a',{staticClass:"pagination-next",attrs:{"role":"button","href":"#","disabled":!_vm.hasNext,"aria-label":_vm.ariaNextLabel},on:{"click":function($event){$event.preventDefault();_vm.next($event);}}},[_c('b-icon',{attrs:{"icon":"chevron-right","pack":_vm.iconPack,"both":"","aria-hidden":"true"}})],1)]):_vm._e()])};
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 Steps = __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 script$1 = {
name: 'BStepItem',
props: {
label: String,
type: String | Object,
icon: String,
iconPack: String,
clickable: {
type: Boolean,
default: undefined
},
visible: {
type: Boolean,
default: true
}
},
data: function data() {
return {
isActive: false,
transitionName: null
};
},
methods: {
/**
* Activate step, alter animation name based on the index.
*/
activate: function activate(oldIndex, index) {
this.transitionName = index < oldIndex ? 'slide-next' : 'slide-prev';
this.isActive = true;
},
/**
* Deactivate step, alter animation name based on the index.
*/
deactivate: function deactivate(oldIndex, index) {
this.transitionName = index < oldIndex ? 'slide-next' : 'slide-prev';
this.isActive = false;
}
},
created: function created() {
if (!this.$parent.$data._isSteps) {
this.$destroy();
throw new Error('You should wrap bStepItem on a bSteps');
}
this.$parent.stepItems.push(this);
},
beforeDestroy: function beforeDestroy() {
var index = this.$parent.stepItems.indexOf(this);
if (index >= 0) {
this.$parent.stepItems.splice(index, 1);
}
},
render: function render(createElement) {
var _this = this;
// if destroy apply v-if
if (this.$parent.destroyOnHide) {
if (!this.isActive || !this.visible) {
return;
}
}
var vnode = createElement('div', {
directives: [{
name: 'show',
value: this.isActive && this.visible
}],
attrs: {
'class': 'step-item'
}
}, this.$slots.default); // check animated prop
if (this.$parent.animated) {
return createElement('transition', {
props: {
'name': this.transitionName
},
on: {
'before-enter': function beforeEnter() {
_this.$parent.isTransitioning = true;
},
'after-enter': function afterEnter() {
_this.$parent.isTransitioning = false;
}
}
}, [vnode]);
}
return vnode;
}
};
/* script */
const __vue_script__$1 = script$1;
/* template */
/* 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 = undefined;
/* style inject */
/* style inject SSR */
var StepItem = __chunk_6.__vue_normalize__(
{},
__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, Steps);
__chunk_6.registerComponent(Vue, StepItem);
}
};
__chunk_6.use(Plugin);
exports.StepItem = StepItem;
exports.Steps = Steps;
exports.default = Plugin;