@vaadin/vaadin-grid-pro 22.0.0-alpha5 → 22.0.0-alpha9

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-grid-pro",
-  "version": "22.0.0-alpha5",
+  "version": "22.0.0-alpha9",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-grid-pro",
+  "license": "https://raw.githubusercontent.com/vaadin/web-components/master/packages/vaadin-grid-pro/LICENSE",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-grid-pro"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-grid-pro/issues"
+  },
   "main": "vaadin-grid-pro.js",
   "module": "vaadin-grid-pro.js",
-  "repository": "vaadin/vaadin-grid-pro",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-grid-pro",
@@ -12,43 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "SEE LICENSE IN LICENSE",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-grid-pro/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^22.0.0-alpha5",
-    "@vaadin/select": "^22.0.0-alpha5",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha5",
-    "@vaadin/vaadin-grid": "^22.0.0-alpha5",
-    "@vaadin/vaadin-item": "^22.0.0-alpha5",
-    "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^22.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha5",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha5"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-date-picker": "^22.0.0-alpha5",
-    "@vaadin/vaadin-dialog": "^22.0.0-alpha5",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha5",
-    "lit": "^2.0.0-rc.1",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/grid-pro": "22.0.0-alpha9"
   },
-  "gitHead": "012f658db6f81375be8889f63ee15e3f660fe9ec"
+  "gitHead": "6e8c899dc65918f97e3c0acb2076122c4b2ef274"
 }

package/src/vaadin-grid-pro-edit-checkbox.js

@@ -4,18 +4,4 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-import { CheckboxElement } from '@vaadin/checkbox/src/vaadin-checkbox.js';
-
-/**
- * An element used internally by `<vaadin-grid-pro>`. Not intended to be used separately.
- *
- * @extends CheckboxElement
- * @private
- */
-class GridProEditCheckboxElement extends CheckboxElement {
-  static get is() {
-    return 'vaadin-grid-pro-edit-checkbox';
-  }
-}
-
-customElements.define(GridProEditCheckboxElement.is, GridProEditCheckboxElement);
+export * from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-checkbox.js';

package/src/vaadin-grid-pro-edit-column.d.ts

@@ -1,85 +1,20 @@
-import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
-
-import { GridDefaultItem, GridBodyRenderer, GridItemModel } from '@vaadin/vaadin-grid';
-
-import { GridProEditorType } from './interfaces';
-
 /**
- * `<vaadin-grid-pro-edit-column>` is a helper element for the `<vaadin-grid-pro>`
- * that provides default inline editing for the items.
- *
- * __Note that the `path` property must be explicitly specified for edit column.__
- *
- * #### Example:
- * ```html
- * <vaadin-grid-pro items="[[items]]">
- *  <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
+ * @license
+ * Copyright (c) 2019 - 2021 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
+ * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-declare class GridProEditColumnElement<TItem = GridDefaultItem> extends GridColumnElement<TItem> {
-  /**
-   * JS Path of the property in the item used for the editable content.
-   */
-  path: string | null | undefined;
-
-  /**
-   * Custom function for rendering the cell content in edit mode.
-   * Receives three arguments:
-   *
-   * - `root` The cell content DOM element. Append your editor component to it.
-   * - `column` The `<vaadin-grid-pro-edit-column>` element.
-   * - `model` The object with the properties related with
-   *   the rendered item, contains:
-   *   - `model.index` The index of the item.
-   *   - `model.item` The item.
-   *   - `model.expanded` Sublevel toggle state.
-   *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-   *   - `model.selected` Selected state.
-   *   - `model.detailsOpened` Details opened state.
-   */
-  editModeRenderer: GridBodyRenderer<TItem> | null | undefined;
-
-  /**
-   * The list of options which should be passed to cell editor component.
-   * Used with the `select` editor type, to provide a list of items.
-   */
-  editorOptions: string[];
-
-  /**
-   * Type of the cell editor component to be rendered. Allowed values:
-   * - `text` (default) - renders a text field
-   * - `checkbox` - renders a checkbox
-   * - `select` - renders a select with a list of items passed as `editorOptions`
-   *
-   * Editor type is set to `custom` when `editModeRenderer` is set.
-   * @attr {text|checkbox|select|custom} editor-type
-   */
-  editorType: GridProEditorType;
-
-  /**
-   * Path of the property used for the value of the editor component.
-   * @attr {string} editor-value-path
-   */
-  editorValuePath: string;
-
-  _getEditorTagName(cell: HTMLElement): string;
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridProEditColumn } from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-column.js';
 
