136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<template>
|
|
<v-row justify="center">
|
|
<v-col
|
|
cols="12"
|
|
lg="8"
|
|
>
|
|
<v-card
|
|
style="float: right; z-index: 4;"
|
|
class="ma-4"
|
|
>
|
|
<v-fade-transition mode="out-in">
|
|
<v-list
|
|
v-if="siblingDocs.length > 1"
|
|
:dense="siblingDocs.length > 5"
|
|
>
|
|
<doc-list-item
|
|
v-for="sibling in siblingDocs"
|
|
:key="sibling._id"
|
|
:doc="sibling"
|
|
:icon="siblingHasIcon"
|
|
/>
|
|
</v-list>
|
|
</v-fade-transition>
|
|
</v-card>
|
|
<v-fade-transition mode="out-in">
|
|
<div
|
|
:key="doc && doc.name || 'Documentation Home'"
|
|
class="d-flex align-center mb-4"
|
|
>
|
|
<v-avatar
|
|
v-if="(doc && doc.icon) || (!doc)"
|
|
size="56"
|
|
>
|
|
<svg-icon
|
|
v-if="doc && doc.icon"
|
|
large
|
|
:shape="doc.icon.shape"
|
|
/>
|
|
<v-icon
|
|
v-else-if="!doc"
|
|
large
|
|
>
|
|
mdi-home
|
|
</v-icon>
|
|
</v-avatar>
|
|
<h1
|
|
v-if="doc"
|
|
>
|
|
{{ doc.name }}
|
|
</h1>
|
|
<h1
|
|
v-else
|
|
>
|
|
Documentation
|
|
</h1>
|
|
</div>
|
|
</v-fade-transition>
|
|
<v-fade-transition mode="out-in">
|
|
<markdown-text
|
|
v-if="doc"
|
|
:key="doc._id"
|
|
:markdown="doc.description"
|
|
@click="mdClick"
|
|
/>
|
|
</v-fade-transition>
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
lg="8"
|
|
>
|
|
<v-fade-transition
|
|
mode="out-in"
|
|
leave-absolute
|
|
hide-on-leave
|
|
>
|
|
<v-row :key="doc && doc._id">
|
|
<v-col
|
|
v-for="child in childDocs"
|
|
:key="child._id"
|
|
cols="12"
|
|
sm="6"
|
|
md="4"
|
|
xl="3"
|
|
>
|
|
<doc-card :doc="child" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-fade-transition>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import MarkdownText from '/imports/client/ui/components/MarkdownText.vue';
|
|
import DocCard from '/imports/client/ui/docs/DocCard.vue';
|
|
import DocListItem from '/imports/client/ui/docs/DocListItem.vue';
|
|
import { find } from 'lodash';
|
|
|
|
export default {
|
|
components: {
|
|
DocListItem,
|
|
MarkdownText,
|
|
DocCard,
|
|
},
|
|
props: {
|
|
doc: {
|
|
type: Object,
|
|
default: undefined,
|
|
},
|
|
childDocs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
siblingDocs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
siblingHasIcon() {
|
|
return !!find(this.siblingDocs, doc => doc.icon);
|
|
}
|
|
},
|
|
methods: {
|
|
mdClick(e) {
|
|
const target = e.target || e.srcElement;
|
|
const href = target && target.href;
|
|
if (!href) return;
|
|
const path = href.split('/docs/')[1];
|
|
if (!path) return;
|
|
e.preventDefault();
|
|
this.$router.push('/docs/' + path);
|
|
},
|
|
}
|
|
}
|
|
</script> |