@vaadin/vaadin-grid 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,30 @@
 {
   "name": "@vaadin/vaadin-grid",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "A free, flexible and high-quality Web Component for showing large amounts of tabular data",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-grid"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-grid/issues"
+  },
   "main": "vaadin-grid.js",
   "module": "vaadin-grid.js",
-  "repository": "vaadin/vaadin-grid",
+  "files": [
+    "all-imports.js",
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "vaadin",
     "elements",
@@ -17,38 +37,8 @@
     "data-grid",
     "data-table"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-grid/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "all-imports.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-virtual-list": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "@vaadin/vaadin-template-renderer": "^22.0.0-alpha6",
-    "lit": "^2.0.0-rc.1",
-    "sinon": "^9.2.0"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/grid": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

package/src/vaadin-grid-column-group.d.ts

@@ -1,62 +1,19 @@
-import { GridDefaultItem } from './interfaces';
-import { ColumnBaseMixin, GridColumnElement } from './vaadin-grid-column.js';
-
 /**
- * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
- * to configure additional headers and footers.
- *
- * Groups can be nested to create complex header and footer configurations.
- *
- * #### Example:
- * ```html
- * <vaadin-grid-column-group resizable id="columnGroup">
- *   <vaadin-grid-column id="column1"></vaadin-grid-column>
- *   <vaadin-grid-column id="column2"></vaadin-grid-column>
- * </vaadin-grid-column-group>
- * ```
- *
- * ```js
- * const columnGroup = document.querySelector('#columnGroup');
- * columnGroup.headerRenderer = (root, columnGroup) => {
- *   root.textContent = 'header';
- * }
- *
- * const column1 = document.querySelector('#column1');
- * column1.headerRenderer = (root, column) => { ... };
- * column1.renderer = (root, column, model) => { ... };
- *
- * const column2 = document.querySelector('#column2');
- * column2.headerRenderer = (root, column) => { ... };
- * column2.renderer = (root, column, model) => { ... };
- * ```
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class GridColumnGroupElement<TItem = GridDefaultItem> extends HTMLElement {
-  /**
-   * Flex grow ratio for the column group as the sum of the ratios of its child columns.
-   * @attr {number} flex-grow
-   */
-  readonly flexGrow: number | null | undefined;
-
-  /**
-   * Width of the column group as the sum of the widths of its child columns.
-   */
-  readonly width: string | null | undefined;
-
-  _columnPropChanged(path: string, value?: unknown | null): void;
-
-  _updateFlexAndWidth(): void;
-
-  _getChildColumns(el: GridColumnGroupElement<TItem>): GridColumnElement<TItem>[];
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridColumnGroup } from '@vaadin/grid/src/vaadin-grid-column-group.js';
 
-  _isColumnElement(node: Node): boolean;
-}
-
-interface GridColumnGroupElement<TItem = GridDefaultItem> extends ColumnBaseMixin<TItem> {}
+/**
+ * @deprecated Import `GridColumnGroup` from `@vaadin/grid/vaadin-grid-column-group` instead.
+ */
+export type GridColumnGroupElement<TItem = GridDefaultItem> = GridColumnGroup<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-column-group': GridColumnGroupElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridColumnGroup` from `@vaadin/grid/vaadin-grid-column-group` instead.
+ */
+export const GridColumnGroupElement: typeof GridColumnGroup;
 
-export { GridColumnGroupElement };
+export * from '@vaadin/grid/src/vaadin-grid-column-group.js';

package/src/vaadin-grid-column-group.js

@@ -3,318 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { microTask } from '@polymer/polymer/lib/utils/async.js';
-import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
-import { ColumnBaseMixin } from './vaadin-grid-column.js';
-import { updateColumnOrders } from './vaadin-grid-helpers.js';
+import { GridColumnGroup } from '@vaadin/grid/src/vaadin-grid-column-group.js';
 
 /**
- * A `<vaadin-grid-column-group>` is used to make groups of columns in `<vaadin-grid>` and
- * to configure additional headers and footers.
- *
- * Groups can be nested to create complex header and footer configurations.
- *
- * #### Example:
- * ```html
- * <vaadin-grid-column-group resizable id="columnGroup">
- *   <vaadin-grid-column id="column1"></vaadin-grid-column>
- *   <vaadin-grid-column id="column2"></vaadin-grid-column>
- * </vaadin-grid-column-group>
- * ```
- *
- * ```js
- * const columnGroup = document.querySelector('#columnGroup');
- * columnGroup.headerRenderer = (root, columnGroup) => {
- *   root.textContent = 'header';
- * }
- *
- * const column1 = document.querySelector('#column1');
- * column1.headerRenderer = (root, column) => { ... };
- * column1.renderer = (root, column, model) => { ... };
- *
- * const column2 = document.querySelector('#column2');
- * column2.headerRenderer = (root, column) => { ... };
- * column2.renderer = (root, column, model) => { ... };
- * ```
- *
- * @extends HTMLElement
- * @mixes ColumnBaseMixin
+ * @deprecated Import `GridColumnGroup` from `@vaadin/grid/vaadin-grid-column-group` instead.
  */
