70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
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>
|