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

fix: customizer code not populating

Browse Source
This commit is contained in:
zernonia 2023-09-18 00:10:10 +08:00
parent 7e8b7c5b54
commit 3e61384d95
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
apps/www/.vitepress/theme/components/CustomizerCode.vue Normal file
View File

@ -0,0 +1,60 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import { useConfigStore } from '@/stores/config'
import { themes } from '@/lib/registry'
import { Button } from '@/lib/registry/new-york/ui/button'
import CheckIcon from '~icons/radix-icons/check'
import CopyIcon from '~icons/radix-icons/copy'
const { theme, config } = useConfigStore()
const activeTheme = computed(() => themes.find(i => i.name === theme.value))
const { copy, copied } = useClipboard()
const codeRef = ref<HTMLElement>()
async function copyCode() {
await copy(codeRef.value?.innerText ?? '')
}
</script>
<template>
<div class="relative">
<pre class="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 !py-0 dark:bg-zinc-900">
<code ref="codeRef" class="relative block rounded font-mono text-sm">
<span class="line">@layer base &#123;</span>
<span class="line">:root &#123;</span>
<span class="line">&nbsp;&nbsp;--background: {{ activeTheme?.cssVars.light.background }};</span>
<span class="line">&nbsp;&nbsp;--foreground: {{ activeTheme?.cssVars.light.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line">--{{ prefix }}: {{ activeTheme?.cssVars.light[prefix] }};</span>
<span class="line">--{{ prefix }}-foreground: {{ activeTheme?.cssVars.light[ `${prefix}-foreground`] }};</span>
</template>
<span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.light.border }};</span>
<span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.light.input }};</span>
<span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.light.ring }};</span>
<span class="line">&nbsp;&nbsp;--radius: {{ config.radius }}rem;</span>
<span class="line">&#125;</span>
<span class="line">&nbsp;</span>
<span class="line">.dark &#123;</span>
<span class="line">&nbsp;&nbsp;--background:{{ activeTheme?.cssVars.dark.background }};</span>
<span class="line">&nbsp;&nbsp;--foreground:{{ activeTheme?.cssVars.dark.foreground }};</span>
<template v-for="prefix in (['card', 'popover', 'primary', 'secondary', 'muted', 'accent', 'destructive'] as const)" :key="prefix">
<span class="line">--{{ prefix }}:{{ activeTheme?.cssVars.dark[ prefix] }};</span>
<span class="line">--{{ prefix }}-foreground:{{ activeTheme?.cssVars.dark[ `${prefix}-foreground`] }};</span>
</template>
<span class="line">&nbsp;&nbsp;--border:{{ activeTheme?.cssVars.dark.border }};</span>
<span class="line">&nbsp;&nbsp;--input:{{ activeTheme?.cssVars.dark.input }};</span>
<span class="line">&nbsp;&nbsp;--ring:{{ activeTheme?.cssVars.dark.ring }};</span>
<span class="line">&#125;</span>
<span class="line">&#125;</span>
</code>
</pre>
<Button size="sm" class="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground" @click="copyCode">
<CheckIcon v-if="copied" class="mr-2 h-4 w-4" />
<CopyIcon v-else class="mr-2 h-4 w-4" />
{{ copied ? 'Copied' : 'Copy' }}
</Button>
</div>
</template>

2
apps/www/.vitepress/theme/layout/ThemingLayout.vue
View File

@ -5,6 +5,7 @@ import { useData } from 'vitepress'
import PageHeader from '../components/PageHeader.vue'
import PageHeaderHeading from '../components/PageHeaderHeading.vue'
import PageHeaderDescription from '../components/PageHeaderDescription.vue'
import CustomizerCode from '../components/CustomizerCode.vue'
import { RADII, useConfigStore } from '@/stores/config'
import { colors } from '@/lib/registry'
import { Button } from '@/lib/registry/new-york/ui/button'
@ -231,6 +232,7 @@ watch(radius, (radius) => {
Copy and paste the following code into your CSS file.
</DialogDescription>
</DialogHeader>
<CustomizerCode />
</DialogContent>
</Dialog>
</div>