continue migration: make website working

assets/vue/deck.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <a-tabs class="tabs" @select="value = $event.value;">
+            <template v-slot:default><slot name="tabs" :value="value"/></template>
+        </a-tabs>
+
+        <slot :value="value"></slot>
+    </div>
+</template>
+
+
+<script>
+import Tabs from './tabs.vue';
+
+export default {
+    props: ['default'],
+
+    data() {
+        return {
+            value: this.default,
+        }
+    },
+
+    components: {
+        'a-tabs': Tabs,
+    }
+}
+</script>

assets/vue/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+import Tab from './tab.vue';
+import Tabs from './tabs.vue';
+
+Vue.component('a-tab', Tab);
+Vue.component('a-tabs', Tabs);
+
+export {Tab, Tabs};
+
+

assets/vue/tab.vue

@@ -0,0 +1,31 @@
+<template>
+    <li @click.prevent="onclick"
+        :class="{'is-active': $parent.value == value}">
+        <slot></slot>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        value: { default: undefined },
+    },
+
+    methods: {
+        select() {
+            this.$parent.selectTab(this);
+        },
+
+        onclick(event) {
+            this.select();
+            /*if(event.target.href != document.location)
+                window.history.pushState(
+                    { url: event.target.href },
+                    event.target.innerText + ' - ' + document.title,
+                    event.target.href
+                ) */
+        }
+    }
+}
+</script>
+

assets/vue/tabs.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="tabs is-centered">
+            <ul><slot name="tabs" :value="value" /></ul>
+        </div>
+
+        <slot :value="value"/>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        default: { default: null },
+    },
+
+    data() {
+        return {
+            value: this.default,
+        }
+    },
+
+    computed: {
+        tab() {
+            const vnode = this.$slots.default && this.$slots.default.find(
+                elm => elm.child && elm.child.value == this.value
+            );
+            return vnode && vnode.child;
+        }
+    },
+
+    methods: {
+        selectTab(tab) {
+            const value = tab.value;
+            if(this.value === value)
+                return;
+
+            this.value = value;
+            this.$emit('select', {target: this, value: value, tab: tab});
+        },
+    },
+}
+</script>
+
+