Skip to content
This repository was archived by the owner on Apr 9, 2025. It is now read-only.

Commit bd253b4

Browse files
author
Daniel Requejo
committed
🔧 Fix submit issue & add prettier
1 parent ab0e5dc commit bd253b4

File tree

103 files changed

+2137
-1755
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+2137
-1755
lines changed

‎.github/workflows/node.js.yml

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ name: CI
55

66
on:
77
push:
8-
branches: [ "master" ]
8+
branches: ['master']
99
pull_request:
10-
branches: [ "master" ]
10+
branches: ['master']
1111

1212
jobs:
1313
build:
@@ -33,7 +33,7 @@ jobs:
3333

3434
- name: Package build test
3535
run: npm run build --if-present
36-
36+
3737
unit-test:
3838
name: Unit testing
3939
runs-on: ubuntu-latest
@@ -46,8 +46,8 @@ jobs:
4646
uses: actions/setup-node@v3
4747
with:
4848
node-version: '18'
49-
49+
5050
- run: npm ci
51-
51+
5252
- name: Unit tests
5353
run: npm run test

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Package Size Report
22

33
on:
44
pull_request:
5-
branches: [ master ]
5+
branches: [master]
66

77
jobs:
88
pkg-size-report:
@@ -21,4 +21,4 @@ jobs:
2121
- name: Package size report
2222
uses: pkg-size/action@v1
2323
env:
24-
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
24+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.prettierignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Ignore artifacts:
2+
build
3+
coverage

‎.prettierrc.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5",
4+
"semi": false
5+
}

‎.vscode/extensions.json

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
11
{
2-
"recommendations": [
3-
"Vue.volar",
4-
"Vue.vscode-typescript-vue-plugin"
5-
]
6-
}
2+
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3+
}

‎CONTRIBUTING.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +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)
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)

‎License.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
1818
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
1919
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
2020
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
21+
SOFTWARE.

‎README.md

+72-45
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<div align="center">
32
<object data="https://vue-form-handler.com/favicon.png"></object>
43
<h1>vue-form-handler</h1>
@@ -12,99 +11,127 @@ The easy way of handling your vue forms
1211
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
1312

1413
<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>
15-
</div>
1614

15+
</div>
1716

1817
## 📦 Installation
18+
1919
---
20-
``` yarn add vue-form-handler ```
2120

22-
``` npm i --save vue-form-handler ```
21+
`yarn add vue-form-handler`
22+
23+
`npm i --save vue-form-handler`
2324

2425
## 🚀 Features
26+
2527
---
28+
2629
- 💪 **Type strong**: Written in TypeScript
2730
- 🔩 **Flexible**: you can wrap the form handler over native inputs or any other like the ones from material libraries or custom inputs.
2831
- 🪶 **Super light**: Small package size
2932
- 💻 **DX**: Great development experience
3033

3134
## 🦄 Usage
35+
3236
---
37+
3338
### Basic usage
3439

3540
```vue
3641
<template>
37-
<form @submit.prevent="handleSubmit(successFn)">
38-
<input v-bind="register('firstName')" />
39-
<input v-bind="register('lastName')" />
40-
<input v-bind="register('age')" type="number"/>
41-
<input type="submit"/>
42-
</form>
42+
<form @submit.prevent="handleSubmit(successFn)">
43+
<input v-bind="register('firstName')" />
44+
<input v-bind="register('lastName')" />
45+
<input v-bind="register('age')" type="number" />
46+
<input type="submit" />
47+
</form>
4348
</template>
44-
<script setup lang="ts" >
45-
import { useFormHandler } from 'vue-form-handler';
46-
const { register, handleSubmit } = useFormHandler();
47-
const successFn = (form: Record<string,any>) => {console.log({form})}
49+
<script setup lang="ts">
50+
import { useFormHandler } from 'vue-form-handler'
51+
const { register, handleSubmit } = useFormHandler()
52+
const successFn = (form: Record<string, any>) => {
53+
console.log({ form })
54+
}
4855
</script>
4956
```
5057

5158
### Validations
5259

