Select with custom access level descriptions

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

const accessLevels = [
  {
    value: "full_access",
    label: "Full access",
    description: "Can modify list access",
  },
  {
    value: "read_write",
    label: "Read and write",
    description: "Can edit & publish lists",
  },
  {
    value: "read_only",
    label: "Read only",
    description: "Can only view lists",
  },
  {
    value: "no_access",
    label: "No access",
    description: "Cannot view or edit lists",
  },
]

function findLevel(value: unknown) {
  return accessLevels.find((level) => level.value === value)
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :default-value="accessLevels[1]!.value">
      <SelectTrigger class="w-[240px] [&_small]:hidden">
        <!--
          reka-ui's SelectValue отдаёт только textContent выбранного
          SelectItem, тогда как Radix's Select.Value заново монтирует
          children целиком (см. комментарий в c-select-6.vue).
        -->
        <SelectValue placeholder="Select access level">
          <template #default="{ modelValue }">
            <span v-if="findLevel(modelValue)" class="flex flex-col items-start gap-px">
              <span class="font-medium">{{ findLevel(modelValue)!.label }}</span>
              <small class="text-muted-foreground text-xs">
                {{ findLevel(modelValue)!.description }}
              </small>
            </span>
          </template>
        </SelectValue>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem
            v-for="level in accessLevels"
            :key="level.value"
            :value="level.value"
            class="[&_svg]:text-primary"
          >
            <span class="flex flex-col items-start gap-px">
              <span class="font-medium">{{ level.label }}</span>
              <small class="text-muted-foreground text-xs">
                {{ level.description }}
              </small>
            </span>
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>