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

package/theme/lumo/vaadin-grid-column-group.js

@@ -1 +1 @@
-import '../../src/vaadin-grid-column-group.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-column-group.js';

package/theme/lumo/vaadin-grid-column.js

@@ -1 +1 @@
-import '../../src/vaadin-grid-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-column.js';

package/theme/lumo/vaadin-grid-filter-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-filter-column.js';

package/theme/lumo/vaadin-grid-filter.js

@@ -1,2 +1 @@
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-filter.js';

package/theme/lumo/vaadin-grid-selection-column.js

@@ -1,2 +1 @@
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-selection-column.js';

package/theme/lumo/vaadin-grid-sort-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-sort-column.js';

package/theme/lumo/vaadin-grid-sorter.js

@@ -1,2 +1 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';

package/theme/lumo/vaadin-grid-tree-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-tree-column.js';

package/theme/lumo/vaadin-grid-tree-toggle.js

@@ -1,2 +1 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-grid-tree-toggle.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid-tree-toggle.js';

package/theme/lumo/vaadin-grid.js

@@ -1,9 +1 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-grid.js';
+import '@vaadin/grid/theme/lumo/vaadin-grid.js';

package/theme/material/vaadin-grid-column-group.js

@@ -1 +1 @@
-import '../../src/vaadin-grid-column-group.js';
+import '@vaadin/grid/theme/material/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column.js

@@ -1 +1 @@
-import '../../src/vaadin-grid-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-column.js';

package/theme/material/vaadin-grid-filter-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-filter.js';
-import '../../src/vaadin-grid-filter-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter.js

@@ -1,2 +1 @@
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
-import '../../src/vaadin-grid-filter.js';
+import '@vaadin/grid/theme/material/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-selection-column.js

@@ -1,2 +1 @@
-import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
-import '../../src/vaadin-grid-selection-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-sort-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-sorter.js';
-import '../../src/vaadin-grid-sort-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-sort-column.js';

package/theme/material/vaadin-grid-sorter.js

@@ -1,2 +1 @@
-import './vaadin-grid-sorter-styles.js';
-import '../../src/vaadin-grid-sorter.js';
+import '@vaadin/grid/theme/material/vaadin-grid-sorter.js';

package/theme/material/vaadin-grid-tree-column.js

@@ -1,2 +1 @@
-import './vaadin-grid-tree-toggle.js';
-import '../../src/vaadin-grid-tree-column.js';
+import '@vaadin/grid/theme/material/vaadin-grid-tree-column.js';

package/theme/material/vaadin-grid-tree-toggle.js

@@ -1,2 +1 @@
-import './vaadin-grid-tree-toggle-styles.js';
-import '../../src/vaadin-grid-tree-toggle.js';
+import '@vaadin/grid/theme/material/vaadin-grid-tree-toggle.js';

package/theme/material/vaadin-grid.js

@@ -1,2 +1 @@
-import './vaadin-grid-styles.js';
-import '../../src/vaadin-grid.js';
+import '@vaadin/grid/theme/material/vaadin-grid.js';

package/vaadin-grid.d.ts

@@ -1,3 +1,2 @@
 export * from './src/vaadin-grid.js';
 export * from './src/vaadin-grid-column.js';
-export * from './src/interfaces';

package/src/array-data-provider.js

