vue-input-dropdown

A simple to use, highly customizable input dropdown component for Vue

Installation
Usage
Example

Installation

npm install --save vue-input-dropdown

Default import

Install all the components (theres just one for now):

import Vue from 'vue'
import VueInputDropdown from 'vue-input-dropdown'
 
Vue.use(VueInputDropdown)

** A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**

Distribution import

Install all the components:

import 'vue-input-dropdown/dist/vue-input-dropdown.css'
import VueInputDropdown from 'vue-input-dropdown/dist/vue-input-dropdown.common'
 
Vue.use(VueInputDropdown)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-input-dropdown/dist/vue-input-dropdown.css"/>
 
<script src="vue.js"></script>
<script src="vue-input-dropdown/dist/vue-input-dropdown.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueInputDropdown)

Source import

Install all the components:

import Vue from 'vue'
import VueInputDropdown from 'vue-input-dropdown/src'
 
Vue.use(VueInputDropdown)

Use specific components:

import Vue from 'vue'
import { VueInputDropdown } from 'vue-input-dropdown/src'
 
Vue.component('vue-input-dropdown', VueInputDropdown)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

Usage

props

Prop	Default/Required	Example	Type/Description
items	None/REQUIRED	:items="['LA', 'NY']"	Array of strings - items in dropdown
picked	None/REQUIRED	:picked="itemPicked"	Callback function when item selected
selected	""	:selected="myCity"	Currently selected state item
options	See Below	:options="{}" see below	Object containing full options

options prop

This component was build to be customized. Almost fully. Pass option object to :option prop.

Option	Default / Required	Description
height	REQUIRED	The height of the input container. Needed for offset
width	REQUIRED	The width of the input container. Needed for offset
maxHeight	auto	The max height of the dropdown. Auto uses scroll on overflow
outerContainerClass	.dropdown-container	Class to be used for the outermost container
inputClass	.input-box	Class to be used for the input element
dropdownClass	.dropdown-inner	Class to be used for the dropdown container
itemContainerClass	.item	Class to be used for the item wrappers inside the dropdown
activeItemClass	.active	Class to be used for the currently selected Item
nonActiveItemClass	.non-active	Class to be used for non-active items
transitionName	slide-fade	Name of the trasition to be used
outerContainerStyle	""	Inline styling for outermost container
inputStyle	""	Inline styling for input box
dropdownStyle	""	Inline styling for dropdown container
itemContainerStyle	""	Inline styling for item wrappers inside dropdown
activeItemStyle	""	Inline styling for the currently selected item
nonActiveItemStyle	""	Inline styling for non-active items

Not Complete, WIP

Example

Link to the example

Plugin Development (feel free to create pull requests and I'll look over them)

TODO: - CREATE PROPER DEV ENVIRONMENT TO TEST USAGE AND IMPORTS - EDIT ESLINT OR JUST REMOVE

Installation

The first time you create or clone your plugin, you need to install the default dependencies:

npm install

Watch and compile

This will run webpack in watching mode and output the compiled files in the dist folder.

npm run dev

License

MIT

npm