Skip to content

Commit

Permalink
fix($core): component CodeGroup loads correctly on clientfix #2711 (#…
Browse files Browse the repository at this point in the history
…2794)

* fix($core): wrap code group in ClientOnly

* fix($core): component CodeGroup loads correctly on client

* fix($core): component CodeGroup loads correctly on client

* fix($core): activate codetabs whenever we update the arr
  • Loading branch information
d-pollard authored Feb 10, 2021
1 parent 50388d9 commit 51277f8
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 42 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export default {
type: Boolean,
default: false
}
},
mounted () {
if (this.$parent && this.$parent.loadTabs) {
this.$parent.loadTabs()
}
}
}
</script>
Expand Down
99 changes: 57 additions & 42 deletions packages/@vuepress/theme-default/global-components/CodeGroup.vue
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
<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)"
<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"
>
{{ tab.title }}
</button>
</li>
</ul>
<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>
<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>
Expand All @@ -38,31 +40,44 @@ export default {
},
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')
this.activateCodeTab(index)
}
},
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
}
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')
}
}
}
}
Expand Down

0 comments on commit 51277f8

Please sign in to comment.