Select with clear button

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

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "svelte", label: "SvelteKit" },
  { value: "nuxt", label: "Nuxt.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

const value = ref("")

function handleClear(e: MouseEvent) {
  e.preventDefault()
  e.stopPropagation()
  value.value = ""
}
</script>

<template>
  <Field class="max-w-xs">
    <Select :model-value="value" @update:model-value="(v: unknown) => (value = v as string)">
      <SelectTrigger :class="cn(value !== '' && '[&>svg:last-child]:hidden!')">
        <SelectValue placeholder="Select framework" />
        <div
          v-if="value !== ''"
          role="button"
          tabindex="-1"
          @click="handleClear"
          @pointerdown="
            (e) => {
              e.preventDefault()
              e.stopPropagation()
            }
          "
          class="text-muted-foreground hover:text-foreground flex size-4 items-center justify-center rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-x size-4"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
          <span class="sr-only">Clear selection</span>
        </div>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectItem v-for="framework in frameworks" :key="framework.value" :value="framework.value">
          {{ framework.label }}
        </SelectItem>
      </SelectContent>
    </Select>
  </Field>
</template>