Merge pull request #58 from dbssman/feature/57-submit-fails-when-using-reactive-initial-values

🔧 Fix submit issue & add prettier

Author: dbssman

.github/workflows/node.js.yml

@@ -5,9 +5,9 @@ name: CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
-    branches: [ "master" ]
+    branches: ['master']
 
 jobs:
   build:
@@ -33,7 +33,7 @@ jobs:
 
       - name: Package build test
         run: npm run build --if-present
-    
+
   unit-test:
     name: Unit testing
     runs-on: ubuntu-latest
@@ -46,8 +46,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: '18'
-          
+
       - run: npm ci
-      
+
       - name: Unit tests
         run: npm run test

.github/workflows/package-size-report.yml

@@ -2,7 +2,7 @@ name: Package Size Report
 
 on:
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   pkg-size-report:
@@ -21,4 +21,4 @@ jobs:
       - name: Package size report
         uses: pkg-size/action@v1
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "semi": false
+}

.vscode/extensions.json

@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin"
-  ]
-}
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

CONTRIBUTING.md

@@ -1 +1 @@
-**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://kcd.im/pull-request)
+**Working on your first Pull Request?** You can learn how from this _free_ series [How to Contribute to an Open Source Project on GitHub](https://kcd.im/pull-request)

License.md

@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

README.md

@@ -1,4 +1,3 @@
-
 <div align="center">
 	<object data="https://vue-form-handler.com/favicon.png"></object>
 	<h1>vue-form-handler</h1>
@@ -12,99 +11,127 @@ The easy way of handling your vue forms
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
 <a href="https://www.buymeacoffee.com/dbssman" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
-</div>
 
+</div>
 
 ## 📦 Installation
+
 ---
-``` yarn add vue-form-handler ```
 
-``` npm i --save vue-form-handler ```
+`yarn add vue-form-handler`
+
+`npm i --save vue-form-handler`
 
 ## 🚀 Features
+
 ---
+
 - 💪 **Type strong**: Written in TypeScript
 - 🔩 **Flexible**: you can wrap the form handler over native inputs or any other like the ones from material libraries or custom inputs.
 - 🪶 **Super light**: Small package size
 - 💻 **DX**: Great development experience
 
 ## 🦄 Usage
+
 ---
+
 ### Basic usage
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input v-bind="register('firstName')" />
-		<input v-bind="register('lastName')" />
-		<input v-bind="register('age')" type="number"/>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input v-bind="register('firstName')" />
+    <input v-bind="register('lastName')" />
+    <input v-bind="register('age')" type="number" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
 ### Validations
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<input v-bind="register('firstName',{
-			required:'This field is required'
-		})" />
-		<p>{{formState.errors.firstName}}</p>
-		<input v-bind="register('lastName')" />
-		<input v-bind="register('age', {
-			min:{
-				value: 18,
-				message: 'Your age is below the accepted range'
-			}
-		})" type="number" />
-		<p>{{formState.errors.age}}</p>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <input
+      v-bind="
+        register('firstName', {
+          required: 'This field is required',
+        })
+      "
+    />
+    <p>{{ formState.errors.firstName }}</p>
+    <input v-bind="register('lastName')" />
+    <input
+      v-bind="
+        register('age', {
+          min: {
+            value: 18,
+            message: 'Your age is below the accepted range',
+          },
+        })
+      "
+      type="number"
+    />
+    <p>{{ formState.errors.age }}</p>
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { formState, register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { formState, register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
 ### Integration with Material frameworks
 
 ```vue
 <template>
-	<form @submit.prevent="handleSubmit(successFn)">
-		<q-input v-bind="register('name')" />
-		<q-checkbox v-bind="register('married')"/>
-		<q-select v-bind="register('pet')" :options="['dog','cat','mouse']"/>
-		<input type="submit"/>
-	</form>
+  <form @submit.prevent="handleSubmit(successFn)">
+    <q-input v-bind="register('name')" />
+    <q-checkbox v-bind="register('married')" />
+    <q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
+    <input type="submit" />
+  </form>
 </template>
-<script setup lang="ts" >
-import { useFormHandler } from 'vue-form-handler';
-const { formState, register, handleSubmit } = useFormHandler();
-const successFn = (form: Record<string,any>) => {console.log({form})}
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+const { formState, register, handleSubmit } = useFormHandler()
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
 </script>
 ```
 
 ### For a more advanced usage visit the [Docs](https://vue-form-handler.com)
 
 ## 📈 Project activity
+
 ---
-![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg "Repobeats analytics image")
+
+![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg 'Repobeats analytics image')
 
 ## 💜 Thanks
+
 ---
+
 This project is heavily inspired by other awesome projects like:
+
 - [jaredpalmer/formik](https://github.com/jaredpalmer/formik)
 - [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
 
 ## 📄 License
+
 ---
-[MIT License](https://github.com/dbssman/vue-form-handler/blob/master/License.md) © 2022-PRESENT [Dennis Bosmans](https://github.com/dbssman)
+
+[MIT License](https://github.com/dbssman/vue-form-handler/blob/master/License.md) © 2022-PRESENT [Dennis Bosmans](https://github.com/dbssman)

docs/.vitepress/config.cts

@@ -1,4 +1,4 @@
-import { defineConfig } from "vitepress"
+import { defineConfig } from 'vitepress'
 
 export default defineConfig({
   title: 'VueFormHandler',
@@ -9,17 +9,31 @@ export default defineConfig({
     ['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
     ['meta', { name: 'author', content: 'Dennis R. Bosmans' }],
     ['meta', { property: 'og:title', content: 'VueFormHandler' }],
-    ['meta', { property: 'og:image', content: 'https://vue-form-handler.com/favicon.png' }],
-    ['meta', { property: 'og:description', content: 'The only handler you\'ll need to easily work with forms in vue' }],
+    [
+      'meta',
+      {
+        property: 'og:image',
+        content: 'https://vue-form-handler.com/favicon.png',
+      },
+    ],
+    [
+      'meta',
+      {
+        property: 'og:description',
+        content:
+          "The only handler you'll need to easily work with forms in vue",
+      },
+    ],
   ],
   themeConfig: {
     logo: '/favicon.svg',
     editLink: {
-      pattern: 'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
+      pattern:
+        'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
       text: 'Edit this page on GitHub',
     },
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' }
+      { icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' },
     ],
     footer: {
       message: 'Released under the MIT License.',
@@ -31,51 +45,68 @@ export default defineConfig({
     ],
     sidebar: [
       {
-        text: 'Get started', items: [
+        text: 'Get started',
+        items: [
           { text: 'Introduction', link: '/get-started/introduction' },
           { text: 'Quick Start', link: '/get-started/quick-start' },
-        ]
+        ],
       },
       {
-        text: 'Guides', collapsible: true, items: [
+        text: 'Guides',
+        collapsible: true,
+        items: [
           { text: 'Custom components', link: '/guides/custom-components' },
           { text: 'Material libraries', link: '/guides/material-libraries' },
           { text: 'Native support', link: '/guides/native-support' },
           { text: 'Typescript', link: '/guides/typescript' },
           { text: 'Validation', link: '/guides/validation' },
-        ]
+        ],
       },
       {
-        text: 'Examples', collapsible: true, items: [
+        text: 'Examples',
+        collapsible: true,
+        items: [
           { text: 'Async submission', link: '/examples/async-submission' },
           { text: 'Async validations', link: '/examples/async-validations' },
           { text: 'Basic', link: '/examples/basic' },
           { text: 'Dependent fields', link: '/examples/dependent-fields' },
-        ]
+        ],
       },
       {
-        text: 'API Reference', collapsible: true, items: [
+        text: 'API Reference',
+        collapsible: true,
+        items: [
           {
-            text: 'useFormHandler', link: '/api/use-form-handler/',
+            text: 'useFormHandler',
+            link: '/api/use-form-handler/',
             items: [
               { text: 'clearError', link: '/api/use-form-handler/clear-error' },
               { text: 'clearField', link: '/api/use-form-handler/clear-field' },
               { text: 'formState', link: '/api/use-form-handler/form-state' },
-              { text: 'handleSubmit', link: '/api/use-form-handler/handle-submit' },
-              { text: 'modifiedValues', link: '/api/use-form-handler/modified-values' },
+              {
+                text: 'handleSubmit',
+                link: '/api/use-form-handler/handle-submit',
+              },
+              {
+                text: 'modifiedValues',
+                link: '/api/use-form-handler/modified-values',
+              },
               { text: 'register', link: '/api/use-form-handler/register' },
               { text: 'resetField', link: '/api/use-form-handler/reset-field' },
               { text: 'resetForm', link: '/api/use-form-handler/reset-form' },
               { text: 'setError', link: '/api/use-form-handler/set-error' },
               { text: 'setValue', link: '/api/use-form-handler/set-value' },
-              { text: 'triggerValidation', link: '/api/use-form-handler/trigger-validation' },
+              {
+                text: 'triggerValidation',
+                link: '/api/use-form-handler/trigger-validation',
+              },
               { text: 'unregister', link: '/api/use-form-handler/unregister' },
               { text: 'values', link: '/api/use-form-handler/values' },
-            ]
+            ],
           },
-          { text: `FormHandler`, link: '/api/form-handler' }
-        ]
-      }
+          { text: `FormHandler`, link: '/api/form-handler' },
+        ],
+      },
     ],
-  }
-})
+  },
+})