@farm-investimentos/front-mfe-components-vue3 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/front-mfe-components.common.js +65 -60
- package/dist/front-mfe-components.common.js.map +1 -1
- package/dist/front-mfe-components.css +1 -1
- package/dist/front-mfe-components.umd.js +65 -60
- package/dist/front-mfe-components.umd.js.map +1 -1
- package/dist/front-mfe-components.umd.min.js +1 -1
- package/dist/front-mfe-components.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Form/Form.stories.js +117 -159
- package/src/components/Form/Form.vue +13 -21
- package/src/components/TextFieldV2/TextFieldV2.vue +1 -1
- package/src/helpers/walk.ts +19 -0
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import Form from './Form.vue';
|
|
2
|
+
import { getCurrentInstance, ref } from 'vue';
|
|
2
3
|
|
|
3
4
|
export default {
|
|
4
5
|
title: 'Form/Form',
|
|
@@ -16,16 +17,6 @@ export default {
|
|
|
16
17
|
},
|
|
17
18
|
};
|
|
18
19
|
|
|
19
|
-
const styles = {
|
|
20
|
-
vForm: {
|
|
21
|
-
maxWidth: '480px',
|
|
22
|
-
},
|
|
23
|
-
footer: {
|
|
24
|
-
display: 'flex',
|
|
25
|
-
justifyContent: 'end',
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
|
|
29
20
|
export const Primary = () => ({
|
|
30
21
|
data() {
|
|
31
22
|
return {
|
|
@@ -33,7 +24,7 @@ export const Primary = () => ({
|
|
|
33
24
|
document: 'Document',
|
|
34
25
|
name: '',
|
|
35
26
|
checkbox: '2',
|
|
36
|
-
birthDate:
|
|
27
|
+
birthDate: '1980-09-20',
|
|
37
28
|
selectId: 1,
|
|
38
29
|
rangeDate: [],
|
|
39
30
|
cityName: null,
|
|
@@ -48,49 +39,137 @@ export const Primary = () => ({
|
|
|
48
39
|
{ value: 1, text: 'label 1' },
|
|
49
40
|
{ value: 2, text: 'label 2' },
|
|
50
41
|
],
|
|
51
|
-
styles,
|
|
52
42
|
};
|
|
53
43
|
},
|
|
54
44
|
template: `
|
|
55
|
-
|
|
45
|
+
<farm-row>
|
|
46
|
+
<farm-col md="3">
|
|
47
|
+
<farm-form v-model="validForm" ref="form" autocomplete="off">
|
|
48
|
+
<div>
|
|
49
|
+
<farm-label :required="true">Documento</farm-label>
|
|
50
|
+
<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
|
|
51
|
+
</div>
|
|
52
|
+
<farm-label :required="true">Nome</farm-label>
|
|
53
|
+
<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" hint="Seu nome igual ao do RG" />
|
|
54
|
+
|
|
55
|
+
<farm-label :required="true">True/false</farm-label>
|
|
56
|
+
<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
|
|
57
|
+
|
|
58
|
+
<farm-label :required="true">Select</farm-label>
|
|
59
|
+
<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
|
|
60
|
+
|
|
61
|
+
<farm-label :required="true">Birthdate:</farm-label>
|
|
62
|
+
<farm-input-datepicker
|
|
63
|
+
ref="birthDate"
|
|
64
|
+
inputId="form-pf-birthDate"
|
|
65
|
+
v-model="form.birthDate"
|
|
66
|
+
:readonly="true"
|
|
67
|
+
:required="true"
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
<farm-label :required="true">Range date:</farm-label>
|
|
71
|
+
<farm-input-rangedatepicker
|
|
72
|
+
ref="rangeDate"
|
|
73
|
+
inputId="form-pf-rangeDate"
|
|
74
|
+
v-model="form.rangeDate"
|
|
75
|
+
:required="true"
|
|
76
|
+
/>
|
|
77
|
+
<div class="footer">
|
|
78
|
+
<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
|
|
79
|
+
<farm-btn :disabled="!validForm">Salvar</farm-btn>
|
|
80
|
+
</div>
|
|
81
|
+
form: {{ form }}
|
|
82
|
+
</farm-form>
|
|
83
|
+
</farm-col>
|
|
84
|
+
</farm-row>`,
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
export const CompositionAPI = () => ({
|
|
88
|
+
setup() {
|
|
89
|
+
const formValues = ref({ name: '' });
|
|
90
|
+
const validForm = ref(false);
|
|
91
|
+
const formEl = (ref < HTMLDivElement) | (null > null);
|
|
92
|
+
|
|
93
|
+
const rules = { required: value => !!value || 'Campo obrigatório' };
|
|
94
|
+
|
|
95
|
+
const internalInstance = getCurrentInstance().proxy;
|
|
96
|
+
|
|
97
|
+
const onReset = () => {
|
|
98
|
+
internalInstance.formEl.reset();
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
return {
|
|
102
|
+
formEl,
|
|
103
|
+
formValues,
|
|
104
|
+
validForm,
|
|
105
|
+
rules,
|
|
106
|
+
onReset,
|
|
107
|
+
};
|
|
108
|
+
},
|
|
109
|
+
template: `<div>
|
|
110
|
+
<farm-form v-model="validForm" ref="formEl" autocomplete="off">
|
|
111
|
+
<farm-box>
|
|
112
|
+
<farm-row>
|
|
113
|
+
<farm-col md="4">
|
|
114
|
+
<farm-label :required="true">Documento</farm-label>
|
|
115
|
+
<farm-textfield-v2 v-model="formValues.name" :rules=[rules.required] />
|
|
116
|
+
</farm-col>
|
|
117
|
+
</farm-row>
|
|
118
|
+
</farm-box>
|
|
119
|
+
</farm-form>
|
|
120
|
+
<farm-btn outlined @click="onReset" class="mr-3">Reset</farm-btn>
|
|
121
|
+
form: {{ formValues }} {{ validForm }}
|
|
122
|
+
</div>
|
|
123
|
+
`,
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
export const RestartValidation = () => ({
|
|
127
|
+
data() {
|
|
128
|
+
return {
|
|
129
|
+
form: {
|
|
130
|
+
document: null,
|
|
131
|
+
name: null,
|
|
132
|
+
checkbox: null,
|
|
133
|
+
birthDate: '',
|
|
134
|
+
selectId: null,
|
|
135
|
+
rangeDate: [],
|
|
136
|
+
},
|
|
137
|
+
validForm: true,
|
|
138
|
+
rules: {
|
|
139
|
+
required: value => !!value || 'Campo obrigatório',
|
|
140
|
+
checked: value => !!value || 'Deve estar marcado',
|
|
141
|
+
},
|
|
142
|
+
items: [
|
|
143
|
+
{ value: null, text: '' },
|
|
144
|
+
{ value: 1, text: 'label 1' },
|
|
145
|
+
{ value: 2, text: 'label 2' },
|
|
146
|
+
],
|
|
147
|
+
};
|
|
148
|
+
},
|
|
149
|
+
template: `
|
|
150
|
+
<farm-form v-model="validForm" ref="form">
|
|
151
|
+
Is valid form: {{ validForm }}
|
|
152
|
+
|
|
153
|
+
<farm-label :required="true">Nome</farm-label>
|
|
154
|
+
<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
|
|
155
|
+
|
|
56
156
|
<div>
|
|
57
157
|
<farm-label :required="true">Documento</farm-label>
|
|
58
158
|
<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
|
|
59
159
|
</div>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
160
|
+
|
|
161
|
+
|
|
63
162
|
<farm-label :required="true">True/false</farm-label>
|
|
64
163
|
<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
|
|
65
164
|
|
|
66
165
|
<farm-label :required="true">Select</farm-label>
|
|
67
166
|
<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
|
|
68
|
-
|
|
69
|
-
<farm-label :required="true">Birthdate:</farm-label>
|
|
70
|
-
<farm-input-datepicker
|
|
71
|
-
ref="birthDate"
|
|
72
|
-
inputId="form-pf-birthDate"
|
|
73
|
-
class="mt-4"
|
|
74
|
-
v-model="form.birthDate"
|
|
75
|
-
:readonly="true"
|
|
76
|
-
:required="true"
|
|
77
|
-
/>
|
|
78
|
-
|
|
79
|
-
<farm-label :required="true">Range date:</farm-label>
|
|
80
|
-
<farm-input-rangedatepicker
|
|
81
|
-
ref="rangeDate"
|
|
82
|
-
inputId="form-pf-rangeDate"
|
|
83
|
-
class="mt-4"
|
|
84
|
-
v-model="form.rangeDate"
|
|
85
|
-
:required="true"
|
|
86
|
-
/>
|
|
87
167
|
|
|
88
|
-
|
|
89
|
-
|
|
168
|
+
<div class="footer">
|
|
169
|
+
<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
|
|
90
170
|
<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
|
|
91
171
|
<farm-btn :disabled="!validForm">Salvar</farm-btn>
|
|
92
172
|
</div>
|
|
93
|
-
form: {{ form }}
|
|
94
173
|
</farm-form>
|
|
95
174
|
`,
|
|
96
175
|
});
|
|
@@ -238,77 +317,6 @@ export const Grid = () => ({
|
|
|
238
317
|
`,
|
|
239
318
|
});
|
|
240
319
|
|
|
241
|
-
export const MigrateTextVieldV2 = () => ({
|
|
242
|
-
data() {
|
|
243
|
-
return {
|
|
244
|
-
form: {
|
|
245
|
-
document: 'Document',
|
|
246
|
-
name: 'Name',
|
|
247
|
-
},
|
|
248
|
-
validForm: false,
|
|
249
|
-
rules: {
|
|
250
|
-
required: value => !!value || 'Campo obrigatório',
|
|
251
|
-
},
|
|
252
|
-
items: [
|
|
253
|
-
{ value: null, text: '' },
|
|
254
|
-
{ value: 1, text: 'label 1' },
|
|
255
|
-
{ value: 2, text: 'label 2' },
|
|
256
|
-
],
|
|
257
|
-
styles,
|
|
258
|
-
};
|
|
259
|
-
},
|
|
260
|
-
template: `
|
|
261
|
-
<farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
|
|
262
|
-
<div>
|
|
263
|
-
<farm-label :required="true">Documento</farm-label>
|
|
264
|
-
<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
|
|
265
|
-
</div>
|
|
266
|
-
<farm-label :required="true">Nome</farm-label>
|
|
267
|
-
<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
|
|
268
|
-
|
|
269
|
-
<div class="footer" :style="[styles.footer]">
|
|
270
|
-
<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
|
|
271
|
-
<farm-btn :disabled="!validForm">Salvar</farm-btn>
|
|
272
|
-
</div>
|
|
273
|
-
form: {{ form }}
|
|
274
|
-
</farm-form>
|
|
275
|
-
`,
|
|
276
|
-
});
|
|
277
|
-
|
|
278
|
-
export const MigrateSelectV2 = () => ({
|
|
279
|
-
data() {
|
|
280
|
-
return {
|
|
281
|
-
form: {
|
|
282
|
-
document: '',
|
|
283
|
-
},
|
|
284
|
-
validForm: false,
|
|
285
|
-
rules: {
|
|
286
|
-
required: value => !!value || 'Campo obrigatório',
|
|
287
|
-
},
|
|
288
|
-
items: [
|
|
289
|
-
{ value: null, text: '' },
|
|
290
|
-
{ value: 1, text: 'label 1' },
|
|
291
|
-
{ value: 2, text: 'label 2' },
|
|
292
|
-
],
|
|
293
|
-
styles,
|
|
294
|
-
};
|
|
295
|
-
},
|
|
296
|
-
template: `
|
|
297
|
-
<farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
|
|
298
|
-
<div>
|
|
299
|
-
<farm-label :required="true">Documento</farm-label>
|
|
300
|
-
<farm-select v-model="form.document" :items="items" :rules="[rules.required]" />
|
|
301
|
-
</div>
|
|
302
|
-
|
|
303
|
-
<div class="footer" :style="[styles.footer]">
|
|
304
|
-
<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
|
|
305
|
-
<farm-btn :disabled="!validForm">Salvar</farm-btn>
|
|
306
|
-
</div>
|
|
307
|
-
form: {{ form }}
|
|
308
|
-
</farm-form>
|
|
309
|
-
`,
|
|
310
|
-
});
|
|
311
|
-
|
|
312
320
|
export const ValidateRadioGroup = () => ({
|
|
313
321
|
data() {
|
|
314
322
|
return {
|
|
@@ -336,55 +344,5 @@ export const ValidateRadioGroup = () => ({
|
|
|
336
344
|
`,
|
|
337
345
|
});
|
|
338
346
|
|
|
339
|
-
export const RestartValidation = () => ({
|
|
340
|
-
data() {
|
|
341
|
-
return {
|
|
342
|
-
form: {
|
|
343
|
-
document: null,
|
|
344
|
-
name: null,
|
|
345
|
-
checkbox: null,
|
|
346
|
-
birthDate: '',
|
|
347
|
-
selectId: null,
|
|
348
|
-
rangeDate: [],
|
|
349
|
-
},
|
|
350
|
-
validForm: true,
|
|
351
|
-
rules: {
|
|
352
|
-
required: value => !!value || 'Campo obrigatório',
|
|
353
|
-
checked: value => !!value || 'Deve estar marcado',
|
|
354
|
-
},
|
|
355
|
-
items: [
|
|
356
|
-
{ value: null, text: '' },
|
|
357
|
-
{ value: 1, text: 'label 1' },
|
|
358
|
-
{ value: 2, text: 'label 2' },
|
|
359
|
-
],
|
|
360
|
-
styles,
|
|
361
|
-
};
|
|
362
|
-
},
|
|
363
|
-
template: `
|
|
364
|
-
<farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
|
|
365
|
-
Is valid form: {{ validForm }}
|
|
366
347
|
|
|
367
|
-
<farm-label :required="true">Nome</farm-label>
|
|
368
|
-
<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
|
|
369
|
-
|
|
370
|
-
<div>
|
|
371
|
-
<farm-label :required="true">Documento</farm-label>
|
|
372
|
-
<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
|
|
373
|
-
</div>
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
<farm-label :required="true">True/false</farm-label>
|
|
377
|
-
<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
|
|
378
|
-
|
|
379
|
-
<farm-label :required="true">Select</farm-label>
|
|
380
|
-
<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
|
|
381
|
-
|
|
382
|
-
<div class="footer" :style="[styles.footer]">
|
|
383
|
-
<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
|
|
384
|
-
<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
|
|
385
|
-
<farm-btn :disabled="!validForm">Salvar</farm-btn>
|
|
386
|
-
</div>
|
|
387
|
-
</farm-form>
|
|
388
|
-
`,
|
|
389
|
-
});
|
|
390
348
|
*/
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<form class="farm-form"
|
|
2
|
+
<form class="farm-form">{{ errorsBag }}<slot></slot>
|
|
3
|
+
|
|
4
|
+
</form>
|
|
3
5
|
</template>
|
|
4
6
|
<script lang="ts">
|
|
7
|
+
import walk from '../../helpers/walk';
|
|
5
8
|
import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
|
|
6
9
|
|
|
7
10
|
type ErrorsBag = Record<number, boolean>;
|
|
@@ -9,11 +12,11 @@ type ErrorsBag = Record<number, boolean>;
|
|
|
9
12
|
export default {
|
|
10
13
|
name: 'farm-form',
|
|
11
14
|
props: {
|
|
12
|
-
|
|
15
|
+
modelValue: { type: [Boolean] },
|
|
13
16
|
},
|
|
14
17
|
inheritAttrs: true,
|
|
15
18
|
setup(props, { emit }) {
|
|
16
|
-
const innerValue = ref(props.
|
|
19
|
+
const innerValue = ref(props.modelValue);
|
|
17
20
|
let errorsBag = reactive({} as ErrorsBag);
|
|
18
21
|
let validationFields = [];
|
|
19
22
|
const instance = getCurrentInstance();
|
|
@@ -21,14 +24,14 @@ export default {
|
|
|
21
24
|
const dispatchError = () => {
|
|
22
25
|
const keys = Object.keys(errorsBag);
|
|
23
26
|
const errorsIds = keys.filter(key => !errorsBag[key]);
|
|
24
|
-
emit('
|
|
27
|
+
emit('update:modelValue', errorsIds.length === 0);
|
|
25
28
|
};
|
|
26
29
|
|
|
27
30
|
const watchInput = (field: any) => {
|
|
28
31
|
field.$watch(
|
|
29
32
|
'hasError',
|
|
30
33
|
() => {
|
|
31
|
-
errorsBag[field.
|
|
34
|
+
errorsBag[field.customId] = field.valid;
|
|
32
35
|
dispatchError();
|
|
33
36
|
},
|
|
34
37
|
{ immediate: true }
|
|
@@ -42,20 +45,9 @@ export default {
|
|
|
42
45
|
};
|
|
43
46
|
|
|
44
47
|
const recursiveFormField = $node => {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
$node.children.forEach($leaf => {
|
|
49
|
-
if ($leaf.component?.ctx?.validate) {
|
|
50
|
-
validationFields.push($leaf.component?.ctx);
|
|
51
|
-
} else if ($leaf.children && $leaf.children.length > 1) {
|
|
52
|
-
recursiveFormField($leaf);
|
|
53
|
-
} else if ($leaf.children && $leaf.children[0] && $leaf.children[0].validate) {
|
|
54
|
-
validationFields.push($leaf.children[0]);
|
|
55
|
-
} else if ($leaf.validatable) {
|
|
56
|
-
validationFields.push($leaf);
|
|
57
|
-
} else {
|
|
58
|
-
recursiveFormField($leaf);
|
|
48
|
+
walk($node, item => {
|
|
49
|
+
if (item.validate) {
|
|
50
|
+
validationFields.push(item);
|
|
59
51
|
}
|
|
60
52
|
});
|
|
61
53
|
};
|
|
@@ -71,7 +63,7 @@ export default {
|
|
|
71
63
|
const restartValidation = () => {
|
|
72
64
|
validationFields = [];
|
|
73
65
|
errorsBag = {};
|
|
74
|
-
recursiveFormField(instance);
|
|
66
|
+
recursiveFormField(instance.subTree);
|
|
75
67
|
validationFields.forEach(field => {
|
|
76
68
|
watchInput(field);
|
|
77
69
|
field.validate(field.value);
|
|
@@ -82,7 +74,7 @@ export default {
|
|
|
82
74
|
const restart = () => {
|
|
83
75
|
validationFields = [];
|
|
84
76
|
errorsBag = {};
|
|
85
|
-
recursiveFormField(instance);
|
|
77
|
+
recursiveFormField(instance.subTree);
|
|
86
78
|
validationFields.forEach(field => {
|
|
87
79
|
watchInput(field);
|
|
88
80
|
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
|
|
3
|
+
export default function walk(vnode: VNode, cb: Function) {
|
|
4
|
+
if (!vnode) return;
|
|
5
|
+
|
|
6
|
+
if (vnode.component) {
|
|
7
|
+
const proxy = vnode.component.proxy;
|
|
8
|
+
if (proxy) cb(vnode.component.proxy);
|
|
9
|
+
walk(vnode.component.subTree, cb);
|
|
10
|
+
} else if (vnode.shapeFlag & 16) {
|
|
11
|
+
const vnodes = vnode.children;
|
|
12
|
+
if (vnodes.length) {
|
|
13
|
+
const length = vnodes.length as number;
|
|
14
|
+
for (let i = 0; i < length; i++) {
|
|
15
|
+
walk(vnodes[i], cb);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|