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.	Array
ariaLabel	Description of what the dropdown is used for.	string
value	The selected item.	union
animation	Animation component to use for expanding the dropdown. This is a single element animation, so only <transition> components are allowed.	union	'NoElement'
searchTimeoutMs	Time to wait without receiving any keystroke before resetting the items search query.	number	1000

Events

Event name	Properties	Description
change

Slots

Name	Description	Bindings (name - type - description)
toggle	Used to render the contents of the dropdown toggle button. If not provided, it uses	isOpen boolean - True if the dropdown is opened, and false if it is closed. 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	isHighlighted boolean - True when the item has the focus. isSelected boolean - True when the item is selected. 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 :items="items" v-model="value">
    <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>