Dropdown API Reference

Props

Prop	Type	Default	Description
items	Array	[]	Array of items to display in the dropdown
modelValue	Array/String/Number/Object	[]	Selected value(s) for v-model binding
itemText	String	'text'	Property name for item display text
itemValue	String	'value'	Property name for item value
multiple	Boolean	false	Enable multiple item selection
disabled	Boolean	false	Disable the dropdown
buttonText	String	'Select'	Default button text when no item is selected
noDataText	String	'No items available'	Text displayed when no items are available
selectedOnTop	Boolean	false	Show selected items at the top of the list
triggerType	String	'click'	Trigger type for opening dropdown. Options: 'click', 'hover'
placement	String	'bottom-start'	Dropdown placement relative to trigger
offset	Array	[0, 0.125]	Offset from trigger element [x, y]
closeOnOutsideClick	Boolean	true	Close dropdown when clicking outside
closeOnEsc	Boolean	true	Close dropdown when pressing ESC key
buttonWidth	String/Number	'auto'	Width applied to the trigger button
width	String/Number	null	Explicit dropdown width (matches trigger width when null)

Events

Event	Payload	Description
update:modelValue	value	Emitted when selection changes (for v-model)
item:select	item	Emitted when an item is selected
item:unselect	item	Emitted when an item is unselected
menu:open	-	Emitted when dropdown menu opens
menu:close	-	Emitted when dropdown menu closes

Slots

Slot	Props	Description
trigger	{ isOpen, selectedItems, toggleMenu, openMenu, closeMenu }	Custom trigger element
triggerContent	{ props }	Replace only the inner content of the default trigger button
item	{ item: Any, selected: Boolean, toggle: Function }	Custom item rendering
no-data	-	Custom content when no items are available

Methods

Method	Description
openMenu()	Open the dropdown menu
closeMenu()	Close the dropdown menu
toggleMenu()	Toggle the dropdown menu open/closed

Basic Usage

<template>
  <ODropdown
    v-model="selectedValue"
    :items="items"
    :multiple="true"
    @item:select="handleItemSelect"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedValue = ref([]);
const items = ref([
  { text: "Option 1", value: "option1" },
  { text: "Option 2", value: "option2" },
  { text: "Option 3", value: "option3" },
]);

const handleItemSelect = (item) => {
  console.log("Selected:", item);
};
</script>