Skip to content

Commit 2e6f241

Browse files
webdevnerdstuffwebdevnerdstuff
committed
[DEV] Validation refactoring
1 parent 2c51ba2 commit 2e6f241

File tree

30 files changed

+135
-397
lines changed

30 files changed

+135
-397
lines changed

‎src/plugin/VStepperForm.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,9 @@ import { Form } from 'vee-validate';
155155
import type { PrivateFormContext } from 'vee-validate';
156156
import type {
157157
ComputedClasses,
158-
EmitValidateEventPayload,
159158
Field,
160159
Page,
161160
Props,
162-
SchemaField,
163161
Settings,
164162
SummaryColumns,
165163
} from '@/plugin/types';
@@ -169,11 +167,11 @@ import {
169167
} from './composables/classes';
170168
import componentEmits from './utils/emits';
171169
import { globalOptions } from './';
170+
import { toTypedSchema } from '@vee-validate/yup';
172171
import PageContainer from './components/shared/PageContainer.vue';
173172
import PageReviewContainer from './components/shared/PageReviewContainer.vue';
174173
import { useMergeProps } from './composables/helpers';
175174
import { watchDeep } from '@vueuse/core';
176-
import { useGetValidationSchema } from './composables/validation';
177175
178176
179177
const attrs = useAttrs();
@@ -309,7 +307,7 @@ function headerItemDisabled(page: Page): boolean {
309307
310308
311309
// & ------------------------------------------------ Validation //
312-
const validateSchema = props.schema ?? useGetValidationSchema(allFieldsArray.value as SchemaField[]);
310+
const validateSchema = computed(() => toTypedSchema(props.schema as Props['schema']));
313311
const fieldsHaveErrors = ref(false);
314312
const currentPageHasErrors = ref(false);
315313
const errorPageIndexes = ref<number[]>([]);
@@ -369,7 +367,7 @@ function checkForPageErrors(errors: ValidateResult['errors'], source: string, ne
369367
370368
371369
// ------------------------ Set Page to Errors //
372-
function setPageToError(pageIndex: EmitValidateEventPayload['pageIndex'], page?: Page, source = 'submit'): void {
370+
function setPageToError(pageIndex: number, page?: Page, source = 'submit'): void {
373371
currentPageHasErrors.value = true;
374372
375373
if (page && source === 'submit') {
@@ -385,7 +383,9 @@ function setPageToError(pageIndex: EmitValidateEventPayload['pageIndex'], page?:
385383
// ------------------------ Validation callback from fields //
386384
function onFieldValidate(field: Field, next: () => void): void {
387385
const errors = parentForm.value?.errors as unknown as ValidateResult['errors'];
388-
const shouldAutoPage = (field.autoPage ? next : null) as () => void;
386+
const shouldAutoPage = (field.autoPage || settings.value.autoPage ? next : null) as () => void;
387+
388+
// ! Auto page not working //
389389
390390
checkForPageErrors(errors, 'field', shouldAutoPage);
391391
}

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,14 @@
2828

2929
<script lang="ts" setup>
3030
import type { VSFAutocompleteProps } from './index';
31-
import type { FieldValidator } from 'vee-validate';
3231
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
3332
import { useBindingSettings } from '../../../composables/bindings';
33+
import { useOnActions } from '../../../composables/validation';
3434
import FieldLabel from '../../shared/FieldLabel.vue';
3535
import { Field } from 'vee-validate';
3636
3737
38-
const emit = defineEmits([
39-
'next',
40-
'validate',
41-
]);
38+
const emit = defineEmits(['validate']);
4239
const modelValue = defineModel<any>();
4340
const props = defineProps<VSFAutocompleteProps>();
4441
@@ -51,18 +48,14 @@ const fieldRequired = computed(() => {
5148
5249
5350
// ------------------------- Validate On Actions //
54-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
55-
const validateOn = field.validateOn || settings.validateOn;
56-
const isBlur = action === 'blur' && validateOn === 'blur';
57-
const isInput = action === 'input' && validateOn === 'input';
58-
const isChange = action === 'change' && validateOn === 'change';
59-
60-
if (isBlur || isInput || isChange) {
61-
validate()
62-
.then(() => {
63-
emit('validate', field);
64-
});
65-
}
51+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
52+
useOnActions({
53+
action,
54+
emit,
55+
field,
56+
settingsValidateOn: settings.validateOn,
57+
validate,
58+
});
6659
}
6760
6861

‎src/plugin/components/fields/VSFAutocomplete/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ interface InternalField extends Omit<Field,
2121

2222
export interface VSFAutocompleteProps extends SharedProps {
2323
field: InternalField;
24-
pageIndex: number;
2524
}
2625

2726
export type VSFSelect = InstanceType<typeof VSFAutocomplete>;

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,14 @@
8383

8484
<script lang="ts" setup>
8585
import type { VSFCheckboxProps } from './index';
86-
import type { FieldValidator } from 'vee-validate';
8786
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
8887
import { useBindingSettings } from '../../../composables/bindings';
88+
import { useOnActions } from '../../../composables/validation';
8989
import FieldLabel from '../../shared/FieldLabel.vue';
9090
import { Field } from 'vee-validate';
9191
9292
93-
const emit = defineEmits([
94-
'next',
95-
'validate',
96-
]);
93+
const emit = defineEmits(['validate']);
9794
const modelValue = defineModel<any>();
9895
const props = defineProps<VSFCheckboxProps>();
9996
@@ -106,18 +103,14 @@ const fieldRequired = computed(() => {
106103
107104
108105
// ------------------------- Validate On Actions //
109-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
110-
const validateOn = field.validateOn || settings.validateOn;
111-
const isBlur = action === 'blur' && validateOn === 'blur';
112-
const isInput = action === 'input' && validateOn === 'input';
113-
const isChange = action === 'change' && validateOn === 'change';
114-
115-
if (isBlur || isInput || isChange) {
116-
validate()
117-
.then(() => {
118-
emit('validate', field);
119-
});
120-
}
106+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
107+
useOnActions({
108+
action,
109+
emit,
110+
field,
111+
settingsValidateOn: settings.validateOn,
112+
validate,
113+
});
121114
}
122115
123116

‎src/plugin/components/fields/VSFCheckbox/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ interface InternalField extends Field {
1818

1919
export interface VSFCheckboxProps extends SharedProps {
2020
field: InternalField;
21-
pageIndex: number;
2221
}
2322

2423
export type VSFCheckbox = InstanceType<typeof VSFCheckbox>;

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

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,14 @@
2727

2828
<script lang="ts" setup>
2929
import type { VSFColorFieldProps } from './index';
30-
import type { FieldValidator } from 'vee-validate';
3130
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
3231
import { useBindingSettings } from '../../../composables/bindings';
32+
import { useOnActions } from '../../../composables/validation';
3333
import FieldLabel from '../../shared/FieldLabel.vue';
34-
import { Field } from 'vee-validate';
34+
import { Field } from 'vee-validate';;
3535
3636
37-
const emit = defineEmits([
38-
'next',
39-
'validate',
40-
]);
37+
const emit = defineEmits(['validate']);
4138
const modelValue = defineModel<any>();
4239
const props = defineProps<VSFColorFieldProps>();
4340
@@ -50,18 +47,14 @@ const fieldRequired = computed(() => {
5047
5148
5249
// ------------------------- Validate On Actions //
53-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
54-
const validateOn = field.validateOn || settings.validateOn;
55-
const isBlur = action === 'blur' && validateOn === 'blur';
56-
const isInput = action === 'input' && validateOn === 'input';
57-
const isChange = action === 'change' && validateOn === 'change';
58-
59-
if (isBlur || isInput || isChange) {
60-
validate()
61-
.then(() => {
62-
emit('validate', field);
63-
});
64-
}
50+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
51+
useOnActions({
52+
action,
53+
emit,
54+
field,
55+
settingsValidateOn: settings.validateOn,
56+
validate,
57+
});
6558
}
6659
6760

‎src/plugin/components/fields/VSFColorField/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ interface InternalField extends Omit<Field,
1818

1919
export interface VSFColorFieldProps extends SharedProps {
2020
field: InternalField;
21-
pageIndex: number;
2221
}
2322

2423
export type VSFColorField = InstanceType<typeof VSFColorField>;

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,14 @@
2828

2929
<script lang="ts" setup>
3030
import type { VSFComboboxProps } from './index';
31-
import type { FieldValidator } from 'vee-validate';
3231
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
3332
import { useBindingSettings } from '../../../composables/bindings';
33+
import { useOnActions } from '../../../composables/validation';
3434
import FieldLabel from '../../shared/FieldLabel.vue';
3535
import { Field } from 'vee-validate';
3636
3737
38-
const emit = defineEmits([
39-
'next',
40-
'validate',
41-
]);
38+
const emit = defineEmits(['validate']);
4239
const modelValue = defineModel<any>();
4340
const props = defineProps<VSFComboboxProps>();
4441
@@ -51,18 +48,14 @@ const fieldRequired = computed(() => {
5148
5249
5350
// ------------------------- Validate On Actions //
54-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
55-
const validateOn = field.validateOn || settings.validateOn;
56-
const isBlur = action === 'blur' && validateOn === 'blur';
57-
const isInput = action === 'input' && validateOn === 'input';
58-
const isChange = action === 'change' && validateOn === 'change';
59-
60-
if (isBlur || isInput || isChange) {
61-
validate()
62-
.then(() => {
63-
emit('validate', field);
64-
});
65-
}
51+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
52+
useOnActions({
53+
action,
54+
emit,
55+
field,
56+
settingsValidateOn: settings.validateOn,
57+
validate,
58+
});
6659
}
6760
6861

‎src/plugin/components/fields/VSFCombobox/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ interface InternalField extends Omit<Field,
2121

2222
export interface VSFComboboxProps extends SharedProps {
2323
field: InternalField;
24-
pageIndex: number;
2524
}
2625

2726
export type VSFSelect = InstanceType<typeof VSFCombobox>;

‎src/plugin/components/fields/VSFCustom/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ interface InternalField extends Omit<Field,
1212

1313
export interface VSFCustomProps extends SharedProps {
1414
field: InternalField;
15-
pageIndex: number;
1615
}
1716

1817
export type VSFCustom = InstanceType<typeof VSFCustom>;

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -78,16 +78,13 @@
7878

7979
<script lang="ts" setup>
8080
import type { VSFFancyRadioProps } from './index';
81-
import type { FieldValidator } from 'vee-validate';
8281
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
82+
import { useOnActions } from '../../../composables/validation';
8383
import FieldLabel from '../../shared/FieldLabel.vue';
8484
import { Field } from 'vee-validate';
8585
8686
87-
const emit = defineEmits([
88-
'next',
89-
'validate',
90-
]);
87+
const emit = defineEmits(['validate']);
9188
const modelValue = defineModel<any>();
9289
const props = defineProps<VSFFancyRadioProps>();
9390
@@ -100,18 +97,14 @@ const fieldRequired = computed(() => {
10097
10198
10299
// ------------------------- Validate On Actions //
103-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
104-
const validateOn = field.validateOn || settings.validateOn;
105-
const isBlur = action === 'blur' && validateOn === 'blur';
106-
const isInput = action === 'input' && validateOn === 'input';
107-
const isChange = action === 'change' && validateOn === 'change';
108-
109-
if (isBlur || isInput || isChange || action === 'click') {
110-
validate()
111-
.then(() => {
112-
emit('validate', field);
113-
});
114-
}
100+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
101+
useOnActions({
102+
action,
103+
emit,
104+
field,
105+
settingsValidateOn: settings.validateOn,
106+
validate,
107+
});
115108
}
116109
117110

‎src/plugin/components/fields/VSFFancyRadio/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ interface InternalField extends Omit<Field,
1717
export interface VSFFancyRadioProps extends SharedProps {
1818
density?: Field['density'] | 'expanded' | 'oversized';
1919
field: InternalField;
20-
pageIndex: number;
2120
}
2221

2322
export type VSFFancyRadio = InstanceType<typeof VSFFancyRadio>;

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

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,14 @@
2727

2828
<script lang="ts" setup>
2929
import type { VFileInputProps } from './index';
30-
import type { FieldValidator } from 'vee-validate';
3130
import type { FieldLabelProps } from '../../shared/FieldLabel.vue';
3231
import { useBindingSettings } from '../../../composables/bindings';
32+
import { useOnActions } from '../../../composables/validation';
3333
import FieldLabel from '../../shared/FieldLabel.vue';
3434
import { Field } from 'vee-validate';
3535
3636
37-
const emit = defineEmits([
38-
'next',
39-
'validate',
40-
]);
37+
const emit = defineEmits(['validate']);
4138
const modelValue = defineModel<any>();
4239
const props = defineProps<VFileInputProps>();
4340
@@ -50,18 +47,14 @@ const fieldRequired = computed(() => {
5047
5148
5249
// ------------------------- Validate On Actions //
53-
async function onActions(validate: FieldValidator<unknown>, action: string): Promise<void> {
54-
const validateOn = field.validateOn || settings.validateOn;
55-
const isBlur = action === 'blur' && validateOn === 'blur';
56-
const isInput = action === 'input' && validateOn === 'input';
57-
const isChange = action === 'change' && validateOn === 'change';
58-
59-
if (isBlur || isInput || isChange) {
60-
validate()
61-
.then(() => {
62-
emit('validate', field);
63-
});
64-
}
50+
async function onActions(validate: FieldValidateResult, action: ValidateAction): Promise<void> {
51+
useOnActions({
52+
action,
53+
emit,
54+
field,
55+
settingsValidateOn: settings.validateOn,
56+
validate,
57+
});
6558
}
6659
6760

‎src/plugin/components/fields/VSFFileInput/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ interface InternalField extends Omit<Field,
1818

1919
export interface VFileInputProps extends SharedProps {
2020
field: InternalField;
21-
pageIndex: number;
2221
}
2322

2423
export type VSFFileInput = InstanceType<typeof VSFFileInput>;

0 commit comments

Comments
 (0)