Select with colored bullets for status

<script setup lang="ts">
import { cn } from "@/lib/utils"
import { Field } from "@/components/ui/field"
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const statuses = [
  { value: "1", label: "In Progress", color: "bg-violet-500" },
  { value: "2", label: "Completed", color: "bg-green-500" },
  { value: "3", label: "Pending", color: "bg-primary" },
  { value: "4", label: "Cancelled", color: "bg-yellow-500" },
  { value: "5", label: "Rejected", color: "bg-destructive" },
]

function findStatus(value: unknown) {
  return statuses.find((status) => status.value === value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :default-value="statuses[1]!.value">
      <SelectTrigger>
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. комментарий в c-select-6.vue).
        -->
        <SelectValue placeholder="Select status">
          <template #default="{ modelValue }">
            <span v-if="findStatus(modelValue)" class="flex items-center gap-2">
              <span :class="cn('size-1.5 rounded-full', findStatus(modelValue)!.color)" />
              <span>{{ findStatus(modelValue)!.label }}</span>
            </span>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem v-for="status in statuses" :key="status.value" :value="status.value">
            <span class="flex items-center gap-2">
              <span :class="cn('size-1.5 rounded-full', status.color)" />
              <span>{{ status.label }}</span>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>