From 321f3925b10ce48e8e796cedf1d49c6744736227 Mon Sep 17 00:00:00 2001
From: janat08 <jey.and.key@gmail.com>
Date: Thu, 13 Jun 2019 11:00:34 +0600
Subject: [PATCH 1/3] tabs

---
 package.json            |  1 +
 src/components/Tabs.vue | 31 +++++++++++++++++++++++++++++++
 src/index.js            |  2 ++
 yarn.lock               |  5 +++++
 4 files changed, 39 insertions(+)
 create mode 100644 src/components/Tabs.vue

diff --git a/package.json b/package.json
index 37c1603b..d45f99ee 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
new file mode 100644
index 00000000..a223b27e
--- /dev/null
+++ b/src/components/Tabs.vue
@@ -0,0 +1,31 @@
+<template>
+  <other-tabs>
+    <tab v-for="(title, index) in titles" :key="title" title="title">{{
+      bodies[index]
+    }}</tab>
+  </other-tabs>
+</template>
+
+<script>
+import {Tabs as otherTabs, Tab} from 'vue-slim-tabs'
+
+export default {
+  name: 'Tabs',
+  components: {
+    otherTabs,
+    Tab
+  },
+  props: {
+    titles: {
+      type: Array,
+      required: true
+    },
+    bodies: {
+      type: Array,
+      require: true
+    }
+  }
+}
+</script>
+
+<style src="vue-slim-tabs/themes/default.css"></style>
diff --git a/src/index.js b/src/index.js
index 8d58e0d9..389be4a9 100644
--- a/src/index.js
+++ b/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)
diff --git a/yarn.lock b/yarn.lock
index e8c4c204..e4740e86 100644
--- a/yarn.lock
+++ b/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"

From 0bbc21745a31701703ed57527b6a39a58e12299e Mon Sep 17 00:00:00 2001
From: janat08 <jey.and.key@gmail.com>
Date: Thu, 13 Jun 2019 11:26:51 +0600
Subject: [PATCH 2/3] readme

---
 src/components/Tabs.vue            |  2 +-
 website/docs/builtin-components.md | 24 ++++++++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index a223b27e..8c54bf90 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <other-tabs>
-    <tab v-for="(title, index) in titles" :key="title" title="title">{{
+    <tab v-for="(title, index) in titles" :key="title" :title="title">{{
       bodies[index]
     }}</tab>
   </other-tabs>
diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
index c9bec423..e0bedaa2 100644
--- a/website/docs/builtin-components.md
+++ b/website/docs/builtin-components.md
@@ -204,3 +204,27 @@ 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.
+
+| Prop | Type     | Default | Description |
+| ---- | -------- | ------- | ----------- |
+| titles   | `array` | N/A     | Tab names     |
+| bodies   | `array` | N/A     | Tab bodies    |
+
+Example:
+
+```markdown
+<Tabs 
+  v-bind:titles="['first', 'second']" 
+  v-bind:bodies="['number one', 'last place']"
+/>
+```
+
+<Tabs 
+  v-bind:titles="['first', 'second']" 
+  v-bind:bodies="['number one', 'last place']"
+/>

From d2b08b2575cfedb19b6b4effa4fc336d0f5d7e49 Mon Sep 17 00:00:00 2001
From: janat08 <jey.and.key@gmail.com>
Date: Sat, 15 Jun 2019 09:51:58 +0600
Subject: [PATCH 3/3] markdown

---
 src/components/Tabs.vue            | 48 +++++++++++++++----
 src/utils/inlineRender.js          | 22 +++++++++
 website/docs/builtin-components.md | 76 ++++++++++++++++++++++++++----
 3 files changed, 128 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/inlineRender.js

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index 8c54bf90..b2d50895 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,28 +1,56 @@
 <template>
-  <other-tabs>
-    <tab v-for="(title, index) in titles" :key="title" :title="title">{{
-      bodies[index]
-    }}</tab>
-  </other-tabs>
+  <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: {
-    titles: {
+    all: {
       type: Array,
       required: true
-    },
-    bodies: {
-      type: Array,
-      require: true
     }
   }
 }
diff --git a/src/utils/inlineRender.js b/src/utils/inlineRender.js
new file mode 100644
index 00000000..e82920c1
--- /dev/null
+++ b/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
diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
index e0bedaa2..a89cbebc 100644
--- a/website/docs/builtin-components.md
+++ b/website/docs/builtin-components.md
@@ -208,23 +208,83 @@ In general you don't need to use them directly, since we automatically convert `
 
 ## `<Tabs>`
 
-Window menu in 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 |
 | ---- | -------- | ------- | ----------- |
-| titles   | `array` | N/A     | Tab names     |
-| bodies   | `array` | N/A     | Tab bodies    |
-
+| 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:titles="['first', 'second']" 
-  v-bind:bodies="['number one', 'last place']"
+  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:titles="['first', 'second']" 
-  v-bind:bodies="['number one', 'last place']"
+  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',
+    },
+  ]"
 />
+
+