Skip to content

Commit 6f56ca6

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Add tooltips and update docs
1 parent 04ef9f1 commit 6f56ca6

File tree

14 files changed

+303
-64
lines changed

14 files changed

+303
-64
lines changed

‎src/documentation/components/PropsTable.vue

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,20 +58,23 @@
5858

5959
<template #[`item.type`]="{ item }">
6060
<td
61-
class="text-success"
61+
class="text-success py-1"
6262
v-html="item.type"
6363
></td>
6464
</template>
6565

6666
<template #[`item.default`]="{ item }">
6767
<td
68-
class="text-accent"
68+
class="text-accent py-1"
6969
v-html="item.default"
7070
></td>
7171
</template>
7272

7373
<template #[`item.desc`]="{ item }">
74-
<td v-html="item.desc"></td>
74+
<td
75+
class="py-1"
76+
v-html="item.desc"
77+
></td>
7578
</template>
7679
</v-data-table>
7780
</v-card>

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

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<template>
2+
<VStepperForm
3+
v-model="answers"
4+
:header-tooltips="true"
5+
:pages="pages"
6+
:summary-columns="{
7+
lg: 6,
8+
}"
9+
@submit="submitForm"
10+
/>
11+
12+
<AnswersDialog
13+
v-model="dialog"
14+
:answers="answers"
15+
/>
16+
</template>
17+
18+
<script setup lang="ts">
19+
import { ref } from 'vue';
20+
import AnswersDialog from '../AnswersDialog.vue';
21+
22+
23+
const dialog = ref(false);
24+
const answers = ref({
25+
address: '123 Street',
26+
city: 'Some City',
27+
firstName: 'John',
28+
lastName: 'Doh',
29+
});
30+
31+
const pages = [
32+
{
33+
fields: [
34+
{
35+
label: 'First Name',
36+
name: 'firstName',
37+
type: 'text' as const,
38+
variant: 'outlined',
39+
},
40+
{
41+
label: 'Last Name',
42+
name: 'lastName',
43+
type: 'text' as const,
44+
variant: 'outlined',
45+
},
46+
],
47+
pageFieldColumns: {
48+
md: 6,
49+
sm: 12,
50+
},
51+
title: 'Personal Information',
52+
},
53+
{
54+
fields: [
55+
{
56+
label: 'Address',
57+
name: 'address',
58+
type: 'text' as const,
59+
variant: 'outlined',
60+
},
61+
{
62+
label: 'City',
63+
name: 'city',
64+
type: 'text' as const,
65+
variant: 'outlined',
66+
},
67+
],
68+
pageFieldColumns: {
69+
md: 6,
70+
sm: 12,
71+
},
72+
title: 'Address',
73+
},
74+
{
75+
isReview: true,
76+
text: 'Please review your information.',
77+
title: 'Summary',
78+
},
79+
];
80+
81+
function submitForm(): void {
82+
dialog.value = true;
83+
}
84+
85+
const templateCode = `<template>
86+
<VStepperForm
87+
v-model="answers"
88+
:header-tooltips="true"
89+
:pages="pages"
90+
:summary-columns="{
91+
lg: 6,
92+
}"
93+
@submit="submitForm"
94+
/>
95+
</template>
96+
`;
97+
98+
const scriptCode = `\<script setup\>
99+
import { ref } from 'vue';
100+
101+
102+
const answers = ref({
103+
address: '123 Street',
104+
city: 'Some City',
105+
firstName: 'John',
106+
lastName: 'Doh',
107+
});
108+
109+
const pages = [
110+
{
111+
fields: [
112+
{
113+
label: 'First Name',
114+
name: 'firstName',
115+
type: 'text',
116+
variant: 'outlined',
117+
},
118+
{
119+
label: 'Last Name',
120+
name: 'lastName',
121+
type: 'text',
122+
variant: 'outlined',
123+
},
124+
],
125+
pageFieldColumns: {
126+
md: 6,
127+
sm: 12,
128+
},
129+
title: 'Personal Information',
130+
},
131+
{
132+
fields: [
133+
{
134+
label: 'Address',
135+
name: 'address',
136+
type: 'text',
137+
variant: 'outlined',
138+
},
139+
{
140+
label: 'City',
141+
name: 'city',
142+
type: 'text',
143+
variant: 'outlined',
144+
},
145+
],
146+
pageFieldColumns: {
147+
md: 6,
148+
sm: 12,
149+
},
150+
title: 'Address',
151+
},
152+
{
153+
isReview: true,
154+
text: 'Please review your information.',
155+
title: 'Summary',
156+
},
157+
];
158+
159+
function submitForm() {
160+
// ...do something awesome
161+
}
162+
\</script\>`;
163+
164+
defineExpose({
165+
exampleCode: {
166+
desc: 'This example shows how to use tooltips in the header of the stepper form.',
167+
name: 'Tooltips',
168+
script: scriptCode,
169+
template: templateCode,
170+
},
171+
});
172+
</script>
173+
174+
175+
<style lang="scss" scoped></style>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import ConditionalPageExample from './ConditionalPageExample.vue';
55
import FieldSlotExample from './FieldSlotExample.vue';
66
import SimpleExample from './SimpleExample.vue';
77
import SummaryPageExample from './SummaryPageExample.vue';
8+
import TooltipExample from './TooltipExample.vue';
89
import ValidationExample from './ValidationExample.vue';
910

