Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add copy code

Browse Source
This commit is contained in:
zernonia 2024-06-18 09:36:02 +08:00
parent 63732f1c47
commit f1a2dab738
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/www/.vitepress/theme/components/ComponentPreview.vue
View File

@ -1,7 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { codeToHtml } from 'shiki' import { codeToHtml } from 'shiki'
import MagicString from 'magic-string' import MagicString from 'magic-string'
import { useClipboard } from '@vueuse/core'
import { cssVariables } from '../config/shiki' import { cssVariables } from '../config/shiki'
import StyleSwitcher from './StyleSwitcher.vue' import StyleSwitcher from './StyleSwitcher.vue'
import ComponentLoader from './ComponentLoader.vue' import ComponentLoader from './ComponentLoader.vue'
@ -24,6 +25,7 @@ const { style, codeConfig } = useConfigStore()
const rawString = ref('') const rawString = ref('')
const codeHtml = ref('') const codeHtml = ref('')
const transformedRawString = computed(() => transformImportPath(rawString.value))
function transformImportPath(code: string) { function transformImportPath(code: string) {
const s = new MagicString(code) const s = new MagicString(code)
@ -35,7 +37,7 @@ function transformImportPath(code: string) {
watch([style, codeConfig], async () => { watch([style, codeConfig], async () => {
try { try {
rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim()) rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
codeHtml.value = await codeToHtml(transformImportPath(rawString.value), { codeHtml.value = await codeToHtml(transformedRawString.value, {
lang: 'vue', lang: 'vue',
theme: cssVariables, theme: cssVariables,
}) })
@ -44,6 +46,8 @@ watch([style, codeConfig], async () => {
console.error(err) console.error(err)
} }
}, { immediate: true, deep: true }) }, { immediate: true, deep: true })
const { copy, copied } = useClipboard()
</script> </script>
<template> <template>
@ -86,8 +90,12 @@ watch([style, codeConfig], async () => {
<ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" /> <ComponentLoader v-bind="$attrs" :key="style" :name="name" :type-name="'example'" />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="code"> <TabsContent value="code" class="vp-doc">
<div v-if="codeHtml" class="language-vue" style="flex: 1;" v-html="codeHtml" /> <div v-if="codeHtml" class="language-vue" style="flex: 1;">
<button title="Copy Code" class="copy" :class="{ copied }" @click="copy(transformedRawString)" />
<div v-html="codeHtml" />
</div>
<slot v-else /> <slot v-else />
</TabsContent> </TabsContent>
</Tabs> </Tabs>