VueSelectInputUi

A vue component for select dates (range mode available) & time

Demo

Enjoy

Installation

Yarn

yarn add vue-select-input-ui

NPM

npm i --save vue-select-input-ui

Usage

ES6 Modules / CommonJS

import VueSelectInputUi from 'vue-select-input-ui';
import 'vue-select-input-ui/dist/vue-select-input-ui.css';
 
Vue.component('VueSelectInputUi', VueSelectInputUi);

  <VueSelectInputUi
    v-model="yourValue"
    :options="[
      { label: 'First option', value: 'first' },
      { label: 'Second option', value: 'second' },
      { label: 'Third option', value: 'third' }
    ]"
  />

UMD

<link
  rel="stylesheet"
  type="text/css"
  href="${YOUR_PATH}/vue-select-input-ui.css"
/>
 
<div id="app">
  <VueSelectInputUi v-model="yourValue"></VueSelectInputUi>
</div>
 
<script src="https://unpkg.com/vue" charset="utf-8"></script>
<script
  src="${YOUR_PATH}/vue-select-input-ui.umd.min.js"
  charset="utf-8"
></script> 
 
<script type="text/javascript">
  Vue.component('vue-select-input-ui', window['vue-select-input-ui']);
  new Vue({
    el: '#app',
    data() {
      return {
        yourValue: false
      };
    }
  });
</script> 

Props API

Props	Type	Required	Default
v-model	String	yes	-
id	String	no	VueSelectInputUi
name	String	no	VueSelectInputUi
label	String	no	Select option
hint (1)	String	no	-
error (2)	Boolean	no	false
color (3)	String (hex)	no	dodgerblue
dark-color (4)	String (hex)	no	#424242
item-height (4)	Int	no	30
list-height	Int	no	210
size	String ['sm', 'lg']	no	null
disabled	Boolean	no	false
required	Boolean	no	false
dark	Boolean	no	false
valid	Boolean	no	false
validColor	String (hex)	no	false
options (5)	String (hex)	no	false
border-radius	Number	no	8

(1) hint : Is a text that replaces the label/placeholder (Ex : Error designation)

(2) error : When is true --> Input border & label are red

(3) color: Replace color for the hint, the borders & picker color

(4) Height of items in option list

(5) Options should be an Array of object like that :

[
  { label: 'None' },
  { label: 'First option', value: 'first' },
  { label: 'Second option', value: 'second' },
  { label: 'Third option', value: 'third' }
]

Feature list

• You can search the option on taping the label
• Keyboard accessibilty
• Valid state ui
• Error state ui
• Message error state ui

Events API

Event	Return
input	value (formatted with 'format' props)
click	when you click on the component
focus	when the component is focused
blur	when the component is blur

Keyboard Accessible

Key	Action
Arrow Down	Next option
Arrow Up	Previous option
Escape	Close list
Enter	Select option

Upcoming features (Todo)

• Position list (left, right, top, bottom)

Contribute

Setting up development server

Ensure you have Node and npm in your machine. Minimal config is:

• node >= 6.0
• npm >= 3.0

This project is built with node@10.x.

Install the development dependencies by running:

npm install

or

npm ci # Recommanded if you have node > 10.x 

Once your dependencies are installed, start the development server with:

npm run serve

This will start the development server available at http://localhost:8080.

Compiles and hot-reloads for development

npm run serve

Linter

npm run lint

Tests

Work in progress

License

This project is licensed under MIT License