@syncfusion/ej2-vue-dropdowns 20.2.50 → 20.3.48

package/dist/es6/ej2-vue-dropdowns.es2015.js

@@ -1,6 +1,6 @@
-import { AutoComplete, ComboBox, DropDownList, DropDownTree, ListBox, MultiSelect } from '@syncfusion/ej2-dropdowns';
+import { AutoComplete, ComboBox, DropDownList, DropDownTree, ListBox, Mention, MultiSelect } from '@syncfusion/ej2-dropdowns';
 import { getValue, isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
-import { ComponentBase, EJComponentDecorator, getProps, gh } from '@syncfusion/ej2-vue-base';
+import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -19,7 +19,6 @@ emitProbs.push('modelchanged', 'update:modelValue');
 for (let props of modelProps) {
     emitProbs.push('update:' + props);
 }
-const isExecute = gh ? false : true;
 /**
  * DropDownList contains a list of predefined values from which the user can choose
  * ```html
@@ -141,10 +140,10 @@ class DropDownListComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -227,7 +226,6 @@ emitProbs$1.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$1) {
     emitProbs$1.push('update:' + props);
 }
-const isExecute$1 = gh ? false : true;
 /**
  * ComboBox component allows the user to type a value or choose an option from the list of predefined options available
  * ```html
@@ -254,7 +252,7 @@ class ComboBoxComponent extends ComponentBase {
         this.hasInjectedModules = false;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$1;
+        this.isVue3 = !isExecute;
         this.ej2Instances = new ComboBox({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -310,14 +308,14 @@ class ComboBoxComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$1) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$1) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -334,7 +332,7 @@ class ComboBoxComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$1) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -349,10 +347,10 @@ class ComboBoxComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -399,7 +397,7 @@ ComboBoxComponent = __decorate$1([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$1)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -435,7 +433,6 @@ emitProbs$2.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$2) {
     emitProbs$2.push('update:' + props);
 }
-const isExecute$2 = gh ? false : true;
 /**
  * The AutoComplete component provides all the matched suggestion list on typing the input from which the user can select one.
  * ```html
@@ -462,7 +459,7 @@ class AutoCompleteComponent extends ComponentBase {
         this.hasInjectedModules = false;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$2;
+        this.isVue3 = !isExecute;
         this.ej2Instances = new AutoComplete({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -518,14 +515,14 @@ class AutoCompleteComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$2) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$2) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -542,7 +539,7 @@ class AutoCompleteComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$2) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -557,10 +554,10 @@ class AutoCompleteComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -607,7 +604,7 @@ AutoCompleteComponent = __decorate$2([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$2)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -643,7 +640,6 @@ emitProbs$3.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$3) {
     emitProbs$3.push('update:' + props);
 }
-const isExecute$3 = gh ? false : true;
 /**
  * MultiSelect component allows the user to select a value from the predefined list of values.
  * ```html
@@ -670,7 +666,7 @@ class MultiSelectComponent extends ComponentBase {
         this.hasInjectedModules = true;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$3;
+        this.isVue3 = !isExecute;
         this.ej2Instances = new MultiSelect({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -726,14 +722,14 @@ class MultiSelectComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$3) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$3) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -750,7 +746,7 @@ class MultiSelectComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$3) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -765,10 +761,10 @@ class MultiSelectComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -821,7 +817,7 @@ MultiSelectComponent = __decorate$3([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$3)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -857,7 +853,6 @@ emitProbs$4.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$4) {
     emitProbs$4.push('update:' + props);
 }
-const isExecute$4 = gh ? false : true;
 /**
  * ListBox component allows the user to select values from the predefined list of values.
  * ```html
@@ -884,7 +879,7 @@ class ListBoxComponent extends ComponentBase {
         this.hasInjectedModules = true;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$4;
+        this.isVue3 = !isExecute;
         this.ej2Instances = new ListBox({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -940,14 +935,14 @@ class ListBoxComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$4) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$4) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -964,7 +959,7 @@ class ListBoxComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$4) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -979,10 +974,10 @@ class ListBoxComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -1053,7 +1048,7 @@ ListBoxComponent = __decorate$4([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$4)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1089,7 +1084,6 @@ emitProbs$5.push('modelchanged', 'update:modelValue');
 for (let props of modelProps$5) {
     emitProbs$5.push('update:' + props);
 }
-const isExecute$5 = gh ? false : true;
 /**
  * The DropDownTree component contains a list of predefined values from which you can choose a single or multiple values.
  * ```html
@@ -1116,7 +1110,7 @@ class DropDownTreeComponent extends ComponentBase {
         this.hasInjectedModules = false;
         this.tagMapper = {};
         this.tagNameMapper = {};
-        this.isVue3 = !isExecute$5;
+        this.isVue3 = !isExecute;
         this.ej2Instances = new DropDownTree({});
         this.ej2Instances._trigger = this.ej2Instances.trigger;
         this.ej2Instances.trigger = this.trigger;
@@ -1172,14 +1166,14 @@ class DropDownTreeComponent extends ComponentBase {
         }
     }
     trigger(eventName, eventProp, successHandler) {
-        if (!isExecute$5) {
+        if (!isExecute) {
             this.models = !this.models ? this.ej2Instances.referModels : this.models;
         }
         if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
             let key = this.models.toString().match(/checked|value/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$5) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
@@ -1196,7 +1190,7 @@ class DropDownTreeComponent extends ComponentBase {
             let key = this.models.toString().match(/currentView|selectedDate/) || [];
             let propKey = key[0];
             if (eventProp && key && !isUndefined(eventProp[propKey])) {
-                if (!isExecute$5) {
+                if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
                 }
@@ -1211,10 +1205,10 @@ class DropDownTreeComponent extends ComponentBase {
         }
     }
     render(createElement) {
-        let h = gh || createElement;
+        let h = !isExecute ? gh : createElement;
         let slots = null;
         if (!isNullOrUndefined(this.$slots.default)) {
-            slots = gh ? this.$slots.default() : this.$slots.default;
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
         }
         return h('input', slots);
     }
@@ -1249,7 +1243,7 @@ DropDownTreeComponent = __decorate$5([
         model: {
             event: 'modelchanged'
         }
-    }, isExecute$5)
+    }, isExecute)
     /* Start Options({
         props: props,
         watch: watch,
@@ -1268,6 +1262,157 @@ const DropDownTreePlugin = {
     }
 };
 
-export { DropDownListComponent, DropDownListPlugin, ComboBoxComponent, ComboBoxPlugin, AutoCompleteComponent, AutoCompletePlugin, MultiSelectComponent, MultiSelectPlugin, ListBoxComponent, ListBoxPlugin, DropDownTreeComponent, DropDownTreePlugin };
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// {{VueImport}}
+const properties$6 = ['isLazyUpdate', 'plugins', 'allowSpaces', 'cssClass', 'dataSource', 'displayTemplate', 'fields', 'filterType', 'highlight', 'ignoreCase', 'itemTemplate', 'locale', 'mentionChar', 'minLength', 'noRecordsTemplate', 'popupHeight', 'popupWidth', 'query', 'showMentionChar', 'sortOrder', 'spinnerTemplate', 'suffixText', 'suggestionCount', 'target', 'actionBegin', 'actionComplete', 'actionFailure', 'beforeOpen', 'change', 'closed', 'created', 'destroyed', 'filtering', 'opened', 'select'];
+const modelProps$6 = [];
+const testProp$6 = getProps({ props: properties$6 });
+const props$6 = testProp$6[0];
+const watch$6 = testProp$6[1];
+const emitProbs$6 = Object.keys(watch$6);
+emitProbs$6.push('modelchanged', 'update:modelValue');
+for (let props of modelProps$6) {
+    emitProbs$6.push('update:' + props);
+}
+/**
+ * The Mention contains a list of predefined values from which the user can choose
+ * ```html
+ * <ejs-mention :dataSource='data'></ejs-dropdownlist>
+ * ```
+ */
+let MentionComponent = 
+/* Start Options({
+    props: props,
+    watch: watch,
+    emits: emitProbs,
+    provide: function provide() {
+        return {
+            custom: this.custom
+        };
+    }
+}) End */
+class MentionComponent extends ComponentBase {
+    constructor() {
+        super(arguments);
+        this.propKeys = properties$6;
+        this.models = modelProps$6;
+        this.hasChildDirective = false;
+        this.hasInjectedModules = false;
+        this.tagMapper = {};
+        this.tagNameMapper = {};
+        this.isVue3 = !isExecute;
+        this.ej2Instances = new Mention({});
+        this.bindProperties();
+        this.ej2Instances._setProperties = this.ej2Instances.setProperties;
+        this.ej2Instances.setProperties = this.setProperties;
+        this.ej2Instances.clearTemplate = this.clearTemplate;
+        this.updated = this.updated;
+    }
+    clearTemplate(templateNames) {
+        if (!templateNames) {
+            templateNames = Object.keys(this.templateCollection || {});
+        }
+        if (templateNames.length && this.templateCollection) {
+            for (let tempName of templateNames) {
+                let elementCollection = this.templateCollection[tempName];
+                if (elementCollection && elementCollection.length) {
+                    for (let ele of elementCollection) {
+                        let destroy = getValue('__vue__.$destroy', ele);
+                        if (destroy) {
+                            ele.__vue__.$destroy();
+                        }
+                        if (ele.innerHTML) {
+                            ele.innerHTML = '';
+                        }
+                    }
+                    delete this.templateCollection[tempName];
+                }
+            }
+        }
+    }
+    setProperties(prop, muteOnChange) {
+        if (this.isVue3) {
+            this.models = !this.models ? this.ej2Instances.referModels : this.models;
+        }
+        if (this.ej2Instances && this.ej2Instances._setProperties) {
+            this.ej2Instances._setProperties(prop, muteOnChange);
+        }
+        if (prop && this.models && this.models.length) {
+            Object.keys(prop).map((key) => {
+                this.models.map((model) => {
+                    if ((key === model) && !(/datasource/i.test(key))) {
+                        if (this.isVue3) {
+                            this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
+                        }
+                        else {
+                            this.$emit('update:' + key, prop[key]);
+                            this.$emit('modelchanged', prop[key]);
+                        }
+                    }
+                });
+            });
+        }
+    }
+    render(createElement) {
+        let h = !isExecute ? gh : createElement;
+        let slots = null;
+        if (!isNullOrUndefined(this.$slots.default)) {
+            slots = !isExecute ? this.$slots.default() : this.$slots.default;
+        }
+        return h('div', slots);
+    }
+    custom() {
+        this.updated();
+    }
+    addItem(items, itemIndex) {
+        return this.ej2Instances.addItem(items, itemIndex);
+    }
+    getDataByValue(value) {
+        return this.ej2Instances.getDataByValue(value);
+    }
+    getItems() {
+        return this.ej2Instances.getItems();
+    }
+    hidePopup(e) {
+        return this.ej2Instances.hidePopup(e);
+    }
+    hideSpinner() {
+        return this.ej2Instances.hideSpinner();
+    }
+    search(text, positionX, positionY) {
+        return this.ej2Instances.search(text, positionX, positionY);
+    }
+    showPopup() {
+        return this.ej2Instances.showPopup();
+    }
+};
+MentionComponent = __decorate$6([
+    EJComponentDecorator({
+        props: properties$6
+    }, isExecute)
+    /* Start Options({
+        props: props,
+        watch: watch,
+        emits: emitProbs,
+        provide: function provide() {
+            return {
+                custom: this.custom
+            };
+        }
+    }) End */
+], MentionComponent);
+const MentionPlugin = {
+    name: 'ejs-mention',
+    install(Vue) {
+        Vue.component(MentionPlugin.name, MentionComponent);
+    }
+};
+
+export { DropDownListComponent, DropDownListPlugin, ComboBoxComponent, ComboBoxPlugin, AutoCompleteComponent, AutoCompletePlugin, MultiSelectComponent, MultiSelectPlugin, ListBoxComponent, ListBoxPlugin, DropDownTreeComponent, DropDownTreePlugin, MentionComponent, MentionPlugin };
 export * from '@syncfusion/ej2-dropdowns';
 //# sourceMappingURL=ej2-vue-dropdowns.es2015.js.map