@zeedhi/common 1.93.0 → 1.93.2

package/dist/zd-common.esm.js

@@ -5928,18 +5928,21 @@ class Grid extends Iterable {
             allSelected: false,
             except: [],
         };
+        this.cellSelection = false;
+        this.currentColumn = null;
+        this.viewNavigate = null;
         this.navigationKeyMapping = {
             up: {
                 event: this.navigateUp.bind(this),
-                stop: true,
-                index: 99,
                 active: true,
+                index: 99,
+                repeat: true,
             },
             down: {
                 event: this.navigateDown.bind(this),
-                stop: true,
-                index: 99,
                 active: true,
+                index: 99,
+                repeat: true,
             },
             pageup: {
                 event: this.navigatePageUp.bind(this),
@@ -5953,6 +5956,48 @@ class Grid extends Iterable {
                 index: 99,
                 active: true,
             },
+            left: {
+                event: this.navigateLeft.bind(this),
+                active: true,
+                index: 99,
+                repeat: true,
+            },
+            right: {
+                event: this.navigateRight.bind(this),
+                active: true,
+                index: 99,
+                repeat: true,
+            },
+            tab: {
+                event: this.navigateRight.bind(this),
+                prevent: true,
+                active: true,
+                index: 99,
+                input: true,
+                repeat: true,
+            },
+            'shift+tab': {
+                event: this.navigateLeft.bind(this),
+                prevent: true,
+                active: true,
+                index: 99,
+                input: true,
+                repeat: true,
+            },
+            enter: {
+                event: this.navigateDown.bind(this),
+                active: true,
+                index: 99,
+                input: true,
+                repeat: true,
+            },
+            'shift+enter': {
+                event: this.navigateUp.bind(this),
+                active: true,
+                index: 99,
+                input: true,
+                repeat: true,
+            },
         };
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.dark = this.getInitValue('dark', props.dark, this.dark);
@@ -5987,15 +6032,31 @@ class Grid extends Iterable {
         this.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
         this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
         this.selectAllPages = this.getInitValue('selectAllPages', props.selectAllPages, this.selectAllPages);
+        this.cellSelection = this.getInitValue('cellSelection', props.cellSelection, this.cellSelection);
         this.createAccessors();
     }
+    setViewNavigate(viewNavigate) {
+        this.viewNavigate = viewNavigate;
+    }
+    /**
+     * Filters keyMap to allow user to overwrite the default navigation keyMapping
+     */
+    filterKeyMapping() {
+        return Object.keys(this.navigationKeyMapping)
+            .reduce((result, key) => {
+            if (!(key in this.keyMap)) {
+                result[key] = this.navigationKeyMapping[key];
+            }
+            return result;
+        }, {});
+    }
     onMounted(element) {
         super.onMounted(element);
-        KeyMap.bind(this.navigationKeyMapping, this, element);
+        KeyMap.bind(this.filterKeyMapping(), this, element);
     }
     onBeforeDestroy() {
         super.onBeforeDestroy();
-        KeyMap.unbind(this.navigationKeyMapping, this);
+        KeyMap.unbind(this.filterKeyMapping(), this);
     }
     /**
      * Get Grid columns objects
@@ -6055,10 +6116,16 @@ class Grid extends Iterable {
      * @param element DOM Element
      */
     cellClick(row, column, event, element) {
+        if (this.cellSelection)
+            this.currentColumn = column;
         this.preventRowClick = this.callEvent('cellClick', {
             event, element, row, column, component: this,
         });
     }
+    selectCell(row, column) {
+        this.datasource.currentRow = row;
+        this.currentColumn = column;
+    }
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -6162,31 +6229,51 @@ class Grid extends Iterable {
             arrSelection.splice(index, 1);
         }
     }
+    navigateLeft() {
+        if (!this.viewNavigate)
+            return;
+        this.viewNavigate('left');
+    }
+    navigateRight() {
+        if (!this.viewNavigate)
+            return;
+        this.viewNavigate('right');
+    }
     navigateUp() {
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('up');
+            return;
+        }
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
         if (rowIndex === -1) {
             this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
+            [this.currentColumn] = this.columns;
+            return;
         }
