experiment: add LitElement based version of vaadin-form-layout

packages/form-layout/src/vaadin-form-item-mixin.js

@@ -42,6 +42,14 @@ export const FormItemMixin = (superClass) =>
       this.__fieldNode = null;
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.performUpdate) {
+        this.performUpdate();
+      }
+    }
+
     /**
      * Returns a target element to add ARIA attributes to for a field.
      *

packages/form-layout/src/vaadin-form-layout-mixin.js

@@ -71,6 +71,7 @@ export const FormLayoutMixin = (superClass) =>
             ];
           },
           observer: '_responsiveStepsChanged',
+          sync: true,
         },
 
         /**
@@ -79,6 +80,7 @@ export const FormLayoutMixin = (superClass) =>
          */
         _columnCount: {
           type: Number,
+          sync: true,
         },
 
         /**
@@ -87,6 +89,7 @@ export const FormLayoutMixin = (superClass) =>
          */
         _labelsOnTop: {
           type: Boolean,
+          sync: true,
         },
 
         /** @private */
@@ -102,6 +105,14 @@ export const FormLayoutMixin = (superClass) =>
 
     /** @protected */
     ready() {
+      super.ready();
+
+      this.addEventListener('animationend', this.__onAnimationEnd);
+    }
+
+    constructor() {
+      super();
+
       // Here we create and attach a style element that we use for validating
       // CSS values in `responsiveSteps`. We can't add this to the `<template>`,
       // because Polymer will throw it away. We need to create this before
@@ -112,14 +123,6 @@ export const FormLayoutMixin = (superClass) =>
       // Ensure there is a child text node in the style element
       this._styleElement.textContent = ' ';
 
-      super.ready();
-
-      this.addEventListener('animationend', this.__onAnimationEnd);
-    }
-
-    constructor() {
-      super();
-
       this.__intersectionObserver = new IntersectionObserver(([entry]) => {
         if (!entry.isIntersecting) {
           // Prevent possible jump when layout becomes visible
@@ -137,6 +140,10 @@ export const FormLayoutMixin = (superClass) =>
     connectedCallback() {
       super.connectedCallback();
 
+      if (this.performUpdate) {
+        this.performUpdate();
+      }
+
       requestAnimationFrame(() => this._selectResponsiveStep());
       requestAnimationFrame(() => this._updateLayout());
 

packages/form-layout/src/vaadin-lit-form-item.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-form-item.js';

packages/form-layout/src/vaadin-lit-form-item.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FormItemMixin } from './vaadin-form-item-mixin.js';
+import { formItemStyles } from './vaadin-form-layout-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-form-item>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class FormItem extends FormItemMixin(ThemableMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-form-item';
+  }
+
+  static get styles() {
+    return formItemStyles;
+  }
+
+  render() {
+    return html`
+      <div id="label" part="label" @click="${this.__onLabelClick}">
+        <slot name="label" id="labelSlot" @slotchange="${this.__onLabelSlotChange}"></slot>
+        <span part="required-indicator" aria-hidden="true"></span>
+      </div>
+      <div id="spacing"></div>
+      <div id="content">
+        <slot id="contentSlot" @slotchange="${this.__onContentSlotChange}"></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(FormItem);
+
+export { FormItem };

packages/form-layout/src/vaadin-lit-form-layout.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-form-layout.js';

packages/form-layout/src/vaadin-lit-form-layout.js

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { FormLayoutMixin } from './vaadin-form-layout-mixin.js';
+import { formLayoutStyles } from './vaadin-form-layout-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-form-layout>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class FormLayout extends FormLayoutMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-form-layout';
+  }
+
+  static get styles() {
+    return formLayoutStyles;
+  }
+
+  render() {
+    return html`
+      <div id="layout">
+        <slot id="slot"></slot>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(FormLayout);
+
+export { FormLayout };

packages/form-layout/test/form-item-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-form-item.js';
+import './form-item.common.js';

packages/form-layout/test/form-item-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-form-item.js';
+import './form-item.common.js';

packages/form-layout/test/form-item.test.js → packages/form-layout/test/form-item.common.js

@@ -3,21 +3,21 @@ import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '@vaadin/custom-field';
 import '@vaadin/text-field';
-import '../vaadin-form-item.js';
 
 describe('form-item', () => {
   let item, label, input;
 
   describe('basic features', () => {
     let labelSlot, inputSlot;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       item = fixtureSync(`
         <vaadin-form-item>
           <label slot="label">Label</label>
           <input>
         </vaadin-form-item>
       `);
+      await nextFrame();
       label = item.querySelector('label');
       input = item.querySelector('input');
       labelSlot = item.shadowRoot.querySelector('slot[name="label"]');
@@ -39,13 +39,14 @@ describe('form-item', () => {
   });
 
   describe('label positioning', () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       item = fixtureSync(`
         <vaadin-form-item>
           <label slot="label">Label</label>
           <input>
         </vaadin-form-item>
       `);
+      await nextFrame();
       label = item.querySelector('label');
       input = item.querySelector('input');
     });
@@ -85,6 +86,7 @@ describe('form-item', () => {
     beforeEach(async () => {
       const item1 = fixtureSync(`<vaadin-form-item><label slot="label">Label</label></vaadin-form-item>`);
       const item2 = fixtureSync(`<vaadin-form-item><label slot="label">Label</label></vaadin-form-item>`);
+      await nextFrame();
       label1 = item1.querySelector('label');
       label2 = item2.querySelector('label');
       await nextFrame();
@@ -312,13 +314,14 @@ describe('form-item', () => {
       document.body.removeChild(testInput);
     });
 
-    beforeEach(() => {
+    beforeEach(async () => {
       item = fixtureSync(`
         <vaadin-form-item>
           <label slot="label">Label</label>
           <input>
         </vaadin-form-item>
       `);
+      await nextFrame();
       label = item.querySelector('label');
       input = item.querySelector('input');
       item.style.width = '100%';

packages/form-layout/test/form-layout-lit.test.js

@@ -0,0 +1,4 @@
+import '@vaadin/text-field/vaadin-lit-text-field.js';
+import '../vaadin-lit-form-layout.js';
+import '../vaadin-lit-form-item.js';
+import './form-layout.common.js';

packages/form-layout/test/form-layout-polymer.test.js

@@ -0,0 +1,4 @@
+import '@vaadin/text-field/vaadin-text-field.js';
+import '../vaadin-form-layout.js';
+import '../vaadin-form-item.js';
+import './form-layout.common.js';

packages/form-layout/test/form-layout.test.js → packages/form-layout/test/form-layout.common.js

@@ -2,9 +2,6 @@ import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '@polymer/polymer/lib/elements/dom-repeat.js';
-import '@vaadin/text-field/vaadin-text-field.js';
-import '../vaadin-form-layout.js';
-import '../vaadin-form-item.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 /**

packages/form-layout/theme/lumo/vaadin-lit-form-item.js

@@ -0,0 +1,2 @@
+import './vaadin-form-item-styles.js';
+import '../../src/vaadin-lit-form-item.js';

packages/form-layout/theme/lumo/vaadin-lit-form-layout.js

@@ -0,0 +1,2 @@
+import './vaadin-form-layout-styles.js';
+import '../../src/vaadin-lit-form-layout.js';

packages/form-layout/theme/material/vaadin-lit-form-item.js

@@ -0,0 +1,2 @@
+import './vaadin-form-item-styles.js';
+import '../../src/vaadin-lit-form-item.js';

packages/form-layout/theme/material/vaadin-lit-form-layout.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-form-layout.js';

packages/form-layout/vaadin-lit-form-item.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-form-item.js';

packages/form-layout/vaadin-lit-form-item.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-form-item.js';
+export * from './src/vaadin-lit-form-item.js';

packages/form-layout/vaadin-lit-form-layout.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-form-layout.js';

packages/form-layout/vaadin-lit-form-layout.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-form-layout.js';
+export * from './src/vaadin-lit-form-layout.js';