ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

render demo client-only

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-11 09:38:35 +01:00
parent d75027a121
commit 980e70e9c8
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/src/components/Demo/index.vue
View File

@@ -1,38 +1,40 @@
<template> <template>
<demo-frame v-if="inline && mainFile" v-bind="props" /> <client-only>
<div class="demo" v-else> <demo-frame v-if="inline && mainFile" v-bind="props" />
<template v-if="mainFile"> <div class="demo" v-else>
<demo-frame class="demo__preview" v-bind="props" /> <template v-if="mainFile">
<div class="demo__source" v-if="showSource"> <demo-frame class="demo__preview" v-bind="props" />
<div class="demo__tabs" v-if="showFileNames"> <div class="demo__source" v-if="showSource">
<button <div class="demo__tabs" v-if="showFileNames">
class="demo__tab" <button
:class="{ 'is-active': currentIndex === index}" class="demo__tab"
v-for="(file, index) in files" :class="{ 'is-active': currentIndex === index}"
:key="index" v-for="(file, index) in files"
@click="currentIndex = index" :key="index"
> @click="currentIndex = index"
{{ file.name }} >
</button> {{ file.name }}
</button>
</div>
<div class="demo__code" v-if="activeFile" :key="activeFile.path">
<!-- eslint-disable-next-line -->
<prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
</div>
</div> </div>
<div class="demo__code" v-if="activeFile" :key="activeFile.path"> <div class="demo__meta">
<!-- eslint-disable-next-line --> <div class="demo__name">
<prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism> Demo/{{ name }}
</div>
<a class="demo__link" :href="githubUrl" target="_blank">
Edit on GitHub →
</a>
</div> </div>
</template>
<div v-else class="demo__error">
Could not find a demo called “{{ name }}”.
</div> </div>
<div class="demo__meta">
<div class="demo__name">
Demo/{{ name }}
</div>
<a class="demo__link" :href="githubUrl" target="_blank">
Edit on GitHub →
</a>
</div>
</template>
<div v-else class="demo__error">
Could not find a demo called “{{ name }}”.
</div> </div>
</div> </client-only>
</template> </template>
<script> <script>