c1cf06ed67
Vue 3 + Vite + Tailwind frontend, Fastify API server, execa shell bridge. All components built, server validated, 41 unit tests passing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
|