Skip to content

Commit 0c3c34b

Browse files
webdevnerdstuffwebdevnerdstuff
committed
adding conditional parent example
1 parent 8e27c65 commit 0c3c34b

File tree

4 files changed

+249
-26
lines changed

4 files changed

+249
-26
lines changed

src/documentation/components/examples/ConditionalExample.vue renamed to src/documentation/components/examples/ConditionalFieldExample.vue

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,43 +19,43 @@ import AnswersDialog from '../AnswersDialog.vue';
1919
const dialog = ref(false);
2020
const answers = ref({
2121
bar: null,
22+
conditionalParent: null,
2223
foo: null,
23-
radioOption: null,
2424
});
2525
2626
const pages = [
2727
{
2828
fields: [
2929
{
3030
inline: true,
31-
label: 'Select One',
32-
name: 'radioOption',
33-
options: [
31+
items: [
3432
{
35-
label: 'Foo',
33+
title: 'Foo',
3634
value: 'foo',
3735
},
3836
{
39-
label: 'Bar',
37+
title: 'Bar',
4038
value: 'bar',
4139
},
4240
],
43-
type: 'radio' as const,
41+
label: 'Select One',
42+
name: 'conditionalParent',
43+
type: 'select' as const,
4444
},
4545
{
4646
label: 'Foo',
4747
name: 'foo',
4848
type: 'text' as const,
4949
when() {
50-
return answers.value.radioOption === 'foo';
50+
return answers.value.conditionalParent === 'foo';
5151
},
5252
},
5353
{
5454
label: 'Bar',
5555
name: 'bar',
5656
type: 'text' as const,
5757
when() {
58-
return answers.value.radioOption === 'bar';
58+
return answers.value.conditionalParent === 'bar';
5959
},
6060
},
6161
],
@@ -81,8 +81,8 @@ import { ref } from 'vue';
8181
8282
const answers = ref({
8383
bar: null,
84+
conditionalParent: null,
8485
foo: null,
85-
radioOption: null,
8686
});
8787
8888
const pages = [
@@ -91,7 +91,7 @@ const pages = [
9191
{
9292
inline: true,
9393
label: 'Select One',
94-
name: 'radioOption',
94+
name: 'conditionalParent',
9595
options: [
9696
{
9797
label: 'Foo',
@@ -102,22 +102,22 @@ const pages = [
102102
value: 'bar',
103103
},
104104
],
105-
type: 'radio' as const,
105+
type: 'select' as const,
106106
},
107107
{
108108
label: 'Foo',
109109
name: 'foo',
110110
type: 'text' as const,
111111
when() {
112-
return answers.value.radioOption === 'foo';
112+
return answers.value.conditionalParent === 'foo';
113113
},
114114
},
115115
{
116116
label: 'Bar',
117117
name: 'bar',
118118
type: 'text' as const,
119119
when() {
120-
return answers.value.radioOption === 'bar';
120+
return answers.value.conditionalParent === 'bar';
121121
},
122122
},
123123
],
@@ -131,8 +131,6 @@ function submitForm() {
131131
132132
defineExpose({
133133
exampleCode: {
134-
desc: 'The field <code class="ic">when</code> prop allows you to show or hide form fields based on certain conditions dynamically. It works by evaluating a condition and displaying the field only when that condition is met. The Yup schema also has ',
135-
name: 'Conditional Fields',
136134
script: scriptCode,
137135
template: templateCode,
138136
},

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<template>
2+
<VStepperForm
3+
v-model="answers"
4+
:pages="pages"
5+
@submit="submitForm"
6+
/>
7+
8+
<AnswersDialog
9+
v-model="dialog"
10+
:answers="answers"
11+
/>
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { ref } from 'vue';
16+
import AnswersDialog from '../AnswersDialog.vue';
17+
18+
19+
const dialog = ref(false);
20+
const answers = ref({
21+
bar: null,
22+
conditionalParent: null,
23+
foo: null,
24+
qux: null,
25+
});
26+
27+
const pages = [
28+
{
29+
fields: [
30+
{
31+
clearable: true,
32+
items: [
33+
{
34+
title: 'Foo',
35+
value: 'foo',
36+
},
37+
{
38+
title: 'Bar',
39+
value: 'bar',
40+
},
41+
{
42+
title: 'Qux',
43+
value: 'qux',
44+
},
45+
],
46+
label: 'Select Option',
47+
name: 'conditionalParent',
48+
type: 'select' as const,
49+
variant: 'outlined',
50+
},
51+
],
52+
title: 'Page 1',
53+
},
54+
{
55+
fields: [
56+
{
57+
label: 'Foo',
58+
name: 'foo',
59+
type: 'text' as const,
60+
variant: 'outlined',
61+
},
62+
],
63+
title: 'Foo Page',
64+
when: (answers: any) => {
65+
return answers?.conditionalParent === 'foo';
66+
},
67+
},
68+
{
69+
fields: [
70+
{
71+
label: 'Bar',
72+
name: 'bar',
73+
type: 'text' as const,
74+
variant: 'outlined',
75+
},
76+
],
77+
title: 'Bar Page',
78+
when: (answers: any) => {
79+
return answers?.conditionalParent === 'bar';
80+
},
81+
},
82+
{
83+
fields: [
84+
{
85+
label: 'Qux',
86+
name: 'qux',
87+
type: 'text' as const,
88+
variant: 'outlined',
89+
},
90+
],
91+
title: 'Qux Page',
92+
when: (answers: any) => {
93+
return answers?.conditionalParent === 'qux';
94+
},
95+
},
96+
];
97+
98+
function submitForm(): void {
99+
dialog.value = true;
100+
}
101+
102+
const templateCode = `<template>
103+
<VStepperForm
104+
v-model="answers"
105+
:pages="pages"
106+
@submit="submitForm"
107+
/>
108+
</template>
109+
`;
110+
111+
const scriptCode = `\<script setup\>
112+
import { ref } from 'vue';
113+
114+
115+
const answers = ref({
116+
bar: null,
117+
conditionalParent: null,
118+
foo: null,
119+
qux: null,
120+
});
121+
122+
const pages = [
123+
{
124+
fields: [
125+
{
126+
clearable: true,
127+
items: [
128+
{
129+
title: 'Foo',
130+
value: 'foo',
131+
},
132+
{
133+
title: 'Bar',
134+
value: 'bar',
135+
},
136+
{
137+
title: 'Qux',
138+
value: 'qux',
139+
},
140+
],
141+
label: 'Select Option',
142+
name: 'conditionalParent',
143+
type: 'select',
144+
variant: 'outlined',
145+
},
146+
],
147+
title: 'Page 1',
148+
},
149+
{
150+
fields: [
151+
{
152+
label: 'Foo',
153+
name: 'foo',
154+
type: 'text',
155+
variant: 'outlined',
156+
},
157+
],
158+
title: 'Foo Page',
159+
when: (answers: any) => {
160+
return answers?.conditionalParent === 'foo';
161+
},
162+
},
163+
{
164+
fields: [
165+
{
166+
label: 'Bar',
167+
name: 'bar',
168+
type: 'text',
169+
variant: 'outlined',
170+
},
171+
],
172+
title: 'Bar Page',
173+
when: (answers: any) => {
174+
return answers?.conditionalParent === 'bar';
175+
},
176+
},
177+
{
178+
fields: [
179+
{
180+
label: 'Qux',
181+
name: 'qux',
182+
type: 'text',
183+
variant: 'outlined',
184+
},
185+
],
186+
title: 'Qux Page',
187+
when: (answers: any) => {
188+
return answers?.conditionalParent === 'qux';
189+
},
190+
},
191+
];
192+
193+
function submitForm() {
194+
// ...do something awesome
195+
}
196+
\</script\>`;
197+
198+
defineExpose({
199+
exampleCode: {
200+
desc: 'The <code class="ic">when</code> prop in both Page and Field components enables dynamic visibility based on specific conditions. For Page, the <code class="ic">when</code> prop controls page visibility by evaluating a condition, displaying the page only when the condition is met. Similarly, for Field, the <code class="ic">when</code> prop manages field visibility, showing the field only when its condition is satisfied.',
201+
name: 'Conditional Fields',
202+
script: scriptCode,
203+
template: templateCode,
204+
},
205+
});
206+
</script>
207+
208+
209+
<style lang="scss" scoped></style>

‎src/documentation/components/examples/index.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ButtonsFieldExample from './ButtonsFieldExample.vue';
22
import ColumnsExample from './ColumnsExample.vue';
3-
import ConditionalExample from './ConditionalExample.vue';
3+
import ConditionalFieldExample from './ConditionalFieldExample.vue';
4+
import ConditionalPageExample from './ConditionalPageExample.vue';
45
import FieldSlotExample from './FieldSlotExample.vue';
56
import SimpleExample from './SimpleExample.vue';
67
import SummaryPageExample from './SummaryPageExample.vue';
@@ -10,7 +11,8 @@ import ValidationExample from './ValidationExample.vue';
1011
export {
1112
ButtonsFieldExample,
1213
ColumnsExample,
13-
ConditionalExample,
14+
ConditionalFieldExample,
15+
ConditionalPageExample,
1416
FieldSlotExample,
1517
SimpleExample,
1618
SummaryPageExample,

‎src/documentation/sections/ExampleSection.vue‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,24 @@
6060
</ExampleContainer>
6161

6262
<ExampleContainer
63-
:code="getTemplateCode('ConditionalExampleRef')"
63+
:code="getTemplateCode('ConditionalPageExampleRef')"
6464
:codeBlockSettings="codeBlockSettings"
65-
@closePicker="closePicker('ConditionalExampleRef');"
65+
@closePicker="closePicker('ConditionalPageExampleRef');"
6666
>
67-
<Example.ConditionalExample
68-
ref="ConditionalExampleRef"
69-
:open="refElementsOpen.ConditionalExampleRef"
67+
<Example.ConditionalPageExample
68+
ref="ConditionalPageExampleRef"
69+
:open="refElementsOpen.ConditionalPageExampleRef"
70+
/>
71+
</ExampleContainer>
72+
73+
<ExampleContainer
74+
:code="getTemplateCode('ConditionalFieldExampleRef')"
75+
:codeBlockSettings="codeBlockSettings"
76+
@closePicker="closePicker('ConditionalFieldExampleRef');"
77+
>
78+
<Example.ConditionalFieldExample
79+
ref="ConditionalFieldExampleRef"
80+
:open="refElementsOpen.ConditionalFieldExampleRef"
7081
/>
7182
</ExampleContainer>
7283

@@ -110,7 +121,8 @@ const SimpleExampleRef = ref(null);
110121
const ColumnsExampleRef = ref(null);
111122
const FieldSlotExampleRef = ref(null);
112123
const ValidationExampleRef = ref(null);
113-
const ConditionalExampleRef = ref(null);
124+
const ConditionalFieldExampleRef = ref(null);
125+
const ConditionalPageExampleRef = ref(null);
114126
const SummaryPageExampleRef = ref(null);
115127
116128
const ButtonsFieldExampleRef = ref(null);
@@ -119,7 +131,8 @@ const ButtonsFieldExampleCode = ref();
119131
const refElements = ref({
120132
ButtonsFieldExampleRef,
121133
ColumnsExampleRef,
122-
ConditionalExampleRef,
134+
ConditionalFieldExampleRef,
135+
ConditionalPageExampleRef,
123136
FieldSlotExampleRef,
124137
SimpleExampleRef,
125138
SummaryPageExampleRef,
@@ -129,7 +142,8 @@ const refElements = ref({
129142
const refElementsOpen = ref({
130143
ButtonsFieldExampleRef: null,
131144
ColumnsExampleRef: null,
132-
ConditionalExampleRef: null,
145+
ConditionalFieldExampleRef: null,
146+
ConditionalPageExampleRef: null,
133147
FieldSlotExampleRef: null,
134148
SimpleExampleRef: null,
135149
SummaryPageExampleRef: null,

0 commit comments

Comments
 (0)