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>
<demo-frame v-if="inline && mainFile" v-bind="props" />
<div class="demo" v-else>
<template v-if="mainFile">
<demo-frame class="demo__preview" v-bind="props" />
<div class="demo__source" v-if="showSource">
<div class="demo__tabs" v-if="showFileNames">
<button
class="demo__tab"
:class="{ 'is-active': currentIndex === index}"
v-for="(file, index) in files"
:key="index"
@click="currentIndex = index"
>
{{ file.name }}
</button>
<client-only>
<demo-frame v-if="inline && mainFile" v-bind="props" />
<div class="demo" v-else>
<template v-if="mainFile">
<demo-frame class="demo__preview" v-bind="props" />
<div class="demo__source" v-if="showSource">
<div class="demo__tabs" v-if="showFileNames">
<button
class="demo__tab"
:class="{ 'is-active': currentIndex === index}"
v-for="(file, index) in files"
:key="index"
@click="currentIndex = index"
>
{{ 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 class="demo__code" v-if="activeFile" :key="activeFile.path">
<!-- eslint-disable-next-line -->
<prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
<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 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>
</client-only>
</template>
<script>