gctGenerator/site/.vuepress/components/codes/PatternSelector/config.vue

<template>
  <section>
    <h3 id="PatternSelector-config">{{l.appearance}}</h3>
    <Preview :config="previewConfig" />
    <div class="config-spacer" />
    <TextConfig v-model="textConfig" />
    <div>
      {{l.label}} <input v-model="label">
    </div>
  </section>
</template>

<script>
import {getConfig, lskey} from './codegen.js';
import labels from './labels.json';
import TextConfig from '../TextConfig.vue';

function updateConfig() {
  const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label} = this;
  const config = {
    x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label,
  };
  localStorage.setItem(lskey, JSON.stringify(config));
  this.$emit('config', config);
}

export default {
  components: {
    TextConfig,
  },
  props: {
    version: {type: String},
    previewConfig: {type: Object},
  },
  data() {
    const config = getConfig();
    return {...config};
  },
  methods: {
    updateConfig,
  },
  computed: {
    l() {
      return labels[this.$lang] ?? labels['en-US'];
    },
    textConfig: {
      get() {
        return this;
      },
      set(value) {
        Object.assign(this, value);
        this.updateConfig();
      },
    },
  },
  watch: {
    label: updateConfig,
  },
};
</script>

<style scoped>
div.config-spacer {
  height: 1em;
}
input {
  width: 6em;
}
</style>