@zeedhi/common 1.45.1 → 1.48.0

package/dist/zd-common.umd.js

@@ -47,6 +47,10 @@
            * Set css in line with cssStyle.
            */
           this.cssStyle = '';
+          /**
+           * Directives registered to the component.
+           */
+          this.directives = {};
           /**
            * Events registered to the component.
            */
@@ -77,12 +81,16 @@
           this.events = core.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 = core.KeyMap.factory(props.keyMap || this.keyMap);
           this.createAccessors();
+          Object.keys(this.directives).forEach((key) => {
+              this.directives[key] = core.Event.factory(this.directives[key]);
+          });
       }
       setViewFocus(viewFocus) {
           this.viewFocus = viewFocus;
@@ -502,7 +510,7 @@
        * @param options New options
        */
       updateChart(options) {
-          this.options = Object.assign(Object.assign({}, this.options), options);
+          merge__default["default"](this.options, options);
           if (options.series) {
               this.series = this.options.series;
           }
@@ -1656,10 +1664,6 @@
            * Used to watch a value from store.
            */
           this.storePath = '';
-          /**
-          * Internal input value.
-          */
-          this.value = null;
           /**
            * Input validations.
            */
@@ -1670,6 +1674,8 @@
           this.parsedValidations = {};
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdInput');
           this.parserFn = core.FormatterParserProvider.getParser('ZdInput');
+          this.internalDisplayValue = '';
+          this.internalValue = null;
           this.lastInputValue = undefined;
           this.callInputEvent = debounce__default["default"](({ event, element, component }) => {
               this.callEvent('input', { event, element, component });
@@ -1764,7 +1770,8 @@
        * Removes all input validation.
        */
       clearValidations() {
-          Object.keys(this.validations).forEach((name) => this.removeValidation(name));
+          this.validations = {};
+          this.rules = [];
       }
       /**
        * Updates input rules.
@@ -1773,14 +1780,39 @@
           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 = core.Mask.convertAll(mask, value);
+                  this.internalValue = this.parser(this.internalDisplayValue);
+              }
+              else {
+                  this.internalDisplayValue = value;
+              }
+          }
       }
       /**
        * Retrieves a formatted value.
@@ -2869,6 +2901,7 @@
           this.cards = [];
           /* Card ID to be deleted */
           this.deleteCardId = '';
+          this.overrideNamedProps = {};
           /* Remove the paddings of the dashboard */
           this.removePadding = false;
           /* Height of the dashboard */
@@ -3077,6 +3110,7 @@
           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);
@@ -3214,6 +3248,7 @@
               component: 'ZdFrame',
               path: card.path,
               local: card.local,
+              overrideNamedProps: card.overrideNamedProps,
           };
       }
       /* Return footer rightSlot props for view layer */
@@ -3322,6 +3357,14 @@
            * 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.
            */
@@ -3330,6 +3373,8 @@
           this.dateError = false;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdDate');
           this.parserFn = core.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);
@@ -3345,6 +3390,8 @@
           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';
           }
@@ -3382,12 +3429,12 @@
           }
       }
       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
@@ -3412,14 +3459,16 @@
       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);
               }
@@ -3463,7 +3512,7 @@
       }
       blur(event, element) {
           this.removeDateMask();
-          this.setDateValue(this.displayValue);
+          this.setDateValue(this.formatter(this.value));
           super.blur(event, element);
           this.showDatePicker = false;
       }
