ASCIInator/src/components/options/ImgTxtOptions.vue

<script setup>
import SizeControl from '../SizeControl.vue'

const props = defineProps({
  flags:     { type: Object, required: true },
  imageDims: { type: Object, default: null },
})
const emit = defineEmits(['update:flags'])

const set = (key, val) => emit('update:flags', { ...props.flags, [key]: val })
const setNum = (key, val) => set(key, val === '' ? '' : Number(val))
</script>

<template>
  <div class="flex flex-col gap-5">

    <!-- Size -->
    <div>
      <p class="text-xs uppercase tracking-wider mb-2" style="color: rgba(224,224,224,.35)">Size</p>
      <SizeControl
        :width="flags.width" :height="flags.height" :image-dims="imageDims"
        @update:width="setNum('width', $event)"
        @update:height="setNum('height', $event)"
      />
    </div>

    <!-- Format & Dither -->
    <div>
      <p class="text-xs uppercase tracking-wider mb-2" style="color: rgba(224,224,224,.35)">Output</p>
      <div class="grid grid-cols-2 gap-3">
        <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
          <select class="ascii-input" :value="flags.dither" @change="set('dither', $event.target.value)">
            <option value="">default</option>
            <option>none</option><option>ordered2</option><option>ordered4</option>
            <option>ordered8</option><option>random</option><option>fstein</option>
          </select>
        </label>
      </div>
    </div>

    <!-- Gamma -->
    <div>
      <p class="text-xs uppercase tracking-wider mb-2" style="color: rgba(224,224,224,.35)">Gamma</p>
      <label class="ascii-label">
        Gamma — {{ flags.gamma !== '' && flags.gamma !== undefined ? Number(flags.gamma).toFixed(1) : '1.0' }}
        <input type="range" min="0.1" max="3.0" step="0.1"
          :value="flags.gamma ?? 1.0"
          @input="set('gamma', $event.target.value)"
          class="w-full" style="accent-color: var(--ascii-green)" />
      </label>
    </div>

  </div>
</template>