Dropdown Component

A flexible and accessible dropdown component tailored for Vue 3. This dropdown is designed for both visual appeal and usability, adhering to ARIA guidelines. The component is extensible, allowing for easy integration and customization of its design to match your project.

Props

| Prop Name | Default Value | Description | |----------------------------|----------------|-----------------------------------------------------------------------------------------------------| | data-menu-items | - | required An array of items for the dropdown menu | | data-id | - | required Prefix for all the id attributes | | data-disabled | false | Boolean indicating if the dropdown is disabled | | data-placement | 'bottom-start' | Initial placement for the floating menu | | data-fallback-placements | - | Array of alternative placements for the floating menu in case the desired placement is not possible | | data-offset | 0 | Offset (in pixels) between the button and the floating menu |

Slots

| Slot Name | Description | Context Props | |------------|---------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | button | Slot for custom content of the dropdown button | expanded: Boolean indicating if the dropdown menu is expanded | | menuitem | Slot for custom content of each dropdown menuitem | option: The current option object from data-menu-items propindex: The current index of the option in the data-menu-items arrayattr: Object with predefined attributes for the menuitem |

CSS Custom Properties

| Custom Property | Default Value | Description | |----------------------------------------------------|---------------|-----------------------------------------------------------------| | --dropdown-width | 100% | Width of the dropdown wrapper. | | --dropdown-button-position | | Background color of the dropdown button. | | --dropdown-button-width | | Width of the dropdown button. | | --dropdown-button-padding | | Padding of the dropdown button. | | --dropdown-button-bg-color | | Background color of the dropdown button. | | --dropdown-button-color | | Text color of the dropdown button. | | --dropdown-button-border-width | | Width of the dropdown button border. | | --dropdown-button-border-style | | Style of the dropdown button border. | | --dropdown-button-border-color | | Color of the dropdown button border. | | --dropdown-button-border-radius | | Border radius of the dropdown button. | | --dropdown-button-box-shadow | | Box shadow of the dropdown button. | | --dropdown-button-opacity | | Opacity of the dropdown button. | | --dropdown-button-z-index | | Z-index of the dropdown button. | | --dropdown-button-expanded-bg-color | | Background color for the expanded state of the dropdown button. | | --dropdown-button-expanded-color | | Text color for the expanded state of the dropdown button. | | --dropdown-button-expanded-border-width | | Width for the expanded state of the dropdown button border. | | --dropdown-button-expanded-border-style | | Style for the expanded state of the dropdown button border. | | --dropdown-button-expanded-border-color | | Color for the expanded state of the dropdown button border. | | --dropdown-button-expanded-box-shadow | | Box shadow for the expanded state of the dropdown button. | | --dropdown-button-expanded-outline | | Outline for the expanded state of the dropdown button. | | --dropdown-button-expanded-outline-offset | | Outline offset for the expanded state of the dropdown button. | | --dropdown-button-disabled-bg-color | | Background color for the disabled state of the dropdown button. | | --dropdown-button-disabled-color | | Text color for the disabled state of the dropdown button. | | --dropdown-button-disabled-border-width | | Width for the disabled state of the dropdown button border. | | --dropdown-button-disabled-border-style | | Style for the disabled state of the dropdown button border. | | --dropdown-button-disabled-border-color | | Color for the disabled state of the dropdown button border. | | --dropdown-button-disabled-box-shadow | | Box shadow for the disabled state of the dropdown button. | | --dropdown-button-disabled-opacity | 0.333 | Opacity for the disabled state of the dropdown button. | | --dropdown-button-disabled-cursor | not-allowed | Cursor for the disabled state of the dropdown button. | | --dropdown-button-hover-bg-color | | Background color for the hover state of the dropdown button. | | --dropdown-button-hover-color | | Text color for the hover state of the dropdown button. | | --dropdown-button-hover-border-width | | Width for the hover state of the dropdown button border. | | --dropdown-button-hover-border-style | | Style for the hover state of the dropdown button border. | | --dropdown-button-hover-border-color | | Color for the hover state of the dropdown button border. | | --dropdown-button-hover-box-shadow | | Box shadow for the hover state of the dropdown button. | | --dropdown-button-hover-opacity | | Opacity for the hover state of the dropdown button. | | --dropdown-menu-width | 100% | Width of the dropdown menu. | | --dropdown-menu-max-width | | Maximum width of the dropdown menu. | | --dropdown-menu-min-width | | Minimum width of the dropdown menu. | | --dropdown-menu-max-height | | Maximum height of the dropdown menu. | | --dropdown-menu-padding | | Padding of the dropdown menu. | | --dropdown-menu-bg-color | white | Background color of the dropdown menu. | | --dropdown-menu-color | | Text color of the dropdown menu. | | --dropdown-menu-border-width | 1px | Width of the dropdown menu border. | | --dropdown-menu-border-style | solid | Style of the dropdown menu border. | | --dropdown-menu-border-color | | Color of the dropdown menu border. | | --dropdown-menu-border-radius | 0.25rem | Border radius of the dropdown menu. | | --dropdown-menu-box-shadow | | Box shadow of the dropdown menu. | | --dropdown-menu-z-index | 1 | Z-index of the dropdown menu. | | --dropdown-menuitem-display | block | Display of the dropdown menuitems. | | --dropdown-menuitem-width | 100% | Width of the dropdown menuitems. | | --dropdown-menuitem-padding | | Padding of the dropdown menuitems. | | --dropdown-menuitem-bg-color | | Background color of the dropdown menuitems. | | --dropdown-menuitem-color | | Text color of the dropdown menuitems. | | --dropdown-menuitem-text-decoration | | Text decoration of the dropdown menuitems. | | --dropdown-menuitem-text-underline-offset | | Text underline offset of the dropdown menuitems. | | --dropdown-menuitem-hover-bg-color | | Background color for the hover state of the dropdown menuitems. | | --dropdown-menuitem-hover-color | | Text color for the hover state of the dropdown menuitems. | | --dropdown-menuitem-hover-text-decoration | | Text decoration for the hover state of the dropdown menuitems. | | --dropdown-menuitem-focus-bg-color | | Background color for the focus state of the dropdown menuitems. | | --dropdown-menuitem-focus-color | | Text color for the focus state of the dropdown menuitems. | | --dropdown-menuitem-focus-text-decoration | | Text decoration for the focus state of the dropdown menuitems. | | --dropdown-menuitem-focus-visible-outline | | Outline for the focused dropdown menuitems. | | --dropdown-menuitem-focus-visible-outline-offset | | Outline offset for the focused dropdown menuitems. | | --dropdown-transition-duration | 0.3s | Transition duration for dropdown animations. | | --dropdown-transition-timing-function | ease-in-out | Transition timing function for dropdown animations. | | --dropdown-translate-y | -0.5rem | Translate-y for dropdown animations. |