-  _getEditorComponent(cell: HTMLElement): HTMLElement | null;
-
-  _getEditorValue(editor: HTMLElement): unknown | null;
-
-  _startCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
-
-  _stopCellEdit(cell: HTMLElement, model: GridItemModel<TItem>): void;
-}
+/**
+ * @deprecated Import `GridProEditColumn` from `@vaadin/grid-pro/vaadin-grid-pro-edit-column` instead.
+ */
+export type GridProEditColumnElement<TItem = GridDefaultItem> = GridProEditColumn<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-pro-edit-column': GridProEditColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridProEditColumn` from `@vaadin/grid-pro/vaadin-grid-pro-edit-column` instead.
+ */
+export const GridProEditColumnElement: typeof GridProEditColumn;
 
-export { GridProEditColumnElement };
+export * from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-column.js';

package/src/vaadin-grid-pro-edit-column.js

@@ -4,279 +4,11 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-import { get, set } from '@polymer/polymer/lib/utils/path.js';
-import { GridColumnElement } from '@vaadin/vaadin-grid/src/vaadin-grid-column.js';
-import './vaadin-grid-pro-edit-checkbox.js';
-import './vaadin-grid-pro-edit-select.js';
-import './vaadin-grid-pro-edit-text-field.js';
+import { GridProEditColumn } from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-column.js';
 
 /**
- * `<vaadin-grid-pro-edit-column>` is a helper element for the `<vaadin-grid-pro>`
- * that provides default inline editing for the items.
- *
- * __Note that the `path` property must be explicitly specified for edit column.__
- *
- * #### Example:
- * ```html
- * <vaadin-grid-pro items="[[items]]">
- *  <vaadin-grid-pro-edit-column path="name.first"></vaadin-grid-pro-edit-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
- *
- * @extends GridColumnElement
+ * @deprecated Import `GridProEditColumn` from `@vaadin/grid-pro/vaadin-grid-pro-edit-column` instead.
  */
