RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-25 06:46:02 +03:00
Code Issues Projects Releases Wiki Activity

Adds an example to the project

Browse Source 
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 2018-03-14 09:49:40 -05:00 committed by GitHub
parent d85da177eb
commit c219633ebf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 8994 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -18,6 +18,25 @@ First download the `vue-formulate` package from npm:
npm install vue-formulate 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 #### Installation
Install `vue-formulate` like any other vue plugin: Install `vue-formulate` like any other vue plugin:
@ -28,6 +47,12 @@ import formulate from 'vue-formulate'
Vue.use(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 #### Vuex
`vue-formulate` needs to be linked to your vuex store. Vuex can be `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` configured as a single root store, or as namespaced modules and `vue-formualte`
@ -65,8 +90,9 @@ Vue.use(Vuex)
const state = () => ({ const state = () => ({
// your own state data can live next to vue-formulate's data // your own state data can live next to vue-formulate's data
// Note: formulateState is a curried function.
your: 'data', your: 'data',
...formulateState() ...formulateState()()
}) })
const getters = { const getters = {

6
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

6
example/.babelrc Normal file
View File

@ -0,0 +1,6 @@
{
"presets": [
["env", { "modules": false }],
"stage-2"
]
}

4
example/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
.DS_Store
node_modules/
dist/
npm-debug.log

21
example/LICENSE Normal file
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff

25
example/package.json Normal file
View 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
View 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
View 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
View 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
View 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
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-formulate", "name": "vue-formulate",
"version": "0.6.0", "version": "0.7.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-formulate", "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.", "description": "The easiest way to build forms in Vue with validation and vuex support.",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {