60 lines
1.4 KiB
Vue
60 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<Preview :config="previewConfig" />
|
|
<div v-for="c,i in config" :key="i" class="textcell">
|
|
<button @click="config.splice(i, 1)" class="textcell-remove">×</button>
|
|
<Cell :value="c" @input="$event => config.splice(i, 1, $event)" :version="version" />
|
|
</div>
|
|
<div>
|
|
<button @click="config.push(defaultConfigCell)" class="textcell-add">+</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { defaultConfig, getConfig, lskey, format2previewText } from './codegen.js';
|
|
import Cell from './Cell.vue';
|
|
|
|
export default {
|
|
components: {
|
|
Cell,
|
|
},
|
|
props: {
|
|
version: {type: String},
|
|
previewConfig: {type: Object},
|
|
},
|
|
data() {
|
|
const config = getConfig();
|
|
const defaultConfigCell = {
|
|
text: format2previewText(defaultConfig[0].fmt, this.version),
|
|
...defaultConfig[0],
|
|
};
|
|
return {config, defaultConfigCell};
|
|
},
|
|
watch: {
|
|
config(config) {
|
|
// save config
|
|
const sconf = config.map(({text, ...o}) => ({...o}));
|
|
localStorage.setItem(lskey, JSON.stringify(sconf));
|
|
// emit
|
|
this.$emit('config', config);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.textcell {
|
|
border: 1px solid black;
|
|
padding: 4px 8px;
|
|
margin: 4px 0;
|
|
}
|
|
.textcell-remove {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 1.2rem;
|
|
color: red;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|