@zeedhi/common 1.100.0 → 1.100.1

package/dist/zd-common.esm.js

@@ -1889,6 +1889,10 @@ class Input extends ComponentRender {
          * Input validations.
          */
         this.validations = {};
+        /**
+         * Defines if the input should be automatically registered in the closest parent Form
+         */
+        this.autoRegister = true;
         /**
          * Parsed field rules.
          */
@@ -1924,8 +1928,9 @@ class Input extends ComponentRender {
         this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
         this.value = this.getInitValue('value', props.value, this.value);
         this.validations = this.getInitValue('validations', props.validations, this.validations);
+        this.autoRegister = this.getInitValue('autoRegister', props.autoRegister, this.autoRegister);
         this.parseValidations(props.validations || {});
-        if (this.formParent) {
+        if (this.autoRegister && this.formParent) {
             this.formParent.registerInput(this);
         }
         this.createAccessors();
@@ -5816,7 +5821,7 @@ class GridColumn extends Column {
 FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
     if (value === null || value === undefined)
         return '';
-    const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
+    const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, } = componentProps;
     let currentRow = row;
     if (dataValue) {
         const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
@@ -5837,7 +5842,7 @@ FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, r
     }
     if (!Object.keys(currentRow).length)
         return typeof value === 'object' ? '' : value;
-    const textColumn = formatterDataText || dataText;
+    const textColumn = formatterDataText || dataTextDiscrete || dataText;
     if (!textColumn)
         return value;
     if (typeof textColumn === 'string') {
@@ -6433,6 +6438,7 @@ class Grid extends Iterable {
         props.children = newChildren;
         props.name = instanceName;
         props.allowDuplicate = true;
+        props.autoRegister = false;
         let instance = null;
         try {
             instance = this.updateActionInstance(instanceName, props);
@@ -6455,8 +6461,15 @@ class Grid extends Iterable {
         }
         return { props, instance };
     }
+    filterObject(obj, callback) {
+        return Object.fromEntries(Object.entries(obj).filter(([key, value]) => callback(key, value)));
+    }
+    deleteAccessorProps(newComponent) {
+        const filteredProps = this.filterObject(newComponent, (_key, value) => !Accessor.isAccessorDefinition(value));
+        return filteredProps;
+    }
     updateActionInstance(instanceName, newComponent) {
-        const updatedComponent = Object.assign({}, newComponent);
+        const updatedComponent = this.deleteAccessorProps(newComponent);
         delete updatedComponent.datasource;
         delete updatedComponent.events;
         const instance = Metadata.updateInstance(instanceName, updatedComponent);
@@ -6647,6 +6660,22 @@ class GridEditable extends Grid {
         }
         this.cellClickEvent(row, column, event, element);
     }
+    /**
+     * Dispatches cellDoubleClick event
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    cellDoubleClick(row, column, event, element, canEdit = true) {
+        if (column.editable && canEdit) {
+            this.preventRowDoubleClick = true;
+            this.datasource.currentRow = row;
+            this.inlineEdit(row, column, event, element);
+            return;
+        }
+        this.cellDoubleClickEvent(row, column, event, element);
+    }
     /**
      * Enables editing mode
      * @param row Grid row
@@ -6667,6 +6696,11 @@ class GridEditable extends Grid {
             event, element, row, column, component: this,
         });
     }
+    cellDoubleClickEvent(row, column, event, element) {
+        this.preventRowDoubleClick = this.callEvent('cellDoubleClick', {
+            event, element, row, column, component: this,
+        });
+    }
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -6752,32 +6786,39 @@ class GridEditable extends Grid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
     }
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     checkLookupData(column, row, componentProps) {
-        if (row[column.name] && column.lookupData && componentProps.datasource) {
-            componentProps.datasource.data = componentProps.datasource.data || [];
-            const colValue = row[column.name];
-            if (Array.isArray(colValue)) {
-                colValue.forEach((item) => {
-                    const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                    if (column.lookupData[value]) {
-                        componentProps.datasource.data.push(column.lookupData[value]);
-                    }
-                });
-                return;
-            }
-            if (colValue && typeof colValue === 'object'
-                && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                const value = colValue[componentProps.dataValue];
+        if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+            return;
+        componentProps.datasource.data = componentProps.datasource.data || [];
+        // prevent pushing lookup values when using accessor in data
+        if (!Array.isArray(componentProps.datasource.data))
+            return;
+        const colValue = row[column.name];
+        if (Array.isArray(colValue)) {
+            colValue.forEach((item) => {
+                const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                 if (column.lookupData[value]) {
                     componentProps.datasource.data.push(column.lookupData[value]);
                 }
-                return;
-            }
-            if (column.lookupData[colValue]) {
-                componentProps.datasource.data.push(column.lookupData[colValue]);
+            });
+            return;
+        }
+        if (colValue && typeof colValue === 'object'
+            && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+            const value = colValue[componentProps.dataValue];
+            if (column.lookupData[value]) {
+                componentProps.datasource.data.push(column.lookupData[value]);
             }
+            return;
+        }
+        if (column.lookupData[colValue]) {
+            componentProps.datasource.data.push(column.lookupData[colValue]);
         }
     }
     checkCompValidity(component) {
@@ -14775,36 +14816,43 @@ class TreeGridEditable extends TreeGrid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
     }
     updateOriginalRow(key, row) {
         if (this.editedRows[key] !== undefined)
             this.editedRows[key].originalRow = omit(row, 'originalRow');
     }
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     checkLookupData(column, row, componentProps) {
-        if (row[column.name] && column.lookupData && componentProps.datasource) {
-            componentProps.datasource.data = componentProps.datasource.data || [];
-            const colValue = row[column.name];
-            if (Array.isArray(colValue)) {
-                colValue.forEach((item) => {
-                    const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                    if (column.lookupData[value]) {
-                        componentProps.datasource.data.push(column.lookupData[value]);
-                    }
-                });
-                return;
-            }
-            if (colValue && typeof colValue === 'object'
-                && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                const value = colValue[componentProps.dataValue];
+        if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+            return;
+        componentProps.datasource.data = componentProps.datasource.data || [];
+        // prevent pushing lookup values when using accessor in data
+        if (!Array.isArray(componentProps.datasource.data))
+            return;
+        const colValue = row[column.name];
+        if (Array.isArray(colValue)) {
+            colValue.forEach((item) => {
+                const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                 if (column.lookupData[value]) {
                     componentProps.datasource.data.push(column.lookupData[value]);
                 }
-                return;
-            }
-            if (column.lookupData[colValue]) {
-                componentProps.datasource.data.push(column.lookupData[colValue]);
+            });
+            return;
+        }
+        if (colValue && typeof colValue === 'object'
+            && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+            const value = colValue[componentProps.dataValue];
+            if (column.lookupData[value]) {
+                componentProps.datasource.data.push(column.lookupData[value]);
             }
+            return;
+        }
+        if (column.lookupData[colValue]) {
+            componentProps.datasource.data.push(column.lookupData[colValue]);
         }
     }
     checkCompValidity(component) {

package/dist/zd-common.umd.js

@@ -1896,6 +1896,10 @@
            * Input validations.
            */
           this.validations = {};
+          /**
+           * Defines if the input should be automatically registered in the closest parent Form
+           */
+          this.autoRegister = true;
           /**
            * Parsed field rules.
            */
@@ -1931,8 +1935,9 @@
           this.storePath = this.getInitValue('storePath', props.storePath, this.storePath);
           this.value = this.getInitValue('value', props.value, this.value);
           this.validations = this.getInitValue('validations', props.validations, this.validations);
+          this.autoRegister = this.getInitValue('autoRegister', props.autoRegister, this.autoRegister);
           this.parseValidations(props.validations || {});
-          if (this.formParent) {
+          if (this.autoRegister && this.formParent) {
               this.formParent.registerInput(this);
           }
           this.createAccessors();
@@ -5823,7 +5828,7 @@
   core.FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
       if (value === null || value === undefined)
           return '';
-      const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
+      const { dataText, formatterDataText, dataTextSeparator, dataValue, dataTextDiscrete, } = componentProps;
       let currentRow = row;
       if (dataValue) {
           const dataTextColumns = Array.isArray(dataText) ? dataText : [dataText];
@@ -5844,7 +5849,7 @@
       }
       if (!Object.keys(currentRow).length)
           return typeof value === 'object' ? '' : value;
-      const textColumn = formatterDataText || dataText;
+      const textColumn = formatterDataText || dataTextDiscrete || dataText;
       if (!textColumn)
           return value;
       if (typeof textColumn === 'string') {
@@ -6440,6 +6445,7 @@
           props.children = newChildren;
           props.name = instanceName;
           props.allowDuplicate = true;
+          props.autoRegister = false;
           let instance = null;
           try {
               instance = this.updateActionInstance(instanceName, props);
@@ -6462,8 +6468,15 @@
           }
           return { props, instance };
       }
+      filterObject(obj, callback) {
+          return Object.fromEntries(Object.entries(obj).filter(([key, value]) => callback(key, value)));
+      }
+      deleteAccessorProps(newComponent) {
+          const filteredProps = this.filterObject(newComponent, (_key, value) => !core.Accessor.isAccessorDefinition(value));
+          return filteredProps;
+      }
       updateActionInstance(instanceName, newComponent) {
-          const updatedComponent = Object.assign({}, newComponent);
+          const updatedComponent = this.deleteAccessorProps(newComponent);
           delete updatedComponent.datasource;
           delete updatedComponent.events;
           const instance = core.Metadata.updateInstance(instanceName, updatedComponent);
@@ -6654,6 +6667,22 @@
           }
           this.cellClickEvent(row, column, event, element);
       }
+      /**
+       * Dispatches cellDoubleClick event
+       * @param row Grid row
+       * @param column Grid column
+       * @param event DOM event
+       * @param element DOM Element
+       */
+      cellDoubleClick(row, column, event, element, canEdit = true) {
+          if (column.editable && canEdit) {
+              this.preventRowDoubleClick = true;
+              this.datasource.currentRow = row;
+              this.inlineEdit(row, column, event, element);
+              return;
+          }
+          this.cellDoubleClickEvent(row, column, event, element);
+      }
       /**
        * Enables editing mode
        * @param row Grid row
@@ -6674,6 +6703,11 @@
               event, element, row, column, component: this,
           });
       }
+      cellDoubleClickEvent(row, column, event, element) {
+          this.preventRowDoubleClick = this.callEvent('cellDoubleClick', {
+              event, element, row, column, component: this,
+          });
+      }
       /**
        * Dispatches select/unselect event
        * @param row Grid row
@@ -6759,32 +6793,39 @@
                   }
               } });
           this.updateOriginalRow(key, row);
-          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
       }
+      /**
+       * Pushes lookup values into the column's datasource
+       * If the row[column.name] has a selected value, pushes it
+       */
       checkLookupData(column, row, componentProps) {
-          if (row[column.name] && column.lookupData && componentProps.datasource) {
-              componentProps.datasource.data = componentProps.datasource.data || [];
-              const colValue = row[column.name];
-              if (Array.isArray(colValue)) {
-                  colValue.forEach((item) => {
-                      const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                      if (column.lookupData[value]) {
-                          componentProps.datasource.data.push(column.lookupData[value]);
-                      }
-                  });
-                  return;
-              }
-              if (colValue && typeof colValue === 'object'
-                  && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                  const value = colValue[componentProps.dataValue];
+          if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+              return;
+          componentProps.datasource.data = componentProps.datasource.data || [];
+          // prevent pushing lookup values when using accessor in data
+          if (!Array.isArray(componentProps.datasource.data))
+              return;
+          const colValue = row[column.name];
+          if (Array.isArray(colValue)) {
+              colValue.forEach((item) => {
+                  const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                   if (column.lookupData[value]) {
                       componentProps.datasource.data.push(column.lookupData[value]);
                   }
-                  return;
-              }
-              if (column.lookupData[colValue]) {
-                  componentProps.datasource.data.push(column.lookupData[colValue]);
+              });
+              return;
+          }
+          if (colValue && typeof colValue === 'object'
+              && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+              const value = colValue[componentProps.dataValue];
+              if (column.lookupData[value]) {
+                  componentProps.datasource.data.push(column.lookupData[value]);
               }
+              return;
+          }
+          if (column.lookupData[colValue]) {
+              componentProps.datasource.data.push(column.lookupData[colValue]);
           }
       }
       checkCompValidity(component) {
@@ -14782,36 +14823,43 @@
                   }
               } });
           this.updateOriginalRow(key, row);
-          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
+          return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true, autoRegister: false });
       }
       updateOriginalRow(key, row) {
           if (this.editedRows[key] !== undefined)
               this.editedRows[key].originalRow = omit__default["default"](row, 'originalRow');
       }
+      /**
+       * Pushes lookup values into the column's datasource
+       * If the row[column.name] has a selected value, pushes it
+       */
       checkLookupData(column, row, componentProps) {
-          if (row[column.name] && column.lookupData && componentProps.datasource) {
-              componentProps.datasource.data = componentProps.datasource.data || [];
-              const colValue = row[column.name];
-              if (Array.isArray(colValue)) {
-                  colValue.forEach((item) => {
-                      const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
-                      if (column.lookupData[value]) {
-                          componentProps.datasource.data.push(column.lookupData[value]);
-                      }
-                  });
-                  return;
-              }
-              if (colValue && typeof colValue === 'object'
-                  && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
-                  const value = colValue[componentProps.dataValue];
+          if (!row[column.name] || !column.lookupData || !componentProps.datasource)
+              return;
+          componentProps.datasource.data = componentProps.datasource.data || [];
+          // prevent pushing lookup values when using accessor in data
+          if (!Array.isArray(componentProps.datasource.data))
+              return;
+          const colValue = row[column.name];
+          if (Array.isArray(colValue)) {
+              colValue.forEach((item) => {
+                  const value = typeof item === 'object' ? item[componentProps.dataValue] : item;
                   if (column.lookupData[value]) {
                       componentProps.datasource.data.push(column.lookupData[value]);
                   }
-                  return;
-              }
-              if (column.lookupData[colValue]) {
-                  componentProps.datasource.data.push(column.lookupData[colValue]);
+              });
+              return;
+          }
+          if (colValue && typeof colValue === 'object'
+              && Object.prototype.hasOwnProperty.call(colValue, componentProps.dataValue)) {
+              const value = colValue[componentProps.dataValue];
+              if (column.lookupData[value]) {
+                  componentProps.datasource.data.push(column.lookupData[value]);
               }
+              return;
+          }
+          if (column.lookupData[colValue]) {
+              componentProps.datasource.data.push(column.lookupData[colValue]);
           }
       }
       checkCompValidity(component) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.100.0",
+  "version": "1.100.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "f387e52dc26f20fbd8dfa61b3881a096f32c68ad"
+  "gitHead": "1209ae3b06d2feb2b969f42ec7100f68ac8c55e0"
 }

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

@@ -76,6 +76,14 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param element DOM Element
      */
     cellClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
+    /**
+     * Dispatches cellDoubleClick event
+     * @param row Grid row
+     * @param column Grid column
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    cellDoubleClick(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any, canEdit?: boolean): void;
     /**
      * Enables editing mode
      * @param row Grid row
@@ -85,6 +93,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      */
     inlineEdit(row: IDictionary, column: GridColumnEditable, event: Event, element: any): void;
     cellClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
+    cellDoubleClickEvent(row: IDictionary<any>, column: GridColumnEditable, event: Event, element: any): void;
     /**
      * Dispatches select/unselect event
      * @param row Grid row
@@ -119,7 +128,12 @@ export declare class GridEditable extends Grid implements IGridEditable {
         events: any;
         autofill: boolean;
         allowDuplicate: boolean;
+        autoRegister: boolean;
     };
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     private checkLookupData;
     private checkCompValidity;
     /**

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

@@ -225,6 +225,8 @@ export declare class Grid extends Iterable implements IGrid {
         props: IComponent;
         instance: Component | null;
     };
+    private filterObject;
+    private deleteAccessorProps;
     protected updateActionInstance(instanceName: string, newComponent: IComponent): Component;
     getActionComponent(actionComponent: IComponent, column: GridColumn, row: IDictionary, parentPath?: string): IComponent;
     protected changeDefaultSlotNames(slot: IComponentRender[]): any;

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

@@ -99,6 +99,10 @@ export declare class Input extends ComponentRender implements IInput {
      * Input validations.
      */
     validations: IDictionary<IDictionary<string | number>>;
+    /**
+     * Defines if the input should be automatically registered in the closest parent Form
+     */
+    autoRegister: boolean;
     /**
      * Optional validation method assigned by view layer.
      */

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

@@ -35,4 +35,5 @@ export interface IInput extends IComponentRender {
     storePath?: string;
     validations?: IDictionary<IDictionary<string | number>>;
     value?: any;
+    autoRegister?: boolean;
 }

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

@@ -110,8 +110,13 @@ export declare class TreeGridEditable extends TreeGrid implements ITreeGridEdita
         events: any;
         autofill: boolean;
         allowDuplicate: boolean;
+        autoRegister: boolean;
     };
     private updateOriginalRow;
+    /**
+     * Pushes lookup values into the column's datasource
+     * If the row[column.name] has a selected value, pushes it
+     */
     private checkLookupData;
     private checkCompValidity;
     /**