blob: b5b920257fc1a99bd0731157c7346e372090ef64 [file] [log] [blame]
<template>
<main ref="container" class="example-panel">
<section class="example-section" v-for="(category, i) in category.group" :key="`${category.type}-${i}`">
<h2 :ref="category.type" class="title" @click="scrollTo(category.type)">{{category.title || category.name | i18n}}</h2>
<p class="desc" v-if="category.desc || category.docLink">
<span class="text" v-if="category.desc">{{category.desc | i18n}}</span>
<a class="link" v-if="category.docLink" :href="category.docLink | i18n | relative">Read more</a>
</p>
<div class="example-list">
<figure class="example-card" v-for="example in category.examples" :key="example.hash | i18n">
<a class="preview" target="_blank" :href="example.hash | i18n | url">
<img class="screenshot" :src="example.screenshot | i18n">
</a>
<figcaption class="message">{{example.title | i18n}}</figcaption>
</figure>
</div>
</section>
</main>
</template>
<script>
export default {
props: ['type', 'category', 'language'],
filters: {
url (hash) {
return `http://dotwe.org/vue/${hash}`
}
},
methods: {
scrollTo (hash) {
if (!hash) {
hash = this.parseHash().hash
}
const $container = this.$refs.container
const $tabs = this.$refs[hash]
if ($tabs && $tabs.length) {
// TODO: smooth scroll
$container.scrollTop = $tabs[0].offsetTop
if (typeof location !== 'undefined') {
location.hash = `#${this.type}/${hash}`
}
} else {
$container.scrollTop = 0
}
}
},
mounted () { this.scrollTo() },
updated () { this.scrollTo() }
}
</script>