InputNumber.vue

<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const variants = ['outline', 'soft', 'subtle', 'ghost'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const concurrency = ref(4)
const retries = ref(3)
const timeout = ref(30)
const leaseSeconds = ref(60)
const replicas = ref(1)
const maxEvents = ref(1000)
const traceDepth = ref<number | null>(null)
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <div class="flex flex-wrap gap-4">
        <UInputNumber
          v-for="v in variants"
          :key="v"
          :variant="v"
          :default-value="5"
          :min="0"
          :max="10"
          :placeholder="v"
          class="w-36"
        />
      </div>
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-4">
        <UInputNumber
          v-for="c in colors"
          :key="c"
          :color="c"
          variant="outline"
          :default-value="1"
          :min="0"
          :max="100"
          class="w-36"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-center gap-4">
        <UInputNumber
          v-for="s in sizes"
          :key="s"
          :size="s"
          :default-value="8"
          :min="0"
          :max="64"
          class="w-32"
        />
      </div>
    </GallerySection>

    <GallerySection title="Orientation">
      <div class="flex flex-wrap gap-6">
        <div class="flex flex-col gap-1">
          <span class="text-sm text-dimmed">Horizontal (default)</span>
          <UInputNumber
            v-model="concurrency"
            orientation="horizontal"
            :min="1"
            :max="32"
            class="w-40"
          />
        </div>
        <div class="flex flex-col gap-1">
          <span class="text-sm text-dimmed">Vertical</span>
          <UInputNumber
            v-model="replicas"
            orientation="vertical"
            :min="1"
            :max="16"
            class="w-40"
          />
        </div>
      </div>
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-wrap gap-4">
        <UInputNumber :default-value="5" :min="0" :max="10" placeholder="Normal" class="w-36" />
        <UInputNumber :default-value="5" :min="0" :max="10" highlight class="w-36" />
        <UInputNumber :default-value="5" :min="0" :max="10" disabled class="w-36" />
        <UInputNumber :default-value="5" :min="0" :max="10" readonly class="w-36" />
      </div>
    </GallerySection>

    <GallerySection title="Custom icons">
      <div class="flex flex-wrap gap-4">
        <UInputNumber
          :default-value="60"
          :min="0"
          :max="3600"
          :step="15"
          increment-icon="i-material-symbols-add-circle-outline"
          decrement-icon="i-material-symbols-remove-circle-outline"
          color="info"
          class="w-40"
        />
        <UInputNumber
          :default-value="10"
          :min="1"
          :max="100"
          increment-icon="i-material-symbols-keyboard-arrow-up"
          decrement-icon="i-material-symbols-keyboard-arrow-down"
          orientation="vertical"
          color="secondary"
          class="w-40"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — Agent runtime config">
      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Concurrency limit</span>
          <UInputNumber
            v-model="concurrency"
            :min="1"
            :max="32"
            color="primary"
            placeholder="Max parallel jobs"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Jobs running in parallel per agent</span>
        </div>

        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Max retries</span>
          <UInputNumber
            v-model="retries"
            :min="0"
            :max="10"
            color="warning"
            variant="soft"
            placeholder="Retry count"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Retry attempts before job failure</span>
        </div>

        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Timeout (s)</span>
          <UInputNumber
            v-model="timeout"
            :min="1"
            :max="3600"
            :step="5"
            color="neutral"
            variant="subtle"
            placeholder="Seconds"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Session execution timeout</span>
        </div>

        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Lease duration (s)</span>
          <UInputNumber
            v-model="leaseSeconds"
            :min="10"
            :max="86400"
            :step="10"
            color="success"
            placeholder="Lease seconds"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Runtime lease renewal interval</span>
        </div>

        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Max event buffer</span>
          <UInputNumber
            v-model="maxEvents"
            :min="100"
            :max="100000"
            :step="100"
            color="info"
            variant="soft"
            placeholder="Events"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Trace event buffer capacity</span>
        </div>

        <div class="flex flex-col gap-1">
          <span class="text-sm font-medium">Trace depth</span>
          <UInputNumber
            v-model="traceDepth"
            :min="1"
            :max="50"
            color="error"
            variant="subtle"
            placeholder="Unlimited"
            class="w-full"
          />
          <span class="text-xs text-dimmed">Max span nesting depth (empty = unlimited)</span>
        </div>
      </div>
    </GallerySection>
  </div>
</template>