Skip to content

Commit c80f62c

Browse files
sissbrueckerweb-padawan
sissbruecker
and
web-padawan
authored
refactor: simplify accordion summary example (#4860)
* refactor: simplify accordion summary example * chore: run formatter --------- Co-authored-by: web-padawan <[email protected]>
1 parent 9961063 commit c80f62c

File tree

3 files changed

+220
-380
lines changed

3 files changed

+220
-380
lines changed

‎frontend/demo/component/accordion/accordion-summary.ts‎

Lines changed: 94 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,17 @@ import '@vaadin/combo-box';
55
import '@vaadin/email-field';
66
import '@vaadin/form-layout';
77
import '@vaadin/horizontal-layout';
8+
import '@vaadin/icon';
9+
import '@vaadin/icons';
810
import '@vaadin/text-field';
911
import '@vaadin/vertical-layout';
10-
import { html, LitElement } from 'lit';
12+
import { html, LitElement, nothing } from 'lit';
1113
import { customElement, state } from 'lit/decorators.js';
1214
import type { AccordionOpenedChangedEvent } from '@vaadin/accordion';
1315
import type { FormLayoutResponsiveStep } from '@vaadin/form-layout';
14-
import { Binder, field } from '@vaadin/hilla-lit-form';
1516
import { getCountries } from 'Frontend/demo/domain/DataService';
16-
import CardModel from 'Frontend/generated/com/vaadin/demo/domain/CardModel';
17-
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
18-
import PersonModel from 'Frontend/generated/com/vaadin/demo/domain/PersonModel';
1917
import { applyTheme } from 'Frontend/demo/theme';
18+
import type Country from 'Frontend/generated/com/vaadin/demo/domain/Country';
2019

2120
const responsiveSteps: FormLayoutResponsiveStep[] = [
2221
{ minWidth: 0, columns: 1 },
@@ -28,12 +27,17 @@ export class Example extends LitElement {
2827
@state()
2928
private countries: Country[] = [];
3029

31-
private readonly personBinder = new Binder(this, PersonModel);
30+
@state()
31+
private openedPanelIndex: number | null = 0;
3232

33-
private readonly cardBinder = new Binder(this, CardModel);
33+
@state()
34+
private customerComplete: boolean = false;
3435

3536
@state()
36-
private openedPanelIndex: number | null = 0;
37+
private billingComplete: boolean = false;
38+
39+
@state()
40+
private paymentComplete: boolean = false;
3741

3842
protected override async firstUpdated() {
3943
this.countries = await getCountries();
@@ -56,136 +60,109 @@ export class Example extends LitElement {
5660
>
5761
<vaadin-accordion-panel>
5862
<vaadin-accordion-heading slot="summary">
59-
<vaadin-horizontal-layout style="width: 100%; align-items: center">
63+
<vaadin-horizontal-layout theme="spacing">
6064
Customer details
61-
<vaadin-vertical-layout
62-
.hidden="${this.openedPanelIndex === 0}"
63-
style="font-size: 0.875rem; margin-left: auto"
64-
>
65-
<span>
66-
${this.personBinder.value.firstName} ${this.personBinder.value.lastName}
67-
</span>
68-
<span>${this.personBinder.value.email}</span>
69-
<span>${this.personBinder.value.address?.phone}</span>
70-
</vaadin-vertical-layout>
65+
${this.customerComplete
66+
? html`
67+
<vaadin-icon
68+
icon="vaadin:check"
69+
style="color: var(--lumo-success-text-color); --vaadin-icon-size: 1rem"
70+
></vaadin-icon>
71+
`
72+
: nothing}
7173
</vaadin-horizontal-layout>
7274
</vaadin-accordion-heading>
7375
<!-- end::snippet[] -->
7476
75-
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
76-
<vaadin-text-field
77-
label="First name"
78-
${field(this.personBinder.model.firstName)}
79-
></vaadin-text-field>
80-
<vaadin-text-field
81-
label="Last name"
82-
${field(this.personBinder.model.lastName)}
83-
></vaadin-text-field>
84-
<vaadin-email-field
85-
label="Email address"
86-
${field(this.personBinder.model.email)}
87-
colspan="2"
88-
></vaadin-email-field>
89-
<vaadin-text-field
90-
label="Phone number"
91-
${field(this.personBinder.model.address.phone)}
92-
colspan="2"
93-
></vaadin-text-field>
94-
</vaadin-form-layout>
95-
<vaadin-button
96-
theme="primary"
97-
@click="${() => {
98-
this.openedPanelIndex = 1;
99-
}}"
100-
>
101-
Continue
102-
</vaadin-button>
77+
<vaadin-vertical-layout theme="spacing">
78+
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
79+
<vaadin-text-field label="First name"></vaadin-text-field>
80+
<vaadin-text-field label="Last name"></vaadin-text-field>
81+
<vaadin-email-field label="Email address" colspan="2"></vaadin-email-field>
82+
<vaadin-text-field label="Phone number" colspan="2"></vaadin-text-field>
83+
</vaadin-form-layout>
84+
<vaadin-button
85+
theme="primary"
86+
@click="${() => {
87+
this.openedPanelIndex = 1;
88+
this.customerComplete = true;
89+
}}"
90+
>
91+
Continue
92+
</vaadin-button>
93+
</vaadin-vertical-layout>
10394
</vaadin-accordion-panel>
10495
10596
<vaadin-accordion-panel>
10697
<vaadin-accordion-heading slot="summary">
107-
<vaadin-horizontal-layout style="width: 100%; align-items: center">
98+
<vaadin-horizontal-layout theme="spacing">
10899
Billing address
109-
<vaadin-vertical-layout
110-
.hidden="${this.openedPanelIndex === 1}"
111-
style="font-size: 0.875rem; margin-left: auto"
112-
>
113-
<span>${this.personBinder.value.address?.street}</span>
114-
<span>
115-
${this.personBinder.value.address?.zip} ${this.personBinder.value.address?.city}
116-
</span>
117-
118-
<span> ${this.personBinder.value.address?.country} </span>
119-
</vaadin-vertical-layout>
100+
${this.billingComplete
101+
? html`
102+
<vaadin-icon
103+
icon="vaadin:check"
104+
style="color: var(--lumo-success-text-color); --vaadin-icon-size: 1rem"
105+
></vaadin-icon>
106+
`
107+
: nothing}
120108
</vaadin-horizontal-layout>
121109
</vaadin-accordion-heading>
122110
123-
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
124-
<vaadin-text-field
125-
label="Address"
126-
${field(this.personBinder.model.address.street)}
127-
colspan="2"
128-
></vaadin-text-field>
129-
<vaadin-text-field
130-
label="ZIP code"
131-
${field(this.personBinder.model.address.zip)}
132-
></vaadin-text-field>
133-
<vaadin-text-field
134-
label="City"
135-
${field(this.personBinder.model.address.city)}
136-
></vaadin-text-field>
137-
<vaadin-combo-box
138-
label="Country"
139-
${field(this.personBinder.model.address.country)}
140-
item-label-path="name"
141-
item-value-path="name"
142-
.items="${this.countries}"
143-
></vaadin-combo-box>
144-
</vaadin-form-layout>
145-
<vaadin-button
146-
theme="primary"
147-
@click="${() => {
148-
this.openedPanelIndex = 2;
149-
}}"
150-
>
151-
Continue
152-
</vaadin-button>
111+
<vaadin-vertical-layout theme="spacing">
112+
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
113+
<vaadin-text-field label="Address" colspan="2"></vaadin-text-field>
114+
<vaadin-text-field label="ZIP code"></vaadin-text-field>
115+
<vaadin-text-field label="City"></vaadin-text-field>
116+
<vaadin-combo-box
117+
label="Country"
118+
item-label-path="name"
119+
item-value-path="name"
120+
.items="${this.countries}"
121+
></vaadin-combo-box>
122+
</vaadin-form-layout>
123+
<vaadin-button
124+
theme="primary"
125+
@click="${() => {
126+
this.openedPanelIndex = 2;
127+
this.billingComplete = true;
128+
}}"
129+
>
130+
Continue
131+
</vaadin-button>
132+
</vaadin-vertical-layout>
153133
</vaadin-accordion-panel>
154134
155135
<vaadin-accordion-panel>
156136
<vaadin-accordion-heading slot="summary">
157-
<vaadin-horizontal-layout style="width: 100%; align-items: center">
137+
<vaadin-horizontal-layout theme="spacing">
158138
Payment
159-
<vaadin-vertical-layout
160-
.hidden="${this.openedPanelIndex === 2}"
161-
style="font-size: 0.875rem; margin-left: auto"
162-
>
163-
<span>${this.cardBinder.value.accountNumber}</span>
164-
<span>${this.cardBinder.value.expiryDate}</span>
165-
</vaadin-vertical-layout>
139+
${this.paymentComplete
140+
? html`
141+
<vaadin-icon
142+
icon="vaadin:check"
143+
style="color: var(--lumo-success-text-color); --vaadin-icon-size: 1rem"
144+
></vaadin-icon>
145+
`
146+
: nothing}
166147
</vaadin-horizontal-layout>
167148
</vaadin-accordion-heading>
168149
169-
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
170-
<vaadin-text-field
171-
label="Card number"
172-
${field(this.cardBinder.model.accountNumber)}
173-
colspan="2"
174-
></vaadin-text-field>
175-
<vaadin-text-field
176-
label="Expiry date"
177-
${field(this.cardBinder.model.expiryDate)}
178-
></vaadin-text-field>
179-
<vaadin-text-field label="CVV" ${field(this.cardBinder.model.cvv)}></vaadin-text-field>
180-
</vaadin-form-layout>
181-
<vaadin-button
182-
theme="primary"
183-
@click="${() => {
184-
this.openedPanelIndex = -1;
185-
}}"
186-
>
187-
Finish
188-
</vaadin-button>
150+
<vaadin-vertical-layout theme="spacing">
151+
<vaadin-form-layout .responsiveSteps="${responsiveSteps}">
152+
<vaadin-text-field label="Card number" colspan="2"></vaadin-text-field>
153+
<vaadin-text-field label="Expiry date"></vaadin-text-field>
154+
<vaadin-text-field label="CVV"></vaadin-text-field>
155+
</vaadin-form-layout>
156+
<vaadin-button
157+
theme="primary"
158+
@click="${() => {
159+
this.openedPanelIndex = -1;
160+
this.paymentComplete = true;
161+
}}"
162+
>
163+
Finish
164+
</vaadin-button>
165+
</vaadin-vertical-layout>
189166
<!-- tag::snippet[] -->
190167
</vaadin-accordion-panel>
191168
</vaadin-accordion>

0 commit comments

Comments
 (0)