https://github.com/lassehaslev/vue-fields
https://github.com/lassehaslev/vue-fields
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lassehaslev/vue-fields
- Owner: LasseHaslev
- Created: 2016-07-11T14:39:34.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-08T09:23:49.000Z (almost 10 years ago)
- Last Synced: 2025-02-23T18:16:56.742Z (over 1 year ago)
- Language: Vue
- Size: 34.2 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @lassehaslev/vue-fields
> Input fields to use with vuejs
Vue input fields contains special input fields to use width [ vuejs ]( http://vuejs.org/ ).
## Installation
Run ```npm install @lassehaslev/vue-fields --save``` in your project folder
Install component where register Vue
``` html
import Vue from 'vue'
import { FieldsInstall } from '@lassehaslev/vue-fields'
Vue.use( FieldsInstall );
```
## Usage
#### Styles
Styles can be found compiled in ```dist/Fields.css```. Or you can compile your own from ```src/styles/*```. We use [Stylus](http://stylus-lang.com/) to compile the styles.
#### Code
To start using the field make use of it in your components
``` js
import InputField from '@lassehaslev/vue-fields';
export default {
template: '',
components: {
InputField,
}
}
```
The input fields in this package should be used the same way as you would use normal inputfields with [vuejs](http://vuejs.org/).
Main concept is that you give a :model="" with the data the same way you would use v-model="" on a normal input element.
Some inputs like the image-picker needs extra options to be configured. For those objects we use the :options="" attribute on the element with the settings to make the object work.
``` html
```
#### Color picker
``` html
```
#### Grayscale picker
``` html
```
#### Slug
Slug creates sluggable string based on another string.
Slug has two types ```case``` and ```dash```.
``` html
```
#### Coordinates
Coordinates gets coordinates from -1 to 1 in both x and y axes.
``` html
```
#### Image picker
Image picker is based on [@lassehaslev/vue-imagepicker](https://github.com/lassehasleV/vue-imagepicker). All properties to the imagepicker goes through :options parameters.
I strongly advice you to read [@lassehaslev/vue-imagepicker](https://github.com/lassehasleV/vue-imagepicker) documentation before starting using this input type.
``` html
```
## Development
#### Quick start
Clones repository and install dependencies
``` bash
bash -c "$(curl -fsSL https://raw.githubusercontent.com/LasseHaslev/vue-fields/master/install.sh)"
```
#### Next time
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```
For more information see the [docs for vueify](https://github.com/vuejs/vueify).