https://github.com/louismazel/vue-select-input-ui
A beautiful select input
https://github.com/louismazel/vue-select-input-ui
Last synced: 8 months ago
JSON representation
A beautiful select input
- Host: GitHub
- URL: https://github.com/louismazel/vue-select-input-ui
- Owner: LouisMazel
- License: mit
- Created: 2019-11-04T18:27:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-07T23:03:18.000Z (almost 3 years ago)
- Last Synced: 2025-01-19T07:38:06.749Z (over 1 year ago)
- Language: Vue
- Homepage: https://louismazel.github.io/vue-select-input-ui/
- Size: 4.09 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueSelectInputUi
> A vue component for select dates (range mode available) & time
## Demo
[Enjoy](https://louismazel.github.io/vue-select-input-ui/)
## Installation
Yarn
```bash
yarn add vue-select-input-ui
```
NPM
```bash
npm i --save vue-select-input-ui
```
## Usage
### ES6 Modules / CommonJS
```js
import VueSelectInputUi from 'vue-select-input-ui';
import 'vue-select-input-ui/dist/vue-select-input-ui.css';
Vue.component('VueSelectInputUi', VueSelectInputUi);
```
```html
```
### UMD
```html
Vue.component('vue-select-input-ui', window['vue-select-input-ui']);
new Vue({
el: '#app',
data() {
return {
yourValue: false
};
}
});
```
## 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 :
```js
[
{ 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:
```bash
npm install
```
or
```bash
npm ci # Recommanded if you have node > 10.x
```
Once your dependencies are installed, start the development server with:
```bash
npm run serve
```
This will start the development server available at `http://localhost:8080`.
## Compiles and hot-reloads for development
```bash
npm run serve
```
## Linter
```bash
npm run lint
```
## Tests
Work in progress
## License
This project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)