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

Commit 87c1334

Browse files
JensDllJensDll
committed
update example site
1 parent 63d7460 commit 87c1334

File tree

10 files changed

+176
-13
lines changed

10 files changed

+176
-13
lines changed

‎.husky/.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
_
1+
_

‎vite/src/components/BaseInput.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
v-model="value"
88
class="input w-full block border outline-none px-2 py-1"
99
:class="{ error: errors.length > 0 }"
10+
:disabled="disabled"
1011
v-bind="attrsRest"
1112
/>
1213
<span v-if="validating" class="ping-container">
@@ -59,6 +60,9 @@ export default defineComponent({
5960
},
6061
validating: {
6162
type: Boolean
63+
},
64+
disabled: {
65+
type: Boolean
6266
}
6367
},
6468
emits: ['update:modelValue'],

‎vite/src/components/NavLinks.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<router-link class="router-link" to="/array-binding"></router-link>
66
<router-link class="router-link" to="/dynamic-rules"></router-link>
77
<router-link class="router-link" to="/nested-object-binding"></router-link>
8+
<router-link class="router-link" to="/async-form-loading"></router-link>
89
</nav>
910
</template>
1011

‎vite/src/router/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import DynamicForm from '../views/DynamicForm.vue';
44
import ArrayBinding from '../views/ArrayBinding.vue';
55
import DynamicRules from '../views/DynamicRules.vue';
66
import NestedObjectBinding from '../views/NestedObjectBinding.vue';
7+
import AsyncFormLoading from '../views/AsyncFormLoading.vue';
78

