experiment: add LitElement based version of vaadin-crud

packages/crud/src/vaadin-lit-crud-dialog.js

@@ -9,6 +9,7 @@
  * license.
  */
 import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -20,10 +21,10 @@ import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
+
 /**
  * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  *
- * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes OverlayMixin
@@ -39,6 +40,7 @@ class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin
     return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
   }
 
+  /** @protected */
   render() {
     return html`
       <div part="backdrop" id="backdrop" .hidden="${!this.withBackdrop}"></div>
@@ -111,11 +113,10 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
         @opened-changed="${this._onOverlayOpened}"
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
-        theme="${this._theme} || ''"
+        theme="${ifDefined(this._theme)}"
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
-        .resizable="${this.resizable}"
-        .fullscreen="${this.fullscreen}"
+        ?fullscreen="${this.fullscreen}"
         role="dialog"
         focus-trap
       ></vaadin-crud-dialog-overlay>

packages/crud/src/vaadin-lit-crud-edit-column.js

@@ -14,7 +14,12 @@ import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
 import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
 
 /**
+ * LitElement based version of `<vaadin-crud-edit-column>` 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.
  */
 class CrudEditColumn extends GridColumn {
   static get is() {

packages/crud/src/vaadin-lit-crud-edit.js

@@ -12,39 +12,30 @@
 import { html } from 'lit';
 import { Button } from '@vaadin/button/src/vaadin-lit-button.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
- * Use registerStyles instead of the `<style>` tag to make sure
- * that this CSS will override core styles of `vaadin-button`.
- */
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      display: block;
-    }
-  `,
-  { moduleId: 'vaadin-crud-edit-styles' },
-);
-
-/**
- * `<vaadin-crud-edit>` is a helper element for `<vaadin-grid-column>` that provides
- * an easily themable button that fires an `edit` event with the row item as detail
- * when clicked.
+ * LitElement based version of `<vaadin-crud-edit>` web component.
  *
- * Typical usage is in a `<vaadin-grid-column>` of a custom `<vaadin-grid>` inside
- * a `<vaadin-crud>` to enable editing.
+ * ## Disclaimer
  *
- * @customElement
- * @extends HTMLElement
- * @mixes ThemableMixin
+ * 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.
  */
 class CrudEdit extends Button {
   static get is() {
     return 'vaadin-crud-edit';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  /** @protected */
   render() {
     return html`
       <div part="icon"></div>

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

@@ -15,7 +15,10 @@ import { createField, createFields } from './vaadin-crud-helpers.js';
 import { IncludedMixin } from './vaadin-crud-include-mixin.js';
 
 /**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  *
+ * @extends FormLayout
+ * @mixes IncludedMixin
  * @private
  */
 class CrudForm extends IncludedMixin(FormLayout) {

packages/crud/src/vaadin-lit-crud-grid.js

@@ -18,12 +18,18 @@ import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js';
 import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
 
 /**
+ * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
  *
+ * @extends Grid
+ * @mixes CrudGridMixin
+ * @private
  */
 class CrudGrid extends CrudGridMixin(Grid) {
   static get is() {
     return 'vaadin-crud-grid';
   }
 }
+
 defineCustomElement(CrudGrid);
+
 export { CrudGrid };

packages/crud/src/vaadin-lit-crud.js

@@ -14,6 +14,7 @@ import './vaadin-lit-crud-dialog.js';
 import './vaadin-lit-crud-grid.js';
 import './vaadin-lit-crud-form.js';
 import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
@@ -23,13 +24,19 @@ import { CrudMixin } from './vaadin-crud-mixin.js';
 import { crudStyles } from './vaadin-crud-styles.js';
 
 /**
+ * LitElement based version of `<vaadin-crud>` 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.
  */
 class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitMixin(LitElement))))) {
   static get styles() {
     return crudStyles;
   }
 
+  /** @protected */
   render() {
     return html`
       <div id="container">
@@ -71,12 +78,12 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
         .ariaLabel="${this.__dialogAriaLabel}"
         .noCloseOnOutsideClick="${this.__isDirty}"
         .noCloseOnEsc="${this.__isDirty}"
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         @opened-changed="${this.__onDialogOpened}"
       ></vaadin-crud-dialog>
 
       <vaadin-confirm-dialog
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         id="confirmCancel"
         @confirm="${this.__confirmCancel}"
         cancel-button-visible
@@ -88,7 +95,7 @@ class Crud extends ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(PolylitM
       ></vaadin-confirm-dialog>
 
       <vaadin-confirm-dialog
-        theme="${this._theme || ''}"
+        theme="${ifDefined(this._theme)}"
         id="confirmDelete"
         @confirm="${this.__confirmDelete}"
         cancel-button-visible