From 3e61384d95a80a74c6f6d207817d1c2a6f070ce1 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 18 Sep 2023 00:10:10 +0800
Subject: [PATCH] fix: customizer code not populating

---
 .../theme/components/CustomizerCode.vue       | 60 +++++++++++++++++++
 .../.vitepress/theme/layout/ThemingLayout.vue |  2 +
 2 files changed, 62 insertions(+)
 create mode 100644 apps/www/.vitepress/theme/components/CustomizerCode.vue

diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
new file mode 100644
index 00000000..62ed8ecd
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -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>
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index e7172aaf..56398853 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -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>