Dropdown VueJs component

THIS PACKAGE IS STILL IN BETA!

A dropdown VueJs component. Compatible with Vue 2.x

Installation

npm i @marchef/vuejs-dropdown

Usage

import Dropdown from '@marchef/vuejs-dropdown'
Vue.component('dropdown', Dropdown);

<dropdown
    name="dropdown-name"
    :options="[
    {
        name: 'Option A',
        value: 'option_a'
    },
    {
        name: 'Option B',
        value: 'option_bOption B'
    }]"
>
</dropdown>

Props

| Name | Description | Default | Require | | ------------- |:-------------:|:-------------:| -----:| | name | The name of the form field. [String] | | YES | | options | The options of the dropdown field. [Array] (see below) | | YES | | option-value-type | Configure the Option format. [name, icon, iconName, nameIcon] | iconName | | current-option-value-type | Configure the current Option format. [name, icon, iconName, nameIcon] | iconName | | current-option-class | CSS Classes to style the current option. [String] | dd_boarder_none | | current-option-icon-class | CSS Classes to style the current option icon. [String] | dd_icon dd_float_left | | current-option-value-class | CSS Classes to style the current option value. [String] | dd_float_left | | description | Short description or question text. View on the top of the options list. [String] | | descriptionClass | CSS Classes to style the description. [String] | | :arrow | Enable the arrow icon. [Boolean] | true | | arrow-icon-path | The arrow SVG Icon path. [String] | M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z | | arrow-icon-viewbox | The arrow SVG viewbox. [String] | 0 0 20 20 | | arrow-class | CSS Classes to style the arrow. [String] | dd_icon dd_float_left | | arrow-active-class | CSS Classes to style the arrow when the dropdown is Open. [String] | dd_transform-180 | | popper_options | Popper options. [Object]| | popperClass | CSS Classes to override the default popper Class. [String] | popper |

Prop Option Object

| Name | Description | Default | Require | | ------------- |:-------------:|:-------------:| -----:| | name | The Option Name. | | YES | | value | The Option Value. | | YES | | iconSvgPath | The option SVG Icon path. [String] | | iconViewbox | The option SVG Icon viewbox. [String] | | optionClass | CSS Classes to style the option. | | optionActiveClass | CSS Classes to style the active option in the options list. | | optionIconClass | CSS Classes to style the option icon. | | optionValueClass | CSS Classes to style the option value. |