vue-select-input-ui v1.0.6

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

(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

Keyboard Accessible

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