BaseDropdown

Dropdown component that mimics a Select element behavior, but with the option to customize the toggle button and each item contents.

Props

Name	Description	Type	Default
items	List of items to display.	DropdownItem[]
modelValue	The selected item.	DropdownItem | null
ariaLabel	Description of what the dropdown is used for.	string
animation	Animation component to use for expanding the dropdown. This is a single element animation, so only <transition> components are allowed.	AnimationProp	() => NoAnimation
searchTimeoutMs	Time to wait without receiving any keystroke before resetting the items search query.	number	1000

Events

Event name	Properties	Description
update:modelValue

Slots

Name	Description	Bindings (name - type - description)
toggle	Used to render the contents of the dropdown toggle button. If not provided, it uses	item string | number | Identifiable - The item data to render.
item	Used to render the contents of the dropdown toggle button. If not provided, it uses	item string | number | Identifiable - Item to render

Example

The Dropdown component is a simple yet customizable select component. The component needs to work the list of items available to select, which are passed using the items prop, and the selected item, which is passed in using the value prop.

The supported items must be an array that can contain unique strings, unique numbers, or objects with a unique id property.

The content of each item can be customized using the item slot, which apart from the data of the item, it also receives via prop if the element is selected or highlighted.

There toggle slot can be used to customize the button that opens the dropdown. If this is not provided, the item slot will be used for that.

<template>
  <BaseDropdown v-model="value" :items="items">
    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
    <template #item="{ item, isSelected, isHighlighted }">
      <span v-if="isHighlighted">🟢</span>
      <span v-if="isSelected">✅</span>
      <span>{{ item }}</span>
    </template>
  </BaseDropdown>
</template>
<script>
import { BaseDropdown } from '@empathyco/x-components'
export default {
  name: 'DropdownTest',
  components: {
    BaseDropdown,
  },
  data() {
    return {
      items: ['a', 2, { id: '3' }],
      value: 'a',
    }
  },
}
</script>