@@ -3479,6 +3528,7 @@
               return;
           setTimeout(() => {
               this.mask = this.initialMask;
+              this.internalDisplayValue = core.dayjs(this.value, this.dateFormat).format(this.inputFormat || this.displayFormat);
           });
       }
       /**
@@ -3521,6 +3571,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDate', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, mask = '', initialMask, isSimpleDisplay = false, } = {}) => {
       if (!value) {
@@ -3650,10 +3714,20 @@
            * 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 = core.FormatterParserProvider.getFormatter('ZdDateRange');
           this.parserFn = core.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);
@@ -3669,6 +3743,8 @@
           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();
@@ -3695,15 +3771,15 @@
       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
@@ -3729,14 +3805,16 @@
           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);
               }
@@ -3812,11 +3890,13 @@
           }
       }
       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();
@@ -3830,6 +3910,13 @@
               return;
           setTimeout(() => {
               this.mask = this.initialMask;
+              const firstDate = this.value[0]
+                  ? core.dayjs(this.value[0], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                  : '';
+              const lastDate = this.value[1]
+                  ? core.dayjs(this.value[1], this.dateFormat).format(this.inputFormat || this.displayFormat)
+                  : '';
+              this.internalDisplayValue = `${firstDate}${lastDate ? this.splitter : ''}${lastDate}`;
           });
       }
       /**
@@ -3872,6 +3959,20 @@
           const chars = replaced.split('');
           return chars.length ? chars.every((char) => core.Mask.isMaskDelimiter(char)) : true;
       }
+      updateHelperHint() {
+          if (this.helperValue) {
+              this.previousHint = this.hint;
+              this.previousPersistentHint = this.persistentHint;
+              this.hint = core.DateHelper.getLabel(this.helperValue);
+              this.persistentHint = true;
+          }
+      }
+      change(event, element) {
+          super.change(event, element);
+          this.helperValue = '';
+          this.hint = this.previousHint;
+          this.persistentHint = this.previousPersistentHint;
+      }
   }
   core.FormatterParserProvider.registerFormatter('ZdDateRange', (value, { dateFormat = core.Config.dateFormat, displayFormat = core.Config.displayFormat, inputFormat = core.Config.dateInputFormat, initialMask, splitter = ' ~ ', unitMask = '', mask = '', isSimpleDisplay = false, } = {}) => {
       if (!value || value.length === 0 || (value.length === 1 && !value[0])) {
@@ -4318,6 +4419,7 @@
           this.local = false;
           this.metadata = {};
           this.override = {};
+          this.overrideNamedProps = {};
           this.cache = false;
           this.cacheDuration = 2 * 60 * 60 * 1000;
           this.height = 'auto';
@@ -4327,6 +4429,7 @@
           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);
@@ -4342,6 +4445,9 @@
                   if (typeof page !== 'object')
                       throw new Error();
                   this.metadata = merge__default["default"](page, this.override);
+                  if (Object.keys(this.overrideNamedProps).length !== 0) {
+                      this.metadata = this.overrideNamedPropsFunc(this.metadata);
+                  }
               }
               catch (_a) {
                   this.notFoundError();
@@ -4352,6 +4458,13 @@
               }
           });
       }
+      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;
@@ -4954,6 +5067,9 @@
           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
            */
@@ -4962,7 +5078,7 @@
                   name: '<<NAME>>_no-data',
                   component: 'ZdText',
                   cssClass: 'no-data',
-                  text: 'NO_DATA',
+                  text: this.noDataText,
               },
           ];
           /**
@@ -4973,7 +5089,7 @@
                   name: '<<NAME>>_no-result',
                   component: 'ZdText',
                   cssClass: 'no-result',
-                  text: 'NO_RESULT',
+                  text: this.noResultsText,
               },
           ];
           /**
@@ -5077,6 +5193,7 @@
           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;
@@ -5086,6 +5203,8 @@
           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) {
@@ -6216,6 +6335,10 @@
            * Maximum height of select menu
            */
           this.menuMaxHeight = 304;
+          /**
+           * Maximum width of select menu
+           */
+          this.menuMaxWidth = 'auto';
           /**
            * Input select value
            */
@@ -6275,6 +6398,7 @@
           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);
@@ -6370,8 +6494,10 @@
       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 = core.DatasourceFactory.factory(config);
               const items = yield datasource.get();
+              this.datasource.loading = false;
               datasource.destroy();
               return items.find(this.getCondition(value));
           });
@@ -8274,6 +8400,12 @@
           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;
+      }
   }
 
   /**
@@ -9314,23 +9446,21 @@
           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;
       }
   }
 
@@ -9753,6 +9883,7 @@
           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();
       }
   }
@@ -9783,13 +9914,26 @@
        */
       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));
       }
@@ -10323,6 +10467,8 @@
           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
            */
@@ -10341,7 +10487,6 @@
           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);
@@ -10351,6 +10496,7 @@
           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;
@@ -10368,29 +10514,46 @@
               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__default["default"](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;
@@ -10443,15 +10606,16 @@
       }
       /** 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) {
@@ -10481,15 +10645,6 @@
       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;
       }
@@ -10621,7 +10776,7 @@
       }
       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;
@@ -10816,6 +10971,7 @@
               },
           };
           this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+          this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
           this.createAccessors();
       }
       onMounted(element) {