Skip to content
This repository was archived by the owner on Jun 27, 2023. It is now read-only.

Commit f6205a9

Browse files
alvarosabualvarosabu
committed
feat: expose resetForm on form ref
1 parent 6be5363 commit f6205a9

File tree

7 files changed

+302
-144
lines changed

7 files changed

+302
-144
lines changed

‎demos/vue-3/src/components/Console.vue

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@
1212
</template>
1313

1414
<script lang="ts">
15-
import { computed, defineComponent } from 'vue';
15+
import { computed, defineComponent, watch } from 'vue'
1616
1717
const props = {
18-
content: String,
19-
};
18+
content: Object,
19+
}
2020
2121
export default defineComponent({
2222
name: 'console',
2323
props,
2424
setup(props) {
25-
const jsonValues = computed(() => JSON.stringify(props.content));
25+
const jsonValues = computed(() => JSON.stringify(props.content))
26+
27+
watch(props.content, () => {})
2628
return {
2729
jsonValues,
28-
};
30+
}
2931
},
30-
});
32+
})
3133
</script>

‎demos/vue-3/src/router/index.ts

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
2-
import Home from '../views/Home.vue';
1+
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2+
import Home from '../views/Home.vue'
33

44
const routes: Array<RouteRecordRaw> = [
55
{
@@ -114,11 +114,20 @@ const routes: Array<RouteRecordRaw> = [
114114
/* webpackChunkName: "reset-after-submit" */ '../views/ResetAfterSubmit.vue'
115115
),
116116
},
117-
];
117+
{
118+
path: '/reset-form',
119+
name: 'Reset Form Manually',
120+
meta: {
121+
title: 'Reset Form Manually',
122+
},
123+
component: () =>
124+
import(/* webpackChunkName: "reset-form" */ '../views/ResetForm.vue'),
125+
},
126+
]
118127

119128
const router = createRouter({
120129
history: createWebHistory(),
121130
routes,
122-
});
131+
})
123132

124-
export default router;
133+
export default router

‎demos/vue-3/src/views/Basic.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script lang="ts">
2-
import { CheckboxField, TextField, SelectField } from '/@/';
3-
import { computed, defineComponent, reactive } from 'vue';
2+
import { CheckboxField, TextField, SelectField } from '/@/'
3+
import { computed, defineComponent, reactive } from 'vue'
44
55
export default defineComponent({
66
name: 'BasicDemo',
77
setup() {
8-
const formValues = reactive({});
8+
const formValues = reactive({})
99
1010
const form = computed(() => ({
1111
id: 'basic-demo',
@@ -34,19 +34,19 @@ export default defineComponent({
3434
label: 'Remember Me',
3535
}),
3636
},
37-
}));
37+
}))
3838
3939
function handleSubmit(values) {
40-
console.log('Values Submitted', values);
40+
console.log('Values Submitted', values)
4141
}
4242
4343
function valueChanged(values) {
44-
Object.assign(formValues, values);
45-
console.log('Values', values);
44+
Object.assign(formValues, values)
45+
console.log('Values', values)
4646
}
4747
4848
function handleError(errors) {
49-
console.error('Errors', errors);
49+
console.error('Errors', errors)
5050
}
5151
5252
return {
@@ -55,9 +55,9 @@ export default defineComponent({
5555
handleSubmit,
5656
valueChanged,
5757
handleError,
58-
};
58+
}
5959
},
60-
});
60+
})
6161
</script>
6262
<template>
6363
<div class="page container">

‎demos/vue-3/src/views/Home.vue

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
2-
import { defineComponent, ref } from 'vue';
2+
import { defineComponent, ref } from 'vue'
33
4-
const STAGGER_DELAY = 200;
4+
const STAGGER_DELAY = 200
55
66
export default defineComponent({
77
name: 'Home',
88
setup() {
9-
const demos = ref([]);
9+
const demos = ref([])
1010
const colorsMap = ref({
1111
'text-field': 'yellow',
1212
'email-field': 'blue',
@@ -18,7 +18,7 @@ export default defineComponent({
1818
'custom-field': 'indigo',
1919
'radio-field': 'yellow',
2020
'checkbox-field': 'blue',
21-
});
21+
})
2222
2323
setTimeout(() => {
2424
demos.value = [
@@ -84,26 +84,31 @@ export default defineComponent({
8484
route: '/reset-after-submit',
8585
tags: ['submit', 'reset-forms'],
8686
},
87+
{
88+
name: 'Reset form',
89+
route: '/reset-form',
90+
tags: ['reset-forms'],
91+
},
8792
],
88-
];
89-
}, 1000);
93+
]
94+
}, 1000)
9095
9196
function beforeEnter(el) {
92-
el.style.visibility = 'hidden';
97+
el.style.visibility = 'hidden'
9398
}
9499
function enter(el) {
95-
const delay = el.dataset.index * STAGGER_DELAY;
100+
const delay = el.dataset.index * STAGGER_DELAY
96101
setTimeout(() => {
97-
el.classList.add('animate__animated', 'animate__fadeIn');
98-
el.style.visibility = 'visible';
99-
}, delay);
102+
el.classList.add('animate__animated', 'animate__fadeIn')
103+
el.style.visibility = 'visible'
104+
}, delay)
100105
}
101106
function leave(el) {
102-
const delay = el.dataset.index * STAGGER_DELAY;
107+
const delay = el.dataset.index * STAGGER_DELAY
103108
setTimeout(() => {
104-
el.classList.add('animate__animated', 'animate__fadeOut');
105-
el.style.visibility = 'hidden';
106-
}, delay);
109+
el.classList.add('animate__animated', 'animate__fadeOut')
110+
el.style.visibility = 'hidden'
111+
}, delay)
107112
}
108113
109114
return {
@@ -112,9 +117,9 @@ export default defineComponent({
112117
enter,
113118
leave,
114119
colorsMap,
115-
};
120+
}
116121
},
117-
});
122+
})
118123
</script>
119124

