├── .gitattributes
├── .gitignore
├── example
    ├── index.js
    ├── package.json
    ├── router.js
    ├── index.html
    ├── App.vue
    └── examples
    │   ├── Composition.vue
    │   └── Simple.vue
├── .editorconfig
├── src
    ├── index.js
    ├── useCurrentForm.js
    ├── utils.js
    ├── useForm.js
    ├── Field.js
    ├── useField.js
    └── Form.js
├── vite.config.js
├── circle.yml
├── LICENSE
├── package.json
├── index.html
└── README.md


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/
3 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | const app = createApp(App)
 6 | 
 7 | app.use(router)
 8 | 
 9 | app.mount('#app')
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import FinalForm from './Form.js'
 2 | import FinalField from './Field.js'
 3 | import useForm from './useForm.js'
 4 | import useField from './useField.js'
 5 | 
 6 | export {
 7 |   FinalForm,
 8 |   FinalField,
 9 |   useForm,
10 |   useField,
11 | }
12 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "dependencies": {
 7 |     "final-form": "^4.0.0",
 8 |     "vue": "^3.0.0",
 9 |     "vue-router": "^4.0.0",
10 |     "vue-final-form": "latest"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/example/router.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | import { createRouter, createWebHistory } from 'vue-router'
 3 | import App from './App.vue'
 4 | 
 5 | export default createRouter({
 6 |   history: createWebHistory(),
 7 |   routes: [{
 8 |     path: '/',
 9 |     component: {
10 |       name: 'Home',
11 |       render: () => h(App)
12 |     }
13 |   }]
14 | })
15 | 


--------------------------------------------------------------------------------
/src/useCurrentForm.js:
--------------------------------------------------------------------------------
 1 | import { inject } from 'vue'
 2 | 
 3 | const useCurrentForm = () => {
 4 |   const finalForm = inject('finalForm')
 5 | 
 6 |   if (!finalForm) {
 7 |     throw new Error('Form was\'t found. Please provide it using `<FinalForm>` component or `useForm` hook.')
 8 |   }
 9 | 
10 |   return finalForm
11 | }
12 | 
13 | export default useCurrentForm
14 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'node:path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   root: 'example',
 8 |   resolve: {
 9 |     alias: {
10 |       'vue-final-form': path.resolve('./src/index.js'),
11 |     },
12 |   },
13 |   plugins: [vue()],
14 | })
15 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Vue-Final-Form</title>
 8 | </head>
 9 | <body>
10 |   <div id="app"></div>
11 |   <script type="module" src="/index.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | jobs:
 3 |   build:
 4 |     working_directory: ~/repo
 5 |     docker:
 6 |       - image: circleci/node:latest
 7 |     branches:
 8 |       ignore:
 9 |         - gh-pages # list of branches to ignore
10 |         - /release\/.*/ # or ignore regexes
11 |     steps:
12 |       - checkout
13 |       - restore_cache:
14 |           key: dependency-cache-{{ checksum "yarn.lock" }}
15 |       - run:
16 |           name: install dependences
17 |           command: yarn
18 |       - save_cache:
19 |           key: dependency-cache-{{ checksum "yarn.lock" }}
20 |           paths:
21 |             - ./node_modules
22 |       - run:
23 |           name: test
24 |           command: yarn test
25 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export const getChildren = children =>
 2 |   Array.isArray(children) ? children : [children]
 3 | 
 4 | const composeValidators = (validators, ...args) =>
 5 |   // eslint-disable-next-line unicorn/no-array-reduce
 6 |   validators.reduce((error, validator) => error || validator(...args), undefined)
 7 | 
 8 | export const composeFormValidators = validators => (...args) =>
 9 |   composeValidators(validators, ...args)
10 | 
11 | export const composeFieldValidators = validators => () => (...args) =>
12 |   composeValidators(validators, ...args)
13 | 
14 | export const makeSubscriptionObject = subscriptionItems =>
15 |   // eslint-disable-next-line no-use-extend-native/no-use-extend-native
16 |   Object.fromEntries(subscriptionItems.map(key => [key, true]))
17 | 