@@ -1,145 +0,0 @@
-/**
- * Returns a sub-property of an object
- *
- * @param {string} path dot-separated path to the sub property
- * @param {*} object
- * @returns {*}
- */
-function get(path, object) {
-  return path.split('.').reduce((obj, property) => obj[property], object);
-}
-
-/**
- * Check array of filters/sorters for paths validity, console.warn invalid items
- * @param {!Array<!GridFilter | !GridSorter>} arrayToCheck The array of filters/sorters to check
- * @param {string} action The name of action to include in warning (filtering, sorting)
- * @param {!Array<!GridItem>} items
- */
-function checkPaths(arrayToCheck, action, items) {
-  if (items.length === 0) {
-    return false;
-  }
-
-  let result = true;
-
-  for (let i in arrayToCheck) {
-    const path = arrayToCheck[i].path;
-
-    // skip simple paths
-    if (!path || path.indexOf('.') === -1) {
-      continue;
-    }
-
-    const parentProperty = path.replace(/\.[^.]*$/, ''); // a.b.c -> a.b
-    if (get(parentProperty, items[0]) === undefined) {
-      console.warn(`Path "${path}" used for ${action} does not exist in all of the items, ${action} is disabled.`);
-      result = false;
-    }
-  }
-
-  return result;
-}
-
-/**
- * Sorts the given array of items based on the sorting rules and returns the result.
- *
- * @param {Array<any>} items
- * @param {Array<GridSorter>} items
- * @return {Array<any>}
- */
-function multiSort(items, sortOrders) {
-  return items.sort((a, b) => {
-    return sortOrders
-      .map((sortOrder) => {
-        if (sortOrder.direction === 'asc') {
-          return compare(get(sortOrder.path, a), get(sortOrder.path, b));
-        } else if (sortOrder.direction === 'desc') {
-          return compare(get(sortOrder.path, b), get(sortOrder.path, a));
-        }
-        return 0;
-      })
-      .reduce((p, n) => {
-        return p !== 0 ? p : n;
-      }, 0);
-  });
-}
-
-/**
- * @param {unknown} value
- * @return {string}
- */
-function normalizeEmptyValue(value) {
-  if ([undefined, null].indexOf(value) >= 0) {
-    return '';
-  } else if (isNaN(value)) {
-    return value.toString();
-  } else {
-    return value;
-  }
-}
-
-/**
- * @param {unknown} a
- * @param {unknown} b
- * @return {number}
- */
-function compare(a, b) {
-  a = normalizeEmptyValue(a);
-  b = normalizeEmptyValue(b);
-
-  if (a < b) {
-    return -1;
-  }
-  if (a > b) {
-    return 1;
-  }
-  return 0;
-}
-
-/**
- * @param {!Array<!GridItem>} items
- * @return {!Array<!GridItem>}
- */
-function filter(items, filters) {
-  return items.filter((item) => {
-    return filters.every((filter) => {
-      const value = normalizeEmptyValue(get(filter.path, item));
-      const filterValueLowercase = normalizeEmptyValue(filter.value).toString().toLowerCase();
-      return value.toString().toLowerCase().includes(filterValueLowercase);
-    });
-  });
-}
-
-/**
- * WARNING: This API is still intended for internal purposes only and
- * may change any time.
- *
- * Creates a new grid compatible data provider that serves the items
- * from the given array as data when requested by the grid.
- *
- * @param {Array<any>} items
- * @return {GridDataProvider<any>}
- */
-export const createArrayDataProvider = (allItems) => {
-  return (params, callback) => {
-    let items = allItems ? [...allItems] : [];
-
-    if (params.filters && checkPaths(params.filters, 'filtering', items)) {
-      items = filter(items, params.filters);
-    }
-
-    if (
-      Array.isArray(params.sortOrders) &&
-      params.sortOrders.length &&
-      checkPaths(params.sortOrders, 'sorting', items)
-    ) {
-      items = multiSort(items, params.sortOrders);
-    }
-
-    const count = Math.min(items.length, params.pageSize);
-    const start = params.page * count;
-    const end = start + count;
-    const slice = items.slice(start, end);
-    callback(slice, items.length);
-  };
-};

package/src/interfaces.d.ts

