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

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

@@ -1,35 +1,19 @@
-import { GridDefaultItem } from './interfaces';
-import { GridColumnElement } from './vaadin-grid-column.js';
-
 /**
- * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
- * that provides default header renderer and functionality for filtering.
- *
- * #### Example:
- * ```html
- * <vaadin-grid items="[[items]]">
- *  <vaadin-grid-filter-column path="name.first"></vaadin-grid-filter-column>
- *
- *  <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 GridFilterColumnElement<TItem = GridDefaultItem> extends GridColumnElement<TItem> {
-  /**
-   * Text to display as the label of the column filter text-field.
-   */
-  header: string | null | undefined;
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridFilterColumn } from '@vaadin/grid/src/vaadin-grid-filter-column.js';
 
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-}
+/**
+ * @deprecated Import `GridFilterColumn` from `@vaadin/grid/vaadin-grid-filter-column` instead.
+ */
+export type GridFilterColumnElement<TItem = GridDefaultItem> = GridFilterColumn<TItem>;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-filter-column': GridFilterColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridFilterColumn` from `@vaadin/grid/vaadin-grid-filter-column` instead.
+ */
+export const GridFilterColumnElement: typeof GridFilterColumn;
 
-export { GridFilterColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-filter-column.js';

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

@@ -3,118 +3,11 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { GridColumnElement } from './vaadin-grid-column.js';
-import './vaadin-grid-filter.js';
+import { GridFilterColumn } from '@vaadin/grid/src/vaadin-grid-filter-column.js';
 
 /**
- * `<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
- * that provides default header renderer and functionality for filtering.
- *
- * #### Example:
- * ```html
- * <vaadin-grid items="[[items]]">
- *  <vaadin-grid-filter-column path="name.first"></vaadin-grid-filter-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
+ * @deprecated Import `GridFilterColumn` from `@vaadin/grid/vaadin-grid-filter-column` instead.
  */
-class GridFilterColumnElement extends GridColumnElement {
-  static get is() {
-    return 'vaadin-grid-filter-column';
-  }
+export const GridFilterColumnElement = GridFilterColumn;
 
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Text to display as the label of the column filter text-field.
-       */
-      header: String
-    };
-  }
-
-  static get observers() {
-    return ['_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header, _filterValue)'];
-  }
-
-  constructor() {
-    super();
-
-    this.__boundOnFilterValueChanged = this.__onFilterValueChanged.bind(this);
-  }
-
-  /**
-   * Renders the grid filter with the custom text field to the header cell.
-   *
-   * @override
-   */
-  _defaultHeaderRenderer(root, _column) {
-    let filter = root.firstElementChild;
-    let textField = filter ? filter.firstElementChild : undefined;
-
-    if (!filter) {
-      filter = document.createElement('vaadin-grid-filter');
-      textField = document.createElement('vaadin-text-field');
-      textField.setAttribute('slot', 'filter');
-      textField.setAttribute('theme', 'small');
-      textField.setAttribute('style', 'max-width: 100%;');
-      textField.setAttribute('focus-target', '');
-      textField.addEventListener('value-changed', this.__boundOnFilterValueChanged);
-      filter.appendChild(textField);
-      root.appendChild(filter);
-    }
-
-    filter.path = this.path;
-    filter.value = this._filterValue;
-
-    textField.__rendererValue = this._filterValue;
-    textField.value = this._filterValue;
-    textField.label = this.__getHeader(this.header, this.path);
-  }
-
-  /**
-   * The filter column doesn't allow to use a custom header renderer
-   * to override the header cell content.
-   * It always renders the grid filter to the header cell.
-   *
-   * @override
-   */
-  _computeHeaderRenderer() {
-    return this._defaultHeaderRenderer;
-  }
-
-  /**
-   * Updates the internal filter value once the filter text field is changed.
-   * The listener handles only user-fired events.
-   *
-   * @private
-   */
-  __onFilterValueChanged(e) {
-    // Skip if the value is changed by the renderer.
-    if (e.detail.value === e.target.__rendererValue) {
-      return;
-    }
-
-    this._filterValue = e.detail.value;
-  }
-
-  /** @private */
-  __getHeader(header, path) {
-    if (header) {
-      return header;
-    }
-
-    if (path) {
-      return this._generateHeader(path);
-    }
-  }
-}
-
-customElements.define(GridFilterColumnElement.is, GridFilterColumnElement);
-
-export { GridFilterColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-filter-column.js';

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

@@ -1,67 +1,18 @@
 /**
- * Fired when the `value` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
-
-export interface GridFilterElementEventMap {
-  'value-changed': GridFilterValueChangedEvent;
-}
-
-export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterElementEventMap {}
+import { GridFilter } from '@vaadin/grid/src/vaadin-grid-filter.js';
 
 /**
- * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
- * and handlers for filtering the grid data.
- *
- * #### Example:
- * ```html
- * <vaadin-grid-column id="column"></vaadin-grid-column>
- * ```
- * ```js
- * const column = document.querySelector('#column');
- * column.headerRenderer = (root, column) => {
- *   let filter = root.firstElementChild;
- *   if (!filter) {
- *     filter = document.createElement('vaadin-grid-filter');
- *     root.appendChild(filter);
- *   }
- *   filter.path = 'name.first';
- * };
- * column.renderer = (root, column, model) => {
- *   root.textContent = model.item.name.first;
- * };
- * ```
- *
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @deprecated Import `GridFilter` from `@vaadin/grid/vaadin-grid-filter` instead.
  */
-declare class GridFilterElement extends HTMLElement {
-  /**
-   * JS Path of the property in the item used for filtering the data.
-   */
-  path: string | null | undefined;
-
-  /**
-   * Current filter value.
-   */
-  value: string | null | undefined;
-
-  addEventListener<K extends keyof GridFilterEventMap>(
-    type: K,
-    listener: (this: GridFilterElement, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
+export type GridFilterElement = GridFilter;
 
-  removeEventListener<K extends keyof GridFilterEventMap>(
-    type: K,
-    listener: (this: GridFilterElement, ev: GridFilterEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-filter': GridFilterElement;
-  }
-}
+/**
+ * @deprecated Import `GridFilter` from `@vaadin/grid/vaadin-grid-filter` instead.
+ */
+export const GridFilterElement: typeof GridFilter;
 
-export { GridFilterElement };
+export * from '@vaadin/grid/src/vaadin-grid-filter.js';

package/src/vaadin-grid-filter.js

@@ -3,123 +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, html } from '@polymer/polymer/polymer-element.js';
-import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js';
-import { timeOut } from '@polymer/polymer/lib/utils/async.js';
-import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
+import { GridFilter } from '@vaadin/grid/src/vaadin-grid-filter.js';
 
 /**
- * `<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
- * and handlers for filtering the grid data.
- *
- * #### Example:
- * ```html
- * <vaadin-grid-column id="column"></vaadin-grid-column>
- * ```
- * ```js
- * const column = document.querySelector('#column');
- * column.headerRenderer = (root, column) => {
- *   let filter = root.firstElementChild;
- *   if (!filter) {
- *     filter = document.createElement('vaadin-grid-filter');
- *     root.appendChild(filter);
- *   }
- *   filter.path = 'name.first';
- * };
- * column.renderer = (root, column, model) => {
- *   root.textContent = model.item.name.first;
- * };
- * ```
- *
- * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
- *
- * @extends HTMLElement
+ * @deprecated Import `GridFilter` from `@vaadin/grid/vaadin-grid-filter` instead.
  */
-class GridFilterElement extends class extends PolymerElement {} {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: inline-flex;
-          max-width: 100%;
-        }
+export const GridFilterElement = GridFilter;
 
-        #filter {
-          width: 100%;
-          box-sizing: border-box;
-        }
-      </style>
-      <slot name="filter">
-        <vaadin-text-field id="filter" value="{{value}}"></vaadin-text-field>
-      </slot>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-grid-filter';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * JS Path of the property in the item used for filtering the data.
-       */
-      path: String,
-
-      /**
-       * Current filter value.
-       */
-      value: {
-        type: String,
-        notify: true
-      },
-
-      /** @private */
-      _connected: Boolean
-    };
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._connected = true;
-  }
-
-  static get observers() {
-    return ['_filterChanged(path, value, _connected)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    const child = this.firstElementChild;
-    if (child && child.getAttribute('slot') !== 'filter') {
-      console.warn('Make sure you have assigned slot="filter" to the child elements of <vaadin-grid-filter>');
-      child.setAttribute('slot', 'filter');
-    }
-  }
-
-  /** @private */
-  _filterChanged(path, value, connected) {
-    if (path === undefined || value === undefined || !connected) {
-      return;
-    }
-    if (this._previousValue === undefined && value === '') {
-      return;
-    }
-    this._previousValue = value;
-
-    this._debouncerFilterChanged = Debouncer.debounce(this._debouncerFilterChanged, timeOut.after(200), () => {
-      this.dispatchEvent(new CustomEvent('filter-changed', { bubbles: true }));
-    });
-  }
-
-  focus() {
-    this.$.filter.focus();
-  }
-}
-
-customElements.define(GridFilterElement.is, GridFilterElement);
-
-export { GridFilterElement };
+export * from '@vaadin/grid/src/vaadin-grid-filter.js';

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