120125
<template>

‎demos/vue-3/src/views/ResetForm.vue

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<script lang="ts">
2+
import {
3+
CheckboxField,
4+
FormValidator,
5+
Validator,
6+
email,
7+
pattern,
8+
EmailField,
9+
required,
10+
PasswordField,
11+
} from '/@/'
12+
import { computed, defineComponent, ref } from 'vue'
13+
14+
export default defineComponent({
15+
name: 'ResetFormDemo',
16+
setup() {
17+
const formValues = ref({})
18+
const formRef = ref(null)
19+
20+
const emailValidator: FormValidator = Validator({
21+
validator: email,
22+
text: 'Email format is incorrect',
23+
})
24+
25+
const passwordValidator: FormValidator = Validator({
26+
validator: pattern(
27+
'^(?=.*[a-z])(?=.*[A-Z])(?=.*)(?=.*[#$^+=!*()@%&]).{8,10}$',
28+
),
29+
text: 'Password must contain at least 1 Uppercase, 1 Lowercase, 1 number, 1 special character and min 8 characters max 10',
30+
})
31+
32+
const form = computed(() => ({
33+
id: 'basic-demo',
34+
fields: {
35+
email: EmailField({
36+
label: 'Email',
37+
validations: [
38+
Validator({ validator: required, text: 'This field is required' }),
39+
emailValidator,
40+
],
41+
}),
42+
password: PasswordField({
43+
label: 'Password',
44+
autocomplete: 'current-password',
45+
validations: [
46+
Validator({ validator: required, text: 'This field is required' }),
47+
passwordValidator,
48+
],
49+
}),
50+
rememberMe: CheckboxField({
51+
label: 'Remember Me',
52+
}),
53+
},
54+
}))
55+
56+
function handleSubmit(values) {
57+
console.log('Values Submitted', values)
58+
}
59+
60+
function valueChanged(values) {
61+
Object.assign(formValues.value, values)
62+
console.log('Values', values)
63+
}
64+
65+
function handleError(errors) {
66+
console.error('Errors', errors)
67+
}
68+
69+
function resetForm() {
70+
formRef.value.resetForm()
71+
formValues.value = {}
72+
}
73+
74+
return {
75+
form,
76+
handleSubmit,
77+
formValues,
78+
valueChanged,
79+
handleError,
80+
formRef,
81+
resetForm,
82+
}
83+
},
84+
})
85+
</script>
86+
<template>
87+
<div class="page container">
88+
<div class="mx-auto w-full sm:w-1/2 relative mb-24">
89+
<div
90+
class="
91+
absolute
92+
inset-0
93+
bg-gradient-to-r
94+
from-blue-400
95+
to-green-200
96+
shadow-xl
97+
transform
98+
-skew-y-3
99+
sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl
100+
"
101+
></div>
102+
<div class="relative card p-6 bg-white">
103+
<DynamicForm
104+
ref="formRef"
105+
:form="form"
106+
@submitted="handleSubmit"
107+
@change="valueChanged"
108+
@error="handleError"
109+
/>
110+
<button
111+
data-cy="submit"
112+
class="btn mr-4 bg-green-500 text-white hover:bg-green-700 mt-4"
113+
submit="true"
114+
:form="form?.id"
115+
>
116+
Try me
117+
</button>
118+
119+
<button
120+
class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
121+
@click="resetForm"
122+
>
123+
Reset Me
124+
</button>
125+
</div>
126+
</div>
127+
<div class="mx-auto w-full sm:w-1/2">
128+
<Console :content="formValues" />
129+
</div>
130+
</div>
131+
</template>
132+
133+
<style lang="scss">
134+
@import '/@/styles/themes/default.scss';
135+
</style>

0 commit comments

Comments
 (0)