CataUiDropover

A dropover component that displays a list of selectable options in a dropdown menu. It allows users to select an option from a list, with the currently selected option always displayed at the top. Each option can include an icon and label.

<CataUiDropover :disabled="false" :options="options" v-model="selectedValue" />

Props

Prop	Description	Type	Default	Required	Options
disabled	Disables the dropover component when set to true	Boolean	false		true, false
options	Array of options to display in the dropover	Array		true
v-model	The currently selected option's value	String, Number		true

Option Properties

Each option in the options array should have the following structure:

Property	Description	Type	Required
icon	Icon name to display next to the option label	String
label	Text to display for the option	String	true
value	Unique identifier for the option (used for v-model binding)	String, Number	true

Examples

Basic Usage

// Template
<CataUiDropover :options="deviceOptions" v-model="selectedDevice" />

// Script
import { ref } from 'vue';

const deviceOptions = ref([
  {
    label: 'Desktop',
    icon: 'bi-laptop',
    value: 'desktop'
  },
  {
    label: 'Mobile phone',
    icon: 'bi-phone',
    value: 'mobile-phone'
  },
  {
    label: 'Tablet',
    icon: 'bi-tablet',
    value: 'tablet'
  }
]);

const selectedDevice = ref('desktop');

Disabled Dropover

<CataUiDropover :options="deviceOptions" v-model="selectedDevice" :disabled="true" />