Skip to content

Commit 633329f

Browse files
webdevnerdstuffwebdevnerdstuff
committed
updating fields to use useField
1 parent 6d7a301 commit 633329f

File tree

6 files changed

+217
-256
lines changed

6 files changed

+217
-256
lines changed

‎cypress/templates/testData.ts‎

Lines changed: 7 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -221,8 +221,6 @@ const defaultFields = {
221221
name: 'hidden',
222222
type: 'hidden' as const,
223223
},
224-
225-
// -- //
226224
address: {
227225
label: 'Address',
228226
name: 'address',
@@ -312,7 +310,7 @@ const answers = {
312310
autocompleteAnimal: null,
313311
autoCompleteMultipleAnimals: null,
314312
color: null,
315-
date: null,
313+
// date: null,
316314
// file: null,
317315

318316
// ? ------------------------- Radio/Checkbox/Switch Fields //
@@ -344,69 +342,19 @@ const finalAnswer = {
344342

345343
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Less Common Fields Page //
346344
autocompleteAnimal: 'rabbit',
347-
348-
// ! Autocomplete with multiple and combobox not working correctly //
349-
// autoCompleteMultipleAnimals: ['rabbit', 'duck'],
350-
// combobox: [{ title: "Rabbit", value: "rabbit" }, { title: "Duck", value: "duck" }],
351-
352-
345+
autoCompleteMultipleAnimals: ['rabbit', 'duck'],
346+
combobox: [{ title: "Rabbit", value: "rabbit" }, { title: "Duck", value: "duck" }],
353347
color: '#804040',
354348
// date: 'Wed May 25 1977 00:00:00 GMT-0700 (Pacific Daylight Time)',
355349
// date: new Date('05/25/1977'),
356350

357351
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Radio/Checkbox/Switch Fields Page //
358-
isThisBoxChecked: true,
352+
isThisBoxChecked: 'yes',
359353
checkboxMultiple: ['option1', 'option3'],
360354
isSingleRadioSelected: 'yes',
361355
switchQuestion: 'yes',
362356
};
363357

364-
const newValidationSchema = [
365-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Common Fields Page //
366-
yupObject({
367-
firstName: yupString().required(isRequired('First Name')),
368-
lastName: yupString().required(isRequired('Last Name')),
369-
email: yupString().email('Must be a valid Email').required(isRequired('Email')),
370-
password: yupString().required(isRequired('Password'))
371-
.min(5, 'Password must have at least ${min} characters'),
372-
phone: yupString().required(isRequired('Phone')),
373-
url: yupString().required(isRequired('URL'))
374-
.url('Must be a valid URL'),
375-
number: yupNumber().required(isRequired('Number'))
376-
.min(Number(finalAnswer.number), 'Number must be at least ${min}'),
377-
description: yupString().required(isRequired('Description')),
378-
selectAnimal: yupString().required(isRequired('Select Animal')),
379-
selectsMultipleAnimals: yupArray().required(isRequired('Select Multiple Animals')),
380-
}),
381-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Less Common Fields Page //
382-
yupObject({
383-
autocompleteAnimal: yupString().required(isRequired('Autocomplete Animal')),
384-
385-
// ! Autocomplete with multiple and combobox not working correctly //
386-
// autoCompleteMultipleAnimals: yupArray().required(isRequired('Autocomplete Multiple Animal')),
387-
// combobox: yupArray().required(isRequired('Combobox'))
388-
// .min(2, 'Must select at least ${min} options'),
389-
390-
color: yupString().required(isRequired('Color')),
391-
// date: yupString().required(isRequired('Date')),
392-
}),
393-
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Radio/Checkbox/Switch Fields Page //
394-
yupObject({
395-
isThisBoxChecked: yupString().required(isRequired('Checkbox Single')),
396-
checkboxMultiple: yupArray().required(isRequired('Checkbox Multiple'))
397-
.min(2, 'Must select at least ${min} options'),
398-
isSingleRadioSelected: yupString().required(isRequired('Radio Single'))
399-
.matches(/(yes|no)/, 'Only "yes" or "no" is allowed'),
400-
switchQuestion: yupString().required(isRequired('Switch Question'))
401-
.matches(/(yes)/, 'Only "yes" is allowed'),
402-
403-
// buttonField: yupArray().required(isRequired('Button Field')),
404-
// buttonField: yupString().required(isRequired('Button Field')).matches(/(yes|no)/, 'Only "yes" or "no" is allowed'),
405-
// .matches(/(^true)/, isRequired('Checkbox Single')),
406-
// .matches(/(^false)/, 'Checkbox must be not false'),
407-
}),
408-
];
409-
410358
const validationSchema = yupObject({
411359
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Common Fields Page //
412360
firstName: yupString().required(isRequired('First Name')),
@@ -425,12 +373,9 @@ const validationSchema = yupObject({
425373

426374
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Less Common Fields Page //
427375
autocompleteAnimal: yupString().required(isRequired('Autocomplete Animal')),
428-
429-
// ! Autocomplete with multiple and combobox not working correctly //
430-
// autoCompleteMultipleAnimals: yupArray().required(isRequired('Autocomplete Multiple Animal')),
431-
// combobox: yupArray().required(isRequired('Combobox'))
432-
// .min(2, 'Must select at least ${min} options'),
433-
376+
autoCompleteMultipleAnimals: yupArray().required(isRequired('Autocomplete Multiple Animal')),
377+
combobox: yupArray().required(isRequired('Combobox'))
378+
.min(2, 'Must select at least ${min} options'),
434379
color: yupString().required(isRequired('Color')),
435380
// date: yupString().required(isRequired('Date')),
436381

@@ -699,7 +644,6 @@ const navigationTest = {
699644
};
700645

701646

702-
703647
export {
704648
answers,
705649
buttonFieldOptions,
@@ -709,7 +653,6 @@ export {
709653
finalAnswer,
710654
items,
711655
navigationTest,
712-
newValidationSchema,
713656
stepperProps,
714657
validationSchema,
715658
};

‎src/plugin/__tests__/VStepperForm.cy.ts‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,8 @@ const pages = [
3232
title: 'Less Common Fields',
3333
fields: [
3434
defaultFields.autocomplete,
35-
36-
// ! Autocomplete with multiple and combobox not working correctly //
37-
// defaultFields.autocompleteMultiple,
38-
// defaultFields.combobox,
35+
defaultFields.autocompleteMultiple,
36+
defaultFields.combobox,
3937
{
4038
...defaultFields.color,
4139
readonlyInput: true,
@@ -58,10 +56,6 @@ const pages = [
5856
defaultFields.switch,
5957
],
6058
},
61-
// {
62-
// title: 'Page 3',
63-
// fields: [],
64-
// },
6559
{
6660
isSummary: true,
6761
text: "Here's the data you've entered. Feel free to review it.",
@@ -156,7 +150,7 @@ describe('Stepper Form', () => {
156150
}
157151

158152
// ~ -------------------------------------------------- Test Fields //
159-
function testFields(field: Field, index: number, pageIndex: number): void {
153+
function testFields(field: Field, index: number): void {
160154
let fieldName = `${field.name}`;
161155
cy.get('@appWrap').click();
162156

@@ -470,7 +464,7 @@ describe('Stepper Form', () => {
470464
// Fail by not selecting enough options //
471465
cy.get(fieldName)
472466
.find('[type="checkbox"]')
473-
.check(['option1']);
467+
.check('option1');
474468

475469
cy.get(fieldName)
476470
.parent()
@@ -480,7 +474,7 @@ describe('Stepper Form', () => {
480474

481475
cy.get(fieldName)
482476
.find('[type="checkbox"]')
483-
.check(['option3']);
477+
.check('option3');
484478

485479
cy.get('@stepperForm')
486480
.should('not.contain', 'Must select at least 2 options');
@@ -544,10 +538,10 @@ describe('Stepper Form', () => {
544538
}
545539

546540
// Loop through each page and test each fields //
547-
Object.values(pages).forEach((page, pageIndex) => {
541+
Object.values(pages).forEach((page) => {
548542
if (page.fields) {
549543
Object.values(page?.fields).forEach((field, index) => {
550-
testFields(field, index, pageIndex);
544+
testFields(field, index);
551545
});
552546

553547
// ? Need to use realClick to trigger the click event or the next button will be disabled //
@@ -582,10 +576,10 @@ describe('Stepper Form', () => {
582576
cy.should(() => expect(spy).to.have.been.called);
583577

584578
// ? Check the final @submit event payload //
585-
// cy.get('@submit').its('args').then((args) => {
586-
// const eventPayload = args[0][0];
587-
// expect(eventPayload).to.deep.equal(DATA.finalAnswer);
588-
// });
579+
cy.get('@submit').its('args').then((args) => {
580+
const eventPayload = args[0][0];
581+
expect(eventPayload).to.deep.equal(DATA.finalAnswer);
582+
});
589583

590584
});
591585
});

‎src/plugin/components/fields/CommonField/CommonField.vue‎

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,28 @@
11
<template>
2-
3-
<Field
4-
v-slot="props"
5-
v-model="modelValue"
6-
:name="field.name"
7-
:validate-on-blur="fieldValidateOn === 'blur'"
8-
:validate-on-change="fieldValidateOn === 'change'"
9-
:validate-on-input="fieldValidateOn === 'input'"
10-
:validate-on-model-update="false"
2+
<component
3+
:is="component"
4+
v-model="value"
5+
v-bind="{ ...boundSettings }"
6+
:data-cy="`vsf-field-${field.name}`"
7+
:error="hasErrors"
8+
:error-messages="errorMessage || field.errorMessages"
9+
:items="fieldItems"
10+
@blur="onActions('blur')"
11+
@change="onActions('change')"
12+
@input="onActions('input')"
1113
>
12-
<component
13-
:is="component"
14-
v-bind="{ ...boundSettings, ...props.field }"
15-
:data-cy="`vsf-field-${field.name}`"
16-
:error="hasErrors"
17-
:error-messages="props.errorMessage || field.errorMessages"
18-
:items="fieldItems"
19-
@blur="onActions(props.validate, 'blur')"
20-
@change="onActions(props.validate, 'change')"
21-
@input="onActions(props.validate, 'input')"
22-
>
23-
<template #label>
24-
<FieldLabel
25-
:label="field.label"
26-
:required="fieldRequired"
27-
/>
28-
</template>
29-
</component>
30-
</Field>
14+
<template #label>
15+
<FieldLabel
16+
:label="field.label"
17+
:required="fieldRequired"
18+
/>
19+
</template>
20+
</component>
3121
</template>
3222

3323

3424
<script lang="ts" setup>
35-
import { Field } from 'vee-validate';
25+
import { useField } from 'vee-validate';
3626
import type { CommonFieldProps } from './index';
3727
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
3828
import { useBindingSettings } from '../../../composables/bindings';
@@ -53,15 +43,29 @@ const fieldRequired = computed<FieldLabelProps['required']>(() => {
5343
const fieldValidateOn = computed(() => field?.validateOn ?? settings.value.validateOn);
5444
const originalValue = modelValue.value;
5545
46+
47+
const { errorMessage, setValue, validate, value } = useField(
48+
field.name,
49+
undefined,
50+
{
51+
initialValue: modelValue.value,
52+
validateOnBlur: fieldValidateOn.value === 'blur',
53+
validateOnChange: fieldValidateOn.value === 'change',
54+
validateOnInput: fieldValidateOn.value === 'input',
55+
validateOnModelUpdate: fieldValidateOn.value != null,
56+
},
57+
);
58+
5659
onUnmounted(() => {
5760
if (!settings.value.keepValuesOnUnmount) {
5861
modelValue.value = originalValue;
62+
setValue(originalValue);
5963
}
6064
});
6165
6266
6367
// ------------------------- Validate On Actions //
64-
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
68+
async function onActions(action: ValidateAction): Promise<void> {
6569
await useOnActions({
6670
action,
6771
emit,

‎src/plugin/components/fields/VSFButtonField/VSFButtonField.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ const buttonClass = computed(() => {
424424
return {};
425425
});
426426
427-
const buttonClassAdditional = (option) => {
427+
const buttonClassAdditional = (option: Option) => {
428428
return {
429429
[`${option?.class}`]: true,
430430
[`${field.selectedClass}`]: isActive(option.value) && field.selectedClass != null,

0 commit comments

Comments
 (0)