@zeedhi/common 1.45.1 → 1.48.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Mask, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
@@ -40,6 +40,10 @@ class Component {
          * Set css in line with cssStyle.
          */
         this.cssStyle = '';
+        /**
+         * Directives registered to the component.
+         */
+        this.directives = {};
         /**
          * Events registered to the component.
          */
@@ -70,12 +74,16 @@ class Component {
         this.events = Event.factory(props.events || this.events);
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
+        this.directives = this.getInitValue('directives', props.directives, this.directives);
         this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
         this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.light = this.getInitValue('light', props.light, this.light);
         this.children = Array.isArray(props.children) ? props.children : this.children;
         this.keyMap = KeyMap.factory(props.keyMap || this.keyMap);
         this.createAccessors();
+        Object.keys(this.directives).forEach((key) => {
+            this.directives[key] = Event.factory(this.directives[key]);
+        });
     }
     setViewFocus(viewFocus) {
         this.viewFocus = viewFocus;
@@ -495,7 +503,7 @@ class ApexChart extends ComponentRender {
      * @param options New options
      */
     updateChart(options) {
-        this.options = Object.assign(Object.assign({}, this.options), options);
+        merge(this.options, options);
         if (options.series) {
             this.series = this.options.series;
         }
@@ -1649,10 +1657,6 @@ class Input extends ComponentRender {
          * Used to watch a value from store.
          */
         this.storePath = '';
-        /**
-        * Internal input value.
-        */
-        this.value = null;
         /**
          * Input validations.
          */
@@ -1663,6 +1667,8 @@ class Input extends ComponentRender {
         this.parsedValidations = {};
         this.formatterFn = FormatterParserProvider.getFormatter('ZdInput');
         this.parserFn = FormatterParserProvider.getParser('ZdInput');
+        this.internalDisplayValue = '';
+        this.internalValue = null;
         this.lastInputValue = undefined;
         this.callInputEvent = debounce(({ event, element, component }) => {
             this.callEvent('input', { event, element, component });
@@ -1757,7 +1763,8 @@ class Input extends ComponentRender {
      * Removes all input validation.
      */
     clearValidations() {
-        Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+        this.validations = {};
+        this.rules = [];
     }
     /**
      * Updates input rules.
@@ -1766,14 +1773,39 @@ class Input extends ComponentRender {
         this.rules = Object.values(this.parsedValidations)
             .map((validation) => () => validation(this.value));
     }
+    /**
+     * Input value.
+     */
+    get value() {
+        return this.internalValue;
+    }
+    set value(value) {
+        if (this.internalValue !== value) {
+            this.internalDisplayValue = this.formatter(value);
+            this.internalValue = value;
+        }
+    }
     /**
      * Input displayed value.
      */
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(value) {
-        this.value = this.parser(value);
+        if (this.internalDisplayValue !== value) {
+            this.internalValue = this.parser(value);
+            let { mask } = this;
+            if (mask) {
+                if (typeof mask === 'function') {
+                    mask = mask(this.internalValue);
+                }
+                this.internalDisplayValue = Mask.convertAll(mask, value);
+                this.internalValue = this.parser(this.internalDisplayValue);
+            }
+            else {
+                this.internalDisplayValue = value;
+            }
+        }
     }
     /**
      * Retrieves a formatted value.
@@ -2862,6 +2894,7 @@ class Dashboard extends ComponentRender {
         this.cards = [];
         /* Card ID to be deleted */
         this.deleteCardId = '';
+        this.overrideNamedProps = {};
         /* Remove the paddings of the dashboard */
         this.removePadding = false;
         /* Height of the dashboard */
@@ -3070,6 +3103,7 @@ class Dashboard extends ComponentRender {
         this.editingMode = this.getInitValue('editingMode', props.editingMode, this.editingMode);
         this.moveMode = this.getInitValue('moveMode', props.moveMode, this.moveMode);
         this.cards = props.cards || this.cards;
+        this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
         this.height = this.getInitValue('height', props.height, this.height);
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
@@ -3207,6 +3241,7 @@ class Dashboard extends ComponentRender {
             component: 'ZdFrame',
             path: card.path,
             local: card.local,
+            overrideNamedProps: card.overrideNamedProps,
         };
     }
     /* Return footer rightSlot props for view layer */
@@ -3315,6 +3350,14 @@ class Date$1 extends TextInput {
          * Determines the type of the picker - date for date picker, month for month picker.
          */
         this.pickerType = 'date';
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         /**
          * Width of the picker.
          */
@@ -3323,6 +3366,8 @@ class Date$1 extends TextInput {
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDate');
         this.parserFn = FormatterParserProvider.getParser('ZdDate');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.allowedDates = this.getInitValue('allowedDates', props.allowedDates, this.allowedDates);
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
@@ -3338,6 +3383,8 @@ class Date$1 extends TextInput {
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
         this.pickerType = this.getInitValue('pickerType', props.pickerType, this.pickerType);
+        this.helperOptions = this.getInitValue('helperOptions', props.helperOptions, this.helperOptions);
+        this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
         if (this.pickerType === 'month') {
             this.isoFormat = 'YYYY-MM';
         }
@@ -3375,12 +3422,12 @@ class Date$1 extends TextInput {
         }
     }
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(newValue) {
         this.dateError = false;
-        const dateValue = newValue;
-        this.value = this.parser(dateValue);
+        this.internalDisplayValue = newValue;
+        this.internalValue = this.parser(newValue);
     }
     /**
      * Assign the updated mask to mask property
@@ -3405,14 +3452,16 @@ class Date$1 extends TextInput {
     setDateValue(displayValue) {
         const lastValue = this.displayValue;
         if (this.isValidDate(displayValue, this.displayFormat)) {
-            this.displayValue = displayValue;
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
             this.dateError = false;
             if (lastValue !== this.displayValue)
                 this.change(this.value);
         }
         else {
             if (!displayValue) {
-                this.displayValue = displayValue;
+                this.internalDisplayValue = displayValue;
+                this.internalValue = null;
                 if (lastValue !== this.displayValue)
                     this.change(this.value);
             }
@@ -3456,7 +3505,7 @@ class Date$1 extends TextInput {
     }
     blur(event, element) {
         this.removeDateMask();
-        this.setDateValue(this.displayValue);
+        this.setDateValue(this.formatter(this.value));
         super.blur(event, element);
         this.showDatePicker = false;
     }
@@ -3472,6 +3521,7 @@ class Date$1 extends TextInput {
             return;
         setTimeout(() => {
             this.mask = this.initialMask;
+            this.internalDisplayValue = dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
         });
     }
     /**
@@ -3514,6 +3564,20 @@ class Date$1 extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
     if (!value) {
@@ -3643,10 +3707,20 @@ class DateRange extends TextInput {
          * Width of the picker.
          */
         this.width = 248;
+        /**
+         * Helper options.
+         */
+        this.helperOptions = [];
+        /**
+         * Helper value.
+         */
+        this.helperValue = '';
         this.isoFormat = 'YYYY-MM-DD';
         this.dateError = false;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdDateRange');
         this.parserFn = FormatterParserProvider.getParser('ZdDateRange');
+        this.previousHint = '';
+        this.previousPersistentHint = false;
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
@@ -3662,6 +3736,8 @@ class DateRange extends TextInput {
         this.splitter = this.getInitValue('splitter', props.splitter, this.splitter);
         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);
+        this.helperValue = this.getInitValue('helperValue', props.helperValue, this.helperValue);
         this.createAccessors();
         this.unitMask = this.mask;
         this.initialMask = this.getInitialMask();
@@ -3688,15 +3764,15 @@ class DateRange extends TextInput {
     formatter(value) { return this.formatterFn(value, this); }
     parser(value) { return this.parserFn(value, this); }
     get displayValue() {
-        return this.formatter(this.value);
+        return this.internalDisplayValue;
     }
     set displayValue(newValue) {
         this.dateError = false;
-        const dateValue = newValue;
-        if (dateValue)
-            this.value = this.parser(dateValue);
+        this.internalDisplayValue = newValue;
+        if (newValue)
+            this.internalValue = this.parser(newValue);
         else
-            this.value = [];
+            this.internalValue = [];
     }
     /**
       * Assign the updated mask to mask property
@@ -3722,14 +3798,16 @@ class DateRange extends TextInput {
         const lastValue = this.displayValue;
         const values = this.splitValues(displayValue);
         if (this.isValidDateArray(this.displayFormat, values)) {
-            this.displayValue = displayValue;
+            this.internalDisplayValue = displayValue;
+            this.internalValue = this.parser(displayValue);
             this.dateError = false;
             if (lastValue !== this.displayValue)
                 this.change(this.value);
         }
         else {
             if (!displayValue) {
-                this.displayValue = displayValue;
+                this.internalDisplayValue = displayValue;
+                this.internalValue = [];
                 if (lastValue !== this.displayValue)
                     this.change(this.value);
             }
@@ -3805,11 +3883,13 @@ class DateRange extends TextInput {
         }
     }
     blur(event, element) {
-        this.value = this.sortDates(this.value);
-        this.removeDateMask();
-        this.setDateValue(this.displayValue);
-        super.blur(event, element);
-        this.showDatePicker = false;
+        if (this.value) {
+            this.value = this.sortDates(this.value);
+            this.removeDateMask();
+            this.setDateValue(this.formatter(this.value));
+            super.blur(event, element);
+            this.showDatePicker = false;
+        }
     }
     focus(event, element) {
         this.addDateMask();
@@ -3823,6 +3903,13 @@ class DateRange extends TextInput {
             return;
         setTimeout(() => {
             this.mask = this.initialMask;
+            const firstDate = this.value[0]
+                ? dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            const lastDate = this.value[1]
+                ? dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                : '';
+            this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
         });
     }
     /**
@@ -3865,6 +3952,20 @@ class DateRange extends TextInput {
         const chars = replaced.split('');
         return chars.length ? chars.every((char) => Mask.isMaskDelimiter(char)) : true;
     }
+    updateHelperHint() {
+        if (this.helperValue) {
+            this.previousHint = this.hint;
+            this.previousPersistentHint = this.persistentHint;
+            this.hint = DateHelper.getLabel(this.helperValue);
+            this.persistentHint = true;
+        }
+    }
+    change(event, element) {
+        super.change(event, element);
+        this.helperValue = '';
+        this.hint = this.previousHint;
+        this.persistentHint = this.previousPersistentHint;
+    }
 }
 FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = Config.dateFormat, displayFormat = Config.displayFormat, inputFormat = Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
     if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -4311,6 +4412,7 @@ class Frame extends ComponentRender {
         this.local = false;
         this.metadata = {};
         this.override = {};
+        this.overrideNamedProps = {};
         this.cache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
         this.height = 'auto';
@@ -4320,6 +4422,7 @@ class Frame extends ComponentRender {
         this.path = props.path;
         this.local = props.local === true;
         this.override = props.override || this.override;
+        this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.cache = props.cache || this.cache;
         this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
         this.height = this.getInitValue('height', props.height, this.height);
@@ -4335,6 +4438,9 @@ class Frame extends ComponentRender {
                 if (typeof page !== 'object')
                     throw new Error();
                 this.metadata = merge(page, this.override);
+                if (Object.keys(this.overrideNamedProps).length !== 0) {
+                    this.metadata = this.overrideNamedPropsFunc(this.metadata);
+                }
             }
             catch (_a) {
                 this.notFoundError();
@@ -4345,6 +4451,13 @@ class Frame extends ComponentRender {
             }
         });
     }
+    overrideNamedPropsFunc(metadata) {
+        let strMatadata = JSON.stringify(metadata);
+        Object.keys(this.overrideNamedProps).forEach((key) => {
+            strMatadata = strMatadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
+        });
+        return JSON.parse(strMatadata);
+    }
     reload() {
         return __awaiter(this, void 0, void 0, function* () {
             this.loading = true;
@@ -4947,6 +5060,9 @@ class Grid extends Iterable {
         this.toolbarSlot = [
             { name: '<<NAME>>_gridSearch', component: 'ZdSearch' },
         ];
+        this.loadingText = 'LOADING';
+        this.noDataText = 'NO_DATA';
+        this.noResultsText = 'NO_RESULT';
         /**
          * Components that will be rendered in no-data case
          */
@@ -4955,7 +5071,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-data',
                 component: 'ZdText',
                 cssClass: 'no-data',
-                text: 'NO_DATA',
+                text: this.noDataText,
             },
         ];
         /**
@@ -4966,7 +5082,7 @@ class Grid extends Iterable {
                 name: '<<NAME>>_no-result',
                 component: 'ZdText',
                 cssClass: 'no-result',
-                text: 'NO_RESULT',
+                text: this.noResultsText,
             },
         ];
         /**
@@ -5070,6 +5186,7 @@ class Grid extends Iterable {
         this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
         this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
         this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+        this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
         this.footerSlot = props.footerSlot || this.footerSlot;
         this.noDataSlot = props.noDataSlot || this.noDataSlot;
@@ -5079,6 +5196,8 @@ class Grid extends Iterable {
         this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
         this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
         this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
+        this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
+        this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
         this.createAccessors();
     }
     onMounted(element) {
@@ -6209,6 +6328,10 @@ class Select extends TextInput {
          * Maximum height of select menu
          */
         this.menuMaxHeight = 304;
+        /**
+         * Maximum width of select menu
+         */
+        this.menuMaxWidth = 'auto';
         /**
          * Input select value
          */
@@ -6268,6 +6391,7 @@ class Select extends TextInput {
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.menuMaxHeight = this.getInitValue('menuMaxHeight', props.menuMaxHeight, this.menuMaxHeight);
+        this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
         this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
@@ -6363,8 +6487,10 @@ class Select extends TextInput {
     getItemsBySearchValue(value, searchIn) {
         return __awaiter(this, void 0, void 0, function* () {
             const config = Object.assign(Object.assign(Object.assign({}, this.datasource.clone()), this.dsSearch[this.searchParam](value, searchIn)), { lazyLoad: true });
+            this.datasource.loading = true;
             const datasource = DatasourceFactory.factory(config);
             const items = yield datasource.get();
+            this.datasource.loading = false;
             datasource.destroy();
             return items.find(this.getCondition(value));
         });
@@ -8267,6 +8393,12 @@ class RangeSlider extends Input {
         this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
         this.createAccessors();
     }
+    get value() {
+        return this.rangeSliderValue === null ? undefined : this.rangeSliderValue;
+    }
+    set value(value) {
+        this.rangeSliderValue = value;
+    }
 }
 
 /**
@@ -9307,23 +9439,21 @@ class SelectTree extends TextInput {
         return this.selectValue;
     }
     set value(value) {
-        this.selectValue = value;
+        this.setValue(value);
     }
     setValue(value) {
-        if (this.returnObject) {
-            if (typeof value !== 'object') {
-                this.value = { id: value };
-            }
-            else {
-                this.value = { id: value[this.dataValue] };
-            }
+        let val = value;
+        if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+            val = value[this.dataValue];
         }
-        else if (typeof value === 'object') {
-            this.value = value[this.dataValue];
+        else if (!value && value !== 0) {
+            val = null;
         }
-        else {
-            this.value = value;
+        if (this.returnObject) {
+            this.selectValue = val ? { id: val } : null;
+            return;
         }
+        this.selectValue = val;
     }
 }
 
@@ -9746,6 +9876,7 @@ class Tab extends Component {
         this.tabTitle = '';
         this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
+        this.flex = this.getInitValue('flex', props.flex, this.flex);
         this.createAccessors();
     }
 }
@@ -9776,13 +9907,26 @@ class Tabs extends ComponentRender {
      */
     constructor(props) {
         super(props);
-        this.activeTab = 0;
+        this.activeTabValue = 0;
         this.tabs = [];
         this.tabs = this.getTabs(props.tabs || []);
-        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+        this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         this.height = this.getInitValue('height', props.height, this.height);
         this.createAccessors();
     }
+    get activeTab() {
+        var _a;
+        if (this.activeTabValue >= 0 && !((_a = this.tabs[this.activeTabValue]) === null || _a === void 0 ? void 0 : _a.isVisible)) {
+            const firstTabIndex = this.tabs.findIndex((tab) => tab.isVisible);
+            if (firstTabIndex > -1) {
+                this.activeTabValue = firstTabIndex;
+            }
+        }
+        return this.activeTabValue;
+    }
+    set activeTab(index) {
+        this.activeTabValue = index;
+    }
     getTabs(tabs) {
         return tabs.map((tab) => new Tab(tab));
     }
@@ -10316,6 +10460,8 @@ class Tree extends ComponentRender {
         this.titleField = '';
         /** Datasource data field */
         this.dataField = '';
+        /** Datasource checked field */
+        this.checkedField = 'checked';
         /**
          * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
          */
@@ -10334,7 +10480,6 @@ class Tree extends ComponentRender {
         this.appliedConditions = {};
         /* Conditions of tree */
         this.factoredConditions = {};
-        this.nodes = this.initNodes(props.nodes || this.nodes);
         this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
         this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
         this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -10344,6 +10489,7 @@ class Tree extends ComponentRender {
         this.parentField = this.getInitValue('parentField', props.parentField, this.parentField);
         this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
         this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
+        this.checkedField = this.getInitValue('checkedField', props.checkedField, this.checkedField);
         this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
         this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
         this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
@@ -10361,29 +10507,46 @@ class Tree extends ComponentRender {
             this.createDataStructure();
         }
         this.createAccessors();
+        this.nodes = props.nodes || this.nodes;
     }
     /**
      * Initialize all the properties of the declared nodes (reactivity)
      */
-    initNodes(nodes) {
-        return nodes.map((node) => (Object.assign(Object.assign({ isLeaf: false, isExpanded: true, isSelected: false, isDraggable: true, isSelectable: true, isChecked: false }, node), { children: this.initNodes(node.children || []) })));
+    initNodes(nodes, override) {
+        return nodes.map((node) => {
+            let newNode = {
+                title: '',
+                isLeaf: false,
+                isExpanded: true,
+                isSelected: false,
+                isDraggable: true,
+                isSelectable: true,
+                data: {
+                    [this.checkedField]: false,
+                },
+                children: [],
+            };
+            newNode = merge(newNode, node, override);
+            newNode.children = this.initNodes(node.children || [], override);
+            return newNode;
+        });
     }
     /** Nodes */
     get nodes() {
         return this.nodesValue;
     }
     set nodes(value) {
+        let override = {};
         if (!this.allowDragDrop) {
-            this.removeDraggable(value);
+            override = { isDraggable: false };
         }
-        this.nodesValue = value;
+        this.nodesValue = this.initNodes(value, override);
     }
     getCheckedNodes() {
         const selectedNodes = [];
         this.tree.traverse((node) => {
-            const instanceNode = this.getNode(node.path || []);
-            if (instanceNode === null || instanceNode === void 0 ? void 0 : instanceNode.isChecked) {
-                selectedNodes.push(instanceNode);
+            if (node.data && node.data[this.checkedField]) {
+                selectedNodes.push(node);
             }
         });
         return selectedNodes;
@@ -10436,15 +10599,16 @@ class Tree extends ComponentRender {
     }
     /** Insert nodes by the current cursor position */
     insertNode(newNode) {
+        const initNode = this.initNodes([newNode])[0];
         if (this.selectedNodes.length) {
             const cursorPosition = {
                 node: this.selectedNodes[0],
                 placement: 'inside',
             };
-            this.tree.insert(cursorPosition, newNode);
+            this.tree.insert(cursorPosition, initNode);
         }
         else {
-            this.nodes.push(newNode);
+            this.nodes.push(initNode);
         }
     }
     importNodes(nodes) {
@@ -10474,15 +10638,6 @@ class Tree extends ComponentRender {
     updateNodeData(node, value) {
         this.tree.updateNode(node.path, value);
     }
-    removeDraggable(items) {
-        items.forEach((item) => {
-            var _a;
-            item.isDraggable = false;
-            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
-                this.removeDraggable(item.children);
-            }
-        });
-    }
     setTree(tree) {
         this.tree = tree;
     }
@@ -10614,7 +10769,7 @@ class Tree extends ComponentRender {
     }
     getParentNode(node) {
         var _a;
-        return this.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+        return this.tree.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
     }
     searchPath(nodes, path) {
         const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
@@ -10809,6 +10964,7 @@ class TreeGridEditable extends TreeGrid {
             },
         };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
         this.createAccessors();
     }
     onMounted(element) {