Skip to content

Commit 87eb372

Browse files
webdevnerdstuffwebdevnerdstuff
committed
fixing field slot issues
1 parent c62986b commit 87eb372

File tree

7 files changed

+62
-103
lines changed

7 files changed

+62
-103
lines changed

‎cypress.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,5 @@ export default defineConfig({
2424
viewportWidth: 1920,
2525
},
2626

27-
numTestsKeptInMemory: 0,
27+
// numTestsKeptInMemory: 0,
2828
});

‎cypress/templates/testData.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,6 @@ const defaultFields = {
144144
name: 'combobox',
145145
placeholder: 'Select an item',
146146
type: 'combobox' as const,
147-
variant: 'outlined',
148147
},
149148
color: {
150149
label: 'Color',

‎src/documentation/components/examples/ConditionalFieldExample.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<VStepperForm
3-
v-model="answers"
3+
v-model="formAnswers"
44
:pages="pages"
55
@submit="submitForm"
66
/>
77

88
<AnswersDialog
99
v-model="dialog"
10-
:answers="answers"
10+
:answers="formAnswers"
1111
/>
1212
</template>
1313

@@ -17,7 +17,7 @@ import AnswersDialog from '../AnswersDialog.vue';
1717
1818
1919
const dialog = ref(false);
20-
const answers = ref({
20+
const formAnswers = ref({
2121
bar: null,
2222
conditionalParent: null,
2323
foo: null,
@@ -46,16 +46,16 @@ const pages = [
4646
label: 'Foo',
4747
name: 'foo',
4848
type: 'text' as const,
49-
when() {
50-
return answers.value.conditionalParent === 'foo';
49+
when(answers: any) {
50+
return answers.conditionalParent === 'foo';
5151
},
5252
},
5353
{
5454
label: 'Bar',
5555
name: 'bar',
5656
type: 'text' as const,
57-
when() {
58-
return answers.value.conditionalParent === 'bar';
57+
when(answers: any) {
58+
return answers.conditionalParent === 'bar';
5959
},
6060
},
6161
],
@@ -68,7 +68,7 @@ function submitForm(): void {
6868
6969
const templateCode = `<template>
7070
<VStepperForm
71-
v-model="answers"
71+
v-model="formAnswers"
7272
:pages="pages"
7373
@submit="submitForm"
7474
/>
@@ -79,7 +79,7 @@ const scriptCode = `\<script setup\>
7979
import { ref } from 'vue';
8080
8181
82-
const answers = ref({
82+
const formAnswers = ref({
8383
bar: null,
8484
conditionalParent: null,
8585
foo: null,
@@ -108,16 +108,16 @@ const pages = [
108108
label: 'Foo',
109109
name: 'foo',
110110
type: 'text' as const,
111-
when() {
112-
return answers.value.conditionalParent === 'foo';
111+
when(answers) {
112+
return answers.conditionalParent === 'foo';
113113
},
114114
},
115115
{
116116
label: 'Bar',
117117
name: 'bar',
118118
type: 'text' as const,
119-
when() {
120-
return answers.value.conditionalParent === 'bar';
119+
when(answers) {
120+
return answers.conditionalParent === 'bar';
121121
},
122122
},
123123
],

‎src/playground/configs/templates/PlaygroundPage.vue‎

Lines changed: 25 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
#[`field.slotField`]="props"
1010
>
1111
<v-text-field
12-
v-model="allFieldsExample.answers.slotField"
1312
v-bind="props.field"
1413
@blur="props.blur()"
1514
@change="props.change()"
1615
@input="props.input()"
16+
@update:modelValue="props.onUpdate($event)"
1717
>
1818
<template #label>
1919
<component
@@ -66,6 +66,9 @@ const keys = [
6666
'conditionalPage',
6767
];
6868
69+
70+
71+
6972
// ? Change the key to test different examples //
7073
const answerAndPagesKey = keys[0];
7174
@@ -283,33 +286,7 @@ const customSlots = [
283286
// & ------------------------- All Fields Example //
284287
const allFieldsExample = reactive({
285288
answers: {
286-
autocomplete: undefined,
287-
// autocomplete: 'foo',
288-
buttonField: [],
289-
checkboxMultiple: undefined,
290-
// checkboxMultiple: ['option1', 'option3'],
291-
checkboxSingle: null,
292-
// checkboxSingle: 'yes',
293-
color: '#ff0000',
294-
// combobox: null,
295-
// combobox: 'Foo',
296-
// combobox: 'foo',
297-
combobox: null,
298-
// combobox: { title: 'Foo', value: 'foo' },
299-
300-
customBar: null,
301-
desc: 'Hello World',
302-
email: null,
303-
file: null,
304-
name: null,
305-
// radio: 'option1',
306-
radio: null,
307-
// radioMultiple: ['option1', 'option3'],
308-
// selectField: null,
309-
selectField: 'foo',
310289
slotField: null,
311-
switchQuestion: true,
312-
// switchQuestion: 'yes',
313290
},
314291
formSettings: {
315292
fieldColumns: {
@@ -319,7 +296,7 @@ const allFieldsExample = reactive({
319296
xl: 6,
320297
},
321298
// headerTooltips: true,
322-
jumpAhead: true,
299+
// jumpAhead: true,
323300
summaryColumns: { sm: 6 },
324301
// tooltipLocation: 'bottom',
325302
// tooltipTransition: 'fab-transition',
@@ -346,11 +323,11 @@ const allFieldsExample = reactive({
346323
{ ...autocompleteProps },
347324
{ ...comboboxProps },
348325
{ ...colorFieldProps },
349-
350326
],
351327
title: 'Less Common Fields',
352328
},
353329
{
330+
editable: false,
354331
fields: [
355332
{ ...checkboxMultipleProps },
356333
{ ...checkboxSingleProps },
@@ -557,14 +534,14 @@ const conditionalPageExample = reactive({
557534
}),
558535
});
559536
560-
// & v Conditional Field Example //
561-
const conditionalExample = reactive({
537+
// & ------------------------- Conditional Field Example //
538+
const conditionalFieldExample = reactive({
562539
answers: {
563-
aConditional: null,
564-
bConditional: null,
565-
cConditional: null,
566-
conditionalParent: null,
567-
fooQuestion: null,
540+
aConditional: undefined,
541+
bConditional: undefined,
542+
cConditional: undefined,
543+
conditionalParent: undefined,
544+
fooQuestion: undefined,
568545
},
569546
formSettings: {
570547
title: 'Conditional Field Example',
@@ -629,6 +606,9 @@ const conditionalExample = reactive({
629606
whenParentName: 'conditionalParent',
630607
},
631608
],
609+
when(answers: any) {
610+
return answers?.conditionalParent === 'c';
611+
},
632612
},
633613
],
634614
validation: yupObject({
@@ -657,26 +637,29 @@ function isRequired(field: string) {
657637
}
658638
659639
const formAnswers = reactive({
660-
allFields: { ...allFieldsExample.answers, ...DATA.answers },
661-
conditionalField: { ...conditionalExample.answers, ...DATA.answers },
662-
conditionalPage: { ...conditionalPageExample.answers, ...DATA.answers },
640+
allFields: {
641+
...allFieldsExample.answers,
642+
// ...DATA.answers,
643+
},
644+
conditionalField: conditionalFieldExample.answers,
645+
conditionalPage: conditionalPageExample.answers,
663646
});
664647
665648
const formPages = {
666649
allFields: allFieldsExample.pages,
667-
conditionalField: conditionalExample.pages,
650+
conditionalField: conditionalFieldExample.pages,
668651
conditionalPage: conditionalPageExample.pages,
669652
};
670653
671654
const formSchemas = {
672655
allFields: allFieldsExample.validation,
673-
conditionalField: conditionalExample.validation,
656+
conditionalField: conditionalFieldExample.validation,
674657
conditionalPage: conditionalPageExample.validation,
675658
};
676659
677660
const formFormSettings = {
678661
allFields: allFieldsExample.formSettings,
679-
conditionalField: conditionalExample.formSettings,
662+
conditionalField: conditionalFieldExample.formSettings,
680663
conditionalPage: conditionalPageExample.formSettings,
681664
};
682665

‎src/plugin/VStepperForm.vue‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,7 @@ Object.values(pages).forEach((p: Page) => {
240240
}
241241
});
242242
243-
243+
// TODO: Maybe add vertical stepper when out of Vuetify labs //
244244
// const StepperComponent = markRaw(props.direction === 'vertical' ? VStepperVertical : VStepper);
245245
// console.log('StepperComponent', StepperComponent);
246246
@@ -264,10 +264,6 @@ onMounted(() => {
264264
// -------------------------------------------------- Data //
265265
const modelValue = defineModel<any>();
266266
267-
watchDeep(modelValue, () => {
268-
callbacks();
269-
});
270-
271267
const stepperModel = ref(1);
272268
273269
const currentPageIdx = computed(() => stepperModel.value - 1);
@@ -375,7 +371,6 @@ function headerItemEnabled(page: Page): boolean {
375371
const pageEditable = page.editable !== false;
376372
const pageNotEditable = page.editable === false;
377373
const currentPageEditable = currentPages[currentPageIdx.value]?.editable !== false;
378-
// const currentPageNotEditable = currentPages[currentPageIdx.value]?.editable === false;
379374
const lastPageIdx = currentPages.length - 1;
380375
381376
const previousPageIdx = pageIdx - 1;
@@ -386,31 +381,6 @@ function headerItemEnabled(page: Page): boolean {
386381
const nextPageEditable = currentPages[nextPageIdx]?.editable !== false;
387382
const nextPageNotEditable = currentPages[nextPageIdx]?.editable === false;
388383
389-
// const debug = true;
390-
391-
// if (debug) {
392-
// console.groupCollapsed('page', page.title);
393-
// console.log('previousPageIdx\t', previousPageIdx);
394-
// console.log('currentPageIdx\t', currentPageIdx.value);
395-
// console.log('nextPageIdx\t\t', nextPageIdx);
396-
397-
// console.log('lastPageIdx\t\t', lastPageIdx);
398-
// console.log('pageIdx\t\t\t', pageIdx);
399-
// console.log('');
400-
// console.log('pageEditable\t\t\t', pageEditable);
401-
// console.log('pageNotEditable\t\t\t', pageNotEditable);
402-
// console.log('currentPageEditable\t\t', currentPageEditable);
403-
// console.log('currentPageNotEditable\t', currentPageNotEditable);
404-
// console.log('previousPageEditable\t', previousPageEditable);
405-
// console.log('previousPageNotEditable\t', previousPageNotEditable);
406-
// console.log('nextPageEditable\t\t', nextPageEditable);
407-
// console.log('nextPageNotEditable\t\t', nextPageNotEditable);
408-
// console.log('');
409-
// console.log('getFirstAndLastEditableFalse.value\t\t', { firstNonEditableIndex, lastNonEditableIndex });
410-
// console.groupEnd();
411-
// console.log('');
412-
// }
413-
414384
// & Always True //
415385
// Always set current page to editable //
416386
if (currentPageIdx.value === pageIdx) {
@@ -475,6 +445,12 @@ const $useForm = useForm({
475445
valueOnMount: settings.value?.validateOnMount,
476446
});
477447
448+
// ? Make sure to update the modelValue when the form values change //
449+
watchDeep($useForm.values, () => {
450+
modelValue.value = $useForm.values;
451+
callbacks();
452+
});
453+
478454
479455
// ------------------------ Run Validation //
480456
function headerCheckPreviousStepValidation(index: number): void {
@@ -615,7 +591,6 @@ function onFieldValidate(field: Field, next: () => void): void {
615591
$useForm.validateField(field.name, {}, { name: field.name })
616592
.then(() => {
617593
checkForPageErrors($useForm.errorBag.value, 'field', shouldAutoPage);
618-
619594
});
620595
}
621596
@@ -639,7 +614,7 @@ const computedPages = computed<Page[]>(() => {
639614
localPage.visible = true;
640615
641616
if (localPage.when) {
642-
const enabledPage: boolean = (localPage.when as (value: any) => boolean)(modelValue.value);
617+
const enabledPage: boolean = (localPage.when as (value: any) => boolean)($useForm.values);
643618
644619
if (pages[pageIdx]) {
645620
pages[pageIdx].visible = enabledPage;
@@ -651,11 +626,12 @@ const computedPages = computed<Page[]>(() => {
651626
});
652627
653628
function whenCallback(): void {
654-
Object.values(computedPages.value).forEach((page: Page, pageIdx: number) => {
629+
Object.values(pages).forEach((page: Page, pageIdx: number) => {
655630
if (page.fields) {
656631
Object.values(page.fields).forEach((field: Field, fieldIdx) => {
632+
657633
if (field.when) {
658-
const enabledField: boolean = field.when(modelValue.value);
634+
const enabledField: boolean = field.when($useForm.values);
659635
const indexPage = computedPages.value[pageIdx];
660636
661637
if (indexPage?.fields && indexPage?.fields[fieldIdx]) {

‎src/plugin/__tests__/slots/FieldSlots.cy.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ describe('Stepper Form Slots', () => {
110110
onBlur: slotProps.blur,
111111
onChange: slotProps.change,
112112
onInput: slotProps.input,
113-
'onUpdate:modelValue': (value: any) => {
114-
answers.value.firstSlot = value;
113+
'onUpdate:modelValue': (value) => {
114+
slotProps.onUpdate(value);
115115
},
116116
...slotProps.field,
117117
},
@@ -127,8 +127,8 @@ describe('Stepper Form Slots', () => {
127127
onBlur: slotProps.blur,
128128
onChange: slotProps.change,
129129
onInput: slotProps.input,
130-
'onUpdate:modelValue': (value: any) => {
131-
answers.value.secondSlot = value;
130+
'onUpdate:modelValue': (value) => {
131+
slotProps.onUpdate(value);
132132
},
133133
...slotProps.field,
134134
},
@@ -144,8 +144,8 @@ describe('Stepper Form Slots', () => {
144144
onBlur: slotProps.blur,
145145
onChange: slotProps.change,
146146
onInput: slotProps.input,
147-
'onUpdate:modelValue': (value: any) => {
148-
answers.value.thirdSlot = value;
147+
'onUpdate:modelValue': (value) => {
148+
slotProps.onUpdate(value);
149149
},
150150
...slotProps.field,
151151
},

0 commit comments

Comments
 (0)