-class GridColumnGroupElement extends ColumnBaseMixin(PolymerElement) {
-  static get is() {
-    return 'vaadin-grid-column-group';
-  }
+export const GridColumnGroupElement = GridColumnGroup;
 
-  static get properties() {
-    return {
-      /** @private */
-      _childColumns: {
-        value: function () {
-          return this._getChildColumns(this);
-        }
-      },
-
-      /**
-       * Flex grow ratio for the column group as the sum of the ratios of its child columns.
-       * @attr {number} flex-grow
-       */
-      flexGrow: {
-        type: Number,
-        readOnly: true
-      },
-
-      /**
-       * Width of the column group as the sum of the widths of its child columns.
-       */
-      width: {
-        type: String,
-        readOnly: true
-      },
-
-      /** @private */
-      _visibleChildColumns: Array,
-
-      /** @private */
-      _colSpan: Number,
-
-      /** @private */
-      _rootColumns: Array
-    };
-  }
-
-  static get observers() {
-    return [
-      '_updateVisibleChildColumns(_childColumns)',
-      '_childColumnsChanged(_childColumns)',
-      '_groupFrozenChanged(frozen, _rootColumns)',
-      '_groupHiddenChanged(hidden, _rootColumns)',
-      '_visibleChildColumnsChanged(_visibleChildColumns)',
-      '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
-      '_groupOrderChanged(_order, _rootColumns)',
-      '_groupReorderStatusChanged(_reorderStatus, _rootColumns)',
-      '_groupResizableChanged(resizable, _rootColumns)'
-    ];
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._addNodeObserver();
-    this._updateFlexAndWidth();
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._observer && this._observer.disconnect();
-  }
-
-  /**
-   * @param {string} path
-   * @param {unknown=} value
-   * @protected
-   */
-  _columnPropChanged(path, value) {
-    if (path === 'hidden') {
-      this._preventHiddenCascade = true;
-      this._updateVisibleChildColumns(this._childColumns);
-      this._preventHiddenCascade = false;
-    }
-
-    if (/flexGrow|width|hidden|_childColumns/.test(path)) {
-      this._updateFlexAndWidth();
-    }
-
-    if (path === 'frozen') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this.frozen = this.frozen || value;
-    }
-
-    if (path === 'lastFrozen') {
-      // Don’t unfreeze the frozen group because of a non-frozen child
-      this._lastFrozen = this._lastFrozen || value;
-    }
-  }
-
-  /** @private */
-  _groupOrderChanged(order, rootColumns) {
-    if (rootColumns) {
-      const _rootColumns = rootColumns.slice(0);
-
-      if (!order) {
-        _rootColumns.forEach((column) => (column._order = 0));
-        return;
-      }
-      // The parent column order number cascades downwards to it's children
-      // so that the resulting order numbering constructs as follows:
-      // [             1000              ]
-      // [     1100    ] | [     1200    ]
-      // [1110] | [1120] | [1210] | [1220]
-
-      // Trailing zeros are counted so we know the level on which we're working on.
-      const trailingZeros = /(0+)$/.exec(order).pop().length;
-
-      // In an unlikely situation where a group has more than 9 child columns,
-      // the child scope must have 1 digit less...
-      // Log^a_b = Ln(a)/Ln(b)
-      // Number of digits of a number is equal to floor(Log(number)_10) + 1
-      const childCountDigits = ~~(Math.log(rootColumns.length) / Math.LN10) + 1;
-
-      // Final scope for the child columns needs to mind both factors.
-      const scope = Math.pow(10, trailingZeros - childCountDigits);
-
-      if (_rootColumns[0] && _rootColumns[0]._order) {
-        _rootColumns.sort((a, b) => a._order - b._order);
-      }
-      updateColumnOrders(_rootColumns, scope, order);
-    }
-  }
-
-  /** @private */
-  _groupReorderStatusChanged(reorderStatus, rootColumns) {
-    if (reorderStatus === undefined || rootColumns === undefined) {
-      return;
-    }
-
-    rootColumns.forEach((column) => (column._reorderStatus = reorderStatus));
-  }
-
-  /** @private */
-  _groupResizableChanged(resizable, rootColumns) {
-    if (resizable === undefined || rootColumns === undefined) {
-      return;
-    }
-
-    rootColumns.forEach((column) => (column.resizable = resizable));
-  }
-
-  /** @private */
-  _updateVisibleChildColumns(childColumns) {
-    this._visibleChildColumns = Array.prototype.filter.call(childColumns, (col) => !col.hidden);
-  }
-
-  /** @private */
-  _childColumnsChanged(childColumns) {
-    if (!this._autoHidden && this.hidden) {
-      Array.prototype.forEach.call(childColumns, (column) => (column.hidden = true));
-      this._updateVisibleChildColumns(childColumns);
-    }
-  }
-
-  /** @protected */
-  _updateFlexAndWidth() {
-    if (!this._visibleChildColumns) {
-      return;
-    }
-
-    if (this._visibleChildColumns.length) {
-      this._setWidth(
-        'calc(' +
-          Array.prototype.reduce
-            .call(
-              this._visibleChildColumns,
-              (prev, curr) => (prev += ' + ' + (curr.width || '0px').replace('calc', '')),
-              ''
-            )
-            .substring(3) +
-          ')'
-      );
-    } else {
-      this._setWidth('0px');
-    }
-
-    this._setFlexGrow(Array.prototype.reduce.call(this._visibleChildColumns, (prev, curr) => prev + curr.flexGrow, 0));
-  }
-
-  /** @private */
-  _groupFrozenChanged(frozen, rootColumns) {
-    if (rootColumns === undefined || frozen === undefined) {
-      return;
-    }
-
-    // Don’t propagate the default `false` value.
-    if (frozen !== false) {
-      Array.from(rootColumns).forEach((col) => (col.frozen = frozen));
-    }
-  }
-
-  /** @private */
-  _groupHiddenChanged(hidden, rootColumns) {
-    if (rootColumns && !this._preventHiddenCascade) {
-      this._ignoreVisibleChildColumns = true;
-      rootColumns.forEach((column) => (column.hidden = hidden));
-      this._ignoreVisibleChildColumns = false;
-    }
-
-    this._columnPropChanged('hidden');
-  }
-
-  /** @private */
-  _visibleChildColumnsChanged(visibleChildColumns) {
-    this._colSpan = visibleChildColumns.length;
-
-    if (!this._ignoreVisibleChildColumns) {
-      if (visibleChildColumns.length === 0) {
-        this._autoHidden = this.hidden = true;
-      } else if (this.hidden && this._autoHidden) {
-        this._autoHidden = this.hidden = false;
-      }
-    }
-  }
-
-  /** @private */
-  _colSpanChanged(colSpan, headerCell, footerCell) {
-    if (headerCell) {
-      headerCell.setAttribute('colspan', colSpan);
-      this._grid && this._grid._a11yUpdateCellColspan(headerCell, colSpan);
-    }
-    if (footerCell) {
-      footerCell.setAttribute('colspan', colSpan);
-      this._grid && this._grid._a11yUpdateCellColspan(footerCell, colSpan);
-    }
-  }
-
-  /**
-   * @param {!GridColumnGroupElement} el
-   * @return {!Array<!GridColumnElement>}
-   * @protected
-   */
-  _getChildColumns(el) {
-    return FlattenedNodesObserver.getFlattenedNodes(el).filter(this._isColumnElement);
-  }
-
-  /** @private */
-  _addNodeObserver() {
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      if (
-        info.addedNodes.filter(this._isColumnElement).length > 0 ||
-        info.removedNodes.filter(this._isColumnElement).length > 0
-      ) {
-        this._preventHiddenCascade = true;
-        this._rootColumns = this._getChildColumns(this);
-        this._childColumns = this._rootColumns;
-        this._preventHiddenCascade = false;
-
-        // Update the column tree with microtask timing to avoid shady style scope issues
-        microTask.run(() => {
-          this._grid && this._grid._updateColumnTree && this._grid._updateColumnTree();
-        });
-      }
-    });
-    this._observer.flush();
-  }
-
-  /**
-   * @param {!Node} node
-   * @return {boolean}
-   * @protected
-   */
-  _isColumnElement(node) {
-    return node.nodeType === Node.ELEMENT_NODE && /\bcolumn\b/.test(node.localName);
-  }
-}
-
-customElements.define(GridColumnGroupElement.is, GridColumnGroupElement);
-
-export { GridColumnGroupElement };
+export * from '@vaadin/grid/src/vaadin-grid-column-group.js';

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

