experiment: add LitElement based version of vaadin-grid-pro (#6762)

dev/grid-pro.html

@@ -20,8 +20,14 @@
     </vaadin-grid-pro>
 
     <script type="module">
+      // PolymerElement based imports
       import '@vaadin/grid-pro';
       import '@vaadin/grid-pro/vaadin-grid-pro-edit-column.js';
+
+      // LitElement based imports
+      // import '@vaadin/grid-pro/theme/lumo/vaadin-lit-grid-pro.js';
+      // import '@vaadin/grid-pro/theme/lumo/vaadin-lit-grid-pro-edit-column.js';
+
       import { users } from '../packages/grid-pro/test/visual/users.js';
 
       const grid = document.querySelector('vaadin-grid-pro');

packages/grid-pro/package.json

@@ -27,7 +27,9 @@
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
-    "web-types.lit.json"
+    "web-types.lit.json",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js"
   ],
   "keywords": [
     "Vaadin",

packages/grid-pro/src/vaadin-grid-pro-edit-column-mixin.js

@@ -8,8 +8,8 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import { get, set } from '@polymer/polymer/lib/utils/path.js';
 import { addValueToAttribute } from '@vaadin/component-base/src/dom-utils.js';
+import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -34,7 +34,10 @@ export const GridProEditColumnMixin = (superClass) =>
          *   - `model.detailsOpened` Details opened state.
          * @type {!GridBodyRenderer | null | undefined}
          */
-        editModeRenderer: Function,
+        editModeRenderer: {
+          type: Function,
+          sync: true,
+        },
 
         /**
          * The list of options which should be passed to cell editor component.
@@ -78,6 +81,7 @@ export const GridProEditColumnMixin = (superClass) =>
         path: {
           type: String,
           observer: '_pathChanged',
+          sync: true,
         },
 
         /** @private */
@@ -86,7 +90,7 @@ export const GridProEditColumnMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells.*)'];
+      return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells)'];
     }
 
     constructor() {
@@ -192,7 +196,7 @@ export const GridProEditColumnMixin = (superClass) =>
      */
     _getEditorValue(editor) {
       const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
-      return get(editor, path);
+      return get(path, editor);
     }
 
     /** @private */
@@ -240,7 +244,7 @@ export const GridProEditColumnMixin = (superClass) =>
       const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
       // FIXME(yuriy): Required for the flow counterpart as it is passing the string value to webcomponent
       value = this.editorType === 'checkbox' && typeof value === 'string' ? value === 'true' : value;
-      set(editor, path, value);
+      set(path, value, editor);
       if (editor.notifyPath) {
         editor.notifyPath(path, value);
       }
@@ -260,9 +264,11 @@ export const GridProEditColumnMixin = (superClass) =>
       editor.addEventListener('internal-tab', this._grid.__boundCancelCellSwitch);
       document.body.addEventListener('focusin', this._grid.__boundGlobalFocusIn);
       this._setEditorOptions(editor);
-      this._setEditorValue(editor, get(model.item, this.path));
+      this._setEditorValue(editor, get(this.path, model.item));
       editor._grid = this._grid;
+
       this._focusEditor(editor);
+      requestAnimationFrame(() => this._focusEditor(editor));
     }
 
     /**

packages/grid-pro/src/vaadin-grid-pro-inline-editing-mixin.js

@@ -10,6 +10,7 @@
  */
 import { animationFrame } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { get, set } from '@vaadin/component-base/src/path-utils.js';
 
 /**
  * @polymerMixin
@@ -194,8 +195,8 @@ export const InlineEditingMixin = (superClass) =>
 
     /** @private */
     _applyEdit({ path, value, index, item }) {
-      this.set(path, value, item);
-      this.notifyPath(`items.${index}.${path}`, value);
+      set(path, value, item);
+      this.requestContentUpdate();
     }
 
     /** @private */
