@vaadin/grid 23.2.0-alpha2 → 23.2.0-dev.48e5e3967

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.2.0-alpha2",
+  "version": "23.2.0-dev.48e5e3967",
   "publishConfig": {
     "access": "public"
   },
@@ -43,20 +43,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "23.2.0-alpha2",
-    "@vaadin/component-base": "23.2.0-alpha2",
-    "@vaadin/lit-renderer": "23.2.0-alpha2",
-    "@vaadin/text-field": "23.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.2.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha2"
+    "@vaadin/checkbox": "23.2.0-dev.48e5e3967",
+    "@vaadin/component-base": "23.2.0-dev.48e5e3967",
+    "@vaadin/lit-renderer": "23.2.0-dev.48e5e3967",
+    "@vaadin/text-field": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-material-styles": "23.2.0-dev.48e5e3967",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.48e5e3967"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "23.2.0-alpha2",
+    "@vaadin/polymer-legacy-adapter": "23.2.0-dev.48e5e3967",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c9b8113d0fa9a602f8b9cb915c1826355af2e8df"
+  "gitHead": "961bc4ae5b707c3c02f12b99819b3c12c9b478aa"
 }

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

@@ -13,4 +13,20 @@ export declare class SortMixinClass {
    * @attr {boolean} multi-sort
    */
   multiSort: boolean;
+
+  /**
+   * Controls how columns are added to the sort order when using multi-sort.
+   * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+   *
+   * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+   * changed, that column gets sort priority 1, thus affecting the priority for all the other
+   * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+   *
+   * Using this property allows to change this behavior so that sorting an unsorted column
+   * would add it to the "end" of the sort, and changing column's sort direction would retain
+   * it's previous priority. To set this, use `multi-sort-priority="append"`.
+   *
+   * @attr {string} multi-sort-priority
+   */
+  multiSortPriority: 'prepend' | 'append';
 }

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

@@ -21,6 +21,25 @@ export const SortMixin = (superClass) =>
           value: false,
         },
 
+        /**
+         * Controls how columns are added to the sort order when using multi-sort.
+         * The sort order is visually indicated by numbers in grid sorters placed in column headers.
+         *
+         * By default, whenever an unsorted column is sorted, or the sort-direction of a column is
+         * changed, that column gets sort priority 1, thus affecting the priority for all the other
+         * sorted columns. This is identical to using `multi-sort-priority="prepend"`.
+         *
+         * Using this property allows to change this behavior so that sorting an unsorted column
+         * would add it to the "end" of the sort, and changing column's sort direction would retain
+         * it's previous priority. To set this, use `multi-sort-priority="append"`.
+         *
+         * @attr {string} multi-sort-priority
+         */
+        multiSortPriority: {
+          type: String,
+          value: 'prepend',
+        },
+
         /**
          * @type {!Array<!GridSorterDefinition>}
          * @protected
@@ -48,6 +67,7 @@ export const SortMixin = (superClass) =>
     _onSorterChanged(e) {
       const sorter = e.target;
       e.stopPropagation();
+      sorter._grid = this;
       this.__updateSorter(sorter);
       this.__applySorters();
     }
@@ -70,6 +90,26 @@ export const SortMixin = (superClass) =>
       this._sorters.forEach((sorter, index) => (sorter._order = this._sorters.length > 1 ? index : null), this);
     }
 
+    /** @private */
+    __appendSorter(sorter) {
+      if (!sorter.direction) {
+        this._removeArrayItem(this._sorters, sorter);
+      } else if (!this._sorters.includes(sorter)) {
+        this._sorters.push(sorter);
+      }
+
+      this.__updateSortOrders();
+    }
+
+    /** @private */
+    __prependSorter(sorter) {
+      this._removeArrayItem(this._sorters, sorter);
+      if (sorter.direction) {
+        this._sorters.unshift(sorter);
+      }
+      this.__updateSortOrders();
+    }
+
     /** @private */
     __updateSorter(sorter) {
       if (!sorter.direction && this._sorters.indexOf(sorter) === -1) {
@@ -79,11 +119,11 @@ export const SortMixin = (superClass) =>
       sorter._order = null;
 
       if (this.multiSort) {
-        this._removeArrayItem(this._sorters, sorter);
-        if (sorter.direction) {
-          this._sorters.unshift(sorter);
+        if (this.multiSortPriority === 'append') {
+          this.__appendSorter(sorter);
+        } else {
+          this.__prependSorter(sorter);
         }
-        this.__updateSortOrders();
       } else if (sorter.direction) {
         const otherSorters = this._sorters.filter((s) => s !== sorter);
         this._sorters = [sorter];

package/src/vaadin-grid-sorter.js

@@ -176,6 +176,10 @@ class GridSorter extends ThemableMixin(DirMixin(PolymerElement)) {
   disconnectedCallback() {
     super.disconnectedCallback();
     this._isConnected = false;
+
+    if (!this.parentNode && this._grid) {
+      this._grid.__removeSorters([this]);
+    }
   }
 
   /** @private */