1011

@@ -16,5 +17,6 @@ export {
1617
FieldSlotExample,
1718
SimpleExample,
1819
SummaryPageExample,
20+
TooltipExample,
1921
ValidationExample,
2022
};

‎src/documentation/sections/ExampleSection.vue

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -60,49 +60,60 @@
6060
</ExampleContainer>
6161

6262
<ExampleContainer
63-
:code="getTemplateCode('ConditionalPageExampleRef')"
63+
:code="getTemplateCode('ButtonsFieldExampleRef')"
6464
:codeBlockSettings="codeBlockSettings"
65-
@closePicker="closePicker('ConditionalPageExampleRef');"
65+
:codeUpdatedAt="ButtonsFieldExampleCode?.updatedAt"
66+
:updatedCode="ButtonsFieldExampleCode?.updatedCode"
67+
@closePicker="closePicker('ButtonsFieldExampleRef');"
6668
>
67-
<Example.ConditionalPageExample
68-
ref="ConditionalPageExampleRef"
69-
:open="refElementsOpen.ConditionalPageExampleRef"
69+
<Example.ButtonsFieldExample
70+
ref="ButtonsFieldExampleRef"
71+
:open="refElementsOpen.ButtonsFieldExampleRef"
72+
@codeUpdated="ButtonsFieldExampleCode = $event"
7073
/>
7174
</ExampleContainer>
7275

7376
<ExampleContainer
74-
:code="getTemplateCode('ConditionalFieldExampleRef')"
77+
:code="getTemplateCode('SummaryPageExampleRef')"
7578
:codeBlockSettings="codeBlockSettings"
76-
@closePicker="closePicker('ConditionalFieldExampleRef');"
79+
@closePicker="closePicker('SummaryPageExampleRef');"
7780
>
78-
<Example.ConditionalFieldExample
79-
ref="ConditionalFieldExampleRef"
80-
:open="refElementsOpen.ConditionalFieldExampleRef"
81+
<Example.SummaryPageExample
82+
ref="SummaryPageExampleRef"
83+
:open="refElementsOpen.SummaryPageExampleRef"
8184
/>
8285
</ExampleContainer>
8386

8487
<ExampleContainer
85-
:code="getTemplateCode('SummaryPageExampleRef')"
88+
:code="getTemplateCode('TooltipExampleRef')"
8689
:codeBlockSettings="codeBlockSettings"
87-
@closePicker="closePicker('SummaryPageExampleRef');"
90+
@closePicker="closePicker('TooltipExampleRef');"
8891
>
89-
<Example.SummaryPageExample
90-
ref="SummaryPageExampleRef"
91-
:open="refElementsOpen.SummaryPageExampleRef"
92+
<Example.TooltipExample
93+
ref="TooltipExampleRef"
94+
:open="refElementsOpen.TooltipExampleRef"
9295
/>
9396
</ExampleContainer>
9497