@@ -1,82 +1,19 @@
-import { GridDefaultItem } from './interfaces';
-import { GridColumnElement } from './vaadin-grid-column.js';
-
 /**
- * Fired when the `selectAll` property changes.
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-export type GridSelectionColumnSelectAllChangedEvent = CustomEvent<{ value: boolean }>;
-
-export interface GridSelectionColumnElementEventMap {
-  'select-all-changed': GridSelectionColumnSelectAllChangedEvent;
-}
-
-export interface GridSelectionColumnEventMap extends HTMLElementEventMap, GridSelectionColumnElementEventMap {}
+import { GridDefaultItem } from '@vaadin/grid/src/vaadin-grid.js';
+import { GridSelectionColumn } from '@vaadin/grid/src/vaadin-grid-selection-column.js';
 
 /**
- * `<vaadin-grid-selection-column>` is a helper element for the `<vaadin-grid>`
- * that provides default renderers and functionality for item selection.
- *
- * #### Example:
- * ```html
- * <vaadin-grid items="[[items]]">
- *  <vaadin-grid-selection-column frozen auto-select></vaadin-grid-selection-column>
- *
- *  <vaadin-grid-column>
- *    ...
- * ```
- *
- * By default the selection column displays `<vaadin-checkbox>` elements in the
- * column cells. The checkboxes in the body rows toggle selection of the corresponding row items.
- *
- * When the grid data is provided as an array of [`items`](#/elements/vaadin-grid#property-items),
- * the column header gets an additional checkbox that can be used for toggling
- * selection for all the items at once.
- *
- * __The default content can also be overridden__
- *
- * @fires {CustomEvent} select-all-changed - Fired when the `selectAll` property changes.
+ * @deprecated Import `GridSelectionColumn` from `@vaadin/grid/vaadin-grid-selection-column` instead.
  */
-declare class GridSelectionColumnElement<TItem = GridDefaultItem> extends GridColumnElement<TItem> {
-  /**
-   * 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;
-
-  /**
-   * When true, all the items are selected.
-   * @attr {boolean} select-all
-   */
-  selectAll: boolean;
+export type GridSelectionColumnElement<TItem = GridDefaultItem> = GridSelectionColumn<TItem>;
 
-  /**
-   * When true, the active gets automatically selected.
-   * @attr {boolean} auto-select
-   */
-  autoSelect: boolean;
-
-  addEventListener<K extends keyof GridSelectionColumnEventMap>(
-    type: K,
-    listener: (this: GridSelectionColumnElement<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof GridSelectionColumnEventMap>(
-    type: K,
-    listener: (this: GridSelectionColumnElement<TItem>, ev: GridSelectionColumnEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-grid-selection-column': GridSelectionColumnElement<GridDefaultItem>;
-  }
-}
+/**
+ * @deprecated Import `GridSelectionColumn` from `@vaadin/grid/vaadin-grid-selection-column` instead.
+ */
+export const GridSelectionColumnElement: typeof GridSelectionColumn;
 
-export { GridSelectionColumnElement };
+export * from '@vaadin/grid/src/vaadin-grid-selection-column.js';