From 5d3b07801456d16dcc2c75dcccd48d508a6b60cc Mon Sep 17 00:00:00 2001
From: Li Jin <dragon-fly@qq.com>
Date: Mon, 19 Apr 2021 23:41:33 +0800
Subject: first commit for Yuescript document site.

---
 .../.vuepress/theme/global-components/Badge.vue    |  44 ++++++++
 .../theme/global-components/CodeBlock.vue          |  41 +++++++
 .../theme/global-components/CodeGroup.vue          | 120 +++++++++++++++++++++
 3 files changed, 205 insertions(+)
 create mode 100644 doc/docs/.vuepress/theme/global-components/Badge.vue
 create mode 100644 doc/docs/.vuepress/theme/global-components/CodeBlock.vue
 create mode 100644 doc/docs/.vuepress/theme/global-components/CodeGroup.vue

(limited to 'doc/docs/.vuepress/theme/global-components')

diff --git a/doc/docs/.vuepress/theme/global-components/Badge.vue b/doc/docs/.vuepress/theme/global-components/Badge.vue
new file mode 100644
index 0000000..53951f9
--- /dev/null
+++ b/doc/docs/.vuepress/theme/global-components/Badge.vue
@@ -0,0 +1,44 @@
+<script>
+export default {
+  functional: true,
+  props: {
+    type: {
+      type: String,
+      default: 'tip'
+    },
+    text: String,
+    vertical: {
+      type: String,
+      default: 'top'
+    }
+  },
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type],
+      style: {
+        verticalAlign: props.vertical
+      }
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.badge
+  display inline-block
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius 3px
+  padding 0 6px
+  color white
+  background-color #42b983
+  &.tip, &.green
+    background-color $badgeTipColor
+  &.error
+    background-color $badgeErrorColor
+  &.warning, &.warn, &.yellow
+    background-color $badgeWarningColor
+  & + &
+    margin-left 5px
+</style>
diff --git a/doc/docs/.vuepress/theme/global-components/CodeBlock.vue b/doc/docs/.vuepress/theme/global-components/CodeBlock.vue
new file mode 100644
index 0000000..d59d85b
--- /dev/null
+++ b/doc/docs/.vuepress/theme/global-components/CodeBlock.vue
@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="theme-code-block"
+    :class="{ 'theme-code-block__active': active }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    if (this.$parent && this.$parent.loadTabs) {
+      this.$parent.loadTabs()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-block {
+    display: none;
+  }
+  .theme-code-block__active {
+    display: block;
+  }
+  .theme-code-block > pre {
+    background-color: orange;
+  }
+</style>
diff --git a/doc/docs/.vuepress/theme/global-components/CodeGroup.vue b/doc/docs/.vuepress/theme/global-components/CodeGroup.vue
new file mode 100644
index 0000000..ac6ec55
--- /dev/null
+++ b/doc/docs/.vuepress/theme/global-components/CodeGroup.vue
@@ -0,0 +1,120 @@
+<template>
+  <ClientOnly>
+    <div class="theme-code-group">
+      <div class="theme-code-group__nav">
+        <ul class="theme-code-group__ul">
+          <li
+            v-for="(tab, i) in codeTabs"
+            :key="tab.title"
+            class="theme-code-group__li"
+          >
+            <button
+              class="theme-code-group__nav-tab"
+              :class="{
+                'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
+              }"
+              @click="changeCodeTab(i)"
+            >
+              {{ tab.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+      <slot />
+      <pre
+        v-if="codeTabs.length < 1"
+        class="pre-blank"
+      >// Make sure to add code blocks to your code group</pre>
+    </div>
+  </ClientOnly>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.activateCodeTab(index)
+    }
+  },
+  mounted () {
+    this.loadTabs()
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    },
+    loadTabs () {
+      this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+        if (slot.componentOptions.propsData.active === '') {
+          this.activeCodeTabIndex = index
+        }
+
+        return {
+          title: slot.componentOptions.propsData.title,
+          elm: slot.elm
+        }
+      })
+
+      if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+        this.activeCodeTabIndex = 0
+      }
+
+      this.activateCodeTab(0)
+    },
+    activateCodeTab (index) {
+      this.codeTabs.forEach(tab => {
+        if (tab.elm) {
+          tab.elm.classList.remove('theme-code-block__active')
+        }
+      })
+
+      if (this.codeTabs[index].elm) {
+        this.codeTabs[index].elm.classList.add('theme-code-block__active')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: $codeBgColor;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+  .theme-code-group__ul {
+    margin: auto 0;
+    padding-left: 0;
+    display: inline-flex;
+    list-style: none;
+  }
+  .theme-code-group__li {}
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+  .pre-blank {
+    color: #42b983;
+  }
+</style>
-- 
cgit v1.2.3-55-g6feb