Separate virtual directives tab into separate files

src/components/select/select_motion.vue

@@ -72,6 +72,7 @@ const moveUp = () => {
 const moveDnValid = computed(() => {
   return props.selectedId < props.modelValue.length - 1
 })
+
 const moveDn = () => {
   const newModel = [...props.modelValue]
   const movable = newModel.splice(props.selectedId.value, 1)[0]

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

@@ -1,4 +1,4 @@
-import { ref, reactive, computed, watch } from 'vue'
+import { ref, reactive, computed, watch, provide } from 'vue'
 import { get, set } from 'lodash'
 
 import Select from 'src/components/select/select.vue'
@@ -15,12 +15,14 @@ import Tooltip from 'src/components/tooltip/tooltip.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import Preview from '../theme_tab/theme_preview.vue'
 
+import VirtualDirectivesTab from './virtual_directives_tab.vue'
+
 import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
 import {
   getCssRules,
   getScopedVersion
 } from 'src/services/theme_data/css_utils.js'
-import { serializeShadow, serialize } from 'src/services/theme_data/iss_serializer.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
 import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import {
   rgb2hex,
@@ -70,7 +72,8 @@ export default {
     PaletteEditor,
     OpacityInput,
     ContrastRatio,
-    Preview
+    Preview,
+    VirtualDirectivesTab
   },
   setup () {
     const exports = {}
@@ -147,6 +150,7 @@ export default {
     })
     exports.selectedPaletteId = selectedPaletteId
     exports.selectedPalette = selectedPalette
+    provide('selectedPalette', selectedPalette)
 
     exports.getNewPalette = () => ({
       name: 'new palette',
@@ -313,10 +317,6 @@ export default {
           usedRule = get(fallback, path)
         }
 
-        if (directive === 'shadow') {
-          console.log('EDITED', usedRule)
-          console.log('PP', postProcess(usedRule))
-        }
         return postProcess(usedRule)
       },
       set (value) {
@@ -378,6 +378,7 @@ export default {
         return null
       })
     }
+    provide('normalizeShadows', normalizeShadows)
 
     // Shadow is partially edited outside the ShadowControl
     // for better space utilization
@@ -571,7 +572,6 @@ export default {
       updateSelectedComponent
     )
 
-    // ## Variables
     const allCustomVirtualDirectives = [...componentsMap.values()]
       .map(c => {
         return c
@@ -590,117 +590,21 @@ export default {
           value: valVal.trim()
         }
       })
-    const virtualDirectives = reactive(allCustomVirtualDirectives)
+
+    const virtualDirectives = ref(allCustomVirtualDirectives)
     exports.virtualDirectives = virtualDirectives
-
+    exports.updateVirtualDirectives = (value) => {
-    exports.onVirtualDirectivesUpdate = (e) => {
+      virtualDirectives.value = value
-      virtualDirectives.splice(0, virtualDirectives.length)
-      virtualDirectives.push(...e)
     }
 
-    const selectedVirtualDirectiveId = ref(0)
-    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
-
-    const selectedVirtualDirective = computed({
-      get () {
-        return virtualDirectives[selectedVirtualDirectiveId.value]
-      },
-      set (value) {
-        virtualDirectives[selectedVirtualDirectiveId.value].value = value
-      }
-    })
-    exports.selectedVirtualDirective = selectedVirtualDirective
-
-    exports.selectedVirtualDirectiveValType = computed({
-      get () {
-        return virtualDirectives[selectedVirtualDirectiveId.value].valType
-      },
-      set (value) {
-        const newValType = value
-        let newValue
-        switch (value) {
-          case 'shadow':
-            newValue = '0 0 0 #000000 / 1'
-            break
-          case 'color':
-            newValue = '#000000'
-            break
-          default:
-            newValue = 'none'
-        }
-        const newName = virtualDirectives[selectedVirtualDirectiveId.value].name
-        virtualDirectives[selectedVirtualDirectiveId.value] = {
-          name: newName,
-          value: newValue,
-          valType: newValType
-        }
-      }
-    })
-
-    const draftVirtualDirectiveValid = ref(true)
-    const draftVirtualDirective = ref({})
-    exports.draftVirtualDirective = draftVirtualDirective
-
-    watch(
-      selectedVirtualDirective,
-      (directive) => {
-        switch (directive.valType) {
-          case 'shadow': {
-            if (Array.isArray(directive.value)) {
-              draftVirtualDirective.value = normalizeShadows(directive.value)
-            } else {
-              const splitShadow = directive.value.split(/,/g).map(x => x.trim())
-              draftVirtualDirective.value = normalizeShadows(splitShadow)
-            }
-            break
-          }
-          case 'color':
-            draftVirtualDirective.value = directive.value
-            break
-          default:
-            draftVirtualDirective.value = directive.value
-            break
-        }
-      },
-      { immediate: true }
-    )
-
-    watch(
-      draftVirtualDirective,
-      (directive) => {
-        try {
-          switch (selectedVirtualDirective.value.valType) {
-            case 'shadow': {
-              virtualDirectives[selectedVirtualDirectiveId.value].value =
-                directive.map(x => serializeShadow(x)).join(', ')
-              break
-            }
-            default:
-              virtualDirectives[selectedVirtualDirectiveId.value].value = directive
-          }
-          draftVirtualDirectiveValid.value = true
-        } catch (e) {
-          console.error('Invalid virtual directive value', e)
-          draftVirtualDirectiveValid.value = false
-        }
-      },
-      { immediate: true }
-    )
-
     const virtualDirectivesOut = computed(() => {
       return [
         'Root {',
-        ...virtualDirectives.map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
+        ...virtualDirectives.value.map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
         '}'
       ].join('\n')
     })
 
-    exports.getNewVirtualDirective = () => ({
-      name: 'newDirective',
-      valType: 'generic',
-      value: 'foobar'
-    })
-
     exports.computeColor = (color) => {
       const computedColor = findColor(color, { dynamicVars: {}, staticVars: selectedPalette.value })
       if (computedColor) {
@@ -708,6 +612,7 @@ export default {
       }
       return null
     }
+    provide('computeColor', exports.computeColor)
 
     exports.contrast = computed(() => {
       return getContrast(
@@ -735,7 +640,7 @@ export default {
         const virtualDirectivesRule = {
           component: 'Root',
           directives: Object.fromEntries(
-            virtualDirectives.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+            virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
           )
         }
 
@@ -782,14 +687,13 @@ export default {
         exports.author.value = metaIn.author
         exports.website.value = metaIn.website
 
-        virtualDirectives.splice(0, virtualDirectives.length)
         const newVirtualDirectives = Object
           .entries(rootComponent.directives)
           .map(([name, value]) => {
             const [valType, valVal] = value.split('|').map(x => x.trim())
             return { name: name.substring(2), valType, value: valVal }
           })
-        virtualDirectives.push(...newVirtualDirectives)
+        virtualDirectives.value = newVirtualDirectives
 
         onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
 

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

@@ -355,89 +355,13 @@
           />
         </div>
       </div>
-      <div
+      <VirtualDirectivesTab
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
-        class="setting-item list-editor variables-editor"
+        :model-value="virtualDirectives"
-      >
+        @update:modelValue="updateVirtualDirectives"
-        <label
+        :normalize-shadows="normalizeShadows"
-          class="list-select-label"
+      />
-          for="variables-selector"
-        >
-          {{ $t('settings.style.themes3.editor.variables.label') }}
-          {{ ' ' }}
-        </label>
-        <Select
-          id="variables-selector"
-          v-model="selectedVirtualDirectiveId"
-          class="list-select"
-          size="20"
-        >
-          <option
-            v-for="(p, index) in virtualDirectives"
-            :key="p.name"
-            :value="index"
-          >
-            {{ p.name }}
-          </option>
-        </Select>
-        <SelectMotion
-          class="list-select-movement"
-          :modelValue="virtualDirectives"
-          @update:modelValue="onVirtualDirectivesUpdate"
-          :selected-id="selectedVirtualDirectiveId"
-          :get-add-value="getNewVirtualDirective"
-          @update:selectedId="e => selectedVirtualDirectiveId = e"
-        />
-        <div class="list-edit-area">
-          <div class="variable-selector">
-            <label
-              class="variable-name-label"
-              for="variables-selector"
-            >
-              {{ $t('settings.style.themes3.editor.variables.name_label') }}
-              {{ ' ' }}
-            </label>
-            <input
-              class="input"
-              v-model="selectedVirtualDirective.name"
-            >
-            <label
-              class="variable-type-label"
-              for="variables-selector"
-            >
-              {{ $t('settings.style.themes3.editor.variables.type_label') }}
-              {{ ' ' }}
-            </label>
-            <Select
-              v-model="selectedVirtualDirectiveValType"
-            >
-              <option value='shadow'>
-                {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
-              </option>
-              <option value='color'>
-                {{ $t('settings.style.themes3.editor.variables.type_color') }}
-              </option>
-              <option value='generic'>
-                {{ $t('settings.style.themes3.editor.variables.type_generic') }}
-              </option>
-            </Select>
-          </div>
-          <ShadowControl
-            v-if="selectedVirtualDirectiveValType === 'shadow'"
-            v-model="draftVirtualDirective"
-            :static-vars="selectedPalette"
-            :compact="true"
-          />
-          <ColorInput
-            v-if="selectedVirtualDirectiveValType === 'color'"
-            v-model="draftVirtualDirective"
-            :fallback="computeColor(draftVirtualDirective)"
-            :label="$t('settings.style.themes3.editor.variables.virtual_color')"
-            :hide-optional-checkbox="true"
-          />
-        </div>
-      </div>
     </tab-switcher>
   </div>
 </template>

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

@@ -0,0 +1,132 @@
+import { ref, computed, watch, inject } from 'vue'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+export default {
+  components: {
+    Select,
+    SelectMotion,
+    ShadowControl,
+    ColorInput
+  },
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const exports = {}
+    const emit = context.emit
+
+    exports.emit = emit
+    exports.computeColor = inject('computeColor')
+    exports.selectedPalette = inject('selectedPalette')
+
+    const selectedVirtualDirectiveId = ref(0)
+    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
+
+    const selectedVirtualDirective = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value]
+      },
+      set (value) {
+        const newVD = [...props.modelValue]
+        newVD[selectedVirtualDirectiveId.value] = value
+
+        emit('update:modelValue', newVD)
+      }
+    })
+    exports.selectedVirtualDirective = selectedVirtualDirective
+
+    exports.selectedVirtualDirectiveValType = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value].valType
+      },
+      set (value) {
+        const newValType = value
+        let newValue
+        switch (value) {
+          case 'shadow':
+            newValue = '0 0 0 #000000 / 1'
+            break
+          case 'color':
+            newValue = '#000000'
+            break
+          default:
+            newValue = 'none'
+        }
+        const newName = props.modelValue[selectedVirtualDirectiveId.value].name
+        props.modelValue[selectedVirtualDirectiveId.value] = {
+          name: newName,
+          value: newValue,
+          valType: newValType
+        }
+      }
+    })
+
+    const draftVirtualDirectiveValid = ref(true)
+    const draftVirtualDirective = ref({})
+    exports.draftVirtualDirective = draftVirtualDirective
+    const normalizeShadows = inject('normalizeShadows')
+
+    watch(
+      selectedVirtualDirective,
+      (directive) => {
+        switch (directive.valType) {
+          case 'shadow': {
+            if (Array.isArray(directive.value)) {
+              draftVirtualDirective.value = normalizeShadows(directive.value)
+            } else {
+              const splitShadow = directive.value.split(/,/g).map(x => x.trim())
+              draftVirtualDirective.value = normalizeShadows(splitShadow)
+            }
+            break
+          }
+          case 'color':
+            draftVirtualDirective.value = directive.value
+            break
+          default:
+            draftVirtualDirective.value = directive.value
+            break
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      draftVirtualDirective,
+      (directive) => {
+        try {
+          switch (selectedVirtualDirective.value.valType) {
+            case 'shadow': {
+              props.modelValue[selectedVirtualDirectiveId.value].value =
+                directive.map(x => serializeShadow(x)).join(', ')
+              break
+            }
+            default:
+              props.modelValue[selectedVirtualDirectiveId.value].value = directive
+          }
+          draftVirtualDirectiveValid.value = true
+        } catch (e) {
+          console.error('Invalid virtual directive value', e)
+          draftVirtualDirectiveValid.value = false
+        }
+      },
+      { immediate: true }
+    )
+
+    exports.getNewVirtualDirective = () => ({
+      name: 'newDirective',
+      valType: 'generic',
+      value: 'foobar'
+    })
+
+    return exports
+  }
+}

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

@@ -0,0 +1,83 @@
+<script src="./virtual_directives_tab.js"></script>
+
+<template>
+<div class="setting-item list-editor variables-editor">
+  <label
+    class="list-select-label"
+    for="variables-selector"
+  >
+    {{ $t('settings.style.themes3.editor.variables.label') }}
+    {{ ' ' }}
+  </label>
+  <Select
+    id="variables-selector"
+    v-model="selectedVirtualDirectiveId"
+    class="list-select"
+    size="20"
+    >
+    <option
+      v-for="(p, index) in modelValue"
+      :key="p.name"
+      :value="index"
+      >
+      {{ p.name }}
+    </option>
+  </Select>
+  <SelectMotion
+    class="list-select-movement"
+    :model-value="modelValue"
+    @update:modelValue="e => emit('update:modelValue', e)"
+    :selected-id="selectedVirtualDirectiveId"
+    @update:selectedId="e => selectedVirtualDirectiveId = e"
+    :get-add-value="getNewVirtualDirective"
+  />
+  <div class="list-edit-area">
+    <div class="variable-selector">
+      <label
+        class="variable-name-label"
+        for="variables-selector"
+      >
+        {{ $t('settings.style.themes3.editor.variables.name_label') }}
+        {{ ' ' }}
+      </label>
+      <input
+        class="input"
+        v-model="selectedVirtualDirective.name"
+      >
+      <label
+        class="variable-type-label"
+        for="variables-selector"
+        >
+        {{ $t('settings.style.themes3.editor.variables.type_label') }}
+        {{ ' ' }}
+      </label>
+      <Select
+        v-model="selectedVirtualDirectiveValType"
+      >
+        <option value='shadow'>
+          {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+        </option>
+        <option value='color'>
+          {{ $t('settings.style.themes3.editor.variables.type_color') }}
+        </option>
+        <option value='generic'>
+          {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+        </option>
+      </Select>
+    </div>
+    <ShadowControl
+      v-if="selectedVirtualDirectiveValType === 'shadow'"
+      v-model="draftVirtualDirective"
+      :static-vars="selectedPalette"
+      :compact="true"
+    />
+    <ColorInput
+      v-if="selectedVirtualDirectiveValType === 'color'"
+      v-model="draftVirtualDirective"
+      :fallback="computeColor(draftVirtualDirective)"
+      :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+      :hide-optional-checkbox="true"
+    />
+  </div>
+</div>
+</template>