separate shadow preview into its own component, needed for themes3 editor

src/components/component_preview/component_preview.vue

@@ -0,0 +1,195 @@
+<template>
+<div class="ComponentPreview">
+  <label
+    class="header"
+    v-show="shadowControl"
+    :class="{ faint: disabled }"
+  >
+    {{ $t('settings.style.shadows.offset') }}
+  </label>
+  <input
+    v-show="shadowControl"
+    :value="shadow?.y"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-number y-shift-number"
+    type="number"
+    @input="e => updateProperty('y', e.target.value)"
+  >
+  <input
+    v-show="shadowControl"
+    :value="shadow?.y"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-range y-shift-slider"
+    type="range"
+    max="20"
+    min="-20"
+    @input="e => updateProperty('y', e.target.value)"
+  >
+  <div
+    class="preview-window"
+    :class="{ disabled: disabled && shadowControl, '-light-grid': lightGrid }"
+  >
+    <div
+      class="preview-block"
+      :style="previewStyle"
+    />
+  </div>
+  <input
+    v-show="shadowControl"
+    :value="shadow?.x"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-number x-shift-number"
+    type="number"
+    @input="e => updateProperty('x', e.target.value)"
+  >
+  <input
+    v-show="shadowControl"
+    :value="shadow?.x"
+    :disabled="disabled"
+    :class="{ disabled }"
+    class="input input-range x-shift-slider"
+    type="range"
+    max="20"
+    min="-20"
+    @input="e => updateProperty('x', e.target.value)"
+  >
+  <Checkbox
+    id="lightGrid"
+    v-model="lightGrid"
+    :disabled="shadow == null"
+    name="lightGrid"
+    class="input-light-grid"
+  >
+    {{ $t('settings.style.shadows.light_grid') }}
+  </Checkbox>
+</div>
+</template>
+
+<style lang="scss">
+.ComponentPreview {
+  display: grid;
+  grid-template-columns: 3em 1fr 3em;
+  grid-template-rows: 2em 1fr 2em;
+  grid-template-areas:
+    ".       header  y-num  "
+    ".       preview y-slide"
+    "x-num   x-slide .      "
+    "options options options";
+  grid-gap: 0.5em;
+
+  .header {
+    grid-area: header;
+    justify-self: center;
+    align-self: baseline;
+    line-height: 2;
+  }
+
+  .input-light-grid {
+    grid-area: options;
+    justify-self: center;
+  }
+
+  .input-number {
+    min-width: 2em;
+  }
+
+  .x-shift-number {
+    grid-area: x-num;
+  }
+
+  .x-shift-slider {
+    grid-area: x-slide;
+    height: auto;
+    align-self: start;
+    min-width: 10em;
+  }
+
+  .y-shift-number {
+    grid-area: y-num;
+  }
+
+  .y-shift-slider {
+    grid-area: y-slide;
+    writing-mode: vertical-lr;
+    justify-self: left;
+    min-height: 10em;
+  }
+
+  .x-shift-slider,
+  .y-shift-slider {
+    padding: 0;
+  }
+
+  .preview-window {
+    --__grid-color1: rgb(102 102 102);
+    --__grid-color2: rgb(153 153 153);
+    --__grid-color1-disabled: rgba(102 102 102 / 20%);
+    --__grid-color2-disabled: rgba(153 153 153 / 20%);
+
+    &.-light-grid {
+      --__grid-color1: rgb(205 205 205);
+      --__grid-color2: rgb(255 255 255);
+      --__grid-color1-disabled: rgba(205 205 205 / 20%);
+      --__grid-color2-disabled: rgba(255 255 255 / 20%);
+    }
+
+    grid-area: preview;
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10em;
+    min-height: 10em;
+    background-color: var(--__grid-color2);
+    background-image:
+      linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    border-radius: var(--roundness);
+
+    &.disabled {
+      background-color: var(--__grid-color2-disabled);
+      background-image:
+        linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
+        linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
+    }
+
+    .preview-block {
+      width: 33%;
+      height: 33%;
+      border-radius: var(--roundness);
+      background: var(--background);
+    }
+  }
+}
+</style>
+<script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+export default {
+  props: [
+    'shadow',
+    'shadowControl',
+    'previewClass',
+    'previewStyle',
+    'disabled'
+  ],
+  emits: ['update:shadow'],
+  components: {
+    Checkbox
+  },
+  methods: {
+    update (axis, value) {
+      this.$emit('update:shadow', { ...this.shadowControl, [axis]: value })
+    }
+  }
+}
+</script>

src/components/shadow_control/shadow_control.js

@@ -3,6 +3,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import Select from 'src/components/select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
+import ComponentPreview from 'src/components/component_preview/component_preview.vue'
 import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { throttle } from 'lodash'
