palettes editor done

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -72,8 +72,9 @@ export default {
     })
 
     // ### Palette stuff
-    const palettes = reactive({
-      light: {
+    const palettes = reactive([
+      {
+        name: 'light',
         bg: '#f2f6f9',
         fg: '#d6dfed',
         text: '#304055',
@@ -85,7 +86,8 @@ export default {
         cOrange: '#ffa500',
         border: '#d8e6f9'
       },
-      dark: {
+      {
+        name: 'dark',
         bg: '#121a24',
         fg: '#182230',
         text: '#b9b9ba',
@@ -96,10 +98,11 @@ export default {
         cGreen: '#0fa00f',
         cOrange: '#ffa500'
       }
-    })
+    ])
 
     const palettesOut = computed(() => {
-      return Object.entries(palettes).map(([name, palette]) => {
+      console.log('WORK DAMN', palettes)
+      return palettes.map(({ name, ...palette }) => {
         const entries = Object
           .entries(palette)
           .map(([slot, data]) => `  ${slot}: ${data};`)
@@ -109,9 +112,10 @@ export default {
       }).join('\n\n')
     })
 
-    const editedPalette = ref('dark')
+    const editedPalette = ref(0)
     const palette = computed({
       get () {
+        console.log(palettes, editedPalette.value)
         return palettes[editedPalette.value]
       },
       set (newPalette) {
@@ -435,10 +439,12 @@ export default {
 
     const updatePreview = () => {
       try {
+        const { name, ...paletteData } = palette.value
+        console.log('WORK', paletteData)
         const rules = init({
           inputRuleset: editorFriendlyToOriginal.value,
           initialStaticVars: {
-            ...palette.value
+            ...paletteData
           },
           ultimateBackgroundColor: '#000000',
           rootComponentName: selectedComponentName.value,
@@ -529,6 +535,7 @@ export default {
       license,
       website,
       palette,
+      palettes,
       editedPalette,
       getNewPalette,
       componentKeys,

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -89,10 +89,33 @@
 
   .palette-editor {
     display: grid;
+    grid-template-areas:
+      "label    editor"
+      "selector editor"
+      "motion   editor";
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0.5em;
+
+    .palette-editor-edit {
+      grid-area: editor;
+    }
 
     .palette-selector {
       &-label {
         font-weight: bold;
+        grid-area: label;
+        margin: 0;
+      }
+    }
+
+    .palette-list {
+      grid-area: selector;
+      margin: 0;
+
+      &-movement {
+        grid-area: motion;
+        margin: 0;
       }
     }
   }

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -271,14 +271,14 @@
             id="palette-selector"
             v-model="editedPalette"
             class="palette-list"
-            size="10"
+            size="9"
           >
             <option
               v-for="(p, index) in palettes"
-              :key="p"
+              :key="p.name"
               :value="index"
             >
-              {{ p }}
+              {{ p.name }}
             </option>
           </Select>
           <SelectMotion
@@ -286,9 +286,12 @@
             v-model="palettes"
             :selected-id="editedPalette"
             :get-add-value="getNewPalette"
-            @update:selectedId="e => editecPalette = e"
+            @update:selectedId="e => editedPalette = e"
           />
-        <PaletteEditor v-model="palette" />
+        <PaletteEditor
+          class="palette-editor-edit"
+          v-model="palette"
+        />
       </div>
     </tab-switcher>
   </div>