@zeedhi/common 1.87.0 → 1.87.2

package/dist/zd-common.esm.js

@@ -5259,6 +5259,7 @@ class Column extends Component {
         this.factoredConditions = {};
         /* Action children conditions */
         this.actionFactoredConditions = {};
+        this.helperText = '';
         this.defaultData = [];
         this.lookup = debounce((lookupColumn) => {
             this.loading = true;
@@ -5290,6 +5291,7 @@ class Column extends Component {
         this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
         this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
         this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
+        this.helperText = this.getInitValue('', props.helperText, this.helperText);
         this.createConditions();
         this.createActionConditions();
         if (this.componentProps.datasource) {
@@ -6364,6 +6366,7 @@ class GridEditable extends Grid {
          * @private
          */
         this.invalidComponents = {};
+        this.editingNewRows = false;
         this.cancelEditedRowsKeyMapping = {
             esc: {
                 event: this.cancelEditedRows.bind(this),
@@ -6375,6 +6378,7 @@ class GridEditable extends Grid {
         this.newRowIdentifier = '__added_row';
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
+        this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
         this.createAccessors();
     }
     onMounted(element) {
@@ -6840,6 +6844,9 @@ class GridEditable extends Grid {
         }
     }
     callCanEditRow(row) {
+        if (this.editingNewRows) {
+            return row[this.newRowIdentifier];
+        }
         return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
     }
 }
@@ -7766,7 +7773,8 @@ class Select extends TextInput {
      */
     blur(event, element) {
         if (this.autocomplete) {
-            if (this.search && this.autoSelection && this.datasource.data.length === 1) {
+            const isSameValue = () => this.getValue(this.datasource.data[0]) === this.value;
+            if (this.search && this.autoSelection && this.datasource.data.length === 1 && !isSameValue()) {
                 this.setValue(this.datasource.data[0]);
             }
             this.datasource.search = '';
@@ -7780,7 +7788,7 @@ class Select extends TextInput {
         super.blur(event, element);
     }
     checkValueOnBlur() {
-        if (!this.search) {
+        if (!this.search && this.value !== null) {
             this.setValue(null);
         }
         if (this.manualMode)
@@ -8782,6 +8790,7 @@ class Menu extends ComponentRender {
         this.searchValue = '';
         /** Store the current item focused */
         this.currentItem = null;
+        this.cache = false;
         this.app = this.getInitValue('app', props.app, this.app);
         this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
         this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
@@ -8800,6 +8809,7 @@ class Menu extends ComponentRender {
         this.closeToMini = this.getInitValue('closeToMini', props.closeToMini, this.closeToMini);
         this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
         this.width = this.getInitValue('width', props.width, this.width);
+        this.cache = this.getInitValue('cache', props.cache, this.cache);
         this.mobileBreakpoint = this.getInitValue('mobileBreakpoint', props.mobileBreakpoint, this.mobileBreakpoint);
         this.drawer = window.innerWidth > this.mobileBreakpoint;
         this.openedInitialValue = this.getInitValue('opened', props.opened, this.opened);
@@ -8862,7 +8872,7 @@ class Menu extends ComponentRender {
      */
     loadMetadata(url) {
         return __awaiter(this, void 0, void 0, function* () {
-            this.items = (yield Metadata.get(url, Boolean(this.isLocal)));
+            this.items = (yield Metadata.get(url, Boolean(this.isLocal), this.cache));
         });
     }
     /**
@@ -10017,6 +10027,9 @@ class SelectMultiple extends Select {
                 yield this.datasource.get();
             }
             this.setValue(this.datasource.data);
+            if (!this.datasource.search) {
+                this.setCache();
+            }
         });
     }
     unSelectAllItems() {
@@ -10544,6 +10557,10 @@ class SelectTree extends TextInput {
          * Field used to display values
          */
         this.dataText = '';
+        /**
+         * Field used to display values when the select is closed
+         */
+        this.dataTextDiscrete = '';
         /**
          * Value used to join display values
          */
@@ -10598,6 +10615,7 @@ class SelectTree extends TextInput {
         this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.dataText = this.getInitValue('dataText', props.dataText, this.dataText);
+        this.dataTextDiscrete = this.getInitValue('dataTextDiscrete', props.dataTextDiscrete, this.dataTextDiscrete);
         this.dataTextSeparator = this.getInitValue('dataTextSeparator', props.dataTextSeparator, this.dataTextSeparator);
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
@@ -10674,7 +10692,29 @@ class SelectTree extends TextInput {
                 children = undefined;
             }
         }
-        const dataTextArr = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
+        const dataText = this.formatRow(this.dataText, row);
+        const dataTextDiscrete = this.formatRow(this.dataTextDiscrete, row);
+        return {
+            id: row[this.dataValue],
+            label: dataText,
+            discreteLabel: (dataTextDiscrete || dataText),
+            children,
+            row,
+        };
+    }
+    createChildrenNodes(rows) {
+        const newNodes = [];
+        rows.forEach((row) => {
+            if (Object.keys(row).length > 0) {
+                const newNode = this.createNodeFromRow(row);
+                row.tree__node = newNode;
+                newNodes.push(newNode);
+            }
+        });
+        return newNodes;
+    }
+    formatRow(dataText, row) {
+        const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
         const dataTextNames = [];
         const masks = [];
         dataTextArr.forEach((text) => {
@@ -10693,7 +10733,7 @@ class SelectTree extends TextInput {
                 }
             }
         });
-        const dataText = dataTextNames.reduce((result, column, index) => {
+        const rowText = dataTextNames.reduce((result, column, index) => {
             if (row[column]) {
                 const separator = index > 0 ? this.dataTextSeparator : '';
                 let masked = row[column];
@@ -10705,23 +10745,7 @@ class SelectTree extends TextInput {
             }
             return result;
         }, '');
-        return {
-            id: row[this.dataValue],
-            label: dataText,
-            children,
-            row,
-        };
-    }
-    createChildrenNodes(rows) {
-        const newNodes = [];
-        rows.forEach((row) => {
-            if (Object.keys(row).length > 0) {
-                const newNode = this.createNodeFromRow(row);
-                row.tree__node = newNode;
-                newNodes.push(newNode);
-            }
-        });
-        return newNodes;
+        return rowText;
     }
     /**
      * Triggered when the menu opens

package/dist/zd-common.umd.js

@@ -5266,6 +5266,7 @@
           this.factoredConditions = {};
           /* Action children conditions */
           this.actionFactoredConditions = {};
+          this.helperText = '';
           this.defaultData = [];
           this.lookup = debounce__default["default"]((lookupColumn) => {
               this.loading = true;
@@ -5297,6 +5298,7 @@
           this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
           this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
           this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
+          this.helperText = this.getInitValue('', props.helperText, this.helperText);
           this.createConditions();
           this.createActionConditions();
           if (this.componentProps.datasource) {
@@ -6371,6 +6373,7 @@
            * @private
            */
           this.invalidComponents = {};
+          this.editingNewRows = false;
           this.cancelEditedRowsKeyMapping = {
               esc: {
                   event: this.cancelEditedRows.bind(this),
@@ -6382,6 +6385,7 @@
           this.newRowIdentifier = '__added_row';
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
           this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
+          this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
           this.createAccessors();
       }
       onMounted(element) {
@@ -6847,6 +6851,9 @@
           }
       }
       callCanEditRow(row) {
+          if (this.editingNewRows) {
+              return row[this.newRowIdentifier];
+          }
           return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
       }
   }
@@ -7773,7 +7780,8 @@
        */
       blur(event, element) {
           if (this.autocomplete) {
-              if (this.search && this.autoSelection && this.datasource.data.length === 1) {
+              const isSameValue = () => this.getValue(this.datasource.data[0]) === this.value;
+              if (this.search && this.autoSelection && this.datasource.data.length === 1 && !isSameValue()) {
                   this.setValue(this.datasource.data[0]);
               }
               this.datasource.search = '';
@@ -7787,7 +7795,7 @@
           super.blur(event, element);
       }
       checkValueOnBlur() {
-          if (!this.search) {
+          if (!this.search && this.value !== null) {
               this.setValue(null);
           }
           if (this.manualMode)
@@ -8789,6 +8797,7 @@
           this.searchValue = '';
           /** Store the current item focused */
           this.currentItem = null;
+          this.cache = false;
           this.app = this.getInitValue('app', props.app, this.app);
           this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
@@ -8807,6 +8816,7 @@
           this.closeToMini = this.getInitValue('closeToMini', props.closeToMini, this.closeToMini);
           this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
           this.width = this.getInitValue('width', props.width, this.width);
+          this.cache = this.getInitValue('cache', props.cache, this.cache);
           this.mobileBreakpoint = this.getInitValue('mobileBreakpoint', props.mobileBreakpoint, this.mobileBreakpoint);
           this.drawer = window.innerWidth > this.mobileBreakpoint;
           this.openedInitialValue = this.getInitValue('opened', props.opened, this.opened);
@@ -8869,7 +8879,7 @@
        */
       loadMetadata(url) {
           return __awaiter(this, void 0, void 0, function* () {
-              this.items = (yield core.Metadata.get(url, Boolean(this.isLocal)));
+              this.items = (yield core.Metadata.get(url, Boolean(this.isLocal), this.cache));
           });
       }
       /**
@@ -10024,6 +10034,9 @@
                   yield this.datasource.get();
               }
               this.setValue(this.datasource.data);
+              if (!this.datasource.search) {
+                  this.setCache();
+              }
           });
       }
       unSelectAllItems() {
@@ -10551,6 +10564,10 @@
            * Field used to display values
            */
           this.dataText = '';
+          /**
+           * Field used to display values when the select is closed
+           */
+          this.dataTextDiscrete = '';
           /**
            * Value used to join display values
            */
@@ -10605,6 +10622,7 @@
           this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
           this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
           this.dataText = this.getInitValue('dataText', props.dataText, this.dataText);
+          this.dataTextDiscrete = this.getInitValue('dataTextDiscrete', props.dataTextDiscrete, this.dataTextDiscrete);
           this.dataTextSeparator = this.getInitValue('dataTextSeparator', props.dataTextSeparator, this.dataTextSeparator);
           this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
           this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
@@ -10681,7 +10699,29 @@
                   children = undefined;
               }
           }
-          const dataTextArr = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
+          const dataText = this.formatRow(this.dataText, row);
+          const dataTextDiscrete = this.formatRow(this.dataTextDiscrete, row);
+          return {
+              id: row[this.dataValue],
+              label: dataText,
+              discreteLabel: (dataTextDiscrete || dataText),
+              children,
+              row,
+          };
+      }
+      createChildrenNodes(rows) {
+          const newNodes = [];
+          rows.forEach((row) => {
+              if (Object.keys(row).length > 0) {
+                  const newNode = this.createNodeFromRow(row);
+                  row.tree__node = newNode;
+                  newNodes.push(newNode);
+              }
+          });
+          return newNodes;
+      }
+      formatRow(dataText, row) {
+          const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
           const dataTextNames = [];
           const masks = [];
           dataTextArr.forEach((text) => {
@@ -10700,7 +10740,7 @@
                   }
               }
           });
-          const dataText = dataTextNames.reduce((result, column, index) => {
+          const rowText = dataTextNames.reduce((result, column, index) => {
               if (row[column]) {
                   const separator = index > 0 ? this.dataTextSeparator : '';
                   let masked = row[column];
@@ -10712,23 +10752,7 @@
               }
               return result;
           }, '');
-          return {
-              id: row[this.dataValue],
-              label: dataText,
-              children,
-              row,
-          };
-      }
-      createChildrenNodes(rows) {
-          const newNodes = [];
-          rows.forEach((row) => {
-              if (Object.keys(row).length > 0) {
-                  const newNode = this.createNodeFromRow(row);
-                  row.tree__node = newNode;
-                  newNodes.push(newNode);
-              }
-          });
-          return newNodes;
+          return rowText;
       }
       /**
        * Triggered when the menu opens

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.87.0",
+  "version": "1.87.2",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "528e43ff67f44973feb379818ae80f0c8c02a379"
+  "gitHead": "ba49509e8854ec02eb5615c7197e7cad12d1cabe"
 }

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

@@ -40,6 +40,7 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @private
      */
     private invalidComponents;
+    editingNewRows: boolean;
     protected cancelEditedRowsKeyMapping: any;
     constructor(props: IGridEditable);
     onMounted(element: any): void;
@@ -190,5 +191,5 @@ export declare class GridEditable extends Grid implements IGridEditable {
      * @param value Value to be set in the cell
      */
     private changeCell;
-    callCanEditRow(row: IDictionary<any>): boolean;
+    callCanEditRow(row: IDictionary<any>): any;
 }

package/types/components/zd-iterable/column.d.ts

@@ -40,6 +40,7 @@ export declare class Column extends Component implements IColumn {
      * Method to get the current column width, assigned by view layer.
      */
     private viewGetWidth?;
+    helperText: string;
     protected defaultData: IDictionary[];
     /**
      * Creates a new Column.

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

@@ -26,6 +26,7 @@ export interface IMenu extends IComponentRender {
     topSlot?: IComponentRender[];
     width?: number | string;
     mobileBreakpoint?: number | string;
+    cache?: boolean;
 }
 /**
  * Interface for menu itens

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

@@ -117,6 +117,7 @@ export declare class Menu extends ComponentRender implements IMenu {
     private searchValue;
     /** Store the current item focused */
     currentItem: IMenuItem | null;
+    cache?: boolean;
     /**
      * Creates a new Menu.
      * @param props Menu properties

package/types/components/zd-select-tree/interfaces.d.ts

@@ -4,6 +4,7 @@ import { SelectTree } from './select-tree';
 export interface ISelectTreeNode<T> {
     id: string | number;
     label: string;
+    discreteLabel?: string;
     isDisabled?: boolean;
     isDefaultExpanded?: boolean;
     children?: ISelectTreeNode<T>[] | null;
@@ -27,6 +28,7 @@ export interface ISelectTree extends IComponentRender {
     parentField?: string;
     dataValue?: string;
     dataText?: string | any[];
+    dataTextDiscrete?: string | any[];
     dataDisabled?: string;
     disabledItems?: any[];
     fetchOnDemand?: boolean;

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

@@ -60,6 +60,10 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      * Field used to display values
      */
     dataText: string | any[];
+    /**
+     * Field used to display values when the select is closed
+     */
+    dataTextDiscrete: string | any[];
     /**
      * Value used to join display values
      */
@@ -115,6 +119,7 @@ export declare class SelectTree extends TextInput implements ISelectTree {
     createNodesFromDatasource(buildTree?: boolean): void;
     private createNodeFromRow;
     private createChildrenNodes;
+    private formatRow;
     /**
      * Triggered when the menu opens
      */