experiment: add LitElement based version of vaadin-form-layout (#8343)

Author: tomivirkki

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,15 +105,12 @@ export const FormLayoutMixin = (superClass) =>
 
     /** @protected */
     ready() {
-      // Here we create and attach a style element that we use for validating
+      // Here we 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
       // `super.ready()`, because `super.ready()` invokes property observers,
       // and the observer for `responsiveSteps` does CSS value validation.
-      this._styleElement = document.createElement('style');
       this.appendChild(this._styleElement);
-      // Ensure there is a child text node in the style element
-      this._styleElement.textContent = ' ';
 
       super.ready();
 
@@ -120,6 +120,10 @@ export const FormLayoutMixin = (superClass) =>
     constructor() {
       super();
 
+      this._styleElement = document.createElement('style');
+      // Ensure there is a child text node in the style element
+      this._styleElement.textContent = ' ';
+
       this.__intersectionObserver = new IntersectionObserver(([entry]) => {
         if (!entry.isIntersecting) {
           // Prevent possible jump when layout becomes visible

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2024 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,48 @@
+/**
+ * @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;
+  }
+
+  /** @protected */
+  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 - 2024 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,44 @@
+/**
+ * @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;
+  }
+
+  /** @protected */
+  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 renamed to packages/form-layout/test/form-item.common.js

@@ -3,7 +3,6 @@ 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;

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';