@@ -1,147 +1,19 @@
-import { GridElement } from './vaadin-grid.js';
-
-import { GridBodyRenderer, GridColumnTextAlign, GridHeaderFooterRenderer, GridDefaultItem } from './interfaces';
-
-declare function ColumnBaseMixin<TItem, T extends new (...args: any[]) => {}>(
-  base: T
-): T & ColumnBaseMixinConstructor<TItem>;
-
-export interface ColumnBaseMixinConstructor<TItem> {
-  new (...args: any[]): ColumnBaseMixin<TItem>;
-}
-
-interface ColumnBaseMixin<TItem> {
-  readonly _grid: GridElement<TItem> | undefined;
-  readonly _allCells: HTMLElement[];
-
-  /**
-   * When set to true, the column is user-resizable.
-   */
-  resizable: boolean | null | undefined;
-
-  /**
-   * When true, the column is frozen. When a column inside of a column group is frozen,
-   * all of the sibling columns inside the group will get frozen also.
-   */
-  frozen: boolean;
-
-  /**
-   * When set to true, the cells for this column are hidden.
-   */
-  hidden: boolean;
-
-  /**
-   * Text content to display in the header cell of the column.
-   */
-  header: string | null | undefined;
-
-  /**
-   * Aligns the columns cell content horizontally.
-   * Supported values: "start", "center" and "end".
-   * @attr {start|center|end} text-align
-   */
-  textAlign: GridColumnTextAlign | null | undefined;
-
-  _lastFrozen: boolean;
-
-  _order: number | null | undefined;
-
-  _emptyCells: HTMLElement[] | null;
-
-  /**
-   * Custom function for rendering the header content.
-   * Receives two arguments:
-   *
-   * - `root` The header cell content DOM element. Append your content to it.
-   * - `column` The `<vaadin-grid-column>` element.
-   */
-  headerRenderer: GridHeaderFooterRenderer<TItem> | null | undefined;
-
-  /**
-   * Custom function for rendering the footer content.
-   * Receives two arguments:
-   *
-   * - `root` The footer cell content DOM element. Append your content to it.
-   * - `column` The `<vaadin-grid-column>` element.
-   */
-  footerRenderer: GridHeaderFooterRenderer<TItem> | null | undefined;
-
-  _findHostGrid(): GridElement<TItem> | undefined;
-
-  _generateHeader(path: string): string;
-
-  _toggleAttribute(name: string, bool: boolean, node: Element): void;
-}
-
 /**
- * A `<vaadin-grid-column>` is used to configure how a column in `<vaadin-grid>`
- * should look like.
- *
- * See [`<vaadin-grid>`](#/elements/vaadin-grid) documentation for instructions on how
- * to configure the `<vaadin-grid-column>`.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class GridColumnElement<TItem = GridDefaultItem> extends HTMLElement {
-  /**
-   * Width of the cells for this column.
-   */
-  width: string | null | undefined;
-
-  /**
-   * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
-   * @attr {number} flex-grow
-   */
-  flexGrow: number;
-
-  /**
-   * Custom function for rendering the cell content.
-   * Receives three arguments:
-   *
-   * - `root` The cell content DOM element. Append your content to it.
-   * - `column` The `<vaadin-grid-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.
-   */
-  renderer: GridBodyRenderer<TItem> | null | undefined;
-
-  /**
-   * Path to an item sub-property whose value gets displayed in the column body cells.
-   * The property name is also shown in the column header if an explicit header or renderer isn't defined.
-   */
-  path: string | null | undefined;
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridColumn } from '@vaadin/grid/src/vaadin-grid-column.js';
 
-  /**
-   * Automatically sets the width of the column based on the column contents when this is set to `true`.
-   *
-   * For performance reasons the column width is calculated automatically only once when the grid items
-   * are rendered for the first time and the calculation only considers the rows which are currently
-   * rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell
-   * content changes, the column width might not match the contents anymore.
-   *
-   * Hidden columns are ignored in the calculation and their widths are not automatically updated when
-   * you show a column that was initially hidden.
-   *
-   * You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.
-   *
-   * The column width may still grow larger when `flexGrow` is not 0.
-   * @attr {boolean} auto-width
-   */
-  autoWidth: boolean;
-
-  _cells: HTMLElement[] | null;
-}
-
-interface GridColumnElement<TItem = GridDefaultItem> extends ColumnBaseMixin<TItem> {}
+/**
+ * @deprecated Import `GridColumn` from `@vaadin/grid/vaadin-grid-column` instead.
+ */
+export type GridColumnElement<TItem = GridDefaultItem> = GridColumn<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-column': GridColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridColumn` from `@vaadin/grid/vaadin-grid-column` instead.
+ */
+export const GridColumnElement: typeof GridColumn;
 
-export { ColumnBaseMixin, GridColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-column.js';