9598
<ExampleContainer
96-
:code="getTemplateCode('ButtonsFieldExampleRef')"
99+
:code="getTemplateCode('ConditionalPageExampleRef')"
97100
:codeBlockSettings="codeBlockSettings"
98-
:codeUpdatedAt="ButtonsFieldExampleCode?.updatedAt"
99-
:updatedCode="ButtonsFieldExampleCode?.updatedCode"
100-
@closePicker="closePicker('ButtonsFieldExampleRef');"
101+
@closePicker="closePicker('ConditionalPageExampleRef');"
101102
>
102-
<Example.ButtonsFieldExample
103-
ref="ButtonsFieldExampleRef"
104-
:open="refElementsOpen.ButtonsFieldExampleRef"
105-
@codeUpdated="ButtonsFieldExampleCode = $event"
103+
<Example.ConditionalPageExample
104+
ref="ConditionalPageExampleRef"
105+
:open="refElementsOpen.ConditionalPageExampleRef"
106+
/>
107+
</ExampleContainer>
108+
109+
<ExampleContainer
110+
:code="getTemplateCode('ConditionalFieldExampleRef')"
111+
:codeBlockSettings="codeBlockSettings"
112+
@closePicker="closePicker('ConditionalFieldExampleRef');"
113+
>
114+
<Example.ConditionalFieldExample
115+
ref="ConditionalFieldExampleRef"
116+
:open="refElementsOpen.ConditionalFieldExampleRef"
106117
/>
107118
</ExampleContainer>
108119
</v-row>
@@ -124,6 +135,7 @@ const ValidationExampleRef = ref(null);
124135
const ConditionalFieldExampleRef = ref(null);
125136
const ConditionalPageExampleRef = ref(null);
126137
const SummaryPageExampleRef = ref(null);
138+
const TooltipExampleRef = ref(null);
127139
128140
const ButtonsFieldExampleRef = ref(null);
129141
const ButtonsFieldExampleCode = ref();
@@ -136,6 +148,7 @@ const refElements = ref({
136148
FieldSlotExampleRef,
137149
SimpleExampleRef,
138150
SummaryPageExampleRef,
151+
TooltipExampleRef,
139152
ValidationExampleRef,
140153
});
141154
@@ -147,6 +160,7 @@ const refElementsOpen = ref({
147160
FieldSlotExampleRef: null,
148161
SimpleExampleRef: null,
149162
SummaryPageExampleRef: null,
163+
TooltipExampleRef: null,
150164
ValidationExampleRef: null,
151165
});
152166

‎src/plugin/VStepperForm.vue

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,30 @@
3434
:key="`${getIndex(i)}-step`"
3535
>
3636
<v-stepper-item
37+
:class='`vsf-activator-${componentId}-${i + 1}`'
3738
:color="settings.color"
3839
:edit-icon="page.isReview ? '$complete' : settings.editIcon"
3940
:editable="headerItemDisabled(page)"
4041
elevation="0"
4142
:error="page.error"
4243
:title="page.title"
4344
:value="getIndex(i)"
44-
></v-stepper-item>
45+
>
46+
<v-tooltip
47+
v-if="!mobile && settings.headerTooltips && page?.fields && (page?.fields as Field[]).length > 0"
48+
:activator="page.title ? 'parent' : `.vsf-activator-${componentId}-${i + 1}`"
49+
:location="settings.tooltipLocation"
50+
:offset="page.title ? settings.tooltipOffset : Number(settings.tooltipOffset) - 28"
51+
:transition="settings.tooltipTransition"
52+
>
53+
<div
54+
v-for="(field, idx) in page.fields"
55+
:key="idx"
56+
>
57+
{{ field.label }}
58+
</div>
59+
</v-tooltip>
60+
</v-stepper-item>
4561
<v-divider
4662
v-if="getIndex(i) !== Object.keys(computedPages).length"
4763
:key="getIndex(i)"
@@ -166,6 +182,7 @@ import { globalOptions } from './';
166182
167183
168184
const attrs = useAttrs();
185+
const componentId = useId();
169186
const slots = useSlots();
170187
const emit = defineEmits([...componentEmits]);
171188
const injectedOptions = inject(globalOptions, {});
@@ -239,7 +256,7 @@ watchDeep(modelValue, () => {
239256
const stepperModel = ref(1);
240257
241258
242-
const { sm } = useDisplay();
259+
const { mobile, sm } = useDisplay();
243260
const transitionComputed: ComputedRef<Props['transition']> = computed(() => stepperProps.transition);
244261
const parentForm = useTemplateRef<PrivateFormContext>('stepperFormRef');
245262

‎src/plugin/components/shared/PageContainer.vue

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
<template>
2-
<v-row v-if="page.title">
3-
<v-col>
4-
<h3>
5-
{{ page.title }}
6-
</h3>
7-
</v-col>
8-
</v-row>
9-
102
<v-row v-if="page.text">
11-
<v-col>
12-
{{ page.text }}
13-
</v-col>
3+
<v-col v-html="page.text"></v-col>
144
</v-row>
155

166
<v-row>

0 commit comments

Comments
 (0)