@@ -49,7 +50,8 @@ export default {
     OpacityInput,
     Select,
     Checkbox,
-    Popover
+    Popover,
+    ComponentPreview
   },
   beforeUpdate () {
     this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
@@ -81,7 +83,6 @@ export default {
       return this.modelValue == null
     },
     style () {
-      console.log(this.separateInset)
       if (this.separateInset) {
         return {
           filter: getCssShadowFilter(this.cValue),

src/components/shadow_control/shadow_control.scss

@@ -82,107 +82,8 @@
     order: 2;
     flex: 3 3 15em;
     min-width: 10em;
-    display: grid;
     margin-left: 0.125em;
     align-self: start;
-    grid-template-columns: 3em 1fr 3em;
-    grid-template-rows: 2em 1fr 2em;
-    grid-template-areas:
-      ".       header  y-num  "
-      ".       preview y-slide"
-      "x-num   x-slide .      "
-      "options options options";
-    grid-gap: 0.5em;
-
-    .header {
-      grid-area: header;
-      justify-self: center;
-      align-self: baseline;
-      line-height: 2;
-    }
-
-    .input-light-grid {
-      grid-area: options;
-      justify-self: center;
-    }
-
-    .input-number {
-      min-width: 2em;
-    }
-
-    .x-shift-number {
-      grid-area: x-num;
-    }
-
-    .x-shift-slider {
-      grid-area: x-slide;
-      height: auto;
-      align-self: start;
-      min-width: 10em;
-    }
-
-    .y-shift-number {
-      grid-area: y-num;
-    }
-
-    .y-shift-slider {
-      grid-area: y-slide;
-      writing-mode: vertical-lr;
-      justify-self: left;
-      min-height: 10em;
-    }
-
-    .x-shift-slider,
-    .y-shift-slider {
-      padding: 0;
-    }
-
-    .preview-window {
-      --__grid-color1: rgb(102 102 102);
-      --__grid-color2: rgb(153 153 153);
-      --__grid-color1-disabled: rgba(102 102 102 / 20%);
-      --__grid-color2-disabled: rgba(153 153 153 / 20%);
-
-      &.-light-grid {
-        --__grid-color1: rgb(205 205 205);
-        --__grid-color2: rgb(255 255 255);
-        --__grid-color1-disabled: rgba(205 205 205 / 20%);
-        --__grid-color2-disabled: rgba(255 255 255 / 20%);
-      }
-
-      grid-area: preview;
-      aspect-ratio: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 10em;
-      min-height: 10em;
-      background-color: var(--__grid-color2);
-      background-image:
-        linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
-        linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
-        linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: var(--roundness);
-
-      &.disabled {
-        background-color: var(--__grid-color2-disabled);
-        background-image:
-          linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-          linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
-          linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
-          linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
-      }
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        border-radius: var(--roundness);
-        background: var(--background);
-      }
-    }
   }
 }
 

src/components/shadow_control/shadow_control.vue

@@ -3,68 +3,13 @@
     class="label shadow-control"
     :class="{ disabled: !present }"
   >
-    <div class="shadow-preview">
-      <label
-        class="header"
-        :class="{ faint: !present }"
-      >
-        {{ $t('settings.style.shadows.offset') }}
-      </label>
-      <input
-        :value="selected?.y"
-        :disabled="!present"
-        :class="{ disabled: !present }"
-        class="input input-number y-shift-number"
-        type="number"
-        @input="e => updateProperty('y', e.target.value)"
-      >
-      <input
-        :value="selected?.y"
-        :disabled="!present"
-        :class="{ disabled: !present }"
-        class="input input-range y-shift-slider"
-        type="range"
-        max="20"
-        min="-20"
-        @input="e => updateProperty('y', e.target.value)"
-      >
-      <div
-        class="preview-window"
-        :class="{ disabled: !present, '-light-grid': lightGrid }"
-      >
-        <div
-          class="preview-block"
-          :style="style"
-        />
-      </div>
-      <input
-        :value="selected?.x"
-        :disabled="!present"
-        :class="{ disabled: !present }"
-        class="input input-number x-shift-number"
-        type="number"
-        @input="e => updateProperty('x', e.target.value)"
-      >
-      <input
-        :value="selected?.x"
-        :disabled="!present"
-        :class="{ disabled: !present }"
-        class="input input-range x-shift-slider"
-        type="range"
-        max="20"
-        min="-20"
-        @input="e => updateProperty('x', e.target.value)"
-      >
-      <Checkbox
-        id="lightGrid"
-        v-model="lightGrid"
-        :disabled="!present"
-        name="lightGrid"
-        class="input-light-grid"
-      >
-        {{ $t('settings.style.shadows.light_grid') }}
-      </Checkbox>
-    </div>
+    <ComponentPreview
+      class="shadow-preview"
+      :shadow-control="true"
+      :shadow="selected"
+      :preview-style="style"
+      :disabled="!present"
+    />
     <div class="shadow-switcher">
       <Select
         id="shadow-list"