README
@lassehaslev/vue-fields
Input fields to use with vuejs
Vue input fields contains special input fields to use width vuejs .
Installation
Run npm install @lassehaslev/vue-fields --save
in your project folder
Install component where register Vue
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 to compile the styles.
Code
To start using the field make use of it in your components
import InputField from '@lassehaslev/vue-fields';
export default {
template: '<input-field :model=""></input-field>',
components: {
InputField,
}
}
The input fields in this package should be used the same way as you would use normal inputfields with vuejs. 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.
<input-field type="%inputType%" :options="%options%" :model.sync="%Value to be updated%"></input-field>
Color picker
<input-field type="color" :model.sync="'#005599'"></input-field>
Grayscale picker
<input-field type="color" :model.sync="'#555555'"></input-field>
Slug
Slug creates sluggable string based on another string.
Slug has two types case
and dash
.
<input-field type="slug" :options="{ type='case', from: anotherString }" :model.sync="'#555555'"></input-field>
Coordinates
Coordinates gets coordinates from -1 to 1 in both x and y axes.
<input-field type="coordinates" :model.sync="{ x:0,y:0 }">
<div style="height:200px;background-color:#CCC;"></div>
</input-field>
Image picker
Image picker is based on @lassehaslev/vue-imagepicker. All properties to the imagepicker goes through :options parameters.
I strongly advice you to read @lassehaslev/vue-imagepicker documentation before starting using this input type.
<input-field type="image-picker" :model.sync="image" :options="{
'images': [
{
id: 1,
path: 'http://placehold.it/400x400',
},
{
id: 2,
path: 'http://placehold.it/800x400',
},
]
}"></input-field>
Development
Quick start
Clones repository and install dependencies
bash -c "$(curl -fsSL https://raw.githubusercontent.com/LasseHaslev/vue-fields/master/install.sh)"
Next time
# 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.