-class GridProEditColumnElement extends GridColumnElement {
-  static get is() {
-    return 'vaadin-grid-pro-edit-column';
-  }
+export const GridProEditColumnElement = GridProEditColumn;
 
-  static get properties() {
-    return {
-      /**
-       * Custom function for rendering the cell content in edit mode.
-       * Receives three arguments:
-       *
-       * - `root` The cell content DOM element. Append your editor component to it.
-       * - `column` The `<vaadin-grid-pro-edit-column>` element.
-       * - `model` The object with the properties related with
-       *   the rendered item, contains:
-       *   - `model.index` The index of the item.
-       *   - `model.item` The item.
-       *   - `model.expanded` Sublevel toggle state.
-       *   - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
-       *   - `model.selected` Selected state.
-       *   - `model.detailsOpened` Details opened state.
-       * @type {!GridBodyRenderer | null | undefined}
-       */
-      editModeRenderer: Function,
-
-      /**
-       * The list of options which should be passed to cell editor component.
-       * Used with the `select` editor type, to provide a list of items.
-       * @type {!Array<string>}
-       */
-      editorOptions: {
-        type: Array,
-        value: () => []
-      },
-
-      /**
-       * Type of the cell editor component to be rendered. Allowed values:
-       * - `text` (default) - renders a text field
-       * - `checkbox` - renders a checkbox
-       * - `select` - renders a select with a list of items passed as `editorOptions`
-       *
-       * Editor type is set to `custom` when `editModeRenderer` is set.
-       * @attr {text|checkbox|select|custom} editor-type
-       * @type {!GridProEditorType}
-       */
-      editorType: {
-        type: String,
-        notify: true, // FIXME(web-padawan): needed by Flow counterpart
-        value: 'text'
-      },
-
-      /**
-       * Path of the property used for the value of the editor component.
-       * @attr {string} editor-value-path
-       * @type {string}
-       */
-      editorValuePath: {
-        type: String,
-        value: 'value'
-      },
-
-      /**
-       * JS Path of the property in the item used for the editable content.
-       */
-      path: {
-        type: String,
-        observer: '_pathChanged'
-      },
-
-      /** @private */
-      _oldRenderer: Function
-    };
-  }
-
-  static get observers() {
-    return ['_editModeRendererChanged(editModeRenderer, __initialized)', '_cellsChanged(_cells.*)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__editModeRenderer = function (root, column) {
-      const cell = root.assignedSlot.parentNode;
-
-      const tagName = column._getEditorTagName(cell);
-      if (!root.firstElementChild || root.firstElementChild.localName.toLowerCase() !== tagName) {
-        root.innerHTML = `
-          <${tagName}></${tagName}>
-        `;
-      }
-    };
-  }
-
-  /** @private */
-  _pathChanged(path) {
-    if (!path || path.length == 0) {
-      throw new Error('You should specify the path for the edit column');
-    }
-  }
-
-  /** @private */
-  _cellsChanged() {
-    this._cells.forEach((cell) => {
-      const part = cell.getAttribute('part');
-      if (part.indexOf('editable-cell') < 0) {
-        cell.setAttribute('part', part + ' editable-cell');
-      }
-    });
-  }
-
-  /** @private */
-  _editModeRendererChanged(renderer) {
-    if (renderer) {
-      this.editorType = 'custom';
-    } else if (this._oldRenderer) {
-      this.editorType = 'text';
-    }
-
-    this._oldRenderer = renderer;
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @return {string}
-   * @protected
-   */
-  _getEditorTagName(cell) {
-    return this.editorType === 'custom' ? this._getEditorComponent(cell).localName : this._getTagNameByType();
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @return {HTMLElement | null}
-   * @protected
-   */
-  _getEditorComponent(cell) {
-    return this.editorType === 'custom'
-      ? cell._content.firstElementChild
-      : cell._content.querySelector(this._getEditorTagName(cell));
-  }
-
-  /** @private */
-  _getTagNameByType() {
-    let type;
-    switch (this.editorType) {
-      case 'checkbox':
-        type = 'checkbox';
-        break;
-      case 'select':
-        type = 'select';
-        break;
-      case 'text':
-      default:
-        type = 'text-field';
-        break;
-    }
-    return this.constructor.is.replace('column', type);
-  }
-
-  /** @private */
-  _focusEditor(editor) {
-    editor.focus();
-    if (this.editorType === 'checkbox') {
-      editor.setAttribute('focus-ring', '');
-    } else if (editor instanceof HTMLInputElement) {
-      editor.select();
-    } else if (editor.focusElement && editor.focusElement instanceof HTMLInputElement) {
-      editor.focusElement.select();
-    }
-  }
-
-  /**
-   * @param {!HTMLElement} editor
-   * @return {unknown}
-   * @protected
-   */
-  _getEditorValue(editor) {
-    const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
-    return get(editor, path);
-  }
-
-  /** @private */
-  _renderEditor(cell, model) {
-    cell.__savedRenderer = this._renderer || cell._renderer;
-    cell._renderer = this.editModeRenderer || this.__editModeRenderer;
-
-    this._clearCellContent(cell);
-    this._runRenderer(cell._renderer, cell, model);
-  }
-
-  /** @private */
-  _removeEditor(cell, _model) {
-    if (!cell.__savedRenderer) return;
-
-    cell._renderer = cell.__savedRenderer;
-    cell.__savedRenderer = undefined;
-
-    this._clearCellContent(cell);
-
-    const row = cell.parentElement;
-    this._grid._updateItem(row, row._item);
-  }
-
-  /** @private */
-  _setEditorOptions(editor) {
-    if (this.editorOptions && this.editorOptions.length) {
-      editor.options = this.editorOptions;
-    }
-  }
-
-  /** @private */
-  _setEditorValue(editor, value) {
-    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);
-    editor.notifyPath && editor.notifyPath(path, value);
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @param {!GridItemModel} model
-   * @protected
-   */
-  _startCellEdit(cell, model) {
-    this._renderEditor(cell, model);
-
-    const editor = this._getEditorComponent(cell);
-    editor.addEventListener('focusout', this._grid.__boundEditorFocusOut);
-    editor.addEventListener('focusin', this._grid.__boundEditorFocusIn);
-    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));
-    editor._grid = this._grid;
-    this._focusEditor(editor);
-  }
-
-  /**
-   * @param {!HTMLElement} cell
-   * @param {!GridItemModel} model
-   * @protected
-   */
-  _stopCellEdit(cell, model) {
-    document.body.removeEventListener('focusin', this._grid.__boundGlobalFocusIn);
-
-    this._removeEditor(cell, model);
-  }
-}
-
-customElements.define(GridProEditColumnElement.is, GridProEditColumnElement);
-
-export { GridProEditColumnElement };
+export * from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-column.js';