5360
```vue
5461
<template>
55-
<form @submit.prevent="handleSubmit(successFn)">
56-
<input v-bind="register('firstName',{
57-
required:'This field is required'
58-
})" />
59-
<p>{{formState.errors.firstName}}</p>
60-
<input v-bind="register('lastName')" />
61-
<input v-bind="register('age', {
62-
min:{
63-
value: 18,
64-
message: 'Your age is below the accepted range'
65-
}
66-
})" type="number" />
67-
<p>{{formState.errors.age}}</p>
68-
<input type="submit"/>
69-
</form>
62+
<form @submit.prevent="handleSubmit(successFn)">
63+
<input
64+
v-bind="
65+
register('firstName', {
66+
required: 'This field is required',
67+
})
68+
"
69+
/>
70+
<p>{{ formState.errors.firstName }}</p>
71+
<input v-bind="register('lastName')" />
72+
<input
73+
v-bind="
74+
register('age', {
75+
min: {
76+
value: 18,
77+
message: 'Your age is below the accepted range',
78+
},
79+
})
80+
"
81+
type="number"
82+
/>
83+
<p>{{ formState.errors.age }}</p>
84+
<input type="submit" />
85+
</form>
7086
</template>
71-
<script setup lang="ts" >
72-
import { useFormHandler } from 'vue-form-handler';
73-
const { formState, register, handleSubmit } = useFormHandler();
74-
const successFn = (form: Record<string,any>) => {console.log({form})}
87+
<script setup lang="ts">
88+
import { useFormHandler } from 'vue-form-handler'
89+
const { formState, register, handleSubmit } = useFormHandler()
90+
const successFn = (form: Record<string, any>) => {
91+
console.log({ form })
92+
}
7593
</script>
7694
```
7795

7896
### Integration with Material frameworks
7997

8098
```vue
8199
<template>
82-
<form @submit.prevent="handleSubmit(successFn)">
83-
<q-input v-bind="register('name')" />
84-
<q-checkbox v-bind="register('married')"/>
85-
<q-select v-bind="register('pet')" :options="['dog','cat','mouse']"/>
86-
<input type="submit"/>
87-
</form>
100+
<form @submit.prevent="handleSubmit(successFn)">
101+
<q-input v-bind="register('name')" />
102+
<q-checkbox v-bind="register('married')" />
103+
<q-select v-bind="register('pet')" :options="['dog', 'cat', 'mouse']" />
104+
<input type="submit" />
105+
</form>
88106
</template>
89-
<script setup lang="ts" >
90-
import { useFormHandler } from 'vue-form-handler';
91-
const { formState, register, handleSubmit } = useFormHandler();
92-
const successFn = (form: Record<string,any>) => {console.log({form})}
107+
<script setup lang="ts">
108+
import { useFormHandler } from 'vue-form-handler'
109+
const { formState, register, handleSubmit } = useFormHandler()
110+
const successFn = (form: Record<string, any>) => {
111+
console.log({ form })
112+
}
93113
</script>
94114
```
95115

96116
### For a more advanced usage visit the [Docs](https://vue-form-handler.com)
97117

