Skip to content

Commit

Permalink
chore: add form-layout-auto-responsive dev page (#8694)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen authored Feb 19, 2025
1 parent 4f4c7da commit bd7777e
Showing 1 changed file with 278 additions and 0 deletions.
278 changes: 278 additions & 0 deletions dev/form-layout-auto-responsive.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,278 @@
<!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, maximum-scale=1.0, minimum-scale=1.0" />
<title>Form Layout</title>
<script type="module" src="./common.js"></script>

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

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

<body>
<form-layout-examples></form-layout-examples>

<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 FormLayoutExamples extends LitElement {
constructor() {
super();
this.openPrevSiblingDialog = this.openPrevSiblingDialog.bind(this);
}

createRenderRoot() {
return this;
}

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>
<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>
<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>
<h1>autoResponsive inside Dialog</h1>
<vaadin-dialog
${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.openPrevSiblingDialog}">Open</vaadin-button>
<h1>autoResponsive inside Dialog + expandColumns</h1>
<vaadin-dialog
${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.openPrevSiblingDialog}">Open</vaadin-button>
<h1>autoResponsive inside Dialog 80%</h1>
<vaadin-dialog
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.openPrevSiblingDialog}">Open</vaadin-button>
<h1>autoResponsive inside Dialog 80% + expandColumns</h1>
<vaadin-dialog
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.openPrevSiblingDialog}">Open</vaadin-button>
<h1>autoResponsive inside HorizontalLayout inside Dialog + flex: 1</h1>
<vaadin-dialog
${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.openPrevSiblingDialog}">Open</vaadin-button>
<h1>autoResponsive inside Tabsheet inside Dialog</h1>
<vaadin-dialog
${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.openPrevSiblingDialog}">Open</vaadin-button>
`;
}

openPrevSiblingDialog(event) {
let dialog = event.target;
while (dialog && dialog.localName !== 'vaadin-dialog') {
dialog = dialog.previousSibling;
}
dialog.opened = true;
}
}
customElements.define('form-layout-examples', FormLayoutExamples);
</script>
</body>
</html>

0 comments on commit bd7777e

Please sign in to comment.