package/src/vaadin-grid-pro-edit-select.js

@@ -4,125 +4,4 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-import { Select } from '@vaadin/select/src/vaadin-select.js';
-import '@vaadin/vaadin-list-box/src/vaadin-list-box.js';
-import '@vaadin/vaadin-item/src/vaadin-item.js';
-
-/**
- * An element used internally by `<vaadin-grid-pro>`. Not intended to be used separately.
- *
- * @extends Select
- * @private
- */
-class GridProEditSelectElement extends Select {
-  static get is() {
-    return 'vaadin-grid-pro-edit-select';
-  }
-
-  static get properties() {
-    return {
-      options: {
-        type: Array,
-        value: () => []
-      },
-
-      _grid: {
-        type: Object
-      },
-
-      _initialized: {
-        type: Boolean
-      }
-    };
-  }
-
-  static get observers() {
-    return ['_optionsChanged(options)'];
-  }
-
-  ready() {
-    super.ready();
-
-    this.setAttribute('theme', 'grid-pro-editor');
-
-    this.__boundOnKeyDown = this.__onOverlayKeyDown.bind(this);
-    this._overlayElement.addEventListener('keydown', this.__boundOnKeyDown);
-  }
-
-  _onKeyDown(e) {
-    super._onKeyDown(e);
-
-    if (this.options.length === 0 && /^(ArrowDown|Down|ArrowUp|Up|Enter|SpaceBar| )$/.test(e.key)) {
-      console.warn('Missing "editorOptions" for <vaadin-grid-pro-edit-column> select editor!');
-    }
-    // Event handled in select, stop here
-    if (e.defaultPrevented) {
-      e.stopPropagation();
-    }
-  }
-
-  __onOverlayKeyDown(e) {
-    if (e.keyCode === 9) {
-      !this._grid.singleCellEdit && this._grid._switchEditCell(e);
-    }
-  }
-
-  _valueChanged(value, oldValue) {
-    super._valueChanged(value, oldValue);
-
-    // select is first created without a value
-    if (value === '' && oldValue === undefined) {
-      return;
-    }
-    if (this._initialized) {
-      const enter = this._enterKeydown;
-      if (enter && this._grid.enterNextRow) {
-        this._grid._switchEditCell(enter);
-      } else if (this._grid.singleCellEdit) {
-        this._grid._stopEdit(false, true);
-      } else {
-        this.focus();
-      }
-    }
-  }
-
-  _optionsChanged(options) {
-    if (options && options.length) {
-      this.renderer = (root) => {
-        if (root.firstChild) {
-          return;
-        }
-        const listBox = document.createElement('vaadin-list-box');
-        listBox.selected = options.indexOf(this.value);
-        options.forEach((option) => {
-          const item = document.createElement('vaadin-item');
-          item.textContent = option;
-          listBox.appendChild(item);
-        });
-
-        // save the "keydown" event for Enter
-        listBox.addEventListener('keydown', (e) => {
-          if (e.keyCode === 13) {
-            this._enterKeydown = e;
-          }
-        });
-
-        root.appendChild(listBox);
-      };
-
-      this._overlayElement.addEventListener('vaadin-overlay-outside-click', () => {
-        this._grid._stopEdit();
-      });
-
-      // FIXME(web-padawan): _updateValueSlot() in `vaadin-select` resets opened to false
-      // see https://github.com/vaadin/vaadin-list-mixin/issues/49
-      setTimeout(() => {
-        this.opened = true;
-        // any value change after first open will stop edit
-        this._initialized = true;
-      });
-    }
-  }
-}
-
-customElements.define(GridProEditSelectElement.is, GridProEditSelectElement);
+export * from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-select.js';

package/src/vaadin-grid-pro-edit-text-field.js

@@ -4,23 +4,4 @@
  * This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
  * See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
  */
-import { TextFieldElement } from '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
-
-/**
- * An element used internally by `<vaadin-grid-pro>`. Not intended to be used separately.
- *
- * @extends TextFieldElement
- * @private
- */
-class GridProEditTextFieldElement extends TextFieldElement {
-  static get is() {
-    return 'vaadin-grid-pro-edit-text-field';
-  }
-
-  ready() {
-    super.ready();
-    this.setAttribute('theme', 'grid-pro-editor');
-  }
-}
-
-customElements.define(GridProEditTextFieldElement.is, GridProEditTextFieldElement);
+export * from '@vaadin/grid-pro/src/vaadin-grid-pro-edit-text-field.js';