fix SelectMotion not working properly on palettes/vDirectives

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

@@ -121,9 +121,22 @@ export default {
         border: '#d8e6f9'
       }
     ])
+
+    // This is kinda dumb but you cannot "replace" reactive() object
+    // and so v-model simply fails when you try to chage (increase only?)
+    // length of the array. Since linter complains about mutating modelValue
+    // inside SelectMotion, the next best thing is to just wipe existing array
+    // and replace it with new one.
+
+    const onPalettesUpdate = (e) => {
+      palettes.splice(0, palettes.length)
+      palettes.push(...e)
+    }
+
     const selectedPaletteId = ref(0)
     const selectedPalette = computed({
       get () {
+        console.log(palettes, toValue(palettes))
         return palettes[selectedPaletteId.value]
       },
       set (newPalette) {
@@ -542,6 +555,12 @@ export default {
         }
       })
     const virtualDirectives = reactive(allCustomVirtualDirectives)
+
+    const onVirtualDirectivesUpdate = (e) => {
+      virtualDirectives.splice(0, virtualDirectives.length)
+      virtualDirectives.push(...e)
+    }
+
     const selectedVirtualDirectiveId = ref(0)
     const selectedVirtualDirective = computed({
       get () {
@@ -601,7 +620,7 @@ export default {
       }
     })
 
-    const getNewDirective = () => ({
+    const getNewVirtualDirective = () => ({
       name: 'newDirective',
       valType: 'generic',
       value: 'foobar'
@@ -656,13 +675,15 @@ export default {
         const editorComponents = parsed.filter(x => x.component.startsWith('@'))
         const rules = parsed.filter(x => !x.component.startsWith('@'))
         const metaIn = editorComponents.find(x => x.component === '@meta').directives
-        const palettesIn = editorComponents.filter(x => x.component === '@palette').directives
+        const palettesIn = editorComponents.filter(x => x.component === '@palette')
 
         name.value = metaIn.name
         license.value = metaIn.license
         author.value = metaIn.author
         website.value = metaIn.website
 
+        console.log('PALETTES', palettesIn)
+
         Object.keys(allEditedRules).forEach((k) => delete allEditedRules[k])
 
         rules.forEach(rule => {
@@ -699,6 +720,7 @@ export default {
 
       // ## Palette
       palettes,
+      onPalettesUpdate,
       selectedPalette,
       selectedPaletteId,
       getNewPalette,
@@ -757,11 +779,12 @@ export default {
 
       // ## Variables
       virtualDirectives,
+      onVirtualDirectivesUpdate,
       selectedVirtualDirective,
       selectedVirtualDirectiveId,
       selectedVirtualDirectiveParsed,
       selectedVirtualDirectiveValType,
-      getNewDirective,
+      getNewVirtualDirective,
 
       // ## Export and Import
       exportStyle,

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

@@ -159,7 +159,14 @@
     width: min-content;
 
     .list-edit-area {
+      display: grid;
       align-self: baseline;
+      grid-template-rows: subgrid;
+      grid-template-columns: 1fr;
+    }
+
+    .palette-editor-single {
+      grid-row: 2 / span 2;
     }
   }
 

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

@@ -302,16 +302,25 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          v-model="palettes"
+          :modelValue="palettes"
-          :get-add-value="getNewPalette"
+          @update:modelValue="onPalettesUpdate"
           :selected-id="selectedPaletteId"
+          :get-add-value="getNewPalette"
           @update:selectedId="e => selectedPaletteId = e"
         />
+        <div class="list-edit-area">
+          <StringSetting
+            class="palette-name-input"
+            v-model="selectedPalette.name"
+          >
+            {{ $t('settings.style.themes3.palette.name_label') }}
+          </StringSetting>
           <PaletteEditor
-          class="list-edit-area"
+            class="palette-editor-single"
             v-model="selectedPalette"
           />
         </div>
+      </div>
       <div
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
@@ -328,7 +337,7 @@
           id="variables-selector"
           v-model="selectedVirtualDirectiveId"
           class="list-select"
-          size="9"
+          size="20"
         >
           <option
             v-for="(p, index) in virtualDirectives"
@@ -340,7 +349,8 @@
         </Select>
         <SelectMotion
           class="list-select-movement"
-          v-model="virtualDirectives"
+          :modelValue="virtualDirectives"
+          @update:modelValue="onVirtualDirectivesUpdate"
           :selected-id="selectedVirtualDirectiveId"
           :get-add-value="getNewVirtualDirective"
           @update:selectedId="e => selectedVirtualDirectiveId = e"

src/i18n/en.json

@@ -757,7 +757,8 @@
       "themes3": {
         "define": "Override",
         "palette": {
-          "label": "Palettes",
+          "label": "Color schemes",
+          "name_label": "Color scheme name",
           "import": "Import",
           "export": "Export",
           "bg": "Panel background",
@@ -803,7 +804,7 @@
             "no-auto": "Disabled"
           },
           "component_tab": "Components style",
-          "palette_tab": "Color presets",
+          "palette_tab": "Color schemes",
           "variables_tab": "Variables (Advanced)",
           "variables": {
             "label": "Variables",