Form.vue

<script setup lang="ts">
import type { FormError, FormSubmitEvent } from '#ui/types'

// --- Basic job submission form ---
const jobState = reactive({
  agentId: '',
  runtime: '',
  priority: 'normal',
  maxRetries: 3,
  dryRun: false,
})

const runtimeOptions = [
  { label: 'Local (dev)', value: 'local' },
  { label: 'Cloud (prod)', value: 'cloud' },
  { label: 'Edge (beta)', value: 'edge' },
]

const priorityOptions = [
  { label: 'Low', value: 'low' },
  { label: 'Normal', value: 'normal' },
  { label: 'High', value: 'high' },
  { label: 'Critical', value: 'critical' },
]

function validateJob(state: typeof jobState): FormError[] {
  const errors: FormError[] = []
  if (!state.agentId) errors.push({ name: 'agentId', message: 'Agent ID is required' })
  if (!state.runtime) errors.push({ name: 'runtime', message: 'Select a runtime target' })
  if (state.maxRetries < 0 || state.maxRetries > 10)
    errors.push({ name: 'maxRetries', message: 'Must be between 0 and 10' })
  return errors
}

const toast = useToast()

async function onJobSubmit(event: FormSubmitEvent<typeof jobState>) {
  toast.add({
    title: 'Job queued',
    description: `Agent "${event.data.agentId}" dispatched to ${event.data.runtime} runtime.`,
    color: 'success',
    icon: 'i-material-symbols-check-circle-outline',
  })
}

// --- Disabled form state ---
const disabledState = reactive({ agentId: 'agent-7f3a', runtime: 'cloud' })

// --- Validation states demo ---
const validationState = reactive({ sessionId: '', leaseTimeout: '' })
function validateSession(state: typeof validationState): FormError[] {
  const errors: FormError[] = []
  if (!state.sessionId) errors.push({ name: 'sessionId', message: 'Session ID is required' })
  if (!state.leaseTimeout) errors.push({ name: 'leaseTimeout', message: 'Lease timeout is required' })
  return errors
}
</script>

<template>
  <div class="flex flex-col gap-8">
    <!-- Job Dispatch Form -->
    <GallerySection title="Job dispatch form">
      <UForm
        :state="jobState"
        :validate="validateJob"
        class="w-full max-w-lg space-y-4"
        @submit="onJobSubmit"
      >
        <UFormField name="agentId" label="Agent ID" required hint="Must be a registered agent">
          <UInput
            v-model="jobState.agentId"
            placeholder="agent-7f3a1b"
            icon="i-material-symbols-smart-toy-outline"
            class="w-full"
          />
        </UFormField>

        <UFormField name="runtime" label="Runtime target" required description="Where the job will execute">
          <USelect
            v-model="jobState.runtime"
            :items="runtimeOptions"
            value-key="value"
            placeholder="Select runtime…"
            class="w-full"
          />
        </UFormField>

        <UFormField name="priority" label="Priority">
          <USelect
            v-model="jobState.priority"
            :items="priorityOptions"
            value-key="value"
            class="w-full"
          />
        </UFormField>

        <UFormField name="maxRetries" label="Max retries" help="Retries on transient failures (0–10)">
          <UInputNumber
            v-model="jobState.maxRetries"
            :min="0"
            :max="10"
            class="w-full"
          />
        </UFormField>

        <UFormField name="dryRun" label="Dry run" description="Validate the job without executing it">
          <USwitch v-model="jobState.dryRun" label="Enabled" />
        </UFormField>

        <div class="flex gap-3 pt-2">
          <UButton type="submit" icon="i-material-symbols-rocket-launch-outline">
            Dispatch job
          </UButton>
          <UButton type="reset" variant="ghost" color="neutral">
            Reset
          </UButton>
        </div>
      </UForm>
    </GallerySection>

    <!-- Inline validation -->
    <GallerySection title="Validation states">
      <UForm
        :state="validationState"
        :validate="validateSession"
        :validate-on="['blur', 'change']"
        class="w-full max-w-lg space-y-4"
        @submit="() => {}"
      >
        <UFormField name="sessionId" label="Session ID" required>
          <UInput
            v-model="validationState.sessionId"
            placeholder="sess-0000"
            icon="i-material-symbols-key-outline"
            class="w-full"
          />
        </UFormField>

        <UFormField
          name="leaseTimeout"
          label="Lease timeout"
          required
          description="Duration before the session lease expires"
        >
          <UInput
            v-model="validationState.leaseTimeout"
            placeholder="30s"
            icon="i-material-symbols-timer-outline"
            class="w-full"
          />
        </UFormField>

        <div class="flex gap-3 pt-2">
          <UButton type="submit" color="secondary" icon="i-material-symbols-lock-clock-outline">
            Claim session
          </UButton>
        </div>
      </UForm>
    </GallerySection>

    <!-- Disabled form -->
    <GallerySection title="Disabled state">
      <UForm :state="disabledState" disabled class="w-full max-w-lg space-y-4" @submit="() => {}">
        <UFormField name="agentId" label="Agent ID">
          <UInput v-model="disabledState.agentId" class="w-full" />
        </UFormField>
        <UFormField name="runtime" label="Runtime">
          <UInput v-model="disabledState.runtime" class="w-full" />
        </UFormField>
        <UButton type="submit" icon="i-material-symbols-block">
          Submit (disabled)
        </UButton>
      </UForm>
    </GallerySection>

    <!-- FormField orientations -->
    <GallerySection title="Field orientations">
      <div class="w-full max-w-lg space-y-4">
        <UFormField
          name="trace-id"
          label="Trace ID"
          description="Unique identifier for this trace span"
          orientation="vertical"
          hint="vertical"
        >
          <UInput placeholder="trace-abc123" icon="i-material-symbols-timeline" class="w-full" />
        </UFormField>

        <UFormField
          name="event-source"
          label="Event source"
          description="Origin of the runtime event"
          orientation="horizontal"
          hint="horizontal"
        >
          <UInput placeholder="runtime.scheduler" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>

    <!-- FormField sizes -->
    <GallerySection title="Field sizes">
      <div class="w-full max-w-lg space-y-4">
        <UFormField v-for="s in ['sm', 'md', 'lg'] as const" :key="s" :size="s" :label="`Size ${s}`" :name="`size-${s}`">
          <UInput :placeholder="`agent-id (${s})`" :size="s" class="w-full" />
        </UFormField>
      </div>
    </GallerySection>
  </div>
</template>