Country picker select with flag emojis

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

const countries = [
  { value: "us", label: "United States", flag: "\u{1F1FA}\u{1F1F8}" },
  { value: "gb", label: "United Kingdom", flag: "\u{1F1EC}\u{1F1E7}" },
  { value: "de", label: "Germany", flag: "\u{1F1E9}\u{1F1EA}" },
  { value: "fr", label: "France", flag: "\u{1F1EB}\u{1F1F7}" },
  { value: "jp", label: "Japan", flag: "\u{1F1EF}\u{1F1F5}" },
  { value: "au", label: "Australia", flag: "\u{1F1E6}\u{1F1FA}" },
]

function findCountry(value: unknown) {
  return countries.find((country) => country.value === value)
}
</script>

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