Select with custom chevrons up down icon

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Blueberry", value: "blueberry" },
  { label: "Grapes", value: "grapes" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Strawberry", value: "strawberry" },
]

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="w-[200px] [&>svg:last-child]:hidden!">
        <SelectValue placeholder="Select an option" />
        <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>
        <svg
          v-else
          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-chevrons-up-down text-muted-foreground size-4"
        >
          <path d="m7 15 5 5 5-5" />
          <path d="m7 9 5-5 5 5" />
        </svg>
      </SelectTrigger>
      <SelectContent position="popper">
        <SelectGroup>
          <SelectItem v-for="item in items" :key="item.value" :value="item.value">
            {{ item.label }}
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  </Field>
</template>