91 lines
2.3 KiB
JavaScript
91 lines
2.3 KiB
JavaScript
export default {
|
|
name: 'WootTabs',
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
border: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
data() {
|
|
return { hasScroll: false };
|
|
},
|
|
created() {
|
|
window.addEventListener('resize', this.computeScrollWidth);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.computeScrollWidth);
|
|
},
|
|
mounted() {
|
|
this.computeScrollWidth();
|
|
},
|
|
methods: {
|
|
computeScrollWidth() {
|
|
const tabElement = this.$el.getElementsByClassName('tabs')[0];
|
|
this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth;
|
|
},
|
|
onScrollClick(direction) {
|
|
const tabElement = this.$el.getElementsByClassName('tabs')[0];
|
|
let scrollPosition = tabElement.scrollLeft;
|
|
if (direction === 'left') {
|
|
scrollPosition -= 100;
|
|
} else {
|
|
scrollPosition += 100;
|
|
}
|
|
tabElement.scrollTo({
|
|
top: 0,
|
|
left: scrollPosition,
|
|
behavior: 'smooth',
|
|
});
|
|
},
|
|
createScrollButton(createElement, direction) {
|
|
if (!this.hasScroll) {
|
|
return false;
|
|
}
|
|
return createElement(
|
|
'button',
|
|
{
|
|
class: 'tabs--scroll-button button clear secondary button--only-icon',
|
|
on: { click: () => this.onScrollClick(direction) },
|
|
},
|
|
[
|
|
createElement('fluent-icon', {
|
|
props: { icon: `chevron-${direction}`, size: 16 },
|
|
}),
|
|
]
|
|
);
|
|
},
|
|
},
|
|
render(createElement) {
|
|
const Tabs = this.$slots.default
|
|
.filter(
|
|
node =>
|
|
node.componentOptions &&
|
|
node.componentOptions.tag === 'woot-tabs-item'
|
|
)
|
|
.map((node, index) => {
|
|
const data = node.componentOptions.propsData;
|
|
data.index = index;
|
|
return node;
|
|
});
|
|
const leftButton = this.createScrollButton(createElement, 'left');
|
|
const rightButton = this.createScrollButton(createElement, 'right');
|
|
return (
|
|
<div
|
|
class={{
|
|
'tabs--container--with-border': this.border,
|
|
'tabs--container': true,
|
|
}}
|
|
>
|
|
{leftButton}
|
|
<ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
|
|
{Tabs}
|
|
</ul>
|
|
{rightButton}
|
|
</div>
|
|
);
|
|
},
|
|
};
|