ASCIInator/src/components/options/ImgTxtOptions.vue

40 lines
1.4 KiB
Vue
Raw Normal View History

<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">
Format
<select class="ascii-input" :value="flags.format"
@change="set('format', $event.target.value)">
<option value="">default</option>
<option>ansi</option><option>utf8</option><option>html</option>
</select>
</label>
<label class="ascii-label">
Dither
<input class="ascii-input" type="text" :value="flags.dither"
@input="set('dither', $event.target.value)" placeholder="default" />
</label>
<label class="ascii-label col-span-2">
Gamma
<input class="ascii-input" type="number" min="0.1" step="0.1" :value="flags.gamma"
@input="set('gamma', $event.target.value)" placeholder="1.0" />
</label>
</div>
</template>