Skip to content

Latest commit

 

History

History
265 lines (219 loc) · 14.7 KB

README.md

File metadata and controls

265 lines (219 loc) · 14.7 KB
Raw

Vue Dropdown Component

vue-weblineindia-dropdown is a feature rich select / dropdown / typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. This is a lightweight component, while it also maintains high standards for accessibility, developer experience, and customization.

  • Accessible
  • Tagging
  • Filtering / Searching
  • Select Single
  • Customizable with slots and SCSS variables
  • Vuex Support
  • AJAX Support
  • SSR Support
  • Zero dependencies

Table of contents

Browser Support

Chrome Firefox Safari Edge IE
83.0 ✔ 77.0 ✔ 13.1.1 ✔ 83.0 ✔ 11.9 ✔

Demo

Getting started

npm install vue-weblineindia-dropdown
# oR
yarn add vue-weblineindia-dropdown

Then, import and register the component:

import Vue from "vue";
import Dropdown from "vue-weblineindia-dropdown";

Vue.component("v-select", Dropdown);

The component itself does not include any CSS. You'll need to include it separately:

import "vue-weblineindia-dropdown/lib/vue-select.css";

Alternatively, you can import the scss for complete control of the component styles:

@import "vue-weblineindia-dropdown/src/scss/vue-select.scss";

Usage

<template>
  <div id="app">
    <v-select v-model="value" :options="optionArray" :placeholder="'Select'"/>
  </div>
</template>
export default {
  data() {
    return {
      value: '',
      optionArray: ["option 1", "option 2", "option 3", "option 4"]
    };
  },
}

Available Props

Prop Data Type Default Description
append-icon string '$dropdown' Appends an icon to the component, uses the same syntax as v-icon
append-outer-icon string undefined Appends an icon to the outside the component's input, uses same syntax as v-icon
attach any false Specifies which DOM element that this component should detach to.String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
autofocus boolean false Enables autofocus
background-color string undefined Changes the background-color of the input
cache-items boolean false Keeps a local unique copy of all items that have been passed through the items prop.
chips boolean false Changes display of selections to chips.
clear-icon string '$clear' Applied when using clearable and the input is dirty.
clearable boolean false Add input clear functionality, default icon is Material Icons clear.
color string undefined Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).
counter boolean/number/string undefined Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
counter-value function null
dark boolean false Applies the dark theme variant to the component
deletable-chips boolean false Adds a remove icon to selected chips
dense boolean false Reduces the input height
disable-lookup boolean false Disables keyboard lookup
disabled boolean false Disables the input
eager boolean false Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
error boolean false Puts the input in a manual error state
error-count number/string 1 The total number of errors that should display at once
error-messages string/array [] Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
filled boolean false Applies the alternate filled input style
filter (item: object, queryText: string, itemText: string): boolean The function used for filtering items
flat boolean false Removes elevation (shadow) added to element when using the solo or solo-inverted props
full-width boolean false Designates input type as full-width
height number/string undefined Sets the height of the input
hide-details boolean/string undefined Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
hide-selected boolean false Do not display in the select menu items that are already selected
hint string undefined Hint text
id string undefined Sets the DOM id on the component
item-color string 'primary' Sets color of selected items
item-disabled array/string/function disabled Set property of items's disabled value
item-text array/string/function text Set property of items's text value
item-value array/string/function value Set property of items's value
items array [] Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
label string Sets input label
light boolean false Applies the light theme variant to the component.
loader-height number/string 2 Specifies the height of the loader
loading boolean/string false Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
menu-props array/string/object { "closeOnClick": false, "closeOnContentClick": false, "disableKeys": true, "openOnClick": false, "maxHeight": 304 } Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }".
messages string/array [] Displays a list of messages or message if using a string.
no-data-text string '$vuetify.noDataText' Display text when there is no data.
open-on-clear boolean false When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state.
outlined boolean false Applies the outlined style to the input.
persistent-hint boolean false Forces hint to always be visible.
placeholder string Select Sets the input’s placeholder text.
prefix string undefined Displays prefix text.
prepend-icon string undefined Prepends an icon to the component, uses the same syntax as v-icon.
prepend-inner-icon string undefined Prepends an icon inside the component's input, uses the same syntax as v-icon.
readonly boolean false Puts input in readonly state.
return-object boolean false Changes the selection behavior to return the object directly rather than the value specified with item-value.
reverse boolean false Reverses the input orientation.
rounded boolean false Adds a border radius to the input.
rules array [] Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message.
shaped boolean false Round if outlined and increase border-radius if filled. Must be used with either outlined or filled.
single-line boolean false Label does not move on focus/dirty.
small-chips boolean false Changes display of selections to chips with the small property.
solo boolean false Changes the style of the input.
solo-inverted boolean false Reduces element opacity until focused.
success boolean false Puts the input in a manual success state.
success-messages string/array [] Puts the input in a success state and passes through custom success messages..
suffix string undefined Displays suffix text.
type string text Sets input type.
validate-on-blur boolean false Delays validation until blur event.
value any default The input's value.
value-comparator function (a: any, b: any): boolean The comparison algorithm used for values.

