tabs

package.json

@@ -25,6 +25,7 @@
     "vue-content-loader": "^0.2.1",
     "vue-router": "^3.0.1",
     "vue-router-prefetch": "^1.1.1",
+    "vue-slim-tabs": "^0.3.0",
     "vue-template-compiler": "^2.6.10",
     "vuex": "^3.0.1",
     "vuex-router-sync": "^5.0.0"

src/components/Tabs.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <other-tabs>
+      <tab
+        v-for="(item, index) in all"
+        :key="item.title + item.body"
+        :title="item.title"
+        v-html="transformed[index]"
+      >
+      </tab>
+    </other-tabs>
+  </div>
+</template>
+
+<script>
+import {Tabs as otherTabs, Tab} from 'vue-slim-tabs'
+import inlineRender from '../utils/inlineRender'
+
+export default {
+  name: 'Tabs',
+  data() {
+    return {
+      transformed: []
+    }
+  },
+  created() {
+    const that = this
+    const {all} = this
+    Promise.all(
+      all.map(x => {
+        const {codeBlock, markdown, body} = x
+        const nl = '\n'
+        if (codeBlock) {
+          const a = inlineRender('```' + codeBlock + nl + body + nl + '```')
+          return a
+        }
+        if (markdown) {
+          return inlineRender(body)
+        }
+        return body
+      })
+    ).then(x => {
+      that.transformed = x
+    })
+  },
+  components: {
+    otherTabs,
+    Tab
+  },
+  props: {
+    all: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style src="vue-slim-tabs/themes/default.css"></style>

src/index.js

@@ -11,6 +11,7 @@ import Badge from './components/Badge.vue'
 import DocuteSelect from './components/DocuteSelect.vue'
 import Note from './components/Note.vue'
 import Gist from './components/Gist.vue'
+import Tabs from './components/Tabs.vue'
 import Loading from './components/Loading.vue'
 import ExternalLinkIcon from './components/icons/ExternalLinkIcon.vue'
 import {INITIAL_STATE_NAME} from './utils/constants'
@@ -23,6 +24,7 @@ import bannerFooter from './plugins/banner-footer'
 import darkThemeToggler from './plugins/dark-theme-toggler'
 import searchPlugin from './plugins/search'
 
+Vue.component(Tabs.name, Tabs)
 Vue.component(ImageZoom.name, ImageZoom)
 Vue.component(Badge.name, Badge)
 Vue.component(DocuteSelect.name, DocuteSelect)

src/utils/inlineRender.js

@@ -0,0 +1,22 @@
+import hooks from '../hooks'
+import markedRenderer from './markedRenderer'
+import marked from './marked'
+import highlight from './highlight'
+
+async function inlineRender(iContent) {
+  let content = await hooks.processPromise('processMarkdown', iContent)
+  const env = {
+    headings: [],
+    mixins: [],
+    config: {}
+  }
+  content = marked(content, {
+    renderer: markedRenderer(hooks),
+    highlight,
+    env
+  })
+  content = await hooks.processPromise('processHTML', content)
+  return content
+}
+
+export default inlineRender

website/docs/builtin-components.md

@@ -204,3 +204,87 @@ Your favorite fruit: {{ favoriteFruit }}
 A hack for using `<style>` and `<script>` tags Vue template.
 
 In general you don't need to use them directly, since we automatically convert `<style>` and `<script>` tags in Markdown to these components.
+
+
+## `<Tabs>`
+
+Window menu in tabs. If choosing codeBlock entire body is treated as code block. Some headings look bad when parsed as markdown. Pure html is supported if markdown is false. Pay attention to the fact that backticks are used for passing body arguments, and that there's no space between opening backtick and next character of body.
+
+| Prop | Type     | Default | Description |
+| ---- | -------- | ------- | ----------- |
+| all   | `array` | N/A     | Array of objects     |
+| all.title   | `string` | N/A     | Tab name    |
+| all.body   | `string` | N/A     | Tab body    |
+| all.codeBlock   | `string` | N/A     | Type of highlighting    |
+| all.markdown   | `boolean` | false     | Parse as markdown    |
+Example:
+
+```markdown
+<Tabs 
+  v-bind:all="[
+    {
+      title: 'mixed',
+      body: 
+`##### will equal 444
+\`\`\`js
+const a= 123
+const b = 321
+return a + b
+\`\`\`
+      `,
+      markdown: 'true',
+    },
+    {
+      title: 'markdown',
+      body: 
+`### asdf
+*sdf*`,
+      markdown: 'true',
+    },
+    {
+      title: 'javascript',
+      body: 
+`const a= 123
+const b = 321
+return a + b
+      `,
+      codeBlock: 'js',
+    },
+  ]"
+/>
+```
+
+<Tabs 
+  v-bind:all="[
+    {
+      title: 'mixed',
+      body: 
+`##### will equal 444
+\`\`\`js
+const a= 123
+const b = 321
+return a + b
+\`\`\`
+      `,
+      markdown: 'true',
+    },
+    {
+      title: 'markdown',
+      body: 
+`### asdf
+*sdf*`,
+      markdown: 'true',
+    },
+    {
+      title: 'javascript',
+      body: 
+`const a= 123
+const b = 321
+return a + b
+      `,
+      codeBlock: 'js',
+    },
+  ]"
+/>
+
+

yarn.lock

@@ -12441,6 +12441,11 @@ vue-router@^3.0.1:
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
   integrity sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg==
 
+vue-slim-tabs@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/vue-slim-tabs/-/vue-slim-tabs-0.3.0.tgz#5930addbbac27feded2a3e6ecbe4579418acf283"
+  integrity sha512-0KaQRcql5ihRHTwvguWw1vxYnxuChLkhXu6AEp0TEHKm2Ax4Y5HL58AhVHZCyNXhRwDK3J+Fh0jzoOR0VI7j7Q==
+
 vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"