vue-input-components

Dropdown Component

A flexible dropdown component for Vue 3 applications with support for single and multiple selection, filtering, and custom styling.

Properties

Property	Type	Default	Description
modelValue	string | string[]	’’	The v-model value (single or multiple)
options	DropdownOption[]	[]	Array of dropdown options
placeholder	string	‘Select an option’	Placeholder text shown when no option is selected
multiple	boolean	false	Whether multiple options can be selected
filterable	boolean	false	Whether the dropdown can be filtered
disabled	boolean	false	Whether the dropdown is disabled
maxHeight	string	‘300px’	Maximum height of the dropdown options
width	string	‘100%’	Width of the dropdown container
color	string	‘var(–text-primary)’	Color for borders and text
hoverColor	string	’’	Color for hover state
activeColor	string	’’	Color for selected state
disabledColor	string	‘var(–text-disabled)’	Color for disabled state
backgroundColor	string	‘white’	Background color of options
borderRadius	string	‘0.375rem’	Border radius of options
padding	string	‘0.5rem’	Padding of options
icon	string	’’	Font Awesome icon name or image URL (with ‘img:’ prefix)
iconSize	‘normal’ | ‘large’	‘normal’	Size of the icon
error	string	’’	Error message to display
required	boolean	false	Whether the dropdown is required
autosave	function	undefined	Function to call when value changes
label	string	’’	Label text
labelPosition	‘top’ | ‘left’	‘top’	Position of the label
labelAlign	‘left’ | ‘center’ | ‘right’	‘left’	Alignment of the label
labelWidth	string	’’	Width of the label when position is ‘left’

DropdownOption Interface

interface DropdownOption {
  id: string
  label: string
  disabled?: boolean
}

Events

Event	Description
update:modelValue	Emitted when the selection changes
changed	Emitted when the selection changes
saved	Emitted when autosave completes successfully

Examples

Basic Usage

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    label="Select a Country"
    placeholder="Choose a country"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dropdown } from '@a-vision-software/vue-input-components'

const selected = ref('')
const options = [
  { id: 'us', label: 'United States' },
  { id: 'ca', label: 'Canada' },
  { id: 'uk', label: 'United Kingdom' },
  { id: 'au', label: 'Australia' },
]
</script>

Multiple Selection with Filtering

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    label="Select Categories"
    placeholder="Choose categories"
    :multiple="true"
    :filterable="true"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dropdown } from '@a-vision-software/vue-input-components'

const selected = ref<string[]>([])
const options = [
  { id: 'electronics', label: 'Electronics' },
  { id: 'clothing', label: 'Clothing' },
  { id: 'books', label: 'Books' },
  { id: 'home', label: 'Home & Garden' },
  { id: 'sports', label: 'Sports' },
]
</script>

With Image Icon

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    label="Select with Image"
    icon="img:/path/to/icon.png"
  />
</template>

Custom Styled Dropdown

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    label="Custom Style"
    color="#4a90e2"
    hoverColor="#357abd"
    activeColor="#2c5a8c"
    borderRadius="1rem"
    padding="0.75rem 1rem"
  />
</template>

With Autosave

<template>
  <Dropdown
    v-model="selected"
    :options="options"
    label="With Autosave"
    :autosave="handleAutosave"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Dropdown } from '@a-vision-software/vue-input-components'

const selected = ref('')
const options = [
  { id: 'red', label: 'Red' },
  { id: 'blue', label: 'Blue' },
  { id: 'green', label: 'Green' },
]

const handleAutosave = async (value: string | string[]) => {
  // Simulate API call
  await new Promise((resolve) => setTimeout(resolve, 1000))
  console.log('Autosaved:', value)
}
</script>