@vaadin/grid 22.0.0-alpha7

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

@@ -0,0 +1,35 @@
+import { GridDefaultItem } from './interfaces';
+import { GridColumn } 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>
+ *    ...
+ * ```
+ */
+declare class GridFilterColumn<TItem = GridDefaultItem> extends GridColumn<TItem> {
+  /**
+   * Text to display as the label of the column filter text-field.
+   */
+  header: string | null | undefined;
+
+  /**
+   * JS Path of the property in the item used for filtering the data.
+   */
+  path: string | null | undefined;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-filter-column': GridFilterColumn<GridDefaultItem>;
+  }
+}
+
+export { GridFilterColumn };

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

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { GridColumn } from './vaadin-grid-column.js';
+import './vaadin-grid-filter.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>
+ *    ...
+ * ```
+ */
+class GridFilterColumn extends GridColumn {
+  static get is() {
+    return 'vaadin-grid-filter-column';
+  }
+
+  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(GridFilterColumn.is, GridFilterColumn);
+
+export { GridFilterColumn };

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

@@ -0,0 +1,76 @@
+/**
+ * @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 FilterMixin = (superClass) =>
+  class FilterMixin extends superClass {
+    static get properties() {
+      return {
+        /** @private */
+        _filters: {
+          type: Array,
+          value: function () {
+            return [];
+          }
+        }
+      };
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this.addEventListener('filter-changed', this._filterChanged.bind(this));
+    }
+
+    /** @private */
+    _filterChanged(e) {
+      e.stopPropagation();
+
+      this.__addFilter(e.target);
+      this.__applyFilters();
+    }
+
+    /** @private */
+    __removeFilters(filtersToRemove) {
+      if (filtersToRemove.length == 0) {
+        return;
+      }
+
+      this._filters = this._filters.filter((filter) => filtersToRemove.indexOf(filter) < 0);
+      this.__applyFilters();
+    }
+
+    /** @private */
+    __addFilter(filter) {
+      const filterIndex = this._filters.indexOf(filter);
+
+      if (filterIndex === -1) {
+        this._filters.push(filter);
+      }
+    }
+
+    /** @private */
+    __applyFilters() {
+      if (this.dataProvider && this.isAttached) {
+        this.clearCache();
+      }
+    }
+
+    /**
+     * @return {!Array<!GridFilterDefinition>}
+     * @protected
+     */
+    _mapFilters() {
+      return this._filters.map((filter) => {
+        return {
+          path: filter.path,
+          value: filter.value
+        };
+      });
+    }
+  };

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

@@ -0,0 +1,67 @@
+/**
+ * Fired when the `value` property changes.
+ */
+export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
+
+export interface GridFilterCustomEventMap {
+  'value-changed': GridFilterValueChangedEvent;
+}
+
+export interface GridFilterEventMap extends HTMLElementEventMap, GridFilterCustomEventMap {}
+
+/**
+ * `<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.
+ */
+declare class GridFilter 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: GridFilter, ev: GridFilterEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof GridFilterEventMap>(
+    type: K,
+    listener: (this: GridFilter, ev: GridFilterEventMap[K]) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-grid-filter': GridFilter;
+  }
+}
+
+export { GridFilter };

package/src/vaadin-grid-filter.js

@@ -0,0 +1,125 @@
+/**
+ * @license
+ * 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 '@vaadin/component-base/src/debounce.js';
+import { timeOut } from '@vaadin/component-base/src/async.js';
+import '@vaadin/text-field/src/vaadin-text-field.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
+ */
+class GridFilter extends class extends PolymerElement {} {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-flex;
+          max-width: 100%;
+        }
+
+        #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(GridFilter.is, GridFilter);
+
+export { GridFilter };

package/src/vaadin-grid-helpers.js

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @param {Array<Object>} columns array of columns to be modified
+ * @param {number} scope multiplier added to base order for each column
+ * @param {number} baseOrder base number used for order
+ */
+export function updateColumnOrders(columns, scope, baseOrder) {
+  let c = 1;
+  columns.forEach((column) => {
+    // avoid multiples of 10 because they introduce and extra zero and
+    // causes the underlying calculations for child order goes wrong
+    if (c % 10 === 0) {
+      c++;
+    }
+    column._order = baseOrder + c * scope;
+    c++;
+  });
+}