-        else if (rowIndex > 0) {
-            this.datasource.currentRow = this.datasource.data[rowIndex - 1];
-        }
-        else {
+        if (rowIndex === 0) {
             this.navigatePageDown();
+            return;
         }
+        this.datasource.currentRow = this.datasource.data[rowIndex - 1];
     }
     navigateDown() {
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('down');
+            return;
+        }
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
         if (rowIndex === -1) {
             [this.datasource.currentRow] = this.datasource.data;
+            [this.currentColumn] = this.columns;
+            return;
         }
-        else if (rowIndex < this.datasource.data.length - 1) {
-            this.datasource.currentRow = this.datasource.data[rowIndex + 1];
-        }
-        else {
+        if (rowIndex === this.datasource.data.length - 1) {
             this.navigatePageUp();
+            return;
         }
+        this.datasource.currentRow = this.datasource.data[rowIndex + 1];
     }
     navigatePageUp() {
         if (this.datasource.page < Math.ceil(this.datasource.total / this.datasource.limit)) {
@@ -6415,26 +6502,34 @@ class GridEditable extends Grid {
         this.preventRowClick = false;
     }
     /**
-     * Enables editing mode if column is editable
+     * Dispatches cellClick event
      * @param row Grid row
      * @param column Grid column
      * @param event DOM event
      * @param element DOM Element
      */
     cellClick(row, column, event, element, canEdit = true) {
-        if (this.editing)
-            return;
         if (column.editable && canEdit) {
-            this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
-            this.callEvent('inlineEdit', {
-                event, element, row, column, component: this,
-            });
+            this.inlineEdit(row, column, event, element);
             return;
         }
         this.cellClickEvent(row, column, event, element);
     }
+    /**
+     * Enables editing mode
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    inlineEdit(row, column, event, element) {
+        this.editing = true;
+        this.callEvent('inlineEdit', {
+            event, element, row, column, component: this,
+        });
+    }
     cellClickEvent(row, column, event, element) {
         this.preventRowClick = this.callEvent('cellClick', {
             event, element, row, column, component: this,
@@ -12711,6 +12806,10 @@ class TreeGrid extends Grid {
      * Navigate upwards
      */
     navigateUp() {
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('up');
+            return;
+        }
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
         if (rowIndex === -1) {
@@ -12728,6 +12827,10 @@ class TreeGrid extends Grid {
      * Navigate downwards
      */
     navigateDown() {
+        if (this.cellSelection && this.viewNavigate) {
+            this.viewNavigate('down');
+            return;
+        }
         const { uniqueKey, currentRow } = this.datasource;
         const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
         if (rowIndex === -1) {
@@ -12937,16 +13040,26 @@ class TreeGridEditable extends TreeGrid {
         if (this.editing)
             return;
         if (column.editable && canEdit) {
-            this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
-            this.callEvent('inlineEdit', {
-                event, element, row, column, component: this,
-            });
+            this.inlineEdit(row, column, event, element);
             return;
         }
         this.cellClickEvent(row, column, event, element);
     }
+    /**
+     * Enables editing mode
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    inlineEdit(row, column, event, element) {
+        this.editing = true;
+        this.callEvent('inlineEdit', {
+            event, element, row, column, component: this,
+        });
+    }
     cellClickEvent(row, column, event, element) {
         this.preventRowClick = this.callEvent('cellClick', {
             event, element, row, column, component: this,

package/dist/zd-common.umd.js

@@ -5935,18 +5935,21 @@
               allSelected: false,
               except: [],
           };
+          this.cellSelection = false;
+          this.currentColumn = null;
+          this.viewNavigate = null;
           this.navigationKeyMapping = {
               up: {
                   event: this.navigateUp.bind(this),
-                  stop: true,
-                  index: 99,
                   active: true,
+                  index: 99,
+                  repeat: true,
               },
               down: {
                   event: this.navigateDown.bind(this),
-                  stop: true,
-                  index: 99,
                   active: true,
+                  index: 99,
+                  repeat: true,
               },
               pageup: {
                   event: this.navigatePageUp.bind(this),
@@ -5960,6 +5963,48 @@
                   index: 99,
                   active: true,
               },
+              left: {
+                  event: this.navigateLeft.bind(this),
+                  active: true,
+                  index: 99,
+                  repeat: true,
+              },
+              right: {
+                  event: this.navigateRight.bind(this),
+                  active: true,
+                  index: 99,
+                  repeat: true,
+              },
+              tab: {
+                  event: this.navigateRight.bind(this),
+                  prevent: true,
+                  active: true,
+                  index: 99,
+                  input: true,
+                  repeat: true,
+              },
+              'shift+tab': {
+                  event: this.navigateLeft.bind(this),
+                  prevent: true,
+                  active: true,
+                  index: 99,
+                  input: true,
+                  repeat: true,
+              },
+              enter: {
+                  event: this.navigateDown.bind(this),
+                  active: true,
+                  index: 99,
+                  input: true,
+                  repeat: true,
+              },
+              'shift+enter': {
+                  event: this.navigateUp.bind(this),
+                  active: true,
+                  index: 99,
+                  input: true,
+                  repeat: true,
+              },
           };
           this.dense = this.getInitValue('dense', props.dense, this.dense);
           this.dark = this.getInitValue('dark', props.dark, this.dark);
@@ -5994,15 +6039,31 @@
           this.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
           this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
           this.selectAllPages = this.getInitValue('selectAllPages', props.selectAllPages, this.selectAllPages);
+          this.cellSelection = this.getInitValue('cellSelection', props.cellSelection, this.cellSelection);
           this.createAccessors();
       }
+      setViewNavigate(viewNavigate) {
+          this.viewNavigate = viewNavigate;
+      }
+      /**
+       * Filters keyMap to allow user to overwrite the default navigation keyMapping
+       */
+      filterKeyMapping() {
+          return Object.keys(this.navigationKeyMapping)
+              .reduce((result, key) => {
+              if (!(key in this.keyMap)) {
+                  result[key] = this.navigationKeyMapping[key];
+              }
+              return result;
+          }, {});
+      }
       onMounted(element) {
           super.onMounted(element);
-          core.KeyMap.bind(this.navigationKeyMapping, this, element);
+          core.KeyMap.bind(this.filterKeyMapping(), this, element);
       }
       onBeforeDestroy() {
           super.onBeforeDestroy();
-          core.KeyMap.unbind(this.navigationKeyMapping, this);
+          core.KeyMap.unbind(this.filterKeyMapping(), this);
       }
       /**
        * Get Grid columns objects
@@ -6062,10 +6123,16 @@
        * @param element DOM Element
        */
       cellClick(row, column, event, element) {
+          if (this.cellSelection)
+              this.currentColumn = column;
           this.preventRowClick = this.callEvent('cellClick', {
               event, element, row, column, component: this,
           });
       }
+      selectCell(row, column) {
+          this.datasource.currentRow = row;
+          this.currentColumn = column;
+      }
       /**
        * Dispatches select/unselect event
        * @param row Grid row
@@ -6169,31 +6236,51 @@
               arrSelection.splice(index, 1);
           }
       }
+      navigateLeft() {
+          if (!this.viewNavigate)
+              return;
+          this.viewNavigate('left');
+      }
+      navigateRight() {
+          if (!this.viewNavigate)
+              return;
+          this.viewNavigate('right');
+      }
       navigateUp() {
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('up');
+              return;
+          }
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
           if (rowIndex === -1) {
               this.datasource.currentRow = this.datasource.data[this.datasource.data.length - 1];
+              [this.currentColumn] = this.columns;
+              return;
           }
-          else if (rowIndex > 0) {
-              this.datasource.currentRow = this.datasource.data[rowIndex - 1];
-          }
-          else {
+          if (rowIndex === 0) {
               this.navigatePageDown();
+              return;
           }
+          this.datasource.currentRow = this.datasource.data[rowIndex - 1];
       }
       navigateDown() {
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('down');
+              return;
+          }
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.datasource.data.findIndex((row) => row[uniqueKey] === currentRow[uniqueKey]);
           if (rowIndex === -1) {
               [this.datasource.currentRow] = this.datasource.data;
+              [this.currentColumn] = this.columns;
+              return;
           }
-          else if (rowIndex < this.datasource.data.length - 1) {
-              this.datasource.currentRow = this.datasource.data[rowIndex + 1];
-          }
-          else {
+          if (rowIndex === this.datasource.data.length - 1) {
               this.navigatePageUp();
+              return;
           }
+          this.datasource.currentRow = this.datasource.data[rowIndex + 1];
       }
       navigatePageUp() {
           if (this.datasource.page < Math.ceil(this.datasource.total / this.datasource.limit)) {
@@ -6422,26 +6509,34 @@
           this.preventRowClick = false;
       }
       /**
-       * Enables editing mode if column is editable
+       * Dispatches cellClick event
        * @param row Grid row
        * @param column Grid column
        * @param event DOM event
        * @param element DOM Element
        */
       cellClick(row, column, event, element, canEdit = true) {
-          if (this.editing)
-              return;
           if (column.editable && canEdit) {
-              this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
-              this.callEvent('inlineEdit', {
-                  event, element, row, column, component: this,
-              });
+              this.inlineEdit(row, column, event, element);
               return;
           }
           this.cellClickEvent(row, column, event, element);
       }
+      /**
+       * Enables editing mode
+       * @param row Grid row
+       * @param column Grid column
+       * @param event DOM event
+       * @param element DOM Element
+       */
+      inlineEdit(row, column, event, element) {
+          this.editing = true;
+          this.callEvent('inlineEdit', {
+              event, element, row, column, component: this,
+          });
+      }
       cellClickEvent(row, column, event, element) {
           this.preventRowClick = this.callEvent('cellClick', {
               event, element, row, column, component: this,
@@ -12718,6 +12813,10 @@
        * Navigate upwards
        */
       navigateUp() {
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('up');
+              return;
+          }
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
           if (rowIndex === -1) {
@@ -12735,6 +12834,10 @@
        * Navigate downwards
        */
       navigateDown() {
+          if (this.cellSelection && this.viewNavigate) {
+              this.viewNavigate('down');
+              return;
+          }
           const { uniqueKey, currentRow } = this.datasource;
           const rowIndex = this.treeDataStructure.findDataIndex(this.datasource.data, currentRow[uniqueKey]);
           if (rowIndex === -1) {
@@ -12944,16 +13047,26 @@
           if (this.editing)
               return;
           if (column.editable && canEdit) {
-              this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
-              this.callEvent('inlineEdit', {
-                  event, element, row, column, component: this,
-              });
+              this.inlineEdit(row, column, event, element);
               return;
           }
           this.cellClickEvent(row, column, event, element);
       }
+      /**
+       * Enables editing mode
+       * @param row Grid row
+       * @param column Grid column
+       * @param event DOM event
+       * @param element DOM Element
+       */
+      inlineEdit(row, column, event, element) {
+          this.editing = true;
+          this.callEvent('inlineEdit', {
+              event, element, row, column, component: this,
+          });
+      }
       cellClickEvent(row, column, event, element) {
           this.preventRowClick = this.callEvent('cellClick', {
               event, element, row, column, component: this,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.93.0",
+  "version": "1.93.2",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "5c95235cbd27394eda8d5b240dbcf151f15cd8dc"
+  "gitHead": "67ffcff27bd3d14cdfae802257ecab437a38b9df"
 }

package/types/components/zd-grid/grid-editable.d.ts

@@ -66,13 +66,21 @@ export declare class GridEditable extends Grid implements IGridEditable {
      */
     rowClick(row: IDictionary<any>, event: Event, element: any): void;
     /**
-     * Enables editing mode if column is editable
+     * Dispatches cellClick event
      * @param row Grid row
      * @param column Grid column
      * @param event DOM event
      * @param element DOM Element
      */
     cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
+    /**
+     * Enables editing mode
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    inlineEdit(row: IDictionary, column: GridColumnEditable, event: Event, element: any): void;
     cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
     /**
      * Dispatches select/unselect event

package/types/components/zd-grid/grid.d.ts

@@ -4,6 +4,7 @@ import { IComponent, IComponentRender } from '../zd-component/interfaces';
 import { Iterable } from '../zd-iterable/iterable';
 import { GridColumn } from './grid-column';
 import { IGrid, IGridColumn, IGridEvents } from './interfaces';
+import { Column } from '../zd-iterable/column';
 /**
  * Base class for Grid component
  */
@@ -140,12 +141,20 @@ export declare class Grid extends Iterable implements IGrid {
         allSelected: boolean;
         except: IDictionary<any>[];
     };
+    cellSelection: boolean;
+    currentColumn: Column | null;
+    protected viewNavigate: ((direction: 'up' | 'down' | 'left' | 'right') => void) | null;
+    setViewNavigate(viewNavigate: (up: 'up' | 'down' | 'left' | 'right') => void): void;
     /**
      * Creates a new Grid.
      * @param props Grid properties
      */
     constructor(props: IGrid);
     protected navigationKeyMapping: IKeyMap;
+    /**
+     * Filters keyMap to allow user to overwrite the default navigation keyMapping
+     */
+    private filterKeyMapping;
     onMounted(element: any): void;
     onBeforeDestroy(): void;
     /**
@@ -180,6 +189,7 @@ export declare class Grid extends Iterable implements IGrid {
      * @param element DOM Element
      */
     cellClick(row: IDictionary<any>, column: GridColumn, event: Event, element: any): void;
+    selectCell(row: IDictionary, column: GridColumn): void;
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -198,10 +208,12 @@ export declare class Grid extends Iterable implements IGrid {
     selectAll(isSelected: boolean): void;
     toggleRow(row: IDictionary): void;
     selectRow(row: IDictionary, select: boolean): void;
-    protected navigateUp(): void;
-    protected navigateDown(): void;
-    protected navigatePageUp(): void;
-    protected navigatePageDown(): void;
+    navigateLeft(): void;
+    navigateRight(): void;
+    navigateUp(): void;
+    navigateDown(): void;
+    navigatePageUp(): void;
+    navigatePageDown(): void;
     deleteRows(): Promise<any[]>;
     protected getActionProps(actionComponent: IComponent, column: GridColumn, row: IDictionary, parentPath: string): {
         props: IComponent;

package/types/components/zd-grid/interfaces.d.ts

@@ -50,6 +50,7 @@ export interface IGrid extends IIterable {
     }) => boolean;
     showSelectAll?: boolean;
     selectAllPages?: boolean;
+    cellSelection?: boolean;
 }
 export interface IGridColumn extends IColumn {
     children?: IChildrenActionColumn[];

package/types/components/zd-tree-grid/tree-grid-editable.d.ts

@@ -64,6 +64,14 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
      * @param element DOM Element
      */
     cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
+    /**
+     * Enables editing mode
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    inlineEdit(row: IDictionary, column: GridColumnEditable, event: Event, element: any): void;
     cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
     /**
      * Dispatches select/unselect event

package/types/components/zd-tree-grid/tree-grid.d.ts

@@ -83,15 +83,15 @@ export declare class TreeGrid extends Grid implements ITreeGrid {
      * Toggle expand/collapse using navigation keys
      * @param collapse Should collapse
      */
-    private navigateToggle;
+    navigateToggle(collapse: boolean): void;
     /**
      * Navigate upwards
      */
-    protected navigateUp(): void;
+    navigateUp(): void;
     /**
      * Navigate downwards
      */
-    protected navigateDown(): void;
+    navigateDown(): void;
     private removeDuplicates;
     /**
      * Select/deselect rows