Events

Name Description Value
blur Emitted when the input is blurred Event
change Emitted when the input is changed by user interaction any
click Emitted when input is clicked MouseEvent
click:append Emitted when appended icon is clicked Event
click:append-outer Emitted when appended outer icon is clicked Event
click:clear Emitted when clearable icon clicked Event
click:prepend Emitted when prepended icon is clicked Event
click:prepend-inner Emitted when prepended inner icon is clicked Event
focus Emitted when component is focused Event
input The updated bound model any
keydown Emitted when any key is pressed KeyboardEvent
mousedown Emitted when click is pressed MouseEvent
mouseup Emitted when click is released MouseEvent
update:error The error.sync event boolean
update:list-index Emitted when menu item is selected using keyboard arrows number
update:search-input The search-input.sync event string

Slots

Name Description
append Adds an item inside the input and after input content
append-item Adds an item after menu content
append-outer Adds an item outside the input and after input content
default The default Vue slot.
item Define a custom item appearance
label Replaces the default label
message Customize the messages slot.
no-data Displayed when there are no filtered items.
prepend Adds an item outside the input and before input content.
prepend-inner Adds an item inside the input and before input content.
prepend-item Adds an item before menu content.
progress Slot for custom progress linear (displayed when loading prop is not equal to Boolean False).
selection Define a custom selection appearance.

Sass

Name Default
$select-active-chip-opacity 0.2 !default;
$select-active-icon-flip true !default;
$select-chip-margin 4px !default;
$select-chips-box-enclosed-selections-min-height 68px !default;
$select-chips-dense-selections-min-height 40px !default;
$select-chips-dense-selections-padding-top 40px !default;
$select-chips-selections-padding-top 42px !default;
$select-dense-chip-margin 0 4px 0 4px !default;
$select-dense-selections-margin 5px 4px 3px 0 !default;
$select-outlined-dense-selections-padding-top 4px 0 !default;
$select-outlined-selections-padding-top 8px 0 !default;
$select-prefix-line-height 20px !default;
$select-selected-chip-opacity .22 !default;
$select-selections-line-height 18px !default;
$select-selections-margin 7px 4px 7px 0 !default;
$select-selections-padding-top 20px !default;
$select-small-chips-dense-selections-min-height 38px !default;
$select-small-chips-selections-min-height 26px !default;

Want to Contribute?

  • Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
  • Fork it.
  • Create new branch to contribute your changes.
  • Commit all your changes to your branch.
  • Submit a pull request.

Need Help?

We also provide a free, basic support for all users who want to use this VueJS based Dropdown Component in their software project. In case you want to customize this Dropdown Component to suit your development needs, then feel free to contact our VueJS developers.

Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

vue-weblineindia-dropdown is inspired by vue-select.

License

MIT

Keywords

vue-weblineindia-dropdown,dropdown,select,vue components,vuejs,vuejs component