@syncfusion/ej2-querybuilder 21.2.3 → 22.1.34

package/dist/es6/ej2-querybuilder.es2015.js

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, addClass, classList, cldrData, closest, compile, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, L10n, NotifyPropertyChanges, Property, addClass, append, classList, cldrData, closest, compile, detach, extend, getComponent, getInstance, getUniqueID, getValue, isNullOrUndefined, removeClass, rippleEffect, select } from '@syncfusion/ej2-base';
 import { Button, RadioButton } from '@syncfusion/ej2-buttons';
 import { CheckBoxSelection, DropDownList, DropDownTree, MultiSelect } from '@syncfusion/ej2-dropdowns';
 import { DataManager, Deferred, Predicate, Query } from '@syncfusion/ej2-data';
@@ -516,22 +516,37 @@ let QueryBuilder = class QueryBuilder extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 template = this.ruleTemplateFn(args, this, ruleElem.id, templateID)[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular) {
                 const templateColl = this.ruleTemplateFn(args, this, ruleElem.id, templateID);
                 template = (templateColl[0].nodeType === 3) ? templateColl[1] : templateColl[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            else if (this.isVue3) {
+                template = this.ruleTemplateFn(args, this, 'Template', templateID);
+                elem = template;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                append(elem, ruleElem);
+                ruleElem.children[ruleElem.children.length - 1].className += ' e-rule-field';
             }
             else {
                 template = this.ruleTemplateFn(args, this, 'Template', templateID)[0];
+                elem = template;
+                elem.className += ' e-rule-field';
+                ruleElem.appendChild(elem);
             }
-            elem = template;
-            elem.className += ' e-rule-field';
         }
         else {
             elem = this.ruleElem.querySelector('.e-rule-field').cloneNode(true);
+            ruleElem.appendChild(elem);
         }
-        ruleElem.appendChild(elem);
         if (column && column.ruleTemplate && rule) {
             this.renderReactTemplates();
         }
@@ -1063,16 +1078,24 @@ let QueryBuilder = class QueryBuilder extends Component {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
                 template = this.headerFn(args, this, groupElem.id, templateID)[0];
+                groupHdr.appendChild(template);
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
             }
             else if (this.isAngular) {
                 const templateColl = this.headerFn(args, this, groupElem.id, templateID);
                 template = (templateColl[0].nodeType === 3) ? templateColl[1] : templateColl[0];
+                groupHdr.appendChild(template);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }
+            else if (this.isVue3) {
+                template = this.headerFn(args, this, groupElem.id, templateID);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                append(template, groupHdr);
             }
             else {
                 template = this.headerFn(args, this, 'Template', templateID)[0];
+                groupHdr.appendChild(template);
             }
-            groupHdr.appendChild(template);
             this.renderReactTemplates();
         }
         return groupElem;
@@ -1970,7 +1993,7 @@ let QueryBuilder = class QueryBuilder extends Component {
                 getValue(template.write, window)({ elements: tempElements.length > 1 ? tempElements : tempElements[0], values: rule.value,
                     operator: tempRule.operator, field: column.field, dataSource: column.values });
             }
-            else {
+            else if (typeof itemData.template !== 'function') {
                 itemData.template.write({ elements: tempElements.length > 1 ? tempElements : tempElements[0],
                     values: rule.value, operator: tempRule.operator, field: column.field, dataSource: column.values });
             }
@@ -2461,7 +2484,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     actionBeginSuccessCallBack(args, itemData, ruleID, field, target) {
         if (args.renderTemplate) {
             let valElem;
-            this.columnTemplateFn = this.templateParser(itemData.template);
+            this.columnTemplateFn = this.templateParser(typeof itemData.template === 'function' ? itemData.template : itemData.template);
             const templateID = this.element.id + field;
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (this.isReact) {
@@ -3331,7 +3354,7 @@ let QueryBuilder = class QueryBuilder extends Component {
     templateParser(template) {
         if (template) {
             try {
-                if (document.querySelectorAll(template).length) {
+                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
                 else {