136 lines
2.9 KiB
Vue
136 lines
2.9 KiB
Vue
<script>
|
|
import { GlBreadcrumb, GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
|
|
|
|
import LegacyContainer from './components/legacy_container.vue';
|
|
import WelcomePage from './components/welcome.vue';
|
|
|
|
export default {
|
|
components: {
|
|
GlBreadcrumb,
|
|
GlIcon,
|
|
WelcomePage,
|
|
LegacyContainer,
|
|
},
|
|
directives: {
|
|
SafeHtml,
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
initialBreadcrumb: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
panels: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
jumpToLastPersistedPanel: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
persistenceKey: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
experiment: {
|
|
type: String,
|
|
required: false,
|
|
default: null,
|
|
},
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
activePanelName: null,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
activePanel() {
|
|
return this.panels.find((p) => p.name === this.activePanelName);
|
|
},
|
|
|
|
details() {
|
|
return this.activePanel.details || this.activePanel.description;
|
|
},
|
|
|
|
hasTextDetails() {
|
|
return typeof this.details === 'string';
|
|
},
|
|
|
|
breadcrumbs() {
|
|
if (!this.activePanel) {
|
|
return null;
|
|
}
|
|
|
|
return [
|
|
{ text: this.initialBreadcrumb, href: '#' },
|
|
{ text: this.activePanel.title, href: `#${this.activePanel.name}` },
|
|
];
|
|
},
|
|
},
|
|
|
|
created() {
|
|
this.handleLocationHashChange();
|
|
|
|
if (this.jumpToLastPersistedPanel) {
|
|
this.activePanelName = localStorage.getItem(this.persistenceKey) || this.panels[0].name;
|
|
}
|
|
|
|
window.addEventListener('hashchange', () => {
|
|
this.handleLocationHashChange();
|
|
this.$emit('panel-change');
|
|
});
|
|
|
|
this.$root.$on('clicked::link', (e) => {
|
|
window.location = e.target.href;
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
handleLocationHashChange() {
|
|
this.activePanelName = window.location.hash.substring(1) || null;
|
|
if (this.activePanelName) {
|
|
localStorage.setItem(this.persistenceKey, this.activePanelName);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<welcome-page
|
|
v-if="activePanelName === null"
|
|
:panels="panels"
|
|
:title="title"
|
|
:experiment="experiment"
|
|
>
|
|
<template #footer>
|
|
<slot name="welcome-footer"> </slot>
|
|
</template>
|
|
</welcome-page>
|
|
<div v-else class="row">
|
|
<div class="col-lg-3">
|
|
<div v-safe-html="activePanel.illustration" class="gl-text-white"></div>
|
|
<h4>{{ activePanel.title }}</h4>
|
|
|
|
<p v-if="hasTextDetails">{{ details }}</p>
|
|
<component :is="details" v-else />
|
|
|
|
<slot name="extra-description"></slot>
|
|
</div>
|
|
<div class="col-lg-9">
|
|
<gl-breadcrumb v-if="breadcrumbs" :items="breadcrumbs">
|
|
<template #separator>
|
|
<gl-icon name="chevron-right" :size="8" />
|
|
</template>
|
|
</gl-breadcrumb>
|
|
<legacy-container :key="activePanel.name" :selector="activePanel.selector" />
|
|
</div>
|
|
</div>
|
|
</template>
|