--------------------------------------------------------------------------------
/src/useForm.js:
--------------------------------------------------------------------------------
 1 | import { provide, ref, onUnmounted } from 'vue'
 2 | import { createForm, formSubscriptionItems } from 'final-form'
 3 | import { composeFormValidators, makeSubscriptionObject } from './utils.js'
 4 | 
 5 | const defaultSubscription = makeSubscriptionObject(formSubscriptionItems)
 6 | 
 7 | const useForm = config => {
 8 |   const formApi = createForm({
 9 |     initialValues: config.initialValues,
10 |     validate: Array.isArray(config.validate) ? composeFormValidators(config.validate) : config.validate,
11 |     onSubmit: config.onSubmit,
12 |   })
13 | 
14 |   const finalForm = ref({
15 |     ...formApi,
16 |     handleSubmit: event => {
17 |       event && event.preventDefault()
18 |       formApi.submit()
19 |     },
20 |   })
21 | 
22 |   const formState = ref()
23 | 
24 |   const unsubscribe = finalForm.value.subscribe(state => {
25 |     formState.value = state
26 |   }, config.subscription || defaultSubscription)
27 | 
28 |   onUnmounted(unsubscribe)
29 | 
30 |   provide('finalForm', finalForm)
31 | 
32 |   return {
33 |     finalForm,
34 |     formState,
35 |     unsubscribe,
36 |   }
37 | }
38 | 
39 | export default useForm
40 | 


