CataUiDropdown

A versatile dropdown component that displays a list of actions when clicked. Supports various button styles, sizes, and customizable options.

<CataUiDropdown :actions="dropdownActions" />
<CataUiDropdown :actions="dropdownActions" actionsAlignment="left" />
<CataUiDropdown :actions="dropdownActions" type="secondary" />
<CataUiDropdown :actions="dropdownActions" type="tertiary" />
<CataUiDropdown :actions="dropdownActions" type="dots" size="small" />
<CataUiDropdown :actions="dropdownActions" :disabled="true" />
<CataUiDropdown :actions="dropdownActions" label="Menu" />
<CataUiDropdown :actions="dropdownActions" :autoClose="true" />
<CataUiDropdown :actions="dropdownActions" :loading="true" />

Props

Prop	Description	Type	Default	Required	Options
actions	The list of actions to display in the dropdown menu	Array		true
actionsAlignment	Alignment of the dropdown menu relative to the button	String	'right'	false	'left', 'right'
autoClose	When true, dropdown automatically closes when clicking any action	Boolean	false	false
disabled	When true, disables the dropdown button interaction	Boolean	false	false
icon	Icon displayed on the dropdown button (see Icons)	String	'bi-chevron-down'	false	Any valid icon name
label	Text label shown on the dropdown button (not available with type="dots")	String	''	false
loading	When true, shows a loading spinner overlay on the dropdown menu	Boolean	false	false
popperOptions	Custom options for PopperJS positioning library	Object	null	false	See PopperJS documentation
size	Controls the size of the dropdown button	String	'large'	false	'small', 'large'
type	Visual style of the dropdown button	String	'primary'	false	'primary', 'secondary', 'tertiary', 'dots'

Emits

Emit	Description
actionClicked	Triggered when an action in the dropdown menu is clicked
close	Triggered when the dropdown menu closes
open	Triggered when the dropdown menu opens

Action Item Properties

Property	Description	Type	Required
id	Unique identifier for the action item	Any	Yes
autoClose	When true, closes dropdown when this action is clicked	Boolean	No
disabled	When true, the action item is disabled and not clickable	Boolean	No
divider	When true, renders a divider line instead of an action button	Boolean	No
icon	Icon shown before the label (see Icons)	String	No
iconColor	Custom color for the icon	String	No
image	URL to an image to display instead of an icon	String	No
label	Text displayed for the action item	String	No

Data Structure Example

const dropdownActions = [
    {
        id: 1,
        icon: 'bi-person-fill',
        label: 'User Profile',
        disabled: false,
        divider: false,
        autoClose: true,
    },
    {
        id: 2,
        icon: 'bi-gear-fill',
        label: 'Settings',
        disabled: false,
        divider: false,
    },
    {
        id: 3,
        divider: true,
    },
    {
        id: 4,
        image: '/images/custom-icon.png',
        label: 'Custom Action',
        disabled: false,
    },
    {
        id: 5,
        icon: 'bi-box-arrow-right',
        label: 'Log Out',
        iconColor: 'var(--color-danger-500)',
        disabled: false,
    },
]

Usage Examples

Basic Usage with Events

<template>
<CataUiDropdown 
    :actions="actions" 
    @actionClicked="handleAction"
    @open="handleOpen" 
    @close="handleClose" />
</template>

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

const actions = ref([
  { id: 'edit', icon: 'bi-pencil', label: 'Edit' },
  { id: 'delete', icon: 'bi-trash', label: 'Delete' }
]);

function handleAction(action) {
  console.log(`Action ${action.id} was clicked`);
}

function handleOpen() {
  console.log('Dropdown opened');
}

function handleClose() {
  console.log('Dropdown closed');
}
</script>

<template>
  <CataUiDropdown
    label="Filter Options"
    icon="bi-funnel"
    :actions="filterActions"
    type="secondary"
    actionsAlignment="left"
    size="small"
    :autoClose="true"
    :popperOptions="popperOptions" />
</template>

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

const filterActions = ref([
  { id: 'all', label: 'All Items' },
  { id: 'active', label: 'Active Only' },
  { id: 'archived', label: 'Archived' }
]);

const popperOptions = {
  placement: 'bottom-start',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
};
</script>