@@ -1,78 +0,0 @@
-import { GridColumnElement } from './vaadin-grid-column.js';
-import { GridElement } from './vaadin-grid.js';
-
-export type GridBodyRenderer<TItem> = (
-  root: HTMLElement,
-  column: GridColumnElement<TItem>,
-  model: GridItemModel<TItem>
-) => void;
-
-export type GridCellClassNameGenerator<TItem> = (
-  column: GridColumnElement<TItem>,
-  model: GridItemModel<TItem>
-) => string;
-
-export type GridColumnTextAlign = 'start' | 'center' | 'end' | null;
-
-export type GridDataProviderCallback<TItem> = (items: Array<TItem>, size?: number) => void;
-
-export type GridDataProviderParams<TItem> = {
-  page: number;
-  pageSize: number;
-  filters: Array<GridFilter>;
-  sortOrders: Array<GridSorter>;
-  parentItem?: TItem;
-};
-
-export type GridDataProvider<TItem> = (
-  params: GridDataProviderParams<TItem>,
-  callback: GridDataProviderCallback<TItem>
-) => void;
-
-export type GridDragAndDropFilter<TItem> = (model: GridItemModel<TItem>) => boolean;
-
-export type GridDropLocation = 'above' | 'on-top' | 'below' | 'empty';
-
-export type GridDropMode = 'between' | 'on-top' | 'on-top-or-between' | 'on-grid';
-
-export interface GridFilter {
-  path: string;
-  value: string;
-}
-
-export interface GridEventContext<TItem> {
-  section?: 'body' | 'header' | 'footer' | 'details';
-  item?: TItem;
-  column?: GridColumnElement<TItem>;
-  index?: number;
-  selected?: boolean;
-  detailsOpened?: boolean;
-  expanded?: boolean;
-  level?: number;
-}
-
-export type GridHeaderFooterRenderer<TItem> = (root: HTMLElement, column: GridColumnElement<TItem>) => void;
-
-export type GridDefaultItem = any;
-
-export interface GridItemModel<TItem> {
-  index: number;
-  item: TItem;
-  selected?: boolean;
-  expanded?: boolean;
-  level?: number;
-  detailsOpened?: boolean;
-}
-
-export type GridRowDetailsRenderer<TItem> = (
-  root: HTMLElement,
-  grid?: GridElement<TItem>,
-  model?: GridItemModel<TItem>
-) => void;
-
-export type GridSorterDirection = 'asc' | 'desc' | null;
-
-export interface GridSorter {
-  path: string;
-  direction: GridSorterDirection;
-}

package/src/vaadin-grid-a11y-mixin.d.ts

@@ -1,27 +0,0 @@
-declare function A11yMixin<T extends new (...args: any[]) => {}>(base: T): T & A11yMixinConstructor;
-
-interface A11yMixinConstructor {
-  new (...args: any[]): A11yMixin;
-}
-
-interface A11yMixin {
-  _a11yUpdateHeaderRows(): void;
-
-  _a11yUpdateFooterRows(): void;
-
-  _a11yUpdateRowRowindex(row: HTMLElement, index: number): void;
-
-  _a11yUpdateRowSelected(row: HTMLElement, selected: boolean): void;
-
-  _a11yUpdateRowLevel(row: HTMLElement, level: number): void;
-
-  _a11yUpdateRowDetailsOpened(row: HTMLElement, detailsOpened: boolean): void;
-
-  _a11ySetRowDetailsCell(row: HTMLElement, detailsCell: HTMLElement): void;
-
-  _a11yUpdateCellColspan(cell: any, colspan: number): void;
-
-  _a11yUpdateSorters(): void;
-}
-
-export { A11yMixin, A11yMixinConstructor };

package/src/vaadin-grid-a11y-mixin.js

