mjz update

vdoing/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 #42b983
+  &.error
+    background-color #DA5961 // #f66
+  &.warning, &.warn, &.yellow
+    background-color darken(#ffe564, 35%)
+  & + &
+    margin-left 5px
+</style>

vdoing/global-components/CodeBlock.vue

@@ -0,0 +1,38 @@
+<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
+    }
+  }
+}
+</script>
+
+<style scoped>
+.theme-code-block {
+  display: none;
+}
+.theme-code-block__active {
+  display: block;
+}
+.theme-code-block > pre {
+  background-color: orange;
+}
+@media (max-width: 419px) {
+  .theme-code-group div[class*='language-'] {
+    margin: 0;
+  }
+}
+</style>

vdoing/global-components/CodeGroup.vue

@@ -0,0 +1,99 @@
+<template>
+  <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>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.codeTabs.forEach(tab => {
+        tab.elm.classList.remove('theme-code-block__active')
+      })
+      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+    }
+  },
+  mounted () {
+    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
+    }
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.theme-code-group, .theme-code-group__nav
+  background-color var(--codeBg)
+  padding-bottom 22px
+  border-radius 6px
+  padding-left 10px
+  padding-top 10px
+.theme-code-group__nav
+  margin-bottom -35px
+.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 var(--codeColor)
+  font-weight 600
+  opacity 0.85
+.theme-code-group__nav-tab-active
+  border-bottom $accentColor 1px solid
+  opacity 1
+.pre-blank
+  color $accentColor
+</style>