feat: add more functionality to theme generator

Author: notwindstone

src/components/themes/ThemeGenerator.vue

@@ -13,31 +13,36 @@ import JSZip from "jszip";
 import { VueCodeHighlighterMulti } from "vue-code-highlighter";
 import "vue-code-highlighter/dist/style.css";
 
+const cssEnabled = ref<boolean>(false);
 const selected = ref<typeof CustomizationTabs[number]["Key"]>("colors");
 const colors = ref<typeof DefaultColors>({ ...DefaultColors });
 const codeView = ref<boolean>(false);
 
 const currentCode = computed(() => {
-  return [
-    {
-      "lang" : "json",
-      "title": "theme.json",
-      "code" : JSON.stringify({
-        "colors": {
-          ...colors.value,
-          "fadeAmount": 0.5,
-          "fadeColor" : "#000000",
-        },
-        "name"   : `A Custom Theme <${Math.floor(Math.random() * 10_000)}>`,
-        "widgets": "Fusion",
-      }, null, 2),
-    },
-    {
-      "lang" : "css",
-      "title": "themeStyle.css",
-      "code" : "/* WIP */",
-    },
-  ];
+  return {
+    // needed to re-render the code view component
+    "key" : Math.random().toString(),
+    "data": [
+      {
+        "lang" : "json",
+        "title": "theme.json",
+        "code" : JSON.stringify({
+          "colors": {
+            ...colors.value,
+            "fadeAmount": 0.5,
+            "fadeColor" : "#000000",
+          },
+          "name"   : `A Custom Theme <${Math.floor(Math.random() * 10_000)}>`,
+          "widgets": "Fusion",
+        }, null, 2),
+      },
+      {
+        "lang" : "css",
+        "title": "themeStyle.css",
+        "code" : "/* WIP */",
+      },
+    ],
+  };
 });
 
 function selectColor({
@@ -53,6 +58,10 @@ function resetColors() {
   colors.value = { ...DefaultColors };
 }
 
+function toggleCSS() {
+  cssEnabled.value = !cssEnabled.value;
+  selected.value = "colors";
+}
 function downloadTheme() {
   const zip = new JSZip;
   const randomKey = Math.floor(Math.random() * 10_000);
@@ -63,7 +72,7 @@ function downloadTheme() {
   }
 
   folder.file("themeStyle.css", "/* WIP */");
-  folder.file("theme.json", currentCode.value[0].code);
+  folder.file("theme.json", currentCode.value.data[0].code);
 
   zip.generateAsync({ "type": "blob" }).then(content => {
     saveAs(content, `customTheme${randomKey}.zip`);
@@ -91,12 +100,13 @@ function importTheme() {}
           :key="tab.Key"
           :aria-label="tab.Name"
           :title="tab.Name"
-          class="group px-4 py-2 first:pt-4"
+          :disabled="tab.Key !== 'colors' && !cssEnabled"
+          class="group px-4 py-2 first:pt-4 disabled:opacity-60"
         >
           <span
             :class="[
               'grid size-10 place-items-center rounded-md transition-[background-color]',
-              'group-hover:bg-catppuccin-800',
+              'group-hover:bg-catppuccin-800 group-disabled:group-hover:bg-transparent',
               selected === tab.Key
                 ? 'bg-catppuccin-800'
                 : 'bg-catppuccin-900',
@@ -107,16 +117,21 @@ function importTheme() {}
         </button>
       </div>
       <div class="w-full flex flex-col gap-4 py-4 pl-4 pr-4 sm:pl-0">
-        <div class="flex flex-wrap gap-4 sm:flex-nowrap">
+        <div class="flex flex-wrap gap-4">
           <button
             v-for="item in [
-              { 'name': 'Export', 'icon': 'i-lucide-share-2', 'action': downloadTheme },
-              { 'name': 'Show JSON & CSS', 'icon': 'i-lucide-braces', 'action': toggleCodeView },
-              { 'name': 'Import Colors', 'icon': 'i-lucide-import', 'action': importTheme },
+              { 'name': 'Toggle CSS', 'icon': 'i-lucide-brush', 'action': toggleCSS, 'active': cssEnabled },
+              { 'name': 'Export', 'icon': 'i-lucide-share-2', 'action': downloadTheme, 'active': false },
+              { 'name': 'Show JSON & CSS', 'icon': 'i-lucide-braces',
+                'action': toggleCodeView, 'active': codeView },
+              { 'name': 'Import Colors', 'icon': 'i-lucide-import', 'action': importTheme, 'active': false, },
             ]"
             :key="item.name"
             @click="item.action"
-            class="w-fit flex flex-nowrap items-center gap-4 rounded-md p-2 transition-[background-color] hover:bg-catppuccin-800"
+            :class="[
+              'w-fit flex flex-nowrap items-center gap-4 rounded-md p-2 transition-[background-color]',
+              item.active && 'bg-catppuccin-800',
+            ]"
           >
             <span :class="[item.icon, 'block size-6']" />
             <span class="block text-white font-medium">
@@ -127,7 +142,8 @@ function importTheme() {}
         <div class="select-text">
           <VueCodeHighlighterMulti
             v-if="codeView"
-            :code="currentCode"
+            :key="currentCode.key"
+            :code="currentCode.data"
           />
         </div>
         <ColorGenerator