@ishitatsuyuki/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
376 lines (361 loc) • 13.2 kB
JavaScript
'use strict';
var vue = require('vue');
var helpers = require('./helpers.js');
var config = require('./config.js');
var BaseComponentMixin = require('./BaseComponentMixin-a03c02e3.js');
var Icon = require('./Icon-172f9998.js');
var Button = require('./Button-3722f128.js');
var MatchMediaMixin = require('./MatchMediaMixin-08658b15.js');
var TabbedChildMixin = require('./TabbedChildMixin-a0168774.js');
/**
* Responsive horizontal process steps
* @displayName Steps
* @requires ./StepItem.vue
* @style _steps.scss
*/
var script = vue.defineComponent({
name: 'OSteps',
components: {
[Button.script.name]: Button.script,
[Icon.script.name]: Icon.script
},
configField: 'steps',
mixins: [BaseComponentMixin.BaseComponentMixin, MatchMediaMixin.MatchMediaMixin, TabbedChildMixin.TabbedMixin('step')],
props: {
/**
* Icon pack to use for the navigation
* @values mdi, fa, fas and any other custom icon pack
*/
iconPack: String,
/** Icon to use for navigation button */
iconPrev: {
type: String,
default: () => {
return helpers.getValueByPath(config.getOptions(), 'steps.iconPrev', 'chevron-left');
}
},
/** Icon to use for navigation button */
iconNext: {
type: String,
default: () => {
return helpers.getValueByPath(config.getOptions(), 'steps.iconNext', 'chevron-right');
}
},
/**
* Next and previous buttons below the component. You can use this property if you want to use your own custom navigation items.
*/
hasNavigation: {
type: Boolean,
default: true
},
/**
* Step navigation is animated
*/
animated: {
type: Boolean,
default: true
},
/**
* Position of the marker label, optional
* @values bottom, right, left
*/
labelPosition: {
type: String,
validator(value) {
return [
'bottom',
'right',
'left'
].indexOf(value) > -1;
},
default: 'bottom'
},
/** Rounded step markers */
rounded: {
type: Boolean,
default: true
},
ariaNextLabel: String,
ariaPreviousLabel: String,
rootClass: [String, Function, Array],
sizeClass: [String, Function, Array],
verticalClass: [String, Function, Array],
positionClass: [String, Function, Array],
stepsClass: [String, Function, Array],
animatedClass: [String, Function, Array],
stepMarkerRoundedClass: [String, Function, Array],
stepDividerClass: [String, Function, Array],
stepMarkerClass: [String, Function, Array],
stepContentClass: [String, Function, Array],
stepContentTransitioningClass: [String, Function, Array],
stepNavigationClass: [String, Function, Array],
stepLinkClass: [String, Function, Array],
stepLinkClickableClass: [String, Function, Array],
stepLinkLabelClass: [String, Function, Array],
stepLinkLabelPositionClass: [String, Function, Array],
mobileClass: [String, Function, Array],
},
computed: {
wrapperClasses() {
return [
this.computedClass('rootClass', 'o-steps__wrapper'),
{ [this.computedClass('sizeClass', 'o-steps--', this.size)]: this.size },
{ [this.computedClass('verticalClass', 'o-steps__wrapper-vertical')]: this.vertical },
{ [this.computedClass('positionClass', 'o-steps__wrapper-position-', this.position)]: this.position && this.vertical },
{ [this.computedClass('mobileClass', 'o-steps--mobile')]: this.isMatchMedia },
];
},
mainClasses() {
return [
this.computedClass('stepsClass', 'o-steps'),
{ [this.computedClass('animatedClass', 'o-steps--animated')]: this.animated }
];
},
stepDividerClasses() {
return [
this.computedClass('stepDividerClass', 'o-steps__divider')
];
},
stepMarkerClasses() {
return [
this.computedClass('stepMarkerClass', 'o-steps__marker'),
{ [this.computedClass('stepMarkerRoundedClass', 'o-steps__marker--rounded')]: this.rounded }
];
},
stepContentClasses() {
return [
this.computedClass('stepContentClass', 'o-steps__content'),
{ [this.computedClass('stepContentTransitioningClass', 'o-steps__content-transitioning')]: this.isTransitioning }
];
},
stepNavigationClasses() {
return [
this.computedClass('stepNavigationClass', 'o-steps__navigation')
];
},
stepLinkLabelClasses() {
return [
this.computedClass('stepLinkLabelClass', 'o-steps__title')
];
},
// Override mixin implementation to always have a value
activeItem() {
return this.childItems.filter((i) => i.newValue === this.activeId)[0] || this.items[0];
},
/**
* Check if previous button is available.
*/
hasPrev() {
return !!this.prevItem;
},
/**
* Retrieves the next visible item
*/
nextItem() {
let nextItem = null;
let idx = this.activeItem ? this.items.indexOf(this.activeItem) + 1 : 0;
for (; idx < this.items.length; idx++) {
if (this.items[idx].visible) {
nextItem = this.items[idx];
break;
}
}
return nextItem;
},
/**
* Retrieves the previous visible item
*/
prevItem() {
if (!this.activeItem) {
return null;
}
let prevItem = null;
for (let idx = this.items.indexOf(this.activeItem) - 1; idx >= 0; idx--) {
if (this.items[idx].visible) {
prevItem = this.items[idx];
break;
}
}
return prevItem;
},
/**
* Check if next button is available.
*/
hasNext() {
return !!this.nextItem;
},
navigationProps() {
return {
previous: {
disabled: !this.hasPrev,
action: this.prev
},
next: {
disabled: !this.hasNext,
action: this.next
}
};
}
},
methods: {
stepLinkClasses(childItem) {
return [
this.computedClass('stepLinkClass', 'o-steps__link'),
{ [this.computedClass('stepLinkLabelPositionClass', 'o-steps__link-label-', this.labelPosition)]: this.labelPosition },
{ [this.computedClass('stepLinkClickableClass', 'o-steps__link-clickable')]: this.isItemClickable(childItem) }
];
},
/**
* Return if the step should be clickable or not.
*/
isItemClickable(stepItem) {
if (stepItem.clickable === undefined) {
return stepItem.index < this.activeItem.index;
}
return stepItem.clickable;
},
/**
* Previous button click listener.
*/
prev() {
if (this.hasPrev) {
this.childClick(this.prevItem);
}
},
/**
* Previous button click listener.
*/
next() {
if (this.hasNext) {
this.childClick(this.nextItem);
}
}
}
});
const _hoisted_1 = {
key: 1
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_o_icon = vue.resolveComponent("o-icon");
const _component_o_button = vue.resolveComponent("o-button");
return vue.openBlock(), vue.createBlock("div", {
class: _ctx.wrapperClasses
}, [vue.createVNode("nav", {
class: _ctx.mainClasses
}, [(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.items, (childItem, index) => {
return vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
key: childItem.newValue,
class: childItem.itemClasses
}, [index > 0 ? (vue.openBlock(), vue.createBlock("span", {
key: 0,
class: _ctx.stepDividerClasses
}, null, 2
/* CLASS */
)) : vue.createCommentVNode("v-if", true), vue.createVNode("a", {
class: _ctx.stepLinkClasses(childItem),
onClick: $event => _ctx.isItemClickable(childItem) && _ctx.childClick(childItem)
}, [vue.createVNode("div", {
class: _ctx.stepMarkerClasses
}, [childItem.icon ? vue.createVNode(_component_o_icon, {
key: 0,
icon: childItem.icon,
pack: childItem.iconPack,
size: _ctx.size
}, null, 8
/* PROPS */
, ["icon", "pack", "size"]) : childItem.step ? (vue.openBlock(), vue.createBlock("span", _hoisted_1, vue.toDisplayString(childItem.step), 1
/* TEXT */
)) : vue.createCommentVNode("v-if", true)], 2
/* CLASS */
), vue.createVNode("div", {
class: _ctx.stepLinkLabelClasses
}, vue.toDisplayString(childItem.label), 3
/* TEXT, CLASS */
)], 10
/* CLASS, PROPS */
, ["onClick"])], 2
/* CLASS */
)), [[vue.vShow, childItem.visible]]);
}), 128
/* KEYED_FRAGMENT */
))], 2
/* CLASS */
), vue.createVNode("section", {
class: _ctx.stepContentClasses
}, [vue.renderSlot(_ctx.$slots, "default")], 2
/* CLASS */
), vue.renderSlot(_ctx.$slots, "navigation", {
previous: _ctx.navigationProps.previous,
next: _ctx.navigationProps.next
}, () => [_ctx.hasNavigation ? (vue.openBlock(), vue.createBlock("nav", {
key: 0,
class: _ctx.stepNavigationClasses
}, [vue.createVNode(_component_o_button, {
role: "button",
"icon-left": _ctx.iconPrev,
"icon-pack": _ctx.iconPack,
"icon-both": "",
disabled: _ctx.navigationProps.previous.disabled,
onClick: vue.withModifiers(_ctx.navigationProps.previous.action, ["prevent"]),
"aria-label": _ctx.ariaPreviousLabel
}, null, 8
/* PROPS */
, ["icon-left", "icon-pack", "disabled", "onClick", "aria-label"]), vue.createVNode(_component_o_button, {
role: "button",
"icon-left": _ctx.iconNext,
"icon-pack": _ctx.iconPack,
"icon-both": "",
disabled: _ctx.navigationProps.next.disabled,
onClick: vue.withModifiers(_ctx.navigationProps.next.action, ["prevent"]),
"aria-label": _ctx.ariaNextLabel
}, null, 8
/* PROPS */
, ["icon-left", "icon-pack", "disabled", "onClick", "aria-label"])], 2
/* CLASS */
)) : vue.createCommentVNode("v-if", true)])], 2
/* CLASS */
);
}
script.render = render;
script.__file = "src/components/steps/Steps.vue";
/**
* @displayName Step Item
*/
var script$1 = vue.defineComponent({
name: 'OStepItem',
mixins: [BaseComponentMixin.BaseComponentMixin, TabbedChildMixin.TabbedChildMixin('step')],
configField: 'steps',
props: {
/** Step marker content (when there is no icon) */
step: [String, Number],
/** Default style for the step, optional This will override parent type. Could be used to set a completed step to "success" for example */
variant: [String, Object],
/** Item can be used directly to navigate. If undefined, previous steps are clickable while the others are not */
clickable: {
type: Boolean,
default: undefined
},
itemClass: [String, Function, Array],
itemHeaderClass: [String, Function, Array],
itemHeaderActiveClass: [String, Function, Array],
itemHeaderPreviousClass: [String, Function, Array],
itemHeaderVariantClass: [String, Function, Array]
},
computed: {
elementClasses() {
return [this.computedClass('itemClass', 'o-steps__item')];
},
itemClasses() {
return [this.headerClass, this.computedClass('itemHeaderClass', 'o-steps__nav-item'), {
[this.computedClass('itemHeaderVariantClass', 'o-steps__nav-item--', this.variant || this.parent.variant)]: this.variant || this.parent.variant
}, {
[this.computedClass('itemHeaderActiveClass', 'o-steps__nav-item-active')]: this.isActive
}, {
[this.computedClass('itemHeaderPreviousClass', 'o-steps__nav-item-previous')]: this.parent.activeItem.index > this.index
}];
}
}
});
script$1.__file = "src/components/steps/StepItem.vue";
exports.script = script;
exports.script$1 = script$1;