@@ -1,158 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-export const A11yMixin = (superClass) =>
-  class A11yMixin extends superClass {
-    static get observers() {
-      return ['_a11yUpdateGridSize(size, _columnTree, _columnTree.*)'];
-    }
-
-    /** @private */
-    _a11yGetHeaderRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer || col.path || col.header)).length;
-    }
-
-    /** @private */
-    _a11yGetFooterRowCount(_columnTree) {
-      return _columnTree.filter((level) => level.some((col) => col.headerRenderer)).length;
-    }
-
-    /** @private */
-    _a11yUpdateGridSize(size, _columnTree) {
-      if (size === undefined || _columnTree === undefined) {
-        return;
-      }
-
-      const bodyColumns = _columnTree[_columnTree.length - 1];
-      this.$.table.setAttribute(
-        'aria-rowcount',
-        size + this._a11yGetHeaderRowCount(_columnTree) + this._a11yGetFooterRowCount(_columnTree)
-      );
-      this.$.table.setAttribute('aria-colcount', (bodyColumns && bodyColumns.length) || 0);
-
-      this._a11yUpdateHeaderRows();
-      this._a11yUpdateFooterRows();
-    }
-
-    /** @protected */
-    _a11yUpdateHeaderRows() {
-      Array.from(this.$.header.children).forEach((headerRow, index) =>
-        headerRow.setAttribute('aria-rowindex', index + 1)
-      );
-    }
-
-    /** @protected */
-    _a11yUpdateFooterRows() {
-      Array.from(this.$.footer.children).forEach((footerRow, index) =>
-        footerRow.setAttribute('aria-rowindex', this._a11yGetHeaderRowCount(this._columnTree) + this.size + index + 1)
-      );
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {number} index
-     * @protected
-     */
-    _a11yUpdateRowRowindex(row, index) {
-      row.setAttribute('aria-rowindex', index + this._a11yGetHeaderRowCount(this._columnTree) + 1);
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {boolean} selected
-     * @protected
-     */
-    _a11yUpdateRowSelected(row, selected) {
-      // Jaws reads selection only for rows, NVDA only for cells
-      row.setAttribute('aria-selected', Boolean(selected));
-      Array.from(row.children).forEach((cell) => cell.setAttribute('aria-selected', Boolean(selected)));
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @protected
-     */
-    _a11yUpdateRowExpanded(row) {
-      if (this.__isRowExpandable(row)) {
-        row.setAttribute('aria-expanded', 'false');
-      } else if (this.__isRowCollapsible(row)) {
-        row.setAttribute('aria-expanded', 'true');
-      } else {
-        row.removeAttribute('aria-expanded');
-      }
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {number} level
-     * @protected
-     */
-    _a11yUpdateRowLevel(row, level) {
-      row.setAttribute('aria-level', level + 1);
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {boolean} detailsOpened
-     * @protected
-     */
-    _a11yUpdateRowDetailsOpened(row, detailsOpened) {
-      const detailsCell = row.querySelector('[part~=details-cell]');
-
-      Array.from(row.children).forEach((cell) => {
-        if (detailsCell) {
-          cell.setAttribute('aria-expanded', detailsOpened);
-        } else {
-          cell.removeAttribute('aria-expanded');
-        }
-      });
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {!HTMLElement} detailsCell
-     * @protected
-     */
-    _a11ySetRowDetailsCell(row, detailsCell) {
-      Array.from(row.children).forEach((cell) => {
-        if (cell !== detailsCell) {
-          cell.setAttribute('aria-controls', detailsCell.id);
-        }
-      });
-    }
-
-    /**
-     * @param {!HTMLElement} row
-     * @param {number} colspan
-     * @protected
-     */
-    _a11yUpdateCellColspan(cell, colspan) {
-      cell.setAttribute('aria-colspan', Number(colspan));
-    }
-
-    /** @protected */
-    _a11yUpdateSorters() {
-      Array.from(this.querySelectorAll('vaadin-grid-sorter')).forEach((sorter) => {
-        let cellContent = sorter.parentNode;
-        while (cellContent && cellContent.localName !== 'vaadin-grid-cell-content') {
-          cellContent = cellContent.parentNode;
-        }
-        if (cellContent && cellContent.assignedSlot) {
-          const cell = cellContent.assignedSlot.parentNode;
-          cell.setAttribute(
-            'aria-sort',
-            {
-              asc: 'ascending',
-              desc: 'descending'
-            }[String(sorter.direction)] || 'none'
-          );
-        }
-      });
-    }
-  };

package/src/vaadin-grid-active-item-mixin.d.ts

@@ -1,28 +0,0 @@
-declare function ActiveItemMixin<TItem, T extends new (...args: any[]) => {}>(
-  base: T
-): T & ActiveItemMixinConstructor<TItem>;
-
-interface ActiveItemMixinConstructor<TItem> {
-  new (...args: any[]): ActiveItemMixin<TItem>;
-}
-
-interface ActiveItemMixin<TItem> {
-  /**
-   * The item user has last interacted with. Turns to `null` after user deactivates
-   * the item by re-interacting with the currently active item.
-   */
-  activeItem: TItem | null;
-
-  /**
-   * We need to listen to click instead of tap because on mobile safari, the
-   * document.activeElement has not been updated (focus has not been shifted)
-   * yet at the point when tap event is being executed.
-   */
-  _onClick(e: MouseEvent): void;
-
-  _isFocusable(target: Element): boolean;
-}
-
-declare function isFocusable(target: Element): boolean;
-
-export { ActiveItemMixin, ActiveItemMixinConstructor, isFocusable };

package/src/vaadin-grid-active-item-mixin.js

@@ -1,117 +0,0 @@
-/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-export const ActiveItemMixin = (superClass) =>
-  class ActiveItemMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * The item user has last interacted with. Turns to `null` after user deactivates
-         * the item by re-interacting with the currently active item.
-         * @type {GridItem}
-         */
-        activeItem: {
-          type: Object,
-          notify: true,
-          value: null
-        }
-      };
-    }
-
-    ready() {
-      super.ready();
-
-      this.$.scroller.addEventListener('click', this._onClick.bind(this));
-      this.addEventListener('cell-activate', this._activateItem.bind(this));
-      this.addEventListener('row-activate', this._activateItem.bind(this));
-    }
-
-    /** @private */
-    _activateItem(e) {
-      const model = e.detail.model;
-      const clickedItem = model ? model.item : null;
-
-      if (clickedItem) {
-        this.activeItem = !this._itemsEqual(this.activeItem, clickedItem) ? clickedItem : null;
-      }
-    }
-
-    /**
-     * We need to listen to click instead of tap because on mobile safari, the
-     * document.activeElement has not been updated (focus has not been shifted)
-     * yet at the point when tap event is being executed.
-     * @param {!MouseEvent} e
-     * @protected
-     */
-    _onClick(e) {
-      if (e.defaultPrevented) {
-        // Something has handled this click already, e. g., <vaadin-grid-sorter>
-        return;
-      }
-
-      const path = e.composedPath();
-      const cell = path[path.indexOf(this.$.table) - 3];
-      if (!cell || cell.getAttribute('part').indexOf('details-cell') > -1) {
-        return;
-      }
-      const cellContent = cell._content;
-
-      const activeElement = this.getRootNode().activeElement;
-      const cellContentHasFocus = cellContent.contains(activeElement);
-      if (!cellContentHasFocus && !this._isFocusable(e.target)) {
-        this.dispatchEvent(
-          new CustomEvent('cell-activate', {
-            detail: {
-              model: this.__getRowModel(cell.parentElement)
-            }
-          })
-        );
-      }
-    }
-
-    /**
-     * @param {!Element} target
-     * @return {boolean}
-     * @protected
-     */
-    _isFocusable(target) {
-      return isFocusable(target);
-    }
-
-    /**
-     * Fired when the `activeItem` property changes.
-     *
-     * @event active-item-changed
-     */
-
-    /**
-     * Fired when the cell is activated with click or keyboard.
-     *
-     * @event cell-activate
-     */
-  };
-
-/**
- * @param {!Element} target
- * @return {boolean}
- * @protected
- */
-export const isFocusable = (target) => {
-  if (!target.parentNode) {
-    return false;
-  }
-  const focusables = Array.from(
-    target.parentNode.querySelectorAll(
-      '[tabindex], button, input, select, textarea, object, iframe, label, a[href], area[href]'
-    )
-  ).filter((element) => element.getAttribute('part') !== 'cell body-cell');
-
-  const isFocusableElement = focusables.indexOf(target) !== -1;
-  return !target.disabled && isFocusableElement;
-};