--------------------------------------------------------------------------------
/src/Field.js:
--------------------------------------------------------------------------------
 1 | import { getChildren } from './utils.js'
 2 | import useField from './useField.js'
 3 | 
 4 | const FinalField = {
 5 |   name: 'final-field',
 6 | 
 7 |   props: {
 8 |     name: {
 9 |       required: true,
10 |       type: String,
11 |     },
12 |     validate: [Function, Array],
13 |     subscription: Object,
14 |   },
15 | 
16 |   setup(props) {
17 |     const { finalForm, fieldState } = useField({
18 |       name: props.name,
19 |       subscription: props.subscription,
20 |       validate: props.validate,
21 |     })
22 | 
23 |     return {
24 |       finalForm,
25 |       fieldState,
26 |     }
27 |   },
28 | 
29 |   watch: {
30 |     fieldState(state) {
31 |       this.$emit('change', state)
32 |     },
33 |   },
34 | 
35 |   render() {
36 |     const {
37 |       blur,
38 |       change,
39 |       focus,
40 |       value,
41 |       name,
42 |       ...meta
43 |     } = this.fieldState
44 | 
45 |     const children = this.$slots.default({
46 |       events: this.fieldState.events,
47 |       change,
48 |       value,
49 |       name,
50 |       meta,
51 |     })
52 | 
53 |     return getChildren(children)[0]
54 |   },
55 | }
56 | 
57 | export default FinalField
58 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) EGOIST <0x142857@gmail.com> (https://egoist.moe)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/useField.js:
--------------------------------------------------------------------------------
 1 | import { fieldSubscriptionItems } from 'final-form'
 2 | import { ref, onUnmounted, computed } from 'vue'
 3 | import useCurrentForm from './useCurrentForm.js'
 4 | import { composeFieldValidators, makeSubscriptionObject } from './utils.js'
 5 | 
 6 | const defaultSubscription = makeSubscriptionObject(fieldSubscriptionItems)
 7 | 
 8 | const useField = config => {
 9 |   const finalForm = config.finalForm || useCurrentForm()
10 | 
11 |   const fieldState = ref({})
12 | 
13 |   const unregister = finalForm.value.registerField(config.name, state => {
14 |     fieldState.value = state
15 |   }, config.subscription || defaultSubscription, {
16 |     getValidator: Array.isArray(config.validate) ? composeFieldValidators(config.validate) : () => config.validate,
17 |   })
18 | 
19 |   onUnmounted(unregister)
20 | 
21 |   return {
22 |     fieldState: computed(() => ({
23 |       ...fieldState.value,
24 |       events: {
25 |         input: event => fieldState.value.change(event.target.value),
26 |         focus: () => fieldState.value.focus(),
27 |         blur: () => fieldState.value.blur(),
28 |       },
29 |     })),
30 |     unregister,
31 |   }
32 | }
33 | 
34 | export default useField
35 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <select
 4 |       class="component-list"
 5 |       v-model="current">
 6 |       <option value="">Select an example</option>
 7 |       <option
 8 |         class="component-item"
 9 |         v-for="item in list"
10 |         :value="item"
11 |         :key="item">
12 |         {{ item }}
13 |       </option>
14 |     </select>
15 |     <hr>
16 |     <component
17 |       v-if="$route.query.component"
18 |       :is="$route.query.component" />
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import Simple from './examples/Simple.vue'
24 | import Composition from './examples/Composition.vue'
25 | 
26 | export default {
27 |   data() {
28 |     return {
29 |       list: [
30 |         'Simple',
31 |         'Composition',
32 |       ],
33 |       current: this.$route.query.component || ''
34 |     }
35 |   },
36 | 
37 |   watch: {
38 |     current() {
39 |       this.$router.push({
40 |         query: {
41 |           component: this.current
42 |         }
43 |       })
44 |     }
45 |   },
46 | 
47 |   components: {
48 |     Simple,
49 |     Composition,
50 |   }
51 | }
52 | </script>
53 | 
54 | <style>
55 | .error {
56 |   color: red;
57 | }
58 | </style>
59 | 
60 | <style scoped>
61 | .component-item {
62 |   cursor: pointer;
63 | }
64 | </style>
65 | 


--------------------------------------------------------------------------------
/src/Form.js:
--------------------------------------------------------------------------------
 1 | import { h } from 'vue'
 2 | import { getChildren } from './utils.js'
 3 | import useForm from './useForm.js'
 4 | 
 5 | const FinalForm = {
 6 |   name: 'final-form',
 7 | 
 8 |   props: {
 9 |     initialValues: Object,
10 |     submit: {
11 |       type: Function,
12 |       default: () => {},
13 |     },
14 |     subscription: Object,
15 |     validate: [Function, Array],
16 |   },
17 | 
18 |   setup(props) {
19 |     const { finalForm, formState } = useForm({
20 |       initialValues: props.initialValues,
21 |       validate: props.validate,
22 |       subscription: props.subscription,
23 |       onSubmit: props.submit,
24 |     })
25 | 
26 |     return {
27 |       finalForm,
28 |       formState,
29 |     }
30 |   },
31 | 
32 |   methods: {
33 |     handleSubmit(event) {
34 |       event && event.preventDefault()
35 |       this.finalForm.submit()
36 |     },
37 |   },
38 | 
39 |   watch: {
40 |     formState(state) {
41 |       this.$emit('change', state)
42 |     },
43 |   },
44 | 
45 |   render() {
46 |     const children = this.$slots.default
47 |       ? this.$slots.default({
48 |         ...this.formState,
49 |         ...this.finalForm,
50 |       })
51 |       : this.$slots.default
52 | 
53 |     return h('div', null, getChildren(children))
54 |   },
55 | }
56 | 
57 | export default FinalForm
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-final-form",
 3 |   "version": "4.0.1",
 4 |   "description": "Subscription-based form state management for Vue.js",
 5 |   "repository": {
 6 |     "url": "egoist/vue-final-form",
 7 |     "type": "git"
 8 |   },
 9 |   "main": "dist/index.js",
10 |   "module": "dist/index.esm.js",
11 |   "unpkg": "dist/index.umd.js",
12 |   "jsdelivr": "dist/index.umd.js",
13 |   "files": [
14 |     "dist"
15 |   ],
16 |   "scripts": {
17 |     "test": "npm run lint && echo 'no tests!'",
18 |     "lint": "xo",
19 |     "prepublishOnly": "npm run build",
20 |     "build": "bili --format esm,cjs,umd,umd-min --module-name VueFinalForm --global.final-form final-form --global.vue vue",
21 |     "example": "vite",
22 |     "build:example": "vite build",
23 |     "gh": "gh-pages -d example/dist",
24 |     "deploy": "npm run build:example && npm run gh"
25 |   },
26 |   "author": "egoist <0x142857@gmail.com>",
27 |   "license": "MIT",
28 |   "devDependencies": {
29 |     "@vitejs/plugin-vue": "^1.10.0",
30 |     "bili": "^5.0.5",
31 |     "eslint-config-rem": "^4.0.0",
32 |     "final-form": "^4.0.0",
33 |     "gh-pages": "^1.0.0",
34 |     "vite": "^2.0.0",
35 |     "vue": "^3.0.0",
36 |     "vue-router": "^4.0.0",
37 |     "xo": "^0.47.0"
38 |   },
39 |   "xo": {
40 |     "extends": "rem",
41 |     "envs": [
42 |       "browser"
43 |     ],
44 |     "ignores": [
45 |       "example/**"
46 |     ],
47 |     "rules": {
48 |       "unicorn/filename-case": 0,
49 |       "unicorn/prefer-export-from": 0,
50 |       "import/prefer-default-export": 0
51 |     }
52 |   },
53 |   "peerDependencies": {
54 |     "final-form": "^4.0.0"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |   <title>Vue-Final-Form</title>
 8 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@egojump/docup/dist/docup.css">
 9 | </head>
10 | <body>
11 |     <a href="https://github.com/egoist/vue-final-form" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
12 |   <div id="app"></div>
13 |   <script src="https://cdn.jsdelivr.net/npm/@egojump/docup/dist/docup.js"></script>
14 |   <script>
15 |     var doc = new Docup()
16 |     doc.start('#app')
17 |   </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/example/examples/Composition.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <form @submit="finalForm.handleSubmit">
  4 |       <div>
  5 |         <input
  6 |           :name="emailField.name"
  7 |           :value="emailField.value"
  8 |           v-on="emailField.events"
  9 |           type="email"
 10 |         />
 11 |         <span
 12 |           class="error"
 13 |           v-if="emailField.touched && emailField.error">
 14 |           {{ emailField.error }}
 15 |         </span>
 16 |       </div>
 17 |       <div>
 18 |         <input
 19 |           :name="passwordField.name"
 20 |           :value="passwordField.value"
 21 |           v-on="passwordField.events"
 22 |           type="password"
 23 |         />
 24 |         <span
 25 |           class="error"
 26 |           v-if="passwordField.touched && passwordField.error">
 27 |           {{ passwordField.error }}
 28 |         </span>
 29 |       </div>
 30 |       <div>
 31 |         <input
 32 |           :name="confirmPasswordField.name"
 33 |           :value="confirmPasswordField.value"
 34 |           v-on="confirmPasswordField.events"
 35 |           type="password"
 36 |         />
 37 |         <span
 38 |           class="error"
 39 |           v-if="confirmPasswordField.touched && confirmPasswordField.error">
 40 |           {{ confirmPasswordField.error }}
 41 |         </span>
 42 |       </div>
 43 | 
 44 |       <button type="submit" :disabled="formState.submitting || null">
 45 |         {{ formState.submitting ? 'Submitting' : 'Submit' }}
 46 |       </button>
 47 |     </form>
 48 | 
 49 |     <pre v-if="formState"><code>form state:<br><br>{{ JSON.stringify(formState, null, 2) }}</code></pre>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script setup>
 54 | import { useForm, useField } from 'vue-final-form'
 55 | 
 56 | function sleep(timeout) {
 57 |   return new Promise(resolve => {
 58 |     setTimeout(() => {
 59 |       resolve()
 60 |     }, timeout)
 61 |   })
 62 | }
 63 | 
 64 | const required = v =>
 65 |   v ? null : 'This field is required!'
 66 | 
 67 | const matchedPassword = (value, values) =>
 68 |   value === values.password ? null : 'Mismatched password!'
 69 | 
 70 | const range = (min, max) =>
 71 |   value =>
 72 |     value && value.length >= min && value.length <= max ? null : `Password should be between length ${min} and ${max}`
 73 | 
 74 | const noSpecialChars = (v) =>
 75 |   /[!@#$%^&*()]/.test(v) ? 'Please do not use special chars' : null
 76 | 
 77 | const initialValues = {
 78 |   email: 'egoist@boring.com',
 79 | }
 80 | 
 81 | const handleSubmit = async state => {
 82 |   await sleep(2000)
 83 |   console.log(state)
 84 | }
 85 | 
 86 | const { finalForm, formState } = useForm({
 87 |   initialValues,
 88 |   onSubmit: handleSubmit,
 89 | })
 90 | 
 91 | const { fieldState: emailField } = useField({
 92 |   finalForm,
 93 |   name: 'email',
 94 |   validate: required,
 95 | })
 96 | 
 97 | const { fieldState: passwordField } = useField({
 98 |   finalForm,
 99 |   name: 'password',
100 |   validate: [range(6, 20), noSpecialChars],
101 | })
102 | 
103 | const { fieldState: confirmPasswordField } = useField({
104 |   finalForm,
105 |   name: 'confirmPassword',
106 |   validate: matchedPassword,
107 | })
108 | </script>
109 | 


--------------------------------------------------------------------------------
/example/examples/Simple.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <FinalForm
  4 |       :submit="handleSubmit"
  5 |       @change="updateState"
  6 |       :initialValues="initialValues">
  7 |       <template v-slot="props">
  8 |         <form @submit="props.handleSubmit">
  9 |           <FinalField name="email" :validate="required">
 10 |             <template v-slot="props">
 11 |               <div>
 12 |                 <input
 13 |                   v-on="props.events"
 14 |                   :name="props.name"
 15 |                   :value="props.value"
 16 |                   type="email"
 17 |                 />
 18 |                 <span
 19 |                   class="error"
 20 |                   v-if="props.meta.touched && props.meta.error">
 21 |                   {{ props.meta.error }}
 22 |                 </span>
 23 |               </div>
 24 |             </template>
 25 |           </FinalField>
 26 |           <FinalField name="password" :validate="[range(6, 20), noSpecialChars]">
 27 |             <template v-slot="props">
 28 |               <div>
 29 |                 <input
 30 |                   v-on="props.events"
 31 |                   :name="props.name"
 32 |                   :value="props.value"
 33 |                   type="password"
 34 |                 />
 35 |                 <span
 36 |                   class="error"
 37 |                   v-if="props.meta.touched && props.meta.error">
 38 |                   {{ props.meta.error }}
 39 |                 </span>
 40 |               </div>
 41 |             </template>
 42 |           </FinalField>
 43 |           <FinalField name="confirmPassword" :validate="matchedPassword">
 44 |             <template v-slot="props">
 45 |               <div>
 46 |                 <input
 47 |                   v-on="props.events"
 48 |                   :name="props.name"
 49 |                   :value="props.value"
 50 |                   type="password"
 51 |                 />
 52 |                 <span
 53 |                   class="error"
 54 |                   v-if="props.meta.touched && props.meta.error">
 55 |                   {{ props.meta.error }}
 56 |                 </span>
 57 |               </div>
 58 |             </template>
 59 |           </FinalField>
 60 |           <button type="submit" :disabled="props.submitting || null">
 61 |             {{ props.submitting ? 'Submitting' : 'Submit' }}
 62 |           </button>
 63 |         </form>
 64 |       </template>
 65 |     </FinalForm>
 66 | 
 67 |     <pre v-if="formState"><code>form state:<br><br>{{ JSON.stringify(formState, null, 2) }}</code></pre>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | import { FinalForm, FinalField } from 'vue-final-form'
 73 | 
 74 | function sleep(timeout) {
 75 |   return new Promise(resolve => {
 76 |     setTimeout(() => {
 77 |       resolve()
 78 |     }, timeout);
 79 |   })
 80 | }
 81 | 
 82 | export default {
 83 |   components: {
 84 |     FinalForm,
 85 |     FinalField
 86 |   },
 87 | 
 88 |   data() {
 89 |     return {
 90 |       formState: null,
 91 |       initialValues: {
 92 |         email: 'egoist@boring.com'
 93 |       }
 94 |     }
 95 |   },
 96 | 
 97 |   methods: {
 98 |     async handleSubmit(state) {
 99 |       await sleep(2000)
100 |       console.log(state)
101 |     },
102 | 
103 |     updateState(state) {
104 |       this.formState = state
105 |     },
106 | 
107 |     required(v) {
108 |       return v ? null : 'This field is required!'
109 |     },
110 | 
111 |     matchedPassword(value, values) {
112 |       return value === values.password ? null : 'Mismatched password!'
113 |     },
114 | 
115 |     range(min, max) {
116 |       return value => {
117 |         return value && value.length >= min && value.length <= max ? null : `Password should be between length ${min} and ${max}`
118 |       }
119 |     },
120 | 
121 |     noSpecialChars(v) {
122 |       return /[!@#$%^&*()]/.test(v) ? 'Please do not use specfial chars' : null
123 |     }
124 |   }
125 | }
126 | </script>
127 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-final-form
  2 | 
  3 | <!-- hide-on-docup-start -->
  4 | 
  5 | [![NPM version](https://img.shields.io/npm/v/vue-final-form.svg?style=flat)](https://npmjs.com/package/vue-final-form) [![NPM downloads](https://img.shields.io/npm/dm/vue-final-form.svg?style=flat)](https://npmjs.com/package/vue-final-form) [![CircleCI](https://circleci.com/gh/egoist/vue-final-form/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-final-form/tree/master) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate) [![chat](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?style=flat)](https://chat.egoist.moe)
  6 | 
  7 | <!-- hide-on-docup-stop -->
  8 | 
  9 | ## Introduction
 10 | 
 11 | 🏁 High performance subscription-based form state management for Vue.js.
 12 | 
 13 | ## Install
 14 | 
 15 | ```bash
 16 | yarn add final-form vue-final-form
 17 | ```
 18 | 
 19 | ## Usage
 20 | 
 21 | [![Edit example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/egoist/vue-final-form/tree/master/example)
 22 | 
 23 | This library exports two components:
 24 | 
 25 | ```js
 26 | import { FinalForm, FinalField } from "vue-final-form";
 27 | ```
 28 | 
 29 | The first component you'll need is the `FinalForm` component:
 30 | 
 31 | ```vue
 32 | <FinalForm :submit="submit">
 33 |   <!-- ignore the children for now -->
 34 | </FinalForm>
 35 | ```
 36 | 
 37 | The only required prop is `submit`, it defines how to submit the form data, maybe simply log it:
 38 | 
 39 | ```js
 40 | function submit(values) {
 41 |   console.log(values);
 42 | }
 43 | ```
 44 | 
 45 | The rendered output is:
 46 | 
 47 | ```html
 48 | <div></div>
 49 | ```
 50 | 
 51 | As you can see it does nothing for now, you need to feed it a `<form>`:
 52 | 
 53 | ```vue
 54 | <FinalForm :submit="submit">
 55 |   <form v-slot="props" @submit="props.handleSubmit">
 56 |     <!-- ignore the children for now -->
 57 |   </form>
 58 | </FinalForm>
 59 | ```
 60 | 
 61 | Now it renders:
 62 | 
 63 | ```html
 64 | <div><form></form></div>
 65 | ```
 66 | 
 67 | Here it uses the [`scoped slots`](https://vuejs.org/v2/guide/components.html#Scoped-Slots) feature from Vue.js (>=2.1.0), `props.handleSubmit` is the actual method it will run to submit data.
 68 | 
 69 | Next let's define a form field with `<FinalField>` component:
 70 | 
 71 | ```vue
 72 | <FinalForm :submit="submit">
 73 |   <form v-slot="props" @submit="props.handleSubmit">
 74 |     <FinalField
 75 |       name="username"
 76 |       :validate="v => v ? null : 'this is required'">
 77 |       <div v-slot="props">
 78 |         <input v-on="props.events" :name="props.name">
 79 |         <span v-if="props.meta.error && props.meta.touched">
 80 |           {{ props.meta.error }}
 81 |         </span>
 82 |       </div>
 83 |     </FinalField>
 84 |   </form>
 85 | </FinalForm>
 86 | ```
 87 | 
 88 | Things got a bit more complex, but it's easy if you try to understand:
 89 | 
 90 | The only prop that is required by `FinalField` is `name`, it tells the field where to store the field data in the form state, here we stores it as `state.username`.
 91 | 
 92 | The `validate` prop is used to validate the field data, it could be a function that returns an error message or `null`, `undefined` when it's considered valid.
 93 | 
 94 | The data that `FinalField` passed to its children contains `props.events` which is required to be bound with the `input` element in order to properly track events. And `props.name` is the `name` you gave `FinalField`, `props.meta` is some infomation about this field.
 95 | 
 96 | ## API
 97 | 
 98 | ### `<FinalForm>`
 99 | 
100 | #### Props
101 | 
102 | ##### submit
103 | 
104 | Type: `function`<br>
105 | Default: `() => {}`
106 | 
107 | Here we allow `submit` to be optional since you may not need it when you just use `vue-final-form` as a form validation tool.
108 | 
109 | See [onSubmit](https://github.com/final-form/final-form#onsubmit-values-object-form-formapi-callback-errors-object--void--object--promiseobject--void).
110 | 
111 | ##### validate
112 | 
113 | Type: `function` `Array<function>`
114 | 
115 | A whole-record validation function that takes all the values of the form and returns any validation errors.
116 | 
117 | See [validate](https://github.com/final-form/final-form#validate-values-object--object--promiseobject).
118 | 
119 | ##### initialValues
120 | 
121 | Type: `object`
122 | 
123 | See [initialValues](https://github.com/final-form/final-form#initialvalues-object).
124 | 
125 | ##### subscription
126 | 
127 | Type: `FormSubscription`<br>
128 | Default: All
129 | 
130 | See [FormSubscription](https://github.com/final-form/final-form#formsubscription--string-boolean-).
131 | 
132 | #### Events
133 | 
134 | ##### change
135 | 
136 | Params:
137 | 
138 | - `formState`: https://github.com/final-form/final-form#formstate
139 | 
140 | #### Scoped slot props
141 | 
142 | It basically exposes everything in [FormState](https://github.com/final-form/final-form#formstate) plus follwoings:
143 | 
144 | ##### handleSubmit
145 | 
146 | Type: `function`
147 | 
148 | The function that you will invoke to submit the form data, you may use it as the `:submit` event handler on your `<form>`.
149 | 
150 | ##### reset
151 | 
152 | Type: `function`
153 | 
154 | See [FormApi.reset](https://github.com/final-form/final-form#reset---void).
155 | 
156 | ##### mutators
157 | 
158 | Type: `?{ [string]: Function }`
159 | 
160 | See [FormApi.mutators](https://github.com/final-form/final-form#mutators--string-function-).
161 | 
162 | ##### batch
163 | 
164 | Type: `function`
165 | 
166 | See [FormApi.batch](https://github.com/final-form/final-form#batch-fn---void--void).
167 | 
168 | ##### blur
169 | 
170 | Type: `function`
171 | 
172 | See [FormApi.blur](https://github.com/final-form/final-form#blur-name-string--void).
173 | 
174 | ##### change
175 | 
176 | Type: `function`
177 | 
178 | See [FormApi.change](https://github.com/final-form/final-form#change-name-string-value-any--void).
179 | 
180 | ##### focus
181 | 
182 | Type: `function`
183 | 
184 | See [FormApi.focus](https://github.com/final-form/final-form#focus-name-string--void)
185 | 
186 | ##### initialize
187 | 
188 | Type: `function`
189 | 
190 | See [FormApi.initialize](https://github.com/final-form/final-form#initialize-values-object--void).
191 | 
192 | ### `<FinalField>`
193 | 
194 | #### Props
195 | 
196 | ##### name
197 | 
198 | Type: `string`<br>
199 | Required: `true`
200 | 
201 | The name of this field.
202 | 
203 | See [name](https://github.com/final-form/final-form#name-string-1).
204 | 
205 | ##### validate
206 | 
207 | Type: `function` `Array<function>`
208 | 
209 | A field-level validation function to validate a single field value. Returns an error if the value is not valid, or undefined if the value is valid.
210 | 
211 | See [validate](https://github.com/final-form/final-form#validate-value-any-allvalues-object--any).
212 | 
213 | ##### subscription
214 | 
215 | Type: `FieldSubscription`<br>
216 | Default: All
217 | 
218 | See [FieldSubcription](https://github.com/final-form/final-form#fieldsubscription--string-boolean-).
219 | 
220 | #### Events
221 | 
222 | ##### change
223 | 
224 | Params:
225 | 
226 | - `fieldState`: https://github.com/final-form/final-form#fieldstate
227 | 
228 | #### Scoped slot props
229 | 
230 | It basically exposes [FieldState](https://github.com/final-form/final-form#fieldstate).
231 | 
232 | ##### name
233 | 
234 | Type: `string`
235 | 
236 | The name of this field.
237 | 
238 | See [`FieldState.name`](https://github.com/final-form/final-form#name-string)
239 | 
240 | ##### change
241 | 
242 | Type: `function`
243 | 
244 | See [`FieldState.change`](https://github.com/final-form/final-form#change-value-any--void)
245 | 
246 | ##### value
247 | 
248 | Type: `any`.
249 | 
250 | The current value of this field. You should probably bind it to `:value` of `input` or `textarea` if you have set initial value for the field.
251 | 
252 | ##### events
253 | 
254 | Type: `{ input: Function, focus: Function, blur: Function }`
255 | 
256 | Bind these event handlers to your `input` `textarea` element.
257 | 
258 | See [FieldState.change](https://github.com/final-form/final-form#change-value-any--void), [FieldState.focus](https://github.com/final-form/final-form#focus---void), [FieldState.blur](https://github.com/final-form/final-form#blur---void).
259 | 
260 | ##### meta
261 | 
262 | Type: `object`
263 | 
264 | Everything in [FieldState](https://github.com/final-form/final-form#fieldstate) except for `blur` `change` `focus` `name`
265 | 
266 | ## Contributing
267 | 
268 | 1. Fork it!
269 | 2. Create your feature branch: `git checkout -b my-new-feature`
270 | 3. Commit your changes: `git commit -am 'Add some feature'`
271 | 4. Push to the branch: `git push origin my-new-feature`
272 | 5. Submit a pull request :D
273 | 
274 | ## Author
275 | 
276 | **vue-final-form** © [EGOIST](https://github.com/egoist), Released under the [MIT](https://github.com/egoist/vue-final-form/blob/master/LICENSE) License.<br>
277 | Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-final-form/contributors)).
278 | 
279 | > [egoist.moe](https://egoist.moe) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)
280 | 


--------------------------------------------------------------------------------