Wondering what’s next for npm?Check out our public roadmap! »

    vue-input-dropdown

    0.1.9 • Public • Published

    vue-input-dropdown

    npm npm vue2

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

    Table of contents

    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

    Install

    npm i vue-input-dropdown

    DownloadsWeekly Downloads

    13

    Version

    0.1.9

    License

    MIT

    Unpacked Size

    894 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar