Adds an example to the project
Documentation update, and example idea and initial contribution by: Martin Bramwell <mhb.warehouseman@gmail.com> * Adds an example form and updates documentation to reflect curried function
This commit is contained in:
Justin Schroeder
GitHub
parent
d85da177eb
commit
c219633ebf
28
README.md
28
README.md
@ -18,6 +18,25 @@ First download the `vue-formulate` package from npm:
|
||||
npm install vue-formulate
|
||||
```
|
||||
|
||||
You will require Babel so...
|
||||
|
||||
```sh
|
||||
babel-preset-env
|
||||
babel-preset-stage-2
|
||||
```
|
||||
|
||||
|
||||
... and ensure a `.babelrc` is in the project root and includes ...
|
||||
```sh
|
||||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }],
|
||||
"stage-2"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### Installation
|
||||
|
||||
Install `vue-formulate` like any other vue plugin:
|
||||
@ -28,6 +47,12 @@ import formulate from 'vue-formulate'
|
||||
|
||||
Vue.use(formulate)
|
||||
```
|
||||
|
||||
#### Examples
|
||||
|
||||
You'll find an easy to use example, with getting started instructions, in [the example directory](https://github.com/wearebraid/vue-formulate/tree/master/example)
|
||||
|
||||
|
||||
#### Vuex
|
||||
`vue-formulate` needs to be linked to your vuex store. Vuex can be
|
||||
configured as a single root store, or as namespaced modules and `vue-formualte`
|
||||
@ -65,8 +90,9 @@ Vue.use(Vuex)
|
||||
|
||||
const state = () => ({
|
||||
// your own state data can live next to vue-formulate's data
|
||||
// Note: formulateState is a curried function.
|
||||
your: 'data',
|
||||
...formulateState()
|
||||
...formulateState()()
|
||||
})
|
||||
|
||||
const getters = {
|
||||
|
||||
6
dist/index.js
vendored
6
dist/index.js
vendored
File diff suppressed because one or more lines are too long
6
example/.babelrc
Normal file
6
example/.babelrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }],
|
||||
"stage-2"
|
||||
]
|
||||
}
|
||||
4
example/.gitignore
vendored
Normal file
4
example/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
21
example/LICENSE
Normal file
21
example/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Braid LLC
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
13
example/README.md
Normal file
13
example/README.md
Normal file
@ -0,0 +1,13 @@
|
||||
# Vue Formulate Example
|
||||
|
||||
A simple example of a registration form using `vue-formulate`. The store is
|
||||
set up using a *Root store* configuration (as opposed to using a vuex module).
|
||||
|
||||
### Installation
|
||||
|
||||
To install and run the example:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
11
example/index.html
Normal file
11
example/index.html
Normal file
@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Vue Formulate Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8606
example/package-lock.json
generated
Normal file
8606
example/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
example/package.json
Normal file
25
example/package.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"version": "1.0.0",
|
||||
"author": "Justin Schroeder <justin@wearebraid.com>",
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.3.3",
|
||||
"vue-formulate": "^0.7.0",
|
||||
"vuex": "^2.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.26.0",
|
||||
"babel-loader": "^7.1.2",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"cross-env": "^3.0.0",
|
||||
"css-loader": "^0.25.0",
|
||||
"file-loader": "^0.9.0",
|
||||
"vue-loader": "^13.7.0",
|
||||
"vue-template-compiler": "^2.5.13",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-dev-server": "^2.4.5"
|
||||
}
|
||||
}
|
||||
168
example/src/App.vue
Normal file
168
example/src/App.vue
Normal file
@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<formulate
|
||||
name="registration"
|
||||
class="my-form"
|
||||
v-if="!values"
|
||||
@submit="useFormData"
|
||||
>
|
||||
<formulate-element
|
||||
name="email"
|
||||
type="email"
|
||||
label="Email address"
|
||||
placeholder="you@example.com"
|
||||
validation="required|email"
|
||||
/>
|
||||
<formulate-element
|
||||
name="password_confirmation"
|
||||
type="password"
|
||||
label="Password"
|
||||
placeholder="Choose a password"
|
||||
validation="required"
|
||||
/>
|
||||
<formulate-element
|
||||
name="password"
|
||||
type="password"
|
||||
label="Confirm Password"
|
||||
placeholder="Confirm your password"
|
||||
validation-label="Password"
|
||||
validation="required|confirmed"
|
||||
/>
|
||||
<formulate-element
|
||||
type="submit"
|
||||
name="Save"
|
||||
/>
|
||||
</formulate>
|
||||
<code
|
||||
v-else
|
||||
class="my-form my-form--code"
|
||||
v-text="values"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
values: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
useFormData (vals) {
|
||||
this.values = JSON.stringify(vals, null, 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
body {
|
||||
background: linear-gradient(to top left, #35495e, #41b883);
|
||||
background-repeat: no-repeat;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.my-form {
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
|
||||
max-width: 500px;
|
||||
background-color: white;
|
||||
border-radius: .25em;
|
||||
padding: 2em;
|
||||
position: absolute;
|
||||
min-width: 500px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.formulate-element {
|
||||
font-size: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.formulate-element:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.formulate-errors {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.formulate-errors li {
|
||||
margin: .25em 0;
|
||||
font-size: 14px;
|
||||
color: red;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"] {
|
||||
border: 1px solid gainsboro;
|
||||
box-sizing: border-box;
|
||||
font-size: 1em;
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background-color: transparent;
|
||||
padding: .5em;
|
||||
width: 100%;
|
||||
}
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="email"]:focus {
|
||||
outline: 0;
|
||||
border-color: #41b883;
|
||||
}
|
||||
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #41b883;
|
||||
border-radius: 2em;
|
||||
background-color: #41b883;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
padding: .75em;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 0;
|
||||
border-color: #35495e;
|
||||
}
|
||||
</style>
|
||||
12
example/src/main.js
Normal file
12
example/src/main.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from '../store'
|
||||
import formulate from 'vue-formulate'
|
||||
|
||||
Vue.use(formulate)
|
||||
|
||||
window.example = new Vue({
|
||||
el: '#app',
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
26
example/store/index.js
Normal file
26
example/store/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import {formulateState, formulateGetters, formulateMutations} from 'vue-formulate'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const state = {
|
||||
...formulateState()()
|
||||
}
|
||||
|
||||
const getters = {
|
||||
...formulateGetters()
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
...formulateMutations()
|
||||
}
|
||||
|
||||
const actions = {}
|
||||
|
||||
export default new Vuex.Store({
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions
|
||||
})
|
||||
70
example/webpack.config.js
Normal file
70
example/webpack.config.js
Normal file
@ -0,0 +1,70 @@
|
||||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
])
|
||||
}
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-formulate",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-formulate",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"description": "The easiest way to build forms in Vue with validation and vuex support.",
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user