Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: introduce form-layout auto responsive mode #8669

Closed
wants to merge 27 commits into from
Closed

feat: introduce form-layout auto responsive mode #8669

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
62ef6a3
feat: add auto-responsive to form-layout
DiegoCardoso Feb 10, 2025
95f0514
implement expandColumns
vursen Feb 10, 2025
eb78da0
ensure colspan is capped at column count
vursen Feb 11, 2025
24f5216
fix: do not expand columns by default
DiegoCardoso Feb 11, 2025
298931f
use different approach to cap column count
vursen Feb 11, 2025
12b7d81
add example pages
vursen Feb 12, 2025
cc111ed
add more examples
vursen Feb 12, 2025
c9e04b3
make column expanding work in both dialogs and horizontal layouts
vursen Feb 12, 2025
19367ab
add more examples
vursen Feb 12, 2025
bda247f
revert unintended changes
vursen Feb 12, 2025
5d5dbc5
improve code documentation
vursen Feb 12, 2025
0c2f1fb
improve code documentation
vursen Feb 13, 2025
ef8ee5f
add more examples
vursen Feb 13, 2025
5dbb558
use auto-fit instead of auto-fill
vursen Feb 13, 2025
6416fe4
enable br logic
vursen Feb 13, 2025
d1c2583
add example with <br>
vursen Feb 13, 2025
b17a1e4
fix: add variables default values
DiegoCardoso Feb 13, 2025
086219a
chore: add form-item example
DiegoCardoso Feb 13, 2025
7244870
format form-layout-auto-responsive.html
vursen Feb 13, 2025
803c13f
improve code documentation
vursen Feb 14, 2025
c648dbe
add labelsAside mode
vursen Feb 14, 2025
99ac489
add --is-label-aside
vursen Feb 14, 2025
e7b1530
set column width with label to background-position-x
DiegoCardoso Feb 14, 2025
7f8ea89
make labels go above
DiegoCardoso Feb 14, 2025
39de5f5
clean up labels aside implementation
vursen Feb 17, 2025
3656f4e
add more examples
vursen Feb 17, 2025
3cca4c4
add more examples
vursen Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
342 changes: 342 additions & 0 deletions dev/form-layout-auto-responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,342 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Layout</title>
<script type="module" src="./common.js"></script>

<style>
h1 {
width: 100%;
margin-top: 2em;
margin-bottom: 0.5em;

&:first-child {
margin-top: 0;
}
}
</style>
</head>

<body>
<examples-view></examples-view>

<script type="module">
import '@vaadin/dialog';
import '@vaadin/button';
import '@vaadin/tabsheet';
import '@vaadin/form-layout';
import '@vaadin/form-layout/vaadin-form-item.js';
import '@vaadin/text-field';
import '@vaadin/password-field';
import '@vaadin/horizontal-layout';
import { render, html, LitElement } from 'lit';
import { dialogRenderer } from '@vaadin/dialog/lit.js';

class ExamplesView extends LitElement {
render() {
return html`
<h1>autoResponsive</h1>

<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
<vaadin-button>Register</vaadin-button>
</vaadin-form-layout>

<h1>autoResponsive + expandColumns</h1>

<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
<vaadin-button>Register</vaadin-button>
</vaadin-form-layout>

<h1>autoResponsive + br</h1>

<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<br />
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>

<div>
<h1>autoResponsive inside HorizontalLayout + flex:1</h1>

<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>

<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-horizontal-layout>
</div>

<div>
<h1>autoResponsive inside HorizontalLayout + labels aside</h1>

<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" labels-aside>
<vaadin-form-item>
<label slot="label"> First name </label>
<vaadin-text-field></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Last name </label>
<vaadin-text-field></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<label slot="label"> Username </label>
<vaadin-text-field colspan="2"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Password </label>
<vaadin-password-field></vaadin-password-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Confirm </label>
<vaadin-password-field></vaadin-password-field>
</vaadin-form-item>
</vaadin-form-layout>

<vaadin-form-layout style="flex: 1;" auto-responsive max-columns="2" labels-aside expand-columns>
<vaadin-form-item>
<label slot="label"> First name </label>
<vaadin-text-field class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Last name </label>
<vaadin-text-field class="full-width"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item colspan="2">
<label slot="label"> Username </label>
<vaadin-text-field class="full-width" colspan="2"></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Password </label>
<vaadin-password-field class="full-width"></vaadin-password-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label"> Confirm </label>
<vaadin-password-field class="full-width"></vaadin-password-field>
</vaadin-form-item>
</vaadin-form-layout>
</vaadin-horizontal-layout>
</div>

<div>
<h1>autoResponsive inside Dialog</h1>

<vaadin-dialog
id="dialog-0"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-0').opened = true;
}}"
>
Open
</vaadin-button>
</div>

<div>
<h1>autoResponsive inside Dialog + expandColumns</h1>

<vaadin-dialog
id="dialog-1"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-1').opened = true;
}}"
>
Open
</vaadin-button>
</div>

<div>
<h1>autoResponsive inside Dialog 80%</h1>

<vaadin-dialog
id="dialog-2"
width="80%"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-2').opened = true;
}}"
>
Open
</vaadin-button>
</div>

<div>
<h1>autoResponsive inside Dialog 80% + expandColumns</h1>

<vaadin-dialog
id="dialog-3"
width="80%"
${dialogRenderer(
(dialog) => html`
<vaadin-form-layout auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-3').opened = true;
}}"
>
Open
</vaadin-button>
</div>

<div>
<h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>

<vaadin-dialog
id="dialog-4"
${dialogRenderer(
(dialog) => html`
<vaadin-horizontal-layout theme="spacing">
<vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>

<vaadin-form-layout auto-responsive max-columns="2" style="flex: 1;" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-horizontal-layout>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-4').opened = true;
}}"
>
Open
</vaadin-button>
</div>

<div>
<h1>autoResponsive inside Tabsheet inside Dialog</h1>

<vaadin-dialog
id="dialog-5"
${dialogRenderer(
(dialog) => html`
<vaadin-tabsheet>
<vaadin-tabs slot="tabs">
<vaadin-tab id="tab-0">Tab 0</vaadin-tab>
<vaadin-tab id="tab-1">Tab 1</vaadin-tab>
</vaadin-tabs>

<vaadin-form-layout tab="tab-0" auto-responsive max-columns="2">
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>

<vaadin-form-layout tab="tab-1" auto-responsive max-columns="2" expand-columns>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
<vaadin-text-field label="Username" colspan="2"></vaadin-text-field>
<vaadin-password-field label="Password"></vaadin-password-field>
<vaadin-password-field label="Confirm"></vaadin-password-field>
</vaadin-form-layout>
</vaadin-tabsheet>
`,
)}
></vaadin-dialog>

<vaadin-button
@click="${() => {
this.shadowRoot.querySelector('#dialog-5').opened = true;
}}"
>
Open
</vaadin-button>
</div>
`;
}
}
customElements.define('examples-view', ExamplesView);
</script>
</body>
</html>
Loading
Loading