35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
|
<script setup>
|
||
|
|
const props = defineProps({ flags: { type: Object, required: true } })
|
||
|
|
const emit = defineEmits(['update:flags'])
|
||
|
|
|
||
|
|
const set = (key, val) => emit('update:flags', { ...props.flags, [key]: val })
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="grid grid-cols-2 gap-3">
|
||
|
|
<label class="ascii-label">
|
||
|
|
Width
|
||
|
|
<input class="ascii-input" type="number" min="1" :value="flags.width"
|
||
|
|
@input="set('width', $event.target.value)" placeholder="auto" />
|
||
|
|
</label>
|
||
|
|
<label class="ascii-label">
|
||
|
|
Height
|
||
|
|
<input class="ascii-input" type="number" min="1" :value="flags.height"
|
||
|
|
@input="set('height', $event.target.value)" placeholder="auto" />
|
||
|
|
</label>
|
||
|
|
<label class="ascii-label">
|
||
|
|
Background
|
||
|
|
<select class="ascii-input" :value="flags.background"
|
||
|
|
@change="set('background', $event.target.value)">
|
||
|
|
<option value="">default</option>
|
||
|
|
<option>light</option><option>dark</option>
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<label class="ascii-label">
|
||
|
|
Chars
|
||
|
|
<input class="ascii-input" type="text" :value="flags.chars"
|
||
|
|
@input="set('chars', $event.target.value)" placeholder="e.g. .:-=+*#%@" />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</template>
|