a vue 3 drop down component that uses <ul> and <li> to mimic a native browser dropdown select, with all required keyboard and accessibility standards in typescript

index.ts
interface DropdownOption {
  label: string;
  value: any;
}
60 chars
5 lines

<template>
  <div class="dropdown">
    <button
      class="dropdown-toggle"
      aria-haspopup="true"
      aria-expanded="false"
      @click="open = !open"
    >
      {{ selectedOption.label }}
    </button>
    <ul
      v-show="open"
      class="dropdown-menu"
      aria-labelledby="dropdownButton"
      @keydown.enter.stop.prevent="selectOption"
      @keydown.escape="closeDropdown"
    >
      <li
        v-for="(option, index) in options"
        :key="index"
        :class="{ 'dropdown-item': true, active: option.value === selectedOption.value }"
        @mousedown.stop.prevent="selectOption(option)"
      >
        {{ option.label }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

interface DropdownOption {
  label: string;
  value: any;
}

export default defineComponent({
  name: "Dropdown",
  props: {
    options: {
      type: Array as () => DropdownOption[],
      required: true,
    },
    value: {
      type: [Object, String, Number, Boolean],
      required: true,
    },
  },
  emits: ["update:value"],
  setup(props, { emit }) {
    const open = ref(false);
    const selectedOption = computed(() =>
      props.options.find((option) => option.value === props.value)
    );

    function selectOption(option: DropdownOption) {
      emit("update:value", option.value);
      open.value = false;
    }

    function closeDropdown() {
      open.value = false;
    }

    return {
      open,
      selectedOption,
      selectOption,
      closeDropdown,
    };
  },
});
</script>
1577 chars
75 lines