98118
## 📈 Project activity
119+
99120
---
100-
![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg "Repobeats analytics image")
121+
122+
![Alt](https://repobeats.axiom.co/api/embed/d0da4b79bde282068c5f3da3505091b1447a1f6c.svg 'Repobeats analytics image')
101123

102124
## 💜 Thanks
125+
103126
---
127+
104128
This project is heavily inspired by other awesome projects like:
129+
105130
- [jaredpalmer/formik](https://github.com/jaredpalmer/formik)
106131
- [react-hook-form/react-hook-form](https://github.com/react-hook-form/react-hook-form)
107132

108133
## 📄 License
134+
109135
---
110-
[MIT License](https://github.com/dbssman/vue-form-handler/blob/master/License.md) © 2022-PRESENT [Dennis Bosmans](https://github.com/dbssman)
136+
137+
[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

+53-22
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { defineConfig } from "vitepress"
1+
import { defineConfig } from 'vitepress'
22

33
export default defineConfig({
44
title: 'VueFormHandler',
@@ -9,17 +9,31 @@ export default defineConfig({
99
['link', { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' }],
1010
['meta', { name: 'author', content: 'Dennis R. Bosmans' }],
1111
['meta', { property: 'og:title', content: 'VueFormHandler' }],
12-
['meta', { property: 'og:image', content: 'https://vue-form-handler.com/favicon.png' }],
13-
['meta', { property: 'og:description', content: 'The only handler you\'ll need to easily work with forms in vue' }],
12+
[
13+
'meta',
14+
{
15+
property: 'og:image',
16+
content: 'https://vue-form-handler.com/favicon.png',
17+
},
18+
],
19+
[
20+
'meta',
21+
{
22+
property: 'og:description',
23+
content:
24+
"The only handler you'll need to easily work with forms in vue",
25+
},
26+
],
1427
],
1528
themeConfig: {
1629
logo: '/favicon.svg',
1730
editLink: {
18-
pattern: 'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
31+
pattern:
32+
'https://github.com/dbssman/vue-form-handler/edit/master/docs/:path',
1933
text: 'Edit this page on GitHub',
2034
},
2135
socialLinks: [
22-
{ icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' }
36+
{ icon: 'github', link: 'https://github.com/dbssman/vue-form-handler' },
2337
],
2438
footer: {
2539
message: 'Released under the MIT License.',
@@ -31,51 +45,68 @@ export default defineConfig({
3145
],
3246
sidebar: [
3347
{
34-
text: 'Get started', items: [
48+
text: 'Get started',
49+
items: [
3550
{ text: 'Introduction', link: '/get-started/introduction' },
3651
{ text: 'Quick Start', link: '/get-started/quick-start' },
37-
]
52+
],
3853
},
3954
{
40-
text: 'Guides', collapsible: true, items: [
55+
text: 'Guides',
56+
collapsible: true,
57+
items: [
4158
{ text: 'Custom components', link: '/guides/custom-components' },
4259
{ text: 'Material libraries', link: '/guides/material-libraries' },
4360
{ text: 'Native support', link: '/guides/native-support' },
4461
{ text: 'Typescript', link: '/guides/typescript' },
4562
{ text: 'Validation', link: '/guides/validation' },
46-
]
63+
],
4764
},
4865
{
49-
text: 'Examples', collapsible: true, items: [
66+
text: 'Examples',
67+
collapsible: true,
68+
items: [
5069
{ text: 'Async submission', link: '/examples/async-submission' },
5170
{ text: 'Async validations', link: '/examples/async-validations' },
5271
{ text: 'Basic', link: '/examples/basic' },
5372
{ text: 'Dependent fields', link: '/examples/dependent-fields' },
54-
]
73+
],
5574
},
5675
{
57-
text: 'API Reference', collapsible: true, items: [
76+
text: 'API Reference',
77+
collapsible: true,
78+
items: [
5879
{
59-
text: 'useFormHandler', link: '/api/use-form-handler/',
80+
text: 'useFormHandler',
81+
link: '/api/use-form-handler/',
6082
items: [
6183
{ text: 'clearError', link: '/api/use-form-handler/clear-error' },
6284
{ text: 'clearField', link: '/api/use-form-handler/clear-field' },
6385
{ text: 'formState', link: '/api/use-form-handler/form-state' },
64-
{ text: 'handleSubmit', link: '/api/use-form-handler/handle-submit' },
65-
{ text: 'modifiedValues', link: '/api/use-form-handler/modified-values' },
86+
{
87+
text: 'handleSubmit',
88+
link: '/api/use-form-handler/handle-submit',
89+
},
90+
{
91+
text: 'modifiedValues',
92+
link: '/api/use-form-handler/modified-values',
93+
},
6694
{ text: 'register', link: '/api/use-form-handler/register' },
6795
{ text: 'resetField', link: '/api/use-form-handler/reset-field' },
6896
{ text: 'resetForm', link: '/api/use-form-handler/reset-form' },
6997
{ text: 'setError', link: '/api/use-form-handler/set-error' },
7098
{ text: 'setValue', link: '/api/use-form-handler/set-value' },
71-
{ text: 'triggerValidation', link: '/api/use-form-handler/trigger-validation' },
99+
{
100+
text: 'triggerValidation',
101+
link: '/api/use-form-handler/trigger-validation',
102+
},
72103
{ text: 'unregister', link: '/api/use-form-handler/unregister' },
73104
{ text: 'values', link: '/api/use-form-handler/values' },
74-
]
105+
],
75106
},
76-
{ text: `FormHandler`, link: '/api/form-handler' }
77-
]
78-
}
107+
{ text: `FormHandler`, link: '/api/form-handler' },
108+
],
109+
},
79110
],
80-
}
81-
})
111+
},
112+
})

0 commit comments

Comments
 (0)