89
const routes: RouteRecordRaw[] = [
910
{
@@ -25,6 +26,10 @@ const routes: RouteRecordRaw[] = [
2526
{
2627
path: '/nested-object-binding',
2728
component: NestedObjectBinding
29+
},
30+
{
31+
path: '/async-form-loading',
32+
component: AsyncFormLoading
2833
}
2934
];
3035

‎vite/src/views/ArrayBinding.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<h1>Array Binding</h1>
3-
<form class="mb-8 mt-10" @submit.prevent="handleSubmit">
3+
<form class="mb-8 mt-10" @submit.prevent="handleSubmit()">
44
<div>What is your favorite color?</div>
55
<div v-for="color in colors" :key="color" class="color">
66
<label>
@@ -20,7 +20,7 @@
2020
>
2121
Submit
2222
</BaseButton>
23-
<BaseButton class="py-1" @click="resetFields">Reset</BaseButton>
23+
<BaseButton class="py-1" @click="resetFields()">Reset</BaseButton>
2424
</div>
2525
</form>
2626
<PreFormData :form="form" :errors="errors" />

‎vite/src/views/AsyncFormLoading.vue

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<template>
2+
<h1>Async Form Loading</h1>
3+
<form class="mb-8 mt-10" @submit.prevent="handleSubmit">
4+
<BaseInput
5+
v-model="form.amount.$value"
6+
label="Recipe"
7+
type="number"
8+
:placeholder="loading ? 'Loading ...' : null"
9+
:disabled="loading"
10+
:validating="form.amount.$validating || loading"
11+
@blur="form.amount.$onBlur"
12+
/>
13+
<fieldset>
14+
<label>
15+
<div>Mastercard</div>
16+
<input
17+
v-model="form.paymentMethod.$value"
18+
type="radio"
19+
value="mastercard"
20+
/>
21+
</label>
22+
<label>
23+
<div>Visa</div>
24+
<input v-model="form.paymentMethod.$value" type="radio" value="visa" />
25+
</label>
26+
<label>
27+
<div>American Express</div>
28+
<input
29+
v-model="form.paymentMethod.$value"
30+
type="radio"
31+
value="merican-express"
32+
/>
33+
</label>
34+
</fieldset>
35+
<div class="flex mt-4">
36+
<BaseButton
37+
class="mr-2 py-1"
38+
type="primary"
39+
html-type="submit"
40+
:disabled="submitting"
41+
>
42+
Submit
43+
</BaseButton>
44+
<BaseButton class="py-1" @click="resetFields()">Reset</BaseButton>
45+
</div>
46+
</form>
47+
<PreFormData :form="form" :errors="errors" />
48+
</template>
49+
50+
<script lang="ts">
51+
import { defineComponent, ref } from 'vue';
52+
import { useValidation, Field } from '../../../main';
53+
import PreFormData from '../components/PreFormData.vue';
54+
import BaseInput from '../components/BaseInput.vue';
55+
import BaseButton from '../components/BaseButton.vue';
56+
57+
const sleep = (ms: number) =>
58+
new Promise<void>(resolve => {
59+
setTimeout(() => {
60+
resolve();
61+
}, ms);
62+
});
63+
64+
type FormData = {
65+
amount: Field<number>;
66+
paymentMethod: Field<string>;
67+
};
68+
69+
export default defineComponent({
70+
components: {
71+
PreFormData,
72+
BaseInput,
73+
BaseButton
74+
},
75+
setup() {
76+
const loading = ref(false);
77+
const {
78+
form,
79+
errors,
80+
submitting,
81+
validateFields,
82+
resetFields
83+
} = useValidation<FormData>({
84+
amount: {
85+
$value: 0
86+
},
87+
paymentMethod: {
88+
$value: ''
89+
}
90+
});
91+
92+
(async function () {
93+
loading.value = true;
94+
await sleep(1500);
95+
resetFields({
96+
amount: 100,
97+
paymentMethod: 'visa'
98+
});
99+
loading.value = false;
100+
})();
101+
102+
const handleSubmit = () => {
103+
validateFields()
104+
.then(formData => {
105+
console.log(JSON.stringify(formData, null, 2));
106+
})
107+
.catch(() => {
108+
// validation error
109+
});
110+
};
111+
112+
return {
113+
form,
114+
errors,
115+
submitting,
116+
loading,
117+
handleSubmit,
118+
resetFields
119+
};
120+
}
121+
});
122+
</script>
123+
124+
<style></style>

‎vite/src/views/DynamicForm.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<h1>Dynamic Form</h1>
33
<form
44
class="form mb-8 mt-10 gap-y-4 gap-x-6 items-start"
5-
@submit.prevent="handleSubmit"
5+
@submit.prevent="handleSubmit()"
66
>
77
<BaseInput
88
v-model="form.a.$value"
@@ -64,7 +64,7 @@
6464
>
6565
Submit
6666
</BaseButton>
67-
<BaseButton class="w-full py-3" @click="resetFields">Reset</BaseButton>
67+
<BaseButton class="w-full py-3" @click="resetFields()">Reset</BaseButton>
6868
</div>
6969
</form>
7070
<PreFormData :form="form" :errors="errors" />

‎vite/src/views/DynamicRules.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<h1>Dynamic Rules</h1>
3-
<form class="mb-8 mt-10 grid gap-y-4" @submit.prevent="handleSubmit">
3+
<form class="mb-8 mt-10 grid gap-y-4" @submit.prevent="handleSubmit()">
44
<BaseInput
55
v-model="form.name.$value"
66
:errors="form.name.$errors"
@@ -21,7 +21,7 @@
2121
<BaseButton class="mr-2 py-1" type="primary" html-type="submit">
2222
Submit
2323
</BaseButton>
24-
<BaseButton class="py-1" @click="resetFields">Reset</BaseButton>
24+
<BaseButton class="py-1" @click="resetFields()">Reset</BaseButton>
2525
</div>
2626
</form>
2727

‎vite/src/views/LoginForm.vue

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
>
4141
Login
4242
</BaseButton>
43-
<BaseButton class="mt-8 py-3" @click="resetFields">Reset</BaseButton>
43+
<BaseButton class="mt-8 py-3" @click="handleReset()">Reset</BaseButton>
4444
</form>
4545
<PreFormData :form="form" :errors="errors" />
4646
</template>
@@ -136,12 +136,21 @@ export default defineComponent({
136136
});
137137
};
138138
139+
const handleReset = () => {
140+
resetFields({
141+
name: '',
142+
email: '',
143+
password: '',
144+
repeatPassword: ''
145+
});
146+
};
147+
139148
return {
140149
form,
141150
handleSubmit,
142151
submitting,
143152
errors,
144-
resetFields
153+
handleReset
145154
};
146155
},
147156
computed: {

‎vite/src/views/NestedObjectBinding.vue

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<h1>Nested Object Binding</h1>
3-
<form class="mb-8 mt-10" @submit.prevent="handleSubmit">
3+
<form class="mb-8 mt-10" @submit.prevent="handleSubmit()">
44
<label>
55
<div>Nested Object</div>
66
<input
@@ -23,7 +23,7 @@
2323
>
2424
Submit
2525
</BaseButton>
26-
<BaseButton class="py-1" @click="resetFields">Reset</BaseButton>
26+
<BaseButton class="py-1" @click="handleReset()">Reset</BaseButton>
2727
</div>
2828
</form>
2929
<PreFormData :form="form" :errors="errors" />
@@ -54,7 +54,14 @@ export default defineComponent({
5454
}
5555
}
5656
},
57-
$rules: []
57+
$rules: [
58+
() =>
59+
new Promise(resolve => {
60+
setTimeout(() => {
61+
resolve(true);
62+
}, 2000);
63+
})
64+
]
5865
}
5966
});
6067
@@ -68,12 +75,25 @@ export default defineComponent({
6875
});
6976
};
7077
78+
const handleReset = () => {
79+
resetFields({
80+
nested: {
81+
a: 'abc',
82+
b: {
83+
c: {
84+
ds: []
85+
}
86+
}
87+
}
88+
});
89+
};
90+
7191
return {
7292
form,
7393
errors,
7494
submitting,
7595
handleSubmit,
76-
resetFields
96+
handleReset
7797
};
7898
}
7999
});

0 commit comments

Comments
 (0)