@zeedhi/common 1.87.1 → 1.88.0

package/dist/zd-common.esm.js

@@ -4246,10 +4246,7 @@ class DateRange extends TextInput {
          * Toggles visibility of the week numbers in the body of the calendar.
          */
         this.showWeek = false;
-        /**
-         * Character that will separate the two dates
-         */
-        this.splitter = ' ~ ';
+        this.internalSplitter = ' ~ ';
         /**
          * Width of the picker.
          */
@@ -4288,7 +4285,7 @@ class DateRange extends TextInput {
         this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
-        this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
+        this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
         this.width = this.getInitValue('width', props.width, this.width);
         this.mask = this.getInitValue('mask', props.mask, undefined);
         this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
@@ -4307,6 +4304,15 @@ class DateRange extends TextInput {
             }
         };
     }
+    /**
+     * Character that will separate the two dates
+     */
+    get splitter() {
+        return I18n.translate(this.internalSplitter);
+    }
+    set splitter(splitter) {
+        this.internalSplitter = splitter;
+    }
     getInitialMask() {
         if (isUndefined(this.mask)) {
             this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -4344,7 +4350,7 @@ class DateRange extends TextInput {
       * Gets the updated masked, based on displayFormat if the initial mask is undefined
       */
     getUpdatedMask() {
-        if (isUndefined(this.initialMask)) {
+        if (isUndefined(this.getInitialMask())) {
             return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
         }
         return this.mask;
@@ -4475,10 +4481,10 @@ class DateRange extends TextInput {
       * Add date mask
       */
     addDateMask() {
-        if (isUndefined(this.initialMask) || !this.value)
+        if (isUndefined(this.getInitialMask()) || !this.value)
             return;
         setTimeout(() => {
-            this.mask = this.initialMask;
+            this.mask = this.getInitialMask();
             const firstDate = this.value[0]
                 ? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
                 : '';
@@ -4492,7 +4498,7 @@ class DateRange extends TextInput {
       * Removes the component mask if value is valid
       */
     removeDateMask() {
-        if (isUndefined(this.initialMask) || !this.value || this.dateError
+        if (isUndefined(this.getInitialMask()) || !this.value || this.dateError
             || !this.isValidDateArray(this.dateFormat, this.value)) {
             return;
         }
@@ -5259,6 +5265,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 +5297,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 +6372,7 @@ class GridEditable extends Grid {
          * @private
          */
         this.invalidComponents = {};
+        this.editingNewRows = false;
         this.cancelEditedRowsKeyMapping = {
             esc: {
                 event: this.cancelEditedRows.bind(this),
@@ -6375,6 +6384,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 +6850,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 +7779,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 +7794,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)
@@ -10019,6 +10033,9 @@ class SelectMultiple extends Select {
                 yield this.datasource.get();
             }
             this.setValue(this.datasource.data);
+            if (!this.datasource.search) {
+                this.setCache();
+            }
         });
     }
     unSelectAllItems() {
@@ -10546,6 +10563,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
          */
@@ -10600,6 +10621,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);
@@ -10676,7 +10698,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) => {
@@ -10695,7 +10739,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];
@@ -10707,23 +10751,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

@@ -4253,10 +4253,7 @@
            * Toggles visibility of the week numbers in the body of the calendar.
            */
           this.showWeek = false;
-          /**
-           * Character that will separate the two dates
-           */
-          this.splitter = ' ~ ';
+          this.internalSplitter = ' ~ ';
           /**
            * Width of the picker.
            */
@@ -4295,7 +4292,7 @@
           this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
           this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
           this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
-          this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
+          this.splitter = this.getInitValue('splitter', props.splitter, this.internalSplitter);
           this.width = this.getInitValue('width', props.width, this.width);
           this.mask = this.getInitValue('mask', props.mask, undefined);
           this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
@@ -4314,6 +4311,15 @@
               }
           };
       }
+      /**
+       * Character that will separate the two dates
+       */
+      get splitter() {
+          return core.I18n.translate(this.internalSplitter);
+      }
+      set splitter(splitter) {
+          this.internalSplitter = splitter;
+      }
       getInitialMask() {
           if (isUndefined__default["default"](this.mask)) {
               this.unitMask = this.inputFormat && this.maskFormat(this.inputFormat);
@@ -4351,7 +4357,7 @@
         * Gets the updated masked, based on displayFormat if the initial mask is undefined
         */
       getUpdatedMask() {
-          if (isUndefined__default["default"](this.initialMask)) {
+          if (isUndefined__default["default"](this.getInitialMask())) {
               return this.maskFormat(`${this.displayFormat}${this.splitter}${this.displayFormat}`);
           }
           return this.mask;
@@ -4482,10 +4488,10 @@
         * Add date mask
         */
       addDateMask() {
-          if (isUndefined__default["default"](this.initialMask) || !this.value)
+          if (isUndefined__default["default"](this.getInitialMask()) || !this.value)
               return;
           setTimeout(() => {
-              this.mask = this.initialMask;
+              this.mask = this.getInitialMask();
               const firstDate = this.value[0]
                   ? core.dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
                   : '';
@@ -4499,7 +4505,7 @@
         * Removes the component mask if value is valid
         */
       removeDateMask() {
-          if (isUndefined__default["default"](this.initialMask) || !this.value || this.dateError
+          if (isUndefined__default["default"](this.getInitialMask()) || !this.value || this.dateError
               || !this.isValidDateArray(this.dateFormat, this.value)) {
               return;
           }
@@ -5266,6 +5272,7 @@
           this.factoredConditions = {};
           /* Action children conditions */
           this.actionFactoredConditions = {};
+          this.helperText = '';
           this.defaultData = [];
           this.lookup = debounce__default["default"]((lookupColumn) => {
               this.loading = true;
@@ -5297,6 +5304,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 +6379,7 @@
            * @private
            */
           this.invalidComponents = {};
+          this.editingNewRows = false;
           this.cancelEditedRowsKeyMapping = {
               esc: {
                   event: this.cancelEditedRows.bind(this),
@@ -6382,6 +6391,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 +6857,9 @@
           }
       }
       callCanEditRow(row) {
+          if (this.editingNewRows) {
+              return row[this.newRowIdentifier];
+          }
           return !this.canEditRow || typeof this.canEditRow !== 'function' || this.canEditRow({ row, component: this });
       }
   }
@@ -7773,7 +7786,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 +7801,7 @@
           super.blur(event, element);
       }
       checkValueOnBlur() {
-          if (!this.search) {
+          if (!this.search && this.value !== null) {
               this.setValue(null);
           }
           if (this.manualMode)
@@ -10026,6 +10040,9 @@
                   yield this.datasource.get();
               }
               this.setValue(this.datasource.data);
+              if (!this.datasource.search) {
+                  this.setCache();
+              }
           });
       }
       unSelectAllItems() {
@@ -10553,6 +10570,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
            */
@@ -10607,6 +10628,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);
@@ -10683,7 +10705,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) => {
@@ -10702,7 +10746,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];
@@ -10714,23 +10758,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.1",
+  "version": "1.88.0",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -43,5 +43,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "52e489cc86beba6f24fc8120e8ea641edc9d7cdf"
+  "gitHead": "b9e30e705a88fa882c1fbdf140c15cc7c47c7c87"
 }

package/types/components/zd-date/date-range.d.ts

@@ -48,7 +48,9 @@ export declare class DateRange extends TextInput implements IDateRange {
     /**
      * Character that will separate the two dates
      */
-    splitter: string;
+    get splitter(): string;
+    set splitter(splitter: string);
+    private internalSplitter;
     /**
      * Width of the picker.
      */

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-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
      */