vue-input-dropdown

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

Table of contents

• 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