Select.vue

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

const runtimeItems = [
  { label: 'us-east-1  (active)', value: 'us-east-1', icon: 'i-material-symbols-cloud-outline' },
  { label: 'eu-west-1  (standby)', value: 'eu-west-1', icon: 'i-material-symbols-cloud-outline' },
  { label: 'ap-southeast-1  (idle)', value: 'ap-southeast-1', icon: 'i-material-symbols-cloud-outline' },
]

const agentItems = [
  { label: 'Collector', value: 'collector', description: 'Gathers trace events', icon: 'i-material-symbols-sensors' },
  { label: 'Scheduler', value: 'scheduler', description: 'Manages job leases', icon: 'i-material-symbols-schedule-outline' },
  { label: 'Executor', value: 'executor', description: 'Runs ARCP jobs', icon: 'i-material-symbols-play-circle-outline' },
  { label: 'Observer', value: 'observer', description: 'Monitors sessions', icon: 'i-material-symbols-visibility-outline' },
]

const statusItems = [
  { type: 'label' as const, label: 'Active' },
  { label: 'Running', value: 'running' },
  { label: 'Pending', value: 'pending' },
  { type: 'separator' as const },
  { type: 'label' as const, label: 'Terminal' },
  { label: 'Completed', value: 'completed' },
  { label: 'Failed', value: 'failed' },
  { label: 'Cancelled', value: 'cancelled' },
]

const selectedRuntime = ref('us-east-1')
const selectedAgent = ref('')
const selectedStatus = ref('')
const colorSelected = ref('us-east-1')
const variantSelected = ref('us-east-1')
const sizeSelected: Record<string, string> = {}
const sizeRefs = ref<Record<string, string>>(
  Object.fromEntries(sizes.map(s => [s, '']))
)
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Variants">
      <div class="flex flex-wrap gap-4">
        <USelect
          v-for="v in variants"
          :key="v"
          v-model="variantSelected"
          :variant="v"
          :items="runtimeItems"
          value-key="value"
          :placeholder="v"
          class="w-40"
        />
      </div>
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-4">
        <USelect
          v-for="c in colors"
          :key="c"
          v-model="colorSelected"
          :color="c"
          :items="runtimeItems"
          value-key="value"
          :placeholder="c"
          class="w-40"
          highlight
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-center gap-4">
        <USelect
          v-for="s in sizes"
          :key="s"
          v-model="sizeRefs[s]"
          :size="s"
          :items="runtimeItems"
          value-key="value"
          :placeholder="s"
          class="w-36"
        />
      </div>
    </GallerySection>

    <GallerySection title="With icons">
      <div class="flex flex-wrap gap-4">
        <USelect
          v-model="selectedRuntime"
          :items="runtimeItems"
          value-key="value"
          placeholder="Select runtime"
          icon="i-material-symbols-cloud-outline"
          class="w-52"
        />
        <USelect
          v-model="selectedAgent"
          :items="agentItems"
          value-key="value"
          placeholder="Select agent"
          icon="i-material-symbols-smart-toy-outline"
          class="w-52"
        />
      </div>
    </GallerySection>

    <GallerySection title="Grouped items">
      <USelect
        v-model="selectedStatus"
        :items="statusItems"
        value-key="value"
        placeholder="Filter by job status"
        icon="i-material-symbols-filter-list"
        class="w-56"
      />
    </GallerySection>

    <GallerySection title="States">
      <div class="flex flex-wrap gap-4">
        <USelect
          placeholder="Disabled"
          :items="runtimeItems"
          value-key="value"
          disabled
          class="w-44"
        />
        <USelect
          placeholder="Highlighted"
          :items="runtimeItems"
          value-key="value"
          highlight
          color="primary"
          class="w-44"
        />
        <USelect
          placeholder="Error state"
          :items="runtimeItems"
          value-key="value"
          color="error"
          highlight
          class="w-44"
        />
      </div>
    </GallerySection>

    <GallerySection title="Realistic usage — dispatch job">
      <div class="w-full max-w-sm space-y-3">
        <USelect
          v-model="selectedRuntime"
          :items="runtimeItems"
          value-key="value"
          label="Runtime region"
          placeholder="Choose a runtime region"
          icon="i-material-symbols-cloud-outline"
        />
        <USelect
          v-model="selectedAgent"
          :items="agentItems"
          value-key="value"
          placeholder="Assign an agent"
          icon="i-material-symbols-smart-toy-outline"
        />
        <USelect
          v-model="selectedStatus"
          :items="statusItems"
          value-key="value"
          placeholder="Filter by status"
          icon="i-material-symbols-filter-list"
        />
        <UButton
          block
          icon="i-material-symbols-rocket-launch-outline"
          :disabled="!selectedRuntime || !selectedAgent"
        >
          Dispatch job
        </UButton>
      </div>
    </GallerySection>
  </div>
</template>