41 lines
1.5 KiB
Vue
41 lines
1.5 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">
|
|||
|
|
Threshold (0–255)
|
|||
|
|
<input class="ascii-input" type="number" min="0" max="255" :value="flags.threshold"
|
|||
|
|
@input="set('threshold', $event.target.value)" placeholder="128" />
|
|||
|
|
</label>
|
|||
|
|
<div class="ascii-label justify-center gap-3 flex-row items-center col-span-2">
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="checkbox" :checked="flags.color"
|
|||
|
|
@change="set('color', $event.target.checked)"
|
|||
|
|
style="accent-color: var(--ascii-green)" />
|
|||
|
|
Color
|
|||
|
|
</label>
|
|||
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|||
|
|
<input type="checkbox" :checked="flags.braille"
|
|||
|
|
@change="set('braille', $event.target.checked)"
|
|||
|
|
style="accent-color: var(--ascii-green)" />
|
|||
|
|
Braille
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|