@@ -365,7 +366,7 @@ export const InlineEditingMixin = (superClass) =>
         const editor = column._getEditorComponent(cell);
         if (editor) {
           const value = column._getEditorValue(editor);
-          if (value !== this.get(column.path, model.item)) {
+          if (value !== get(column.path, model.item)) {
             // In some cases, where the value comes from the editor's change
             // event (eg. custom editor in vaadin-grid-pro-flow), the event is
             // not dispatched in FF/Safari/Edge. That's due the change event

packages/grid-pro/src/vaadin-lit-grid-pro-edit-checkbox.js

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { Checkbox } from '@vaadin/checkbox/src/vaadin-lit-checkbox.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-checkbox>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * 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 GridProEditCheckbox extends Checkbox {
+  static get is() {
+    return 'vaadin-grid-pro-edit-checkbox';
+  }
+}
+
+defineCustomElement(GridProEditCheckbox);

packages/grid-pro/src/vaadin-lit-grid-pro-edit-column.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-lit-grid-pro-edit-checkbox.js';
+import './vaadin-lit-grid-pro-edit-select.js';
+import './vaadin-lit-grid-pro-edit-text-field.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
+import { GridProEditColumnMixin } from './vaadin-grid-pro-edit-column-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-column>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * 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 GridProEditColumn extends GridProEditColumnMixin(GridColumn) {
+  static get is() {
+    return 'vaadin-grid-pro-edit-column';
+  }
+}
+
+defineCustomElement(GridProEditColumn);
+
+export { GridProEditColumn };

packages/grid-pro/src/vaadin-lit-grid-pro-edit-select.js

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { Select } from '@vaadin/select/src/vaadin-lit-select.js';
+import { GridProEditSelectMixin } from './vaadin-grid-pro-edit-select-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-select>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * 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 GridProEditSelect extends GridProEditSelectMixin(Select) {
+  static get is() {
+    return 'vaadin-grid-pro-edit-select';
+  }
+}
+
+defineCustomElement(GridProEditSelect);

packages/grid-pro/src/vaadin-lit-grid-pro-edit-text-field.js

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { TextField } from '@vaadin/text-field/src/vaadin-lit-text-field.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro-edit-text-field>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * 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 GridProEditText extends TextField {
+  static get is() {
+    return 'vaadin-grid-pro-edit-text-field';
+  }
+
+  ready() {
+    super.ready();
+    this.setAttribute('theme', 'grid-pro-editor');
+  }
+}
+
+defineCustomElement(GridProEditText);

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

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2023 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js';
+import { InlineEditingMixin } from './vaadin-grid-pro-inline-editing-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-grid-pro>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * 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 GridPro extends InlineEditingMixin(Grid) {
+  static get is() {
+    return 'vaadin-grid-pro';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-grid-pro';
+  }
+}
+
+defineCustomElement(GridPro);
+
+export { GridPro };

packages/grid-pro/test/edit-column-lit.test.js

@@ -0,0 +1,3 @@
+import '../theme/lumo/vaadin-lit-grid-pro.js';
+import '../theme/lumo/vaadin-lit-grid-pro-edit-column.js';
+import './edit-column.common.js';

packages/grid-pro/test/edit-column-renderer-lit.test.js

@@ -0,0 +1,3 @@
+import '../theme/lumo/vaadin-lit-grid-pro.js';
+import '../theme/lumo/vaadin-lit-grid-pro-edit-column.js';
+import './edit-column-renderer.common.js';

packages/grid-pro/test/edit-column-renderer.common.js

@@ -260,6 +260,7 @@ describe('edit column renderer', () => {
         root.appendChild(field);
       };
       dblclick(cell._content);
+      await nextFrame();
       editor = getCellEditor(cell);
 
       const { x, y } = editor.$.clearButton.getBoundingClientRect();

packages/grid-pro/test/edit-column-type-lit.test.js

@@ -0,0 +1,4 @@
+import './not-animated-styles.js';
+import '../theme/lumo/vaadin-lit-grid-pro.js';
+import '../theme/lumo/vaadin-lit-grid-pro-edit-column.js';
+import './edit-column-type.common.js';