@syncfusion/ej2-querybuilder 21.1.37 → 21.2.4

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;