gctGenerator/site/.vuepress/components/codes/TextConfig.vue

<template>
  <div>
    <div>
      <span>{{l.location}}(</span><input type="number" min="0" max="600" v-model.number="x"><span>, </span><input type="number" min="16" max="464" v-model.number="y"><span>)</span>
    </div>
    <div>
      <span>{{l.fontSize}}</span><input type="number" min="0" v-model.number="fontSize">
    </div>
    <div>
      <span>{{fgRGB2==null ? l.fgColor : l.fgColor1}}</span><input type="color" :value="rgbI2S(fgRGB)" @change="fgRGB = rgbS2I($event.target.value)">
      <span>{{l.alpha}}</span><input type="number" min="0" max="255" v-model.number="fgA"><span>/255={{(fgA/2.55).toFixed(1)}}%</span>
      <input type="checkbox" :checked="fgRGB2!=null" @change="toggleGradient"><span>{{l.fgColorGrad}}</span>
    </div>
    <div v-if="fgRGB2 != null">
      <span>{{l.fgColor2}}</span><input type="color" :value="rgbI2S(fgRGB2)" @change="fgRGB2 = rgbS2I($event.target.value)">
      <span>{{l.alpha}}</span><input type="number" min="0" max="255" v-model.number="fgA2"><span>/255={{(fgA2/2.55).toFixed(1)}}%</span>
    </div>
    <div>
      <div>
        <span>{{ l.bgColor }}</span
        ><input type="color" :value="rgbI2S(bgRGB)" @change="bgRGB = rgbS2I($event.target.value)" />
        <span>{{ l.alpha }}</span
        ><input type="number" min="0" max="254" v-model.number="bgA" /><span
          >/255={{ (bgA / 2.55).toFixed(1) }}%</span
        >
      </div>
      <div>
        <span>{{ l.bgOffset }}</span>
        <span>{{ l.left }}</span><input type="number" v-model.number="bgLeft" />
        <span>{{ l.right }}</span><input type="number" v-model.number="bgRight" />
        <span>{{ l.top }}</span><input type="number" v-model.number="bgTop" />
        <span>{{ l.bottom }}</span><input type="number" v-model.number="bgBot" />
      </div>
    </div>
  </div>
</template>

<script>
import labels from './labels.json';
import {rgbI2S, rgbS2I, rgbaI2S} from './utils';

const makeField = key => ({
  get() {
    return this.$props.value[key];
  },
  set(value) {
    this.update({[key]: value});
  },
});

export default {
  props: {
    value: {type: Object},
  },
  computed: {
    l() {
      return labels[this.$lang] ?? labels['en-US'];
    },
    ...Object.fromEntries([
      'x', 'y', 'fontSize', 'fgRGB', 'fgA', 'fgRGB2', 'fgA2',
      'bgRGB', 'bgA', 'bgLeft', 'bgRight', 'bgTop', 'bgBot',
    ].map(k => [k, makeField(k)])),
  },
  methods: {
    update(o) {
      this.$emit('input', {...this.value, ...o});
    },
    toggleGradient($event) {
      if ($event.target.checked) {
        this.update({
          fgRGB2: this.fgRGB,
          fgA2: this.fgA,
        });
      } else {
        this.update({
          fgRGB2: null,
          fgA2: null,
        });
      }
    },
    rgbI2S,
    rgbS2I,
    rgbaI2S,
  },
}
</script>

<style scoped>
input[type=number], td.right {
  text-align: right;
}
input[type="number"] {
  width: 2em;
  margin: 0 2px;
}
.appearance > div {
  padding: 0 0 4px;
}

input[type=number] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>