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

feat: add codesandbox

Browse Source
This commit is contained in:
zernonia 2023-10-21 21:14:21 +08:00
parent 511ce84942
commit 616ffdca5e
5 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/www/.vitepress/theme/components/CodeSandbox.vue
View File

@ -3,26 +3,19 @@ import { onMounted, ref } from 'vue'
import { Icon } from '@iconify/vue'
import { makeCodeSandboxParams } from '../utils/codeeditor'
import Tooltip from './Tooltip.vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import { type Style } from '@/lib/registry/styles'
const props = defineProps<{
name: string
code: string
style: Style
}>()
const sources = ref<Record<string, string>>({})
onMounted(() => {
// props.files?.forEach((file) => {
// if (file.endsWith('.vue')) {
// import(`../components/demo/${props.name}/${file.replace('.vue', '')}.vue?raw`).then(
// res => (sources.value[file] = res.default),
// )
// }
// else if (file.endsWith('.js')) {
// import(`../components/demo/${props.name}/${file.replace('.js', '')}.js?raw`).then(
// res => (sources.value[file] = res.default),
// )
// }
// })
sources.value['App.vue'] = props.code
})
</script>
@ -31,12 +24,12 @@ onMounted(() => {
<input type="hidden" name="query" value="file=src/App.vue">
<input type="hidden" name="environment" value="server">
<input type="hidden" name="hidedevtools" value="1">
<input type="hidden" name="parameters" :value="makeCodeSandboxParams(name, sources)">
<input type="hidden" name="parameters" :value="makeCodeSandboxParams(name, style, sources)">
<Tooltip :content="`Open ${name} in CodeSandbox`">
<button type="submit">
<Button :variant="'ghost'" :size="'icon'" type="submit">
<Icon icon="ph-codesandbox-logo" />
</button>
</Button>
</Tooltip>
</form>
</template>

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

@ -2,6 +2,7 @@
import StyleSwitcher from './StyleSwitcher.vue'
import ComponentLoader from './ComponentLoader.vue'
import Stackblitz from './Stackblitz.vue'
import CodeSandbox from './CodeSandbox.vue'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
import { useConfigStore } from '@/stores/config'
import { cn } from '@/lib/utils'
@ -40,7 +41,11 @@ const { style } = useConfigStore()
<TabsContent value="preview" class="relative rounded-md border">
<div class="flex items-center justify-between p-4">
<StyleSwitcher />
<Stackblitz :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
<div class="flex items-center gap-x-1">
<Stackblitz :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
<CodeSandbox :key="style" :style="style" :name="name" :code="decodeURIComponent(sfcTsCode ?? '')" />
</div>
</div>
<div
:class="cn('preview flex min-h-[350px] w-full justify-center p-6 lg:p-10', {

5
apps/www/.vitepress/theme/components/Stackblitz.vue
View File

@ -3,6 +3,7 @@ import { onMounted, ref } from 'vue'
import { Icon } from '@iconify/vue'
import { makeStackblitzParams } from '../utils/codeeditor'
import Tooltip from './Tooltip.vue'
import { Button } from '@/lib/registry/new-york/ui/button'
import { type Style } from '@/lib/registry/styles'
const props = defineProps<{
@ -25,9 +26,9 @@ function handleClick() {
<template>
<div>
<Tooltip :content="`Open ${name} in Stackblitz`">
<button @click="handleClick">
<Button :variant="'ghost'" :size="'icon'" @click="handleClick">
<Icon icon="simple-icons:stackblitz" />
</button>
</Button>
</Tooltip>
</div>
</template>

41
apps/www/.vitepress/theme/layout/MainLayout.vue
View File

@ -119,26 +119,29 @@ watch(() => $route.path, (n) => {
</div>
</Button>
<div
v-for="link in links"
:key="link.name"
class="flex items-center space-x-1"
>
<a :href="link.href" target="_blank" class="text-foreground">
<component :is="link.icon" class="w-5 h-5" />
</a>
</div>
<div class="flex items-center gap-x-1">
<Button
v-for="link in links"
:key="link.name"
as="a"
:href="link.href" target="_blank"
:variant="'ghost'" :size="'icon'"
>
<component :is="link.icon" class="w-[20px] h-[20px]" />
</Button>
<button
class="flex items-center justify-center"
aria-label="Toggle dark mode"
@click="toggleDark()"
>
<component
:is="isDark ? RadixIconsSun : RadixIconsMoon"
class="w-5 h-5 text-foreground"
/>
</button>
<Button
class="flex items-center justify-center"
aria-label="Toggle dark mode"
:variant="'ghost'"
:size="'icon'" @click="toggleDark()"
>
<component
:is="isDark ? RadixIconsSun : RadixIconsMoon"
class="w-[20px] h-[20px] text-foreground"
/>
</Button>
</div>
</div>
</div>
</header>

7
apps/www/.vitepress/theme/utils/codeeditor.ts
View File

@ -86,6 +86,7 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
'tailwindcss-animate': 'latest',
[iconPackage]: 'latest',
'shadcn-vue': 'latest',
'typescript': 'latest',
}
const devDependencies = {
@ -119,8 +120,8 @@ function constructFiles(componentName: string, style: Style, sources: Record<str
const files = {
'package.json': {
content: {
name: `radix-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
scripts: { start: `npx shadcn-vue@latest add ${registryDependencies.join(' ')} -y && vite` },
name: `shadcn-vue-${componentName.toLowerCase().replace(/ /g, '-')}`,
scripts: { start: `shadcn-vue add ${registryDependencies.join(' ')} -y && vite` },
dependencies,
devDependencies,
},
@ -201,7 +202,7 @@ createApp(App).mount('#app')`,
}
#app {
@apply w-full flex items-center justify-center;
@apply w-full flex items-center justify-center px-12;
}`,
isBinary: false,
},