@syncfusion/ej2-vue-multicolumn-combobox 26.1.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -0
- package/dist/ej2-vue-multicolumn-combobox.umd.min.js +2 -0
- package/dist/ej2-vue-multicolumn-combobox.umd.min.js.map +1 -0
- package/dist/es6/ej2-vue-multicolumn-combobox.es2015.js +238 -0
- package/dist/es6/ej2-vue-multicolumn-combobox.es2015.js.map +1 -0
- package/dist/es6/ej2-vue-multicolumn-combobox.es5.js +242 -0
- package/dist/es6/ej2-vue-multicolumn-combobox.es5.js.map +1 -0
- package/index.d.ts +4 -0
- package/index.js +4 -0
- package/license +6 -0
- package/multicolumn-combobox.d.ts +4 -0
- package/multicolumn-combobox.js +4 -0
- package/package.json +63 -0
- package/src/global.js +1 -0
- package/src/index.d.ts +3 -0
- package/src/index.js +3 -0
- package/src/multicolumn-combobox/columns.directive.d.ts +24 -0
- package/src/multicolumn-combobox/columns.directive.js +60 -0
- package/src/multicolumn-combobox/index.d.ts +2 -0
- package/src/multicolumn-combobox/index.js +2 -0
- package/src/multicolumn-combobox/multicolumncombobox.component.d.ts +41 -0
- package/src/multicolumn-combobox/multicolumncombobox.component.js +180 -0
- package/styles/bootstrap-dark.css +331 -0
- package/styles/bootstrap-dark.scss +1 -0
- package/styles/bootstrap.css +331 -0
- package/styles/bootstrap.scss +1 -0
- package/styles/bootstrap4.css +395 -0
- package/styles/bootstrap4.scss +1 -0
- package/styles/bootstrap5-dark.css +399 -0
- package/styles/bootstrap5-dark.scss +1 -0
- package/styles/bootstrap5.css +399 -0
- package/styles/bootstrap5.scss +1 -0
- package/styles/fabric-dark.css +306 -0
- package/styles/fabric-dark.scss +1 -0
- package/styles/fabric.css +299 -0
- package/styles/fabric.scss +1 -0
- package/styles/fluent-dark.css +379 -0
- package/styles/fluent-dark.scss +1 -0
- package/styles/fluent.css +379 -0
- package/styles/fluent.scss +1 -0
- package/styles/fluent2.css +1408 -0
- package/styles/fluent2.scss +1 -0
- package/styles/highcontrast-light.css +317 -0
- package/styles/highcontrast-light.scss +1 -0
- package/styles/highcontrast.css +317 -0
- package/styles/highcontrast.scss +1 -0
- package/styles/material-dark.css +339 -0
- package/styles/material-dark.scss +1 -0
- package/styles/material.css +364 -0
- package/styles/material.scss +1 -0
- package/styles/material3-dark.css +486 -0
- package/styles/material3-dark.scss +2 -0
- package/styles/material3.css +598 -0
- package/styles/material3.scss +2 -0
- package/styles/multicolumn-combobox/bootstrap-dark.css +331 -0
- package/styles/multicolumn-combobox/bootstrap-dark.scss +1 -0
- package/styles/multicolumn-combobox/bootstrap.css +331 -0
- package/styles/multicolumn-combobox/bootstrap.scss +1 -0
- package/styles/multicolumn-combobox/bootstrap4.css +395 -0
- package/styles/multicolumn-combobox/bootstrap4.scss +1 -0
- package/styles/multicolumn-combobox/bootstrap5-dark.css +399 -0
- package/styles/multicolumn-combobox/bootstrap5-dark.scss +1 -0
- package/styles/multicolumn-combobox/bootstrap5.css +399 -0
- package/styles/multicolumn-combobox/bootstrap5.scss +1 -0
- package/styles/multicolumn-combobox/fabric-dark.css +306 -0
- package/styles/multicolumn-combobox/fabric-dark.scss +1 -0
- package/styles/multicolumn-combobox/fabric.css +299 -0
- package/styles/multicolumn-combobox/fabric.scss +1 -0
- package/styles/multicolumn-combobox/fluent-dark.css +379 -0
- package/styles/multicolumn-combobox/fluent-dark.scss +1 -0
- package/styles/multicolumn-combobox/fluent.css +379 -0
- package/styles/multicolumn-combobox/fluent.scss +1 -0
- package/styles/multicolumn-combobox/fluent2.css +1408 -0
- package/styles/multicolumn-combobox/fluent2.scss +1 -0
- package/styles/multicolumn-combobox/highcontrast-light.css +317 -0
- package/styles/multicolumn-combobox/highcontrast-light.scss +1 -0
- package/styles/multicolumn-combobox/highcontrast.css +317 -0
- package/styles/multicolumn-combobox/highcontrast.scss +1 -0
- package/styles/multicolumn-combobox/material-dark.css +339 -0
- package/styles/multicolumn-combobox/material-dark.scss +1 -0
- package/styles/multicolumn-combobox/material.css +364 -0
- package/styles/multicolumn-combobox/material.scss +1 -0
- package/styles/multicolumn-combobox/material3-dark.css +486 -0
- package/styles/multicolumn-combobox/material3-dark.scss +2 -0
- package/styles/multicolumn-combobox/material3.css +598 -0
- package/styles/multicolumn-combobox/material3.scss +2 -0
- package/styles/multicolumn-combobox/tailwind-dark.css +363 -0
- package/styles/multicolumn-combobox/tailwind-dark.scss +1 -0
- package/styles/multicolumn-combobox/tailwind.css +363 -0
- package/styles/multicolumn-combobox/tailwind.scss +1 -0
- package/styles/tailwind-dark.css +363 -0
- package/styles/tailwind-dark.scss +1 -0
- package/styles/tailwind.css +363 -0
- package/styles/tailwind.scss +1 -0
package/README.md
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Vue MultiColumn ComboBox Component
|
|
2
|
+
|
|
3
|
+
The `Vue MultiColumn ComboBox` component that displays detailed information about items in a table-like structure with multiple columns. It provides comprehensive data about the selected value, offering more context than typical single-string text lists.
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
Trusted by the world's leading companies
|
|
7
|
+
<a href="https://www.syncfusion.com">
|
|
8
|
+
<img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Bootstrap logo">
|
|
9
|
+
</a>
|
|
10
|
+
</p>
|
|
11
|
+
|
|
12
|
+
## Setup
|
|
13
|
+
|
|
14
|
+
To install the MultiColumn ComboBox and its dependent packages, use the following command.
|
|
15
|
+
|
|
16
|
+
```sh
|
|
17
|
+
npm install @syncfusion/ej2-vue-multicolumn-combobox
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Key features
|
|
21
|
+
|
|
22
|
+
* `Data binding` - Supports data binding from JavaScript object arrays and remote data sources using adapters like OData, URLs, and Web APIs.
|
|
23
|
+
* `Grouping`- Allows grouping of pop-up list items to enhance the user experience by organizing related items.
|
|
24
|
+
* `Filtering`- Provides advanced filtering capabilities to easily find and select items from large datasets.
|
|
25
|
+
* `Sorting` - Allows sorting of items in ascending or descending order and single or multi-column sorting.
|
|
26
|
+
* `Virtualization`- Supports virtualization to efficiently display large datasets by loading data on demand.
|
|
27
|
+
* `Templates`- Allow customization of the appearance and layout, including header, footer and list items in the pop-up list using templates.
|
|
28
|
+
|
|
29
|
+
## Support
|
|
30
|
+
|
|
31
|
+
Product support is available through the following mediums.
|
|
32
|
+
|
|
33
|
+
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
|
|
34
|
+
* [Community forum](https://www.syncfusion.com/forums/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-multicolumn-combobox-npm)
|
|
35
|
+
* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new)
|
|
36
|
+
* [Request feature or report bug](https://www.syncfusion.com/feedback/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-multicolumn-combobox-npm)
|
|
37
|
+
* Live chat
|
|
38
|
+
|
|
39
|
+
## License and copyright
|
|
40
|
+
|
|
41
|
+
> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [Vue UI components](https://www.syncfusion.com/vue-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
|
|
42
|
+
|
|
43
|
+
> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
|
|
44
|
+
|
|
45
|
+
See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license) for more info.
|
|
46
|
+
|
|
47
|
+
© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
|
|
48
|
+
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-multicolumn-combobox"),require("@syncfusion/ej2-vue-base"),require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-multicolumn-combobox","@syncfusion/ej2-vue-base","@syncfusion/ej2-base"],t):t((e=e||self).ej={},e.ej2MulticolumnCombobox,e.ej2VueBase,e.ej2Base)}(this,function(t,n,o,l){"use strict";var s=o.vueDefineComponent({inject:{custom:{default:null}},render:function(e){var t;if(!o.isExecute)return t=null,(o.isExecute?e:o.gh)("div",{class:"e-directive"},t=l.isNullOrUndefined(this.$slots.default)?t:o.isExecute?this.$slots.default:this.$slots.default())},updated:function(){!o.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-columns"}}}),i={name:"e-columns",install:function(e){e.component(i.name,s)}},u=o.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-column"}}}),a={name:"e-column",install:function(e){e.component(a.name,u)}},e=["isLazyUpdate","plugins","actionFailureTemplate","allowFiltering","allowSorting","columns","cssClass","dataSource","disabled","enablePersistence","enableRtl","enableVirtualization","fields","filterType","floatLabelType","footerTemplate","gridSettings","groupTemplate","htmlAttributes","index","itemTemplate","locale","noRecordsTemplate","placeholder","popupHeight","popupWidth","query","readonly","showClearButton","sortOrder","sortType","text","value","width","actionBegin","actionComplete","actionFailure","change","close","created","filtering","open","select"],c=["value"],r=o.getProps({props:e}),m=r[0],r=r[1],d=Object.keys(r);d.push("modelchanged","update:modelValue");for(var h=0,p=c;h<p.length;h++)d.push("update:"+p[h]);var f=o.vueDefineComponent({name:"MultiColumnComboBoxComponent",mixins:[o.ComponentBase],props:m,watch:r,emits:d,model:{event:"modelchanged"},provide:function(){return{custom:this.custom}},data:function(){return{ej2Instances:new n.MultiColumnComboBox({}),propKeys:e,models:c,hasChildDirective:!0,hasInjectedModules:!0,tagMapper:{"e-columns":"e-column"},tagNameMapper:{},isVue3:!o.isExecute,templateCollection:{}}},created:function(){this.ej2Instances._trigger=this.ej2Instances.trigger,this.ej2Instances.trigger=this.trigger,this.bindProperties(),this.ej2Instances._setProperties=this.ej2Instances.setProperties,this.ej2Instances.setProperties=this.setProperties,this.ej2Instances.clearTemplate=this.clearTemplate,this.updated=this.updated},render:function(e){var t=null;return(o.isExecute?e:o.gh)("input",t=l.isNullOrUndefined(this.$slots.default)?t:o.isExecute?this.$slots.default:this.$slots.default())},methods:{clearTemplate:function(e){if((e=e||Object.keys(this.templateCollection||{})).length&&this.templateCollection)for(var t=0,n=e;t<n.length;t++){var s=n[t],i=this.templateCollection[s];if(i&&i.length){for(var o=0,u=i;o<u.length;o++){var a=u[o];l.getValue("__vue__.$destroy",a)&&a.__vue__.$destroy(),a.innerHTML&&(a.innerHTML="")}delete this.templateCollection[s]}}},setProperties:function(n,e){var s=this;this.isVue3&&(this.models=this.models||this.ej2Instances.referModels),this.ej2Instances&&this.ej2Instances._setProperties&&this.ej2Instances._setProperties(n,e),n&&this.models&&this.models.length&&Object.keys(n).map(function(t){s.models.map(function(e){t!==e||/datasource/i.test(t)||(s.isVue3?s.ej2Instances.vueInstance.$emit("update:"+t,n[t]):(s.$emit("update:"+t,n[t]),s.$emit("modelchanged",n[t])))})})},trigger:function(e,t,n){var s,i;o.isExecute||(this.models=this.models||this.ej2Instances.referModels),"change"!==e&&"input"!==e||!this.models||0===this.models.length?"actionBegin"===e&&"dateNavigate"===t.requestType&&this.models&&0!==this.models.length&&(i=(s=this.models.toString().match(/currentView|selectedDate/)||[])[0],t)&&s&&!l.isUndefined(t[i])&&(o.isExecute?(this.$emit("update:"+i,t[i]),this):(this.ej2Instances.vueInstance.$emit("update:"+i,t[i]),this.ej2Instances.vueInstance)).$emit("modelchanged",t[i]):(i=(s=this.models.toString().match(/checked|value/)||[])[0],t&&s&&!l.isUndefined(t[i])&&(o.isExecute?("change"===e||this.$props&&!this.$props.isLazyUpdate)&&(this.$emit("update:"+i,t[i]),this.$emit("modelchanged",t[i])):(this.ej2Instances.vueInstance.$emit("update:"+i,t[i]),this.ej2Instances.vueInstance.$emit("modelchanged",t[i]),this.ej2Instances.vueInstance.$emit("update:modelValue",t[i])))),this.ej2Instances&&this.ej2Instances._trigger&&this.ej2Instances._trigger(e,t,n)},custom:function(){this.updated()},addItems:function(e,t){return this.ej2Instances.addItems(e,t)},focusIn:function(e){return this.ej2Instances.focusIn(e)},focusOut:function(e){return this.ej2Instances.focusOut(e)},getDataByValue:function(e){return this.ej2Instances.getDataByValue(e)},getItems:function(){return this.ej2Instances.getItems()},hidePopup:function(e){return this.ej2Instances.hidePopup(e)},showPopup:function(e,t){return this.ej2Instances.showPopup(e,t)}}}),g={name:"ejs-multicolumncombobox",install:function(e){e.component(g.name,f),e.component(a.name,u),e.component(i.name,s)}};Object.keys(n).forEach(function(e){"default"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return n[e]}})}),t.ColumnDirective=u,t.ColumnPlugin=a,t.ColumnsDirective=s,t.ColumnsPlugin=i,t.MultiColumnComboBoxComponent=f,t.MultiColumnComboBoxPlugin=g,Object.defineProperty(t,"__esModule",{value:!0})});
|
|
2
|
+
//# sourceMappingURL=ej2-vue-multicolumn-combobox.umd.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ej2-vue-multicolumn-combobox.umd.min.js","sources":["../src/multicolumn-combobox/columns.directive.js","../src/multicolumn-combobox/multicolumncombobox.component.js"],"sourcesContent":["import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var ColumnsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render: function (createElement) {\n if (!isExecute) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated: function () {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag: function () {\n return 'e-columns';\n }\n }\n});\nexport var ColumnsPlugin = {\n name: 'e-columns',\n install: function (Vue) {\n Vue.component(ColumnsPlugin.name, ColumnsDirective);\n }\n};\n/**\n * `e-column` directive represent a column of the VueJS MultiColumnComboBox.\n * It must be contained in a MultiColumnComboBox component(`ejs-multicolumncombobox`).\n * ```vue\n * <ejs-multicolumncombobox :dataSource='data'>\n * <e-columns>\n * <e-column field='ID' width='100'/>\n * <e-column field='name' headerText='Name' width='100'/>\n * </e-columns>\n * </ejs-multicolumncombobox>\n * ```\n */\nexport var ColumnDirective = vueDefineComponent({\n render: function () {\n return;\n },\n methods: {\n getTag: function () {\n return 'e-column';\n }\n }\n});\nexport var ColumnPlugin = {\n name: 'e-column',\n install: function (Vue) {\n Vue.component(ColumnPlugin.name, ColumnDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { MultiColumnComboBox } from '@syncfusion/ej2-multicolumn-combobox';\nimport { ColumnsDirective, ColumnDirective, ColumnsPlugin, ColumnPlugin } from './columns.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'allowSorting', 'columns', 'cssClass', 'dataSource', 'disabled', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'fields', 'filterType', 'floatLabelType', 'footerTemplate', 'gridSettings', 'groupTemplate', 'htmlAttributes', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'sortType', 'text', 'value', 'width', 'actionBegin', 'actionComplete', 'actionFailure', 'change', 'close', 'created', 'filtering', 'open', 'select'];\nexport var modelProps = ['value'];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n var props_1 = modelProps_1[_i];\n emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the Essential JS 2 VueJS MultiColumnComboBox Component\n * ```vue\n * <ejs-multicolumncombobox :dataSource='data'></ejs-multicolumncombobox>\n * ```\n */\nexport var MultiColumnComboBoxComponent = vueDefineComponent({\n name: 'MultiColumnComboBoxComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n model: { event: 'modelchanged' },\n provide: function () { return { custom: this.custom }; },\n data: function () {\n return {\n ej2Instances: new MultiColumnComboBox({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: true,\n tagMapper: { \"e-columns\": \"e-column\" },\n tagNameMapper: {},\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created: function () {\n this.ej2Instances._trigger = this.ej2Instances.trigger;\n this.ej2Instances.trigger = this.trigger;\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render: function (createElement) {\n var h = !isExecute ? gh : createElement;\n var slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('input', slots);\n },\n methods: {\n clearTemplate: function (templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n var tempName = templateNames_1[_i];\n var elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n var ele = elementCollection_1[_a];\n var destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties: function (prop, muteOnChange) {\n var _this = this;\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map(function (key) {\n _this.models.map(function (model) {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (_this.isVue3) {\n _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n _this.$emit('update:' + key, prop[key]);\n _this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n trigger: function (eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/checked|value/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n var key = this.models.toString().match(/currentView|selectedDate/) || [];\n var propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n },\n custom: function () {\n this.updated();\n },\n addItems: function (items, index) {\n return this.ej2Instances.addItems(items, index);\n },\n focusIn: function (e) {\n return this.ej2Instances.focusIn(e);\n },\n focusOut: function (e) {\n return this.ej2Instances.focusOut(e);\n },\n getDataByValue: function (value) {\n return this.ej2Instances.getDataByValue(value);\n },\n getItems: function () {\n return this.ej2Instances.getItems();\n },\n hidePopup: function (e) {\n return this.ej2Instances.hidePopup(e);\n },\n showPopup: function (e, isInputOpen) {\n return this.ej2Instances.showPopup(e, isInputOpen);\n },\n }\n});\nexport var MultiColumnComboBoxPlugin = {\n name: 'ejs-multicolumncombobox',\n install: function (Vue) {\n Vue.component(MultiColumnComboBoxPlugin.name, MultiColumnComboBoxComponent);\n Vue.component(ColumnPlugin.name, ColumnDirective);\n Vue.component(ColumnsPlugin.name, ColumnsDirective);\n }\n};\n"],"names":["ColumnsDirective","vueDefineComponent","inject","custom","default","render","createElement","slots","isExecute","gh","class","isNullOrUndefined","this","$slots","updated","methods","getTag","ColumnsPlugin","name","install","Vue","component","ColumnDirective","ColumnPlugin","properties","modelProps","testProp","getProps","props","watch","emitProbs","Object","keys","push","_i","modelProps_1","length","MultiColumnComboBoxComponent","mixins","ComponentBase","emits","model","event","provide","data","ej2Instances","MultiColumnComboBox","propKeys","models","hasChildDirective","hasInjectedModules","tagMapper","e-columns","tagNameMapper","isVue3","templateCollection","created","_trigger","trigger","bindProperties","_setProperties","setProperties","clearTemplate","templateNames","templateNames_1","tempName","elementCollection","_a","elementCollection_1","ele","getValue","__vue__","$destroy","innerHTML","prop","muteOnChange","_this","referModels","map","key","test","vueInstance","$emit","eventName","eventProp","successHandler","propKey","requestType","toString","match","isUndefined","$props","isLazyUpdate","addItems","items","index","focusIn","e","focusOut","getDataByValue","value","getItems","hidePopup","showPopup","isInputOpen","MultiColumnComboBoxPlugin"],"mappings":"scAEWA,EAAmBC,qBAAmB,CAC7CC,OAAQ,CAAEC,OAAQ,CAAEC,QAAS,OAC7BC,OAAQ,SAAUC,GACd,IAEQC,EAFR,GAAI,CAACC,YAMD,OAJID,EAAQ,MADHC,YAAiBF,EAALG,MAKZ,MAAO,CAAEC,MAAO,eAFrBH,EADCI,oBAAkBC,KAAKC,OAAOT,OAAO,EAGAG,EAF7BC,YAAoCI,KAAKC,OAAOT,QAApCQ,KAAKC,OAAOT,SAEU,GAIvDU,QAAS,WACD,CAACN,aAAaI,KAAKT,QACnBS,KAAKT,UAGbY,QAAS,CACLC,OAAQ,WACJ,MAAO,aAGnB,CAAC,EACUC,EAAgB,CACvBC,KAAM,YACNC,QAAS,SAAUC,GACfA,EAAIC,UAAUJ,EAAcC,KAAMlB,CAAgB,EAE1D,EAaWsB,EAAkBrB,qBAAmB,CAC5CI,OAAQ,aAGRU,QAAS,CACLC,OAAQ,WACJ,MAAO,YAGnB,CAAC,EACUO,EAAe,CACtBL,KAAM,WACNC,QAAS,SAAUC,GACfA,EAAIC,UAAUE,EAAaL,KAAMI,CAAe,EAExD,ECtDWE,EAAa,CAAC,eAAgB,UAAW,wBAAyB,iBAAkB,eAAgB,UAAW,WAAY,aAAc,WAAY,oBAAqB,YAAa,uBAAwB,SAAU,aAAc,iBAAkB,iBAAkB,eAAgB,gBAAiB,iBAAkB,QAAS,eAAgB,SAAU,oBAAqB,cAAe,cAAe,aAAc,QAAS,WAAY,kBAAmB,YAAa,WAAY,OAAQ,QAAS,QAAS,cAAe,iBAAkB,gBAAiB,SAAU,QAAS,UAAW,YAAa,OAAQ,UAClmBC,EAAa,CAAC,SACdC,EAAWC,WAAS,CAAEC,MAAOJ,EAAY,EACzCI,EAAQF,EAAS,GAAIG,EAAQH,EAAS,GAAII,EAAYC,OAAOC,KAAKH,CAAK,EAClFC,EAAUG,KAAK,eAAgB,mBAAmB,EAClD,IAAK,IAAIC,EAAK,EAAGC,EAAeV,EAAYS,EAAKC,EAAaC,OAAQF,CAAE,GAEpEJ,EAAUG,KAAK,UADDE,EAAaD,EACO,MAQ3BG,EAA+BpC,qBAAmB,CACzDiB,KAAM,+BACNoB,OAAQ,CAACC,iBACTX,MAAOA,EACPC,MAAOA,EACPW,MAAOV,EACPW,MAAO,CAAEC,MAAO,gBAChBC,QAAS,WAAc,MAAO,CAAExC,OAAQS,KAAKT,SAC7CyC,KAAM,WACF,MAAO,CACHC,aAAc,IAAIC,sBAAoB,EAAE,EACxCC,SAAUvB,EACVwB,OAAQvB,EACRwB,kBAAmB,CAAA,EACnBC,mBAAoB,CAAA,EACpBC,UAAW,CAAEC,YAAa,YAC1BC,cAAe,GACfC,OAAQ,CAAC9C,YACT+C,mBAAoB,KAG5BC,QAAS,WACL5C,KAAKiC,aAAaY,SAAW7C,KAAKiC,aAAaa,QAC/C9C,KAAKiC,aAAaa,QAAU9C,KAAK8C,QACjC9C,KAAK+C,iBACL/C,KAAKiC,aAAae,eAAiBhD,KAAKiC,aAAagB,cACrDjD,KAAKiC,aAAagB,cAAgBjD,KAAKiD,cACvCjD,KAAKiC,aAAaiB,cAAgBlD,KAAKkD,cACvClD,KAAKE,QAAUF,KAAKE,SAExBT,OAAQ,SAAUC,GACd,IACIC,EAAQ,KAIZ,OALSC,YAAiBF,EAALG,MAKZ,QAFLF,EADCI,oBAAkBC,KAAKC,OAAOT,OAAO,EAGxBG,EAFLC,YAAoCI,KAAKC,OAAOT,QAApCQ,KAAKC,OAAOT,SAEd,GAE3BW,QAAS,CACL+C,cAAe,SAAUC,GAIrB,IAHKA,EAAAA,GACehC,OAAOC,KAAKpB,KAAK2C,oBAAsB,EAAE,GAE3CnB,QAAUxB,KAAK2C,mBAC7B,IAAK,IAAIrB,EAAK,EAAG8B,EAAkBD,EAAe7B,EAAK8B,EAAgB5B,OAAQF,CAAE,GAAI,CACjF,IAAI+B,EAAWD,EAAgB9B,GAC3BgC,EAAoBtD,KAAK2C,mBAAmBU,GAChD,GAAIC,GAAqBA,EAAkB9B,OAAQ,CAC/C,IAAK,IAAI+B,EAAK,EAAGC,EAAsBF,EAAmBC,EAAKC,EAAoBhC,OAAQ+B,CAAE,GAAI,CAC7F,IAAIE,EAAMD,EAAoBD,GAChBG,WAAS,mBAAoBD,CAAG,GAE1CA,EAAIE,QAAQC,WAEZH,EAAII,YACJJ,EAAII,UAAY,IAGxB,OAAO7D,KAAK2C,mBAAmBU,MAK/CJ,cAAe,SAAUa,EAAMC,GAC3B,IAAIC,EAAQhE,KACRA,KAAK0C,SACL1C,KAAKoC,OAAUpC,KAAKoC,QAASpC,KAAKiC,aAAagC,aAE/CjE,KAAKiC,cAAgBjC,KAAKiC,aAAae,gBACvChD,KAAKiC,aAAae,eAAec,EAAMC,CAAY,EAEnDD,GAAQ9D,KAAKoC,QAAUpC,KAAKoC,OAAOZ,QACnCL,OAAOC,KAAK0C,CAAI,EAAEI,IAAI,SAAUC,GAC5BH,EAAM5B,OAAO8B,IAAI,SAAUrC,GAClBsC,IAAQtC,GAAY,cAAcuC,KAAKD,CAAI,IACxCH,EAAMtB,OACNsB,EAAM/B,aAAaoC,YAAYC,MAAM,UAAYH,EAAKL,EAAKK,EAAI,GAG/DH,EAAMM,MAAM,UAAYH,EAAKL,EAAKK,EAAI,EACtCH,EAAMM,MAAM,eAAgBR,EAAKK,EAAI,IAGhD,EACJ,GAGTrB,QAAS,SAAUyB,EAAWC,EAAWC,GAIrC,IACQN,EACAO,EALH9E,cACDI,KAAKoC,OAAUpC,KAAKoC,QAASpC,KAAKiC,aAAagC,aAEhC,WAAdM,GAAwC,UAAdA,GAA0BvE,CAAAA,KAAKoC,QAAkC,IAAvBpC,KAAKoC,OAAOZ,OAiB7D,gBAAd+C,GAAyD,iBAA1BC,EAAUG,aAAmC3E,KAAKoC,QAAkC,IAAvBpC,KAAKoC,OAAOZ,SAE1GkD,GAAUP,EADJnE,KAAKoC,OAAOwC,WAAWC,MAAM,0BAA0B,GAAK,IACpD,GACdL,IAAaL,GAAO,CAACW,cAAYN,EAAUE,EAAQ,IAC9C9E,aAKDI,KAAKsE,MAAM,UAAYI,EAASF,EAAUE,EAAQ,EAClD1E,OALAA,KAAKiC,aAAaoC,YAAYC,MAAM,UAAYI,EAASF,EAAUE,EAAQ,EAC3E1E,KAAKiC,aAAaoC,cAIbC,MAAM,eAAgBE,EAAUE,EAAQ,GAzBjDA,GAAUP,EADJnE,KAAKoC,OAAOwC,WAAWC,MAAM,eAAe,GAAK,IACzC,GACdL,GAAaL,GAAO,CAACW,cAAYN,EAAUE,EAAQ,IAC9C9E,aAMiB,WAAd2E,GAA2BvE,KAAK+E,QAAU,CAAC/E,KAAK+E,OAAOC,gBACvDhF,KAAKsE,MAAM,UAAYI,EAASF,EAAUE,EAAQ,EAClD1E,KAAKsE,MAAM,eAAgBE,EAAUE,EAAQ,IAPjD1E,KAAKiC,aAAaoC,YAAYC,MAAM,UAAYI,EAASF,EAAUE,EAAQ,EAC3E1E,KAAKiC,aAAaoC,YAAYC,MAAM,eAAgBE,EAAUE,EAAQ,EACtE1E,KAAKiC,aAAaoC,YAAYC,MAAM,oBAAqBE,EAAUE,EAAQ,KAwBlF1E,KAAKiC,cAAgBjC,KAAKiC,aAAaY,UACxC7C,KAAKiC,aAAaY,SAAS0B,EAAWC,EAAWC,CAAc,GAGvElF,OAAQ,WACJS,KAAKE,WAET+E,SAAU,SAAUC,EAAOC,GACvB,OAAOnF,KAAKiC,aAAagD,SAASC,EAAOC,CAAK,GAElDC,QAAS,SAAUC,GACf,OAAOrF,KAAKiC,aAAamD,QAAQC,CAAC,GAEtCC,SAAU,SAAUD,GAChB,OAAOrF,KAAKiC,aAAaqD,SAASD,CAAC,GAEvCE,eAAgB,SAAUC,GACtB,OAAOxF,KAAKiC,aAAasD,eAAeC,CAAK,GAEjDC,SAAU,WACN,OAAOzF,KAAKiC,aAAawD,YAE7BC,UAAW,SAAUL,GACjB,OAAOrF,KAAKiC,aAAayD,UAAUL,CAAC,GAExCM,UAAW,SAAUN,EAAGO,GACpB,OAAO5F,KAAKiC,aAAa0D,UAAUN,EAAGO,CAAW,GAG7D,CAAC,EACUC,EAA4B,CACnCvF,KAAM,0BACNC,QAAS,SAAUC,GACfA,EAAIC,UAAUoF,EAA0BvF,KAAMmB,CAA4B,EAC1EjB,EAAIC,UAAUE,EAAaL,KAAMI,CAAe,EAChDF,EAAIC,UAAUJ,EAAcC,KAAMlB,CAAgB,EAE1D"}
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { MultiColumnComboBox } from '@syncfusion/ej2-multicolumn-combobox';
|
|
2
|
+
export * from '@syncfusion/ej2-multicolumn-combobox';
|
|
3
|
+
import { vueDefineComponent, isExecute, gh, getProps, ComponentBase } from '@syncfusion/ej2-vue-base';
|
|
4
|
+
import { isNullOrUndefined, getValue, isUndefined } from '@syncfusion/ej2-base';
|
|
5
|
+
|
|
6
|
+
let ColumnsDirective = vueDefineComponent({
|
|
7
|
+
inject: { custom: { default: null } },
|
|
8
|
+
render(createElement) {
|
|
9
|
+
if (!isExecute) {
|
|
10
|
+
let h = !isExecute ? gh : createElement;
|
|
11
|
+
let slots = null;
|
|
12
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
13
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
14
|
+
}
|
|
15
|
+
return h('div', { class: 'e-directive' }, slots);
|
|
16
|
+
}
|
|
17
|
+
return;
|
|
18
|
+
},
|
|
19
|
+
updated() {
|
|
20
|
+
if (!isExecute && this.custom) {
|
|
21
|
+
this.custom();
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
methods: {
|
|
25
|
+
getTag() {
|
|
26
|
+
return 'e-columns';
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
const ColumnsPlugin = {
|
|
31
|
+
name: 'e-columns',
|
|
32
|
+
install(Vue) {
|
|
33
|
+
Vue.component(ColumnsPlugin.name, ColumnsDirective);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* `e-column` directive represent a column of the VueJS MultiColumnComboBox.
|
|
38
|
+
* It must be contained in a MultiColumnComboBox component(`ejs-multicolumncombobox`).
|
|
39
|
+
* ```vue
|
|
40
|
+
* <ejs-multicolumncombobox :dataSource='data'>
|
|
41
|
+
* <e-columns>
|
|
42
|
+
* <e-column field='ID' width='100'/>
|
|
43
|
+
* <e-column field='name' headerText='Name' width='100'/>
|
|
44
|
+
* </e-columns>
|
|
45
|
+
* </ejs-multicolumncombobox>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
let ColumnDirective = vueDefineComponent({
|
|
49
|
+
render() {
|
|
50
|
+
return;
|
|
51
|
+
},
|
|
52
|
+
methods: {
|
|
53
|
+
getTag() {
|
|
54
|
+
return 'e-column';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
const ColumnPlugin = {
|
|
59
|
+
name: 'e-column',
|
|
60
|
+
install(Vue) {
|
|
61
|
+
Vue.component(ColumnPlugin.name, ColumnDirective);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const properties = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'allowSorting', 'columns', 'cssClass', 'dataSource', 'disabled', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'fields', 'filterType', 'floatLabelType', 'footerTemplate', 'gridSettings', 'groupTemplate', 'htmlAttributes', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'sortType', 'text', 'value', 'width', 'actionBegin', 'actionComplete', 'actionFailure', 'change', 'close', 'created', 'filtering', 'open', 'select'];
|
|
66
|
+
const modelProps = ['value'];
|
|
67
|
+
const testProp = getProps({ props: properties });
|
|
68
|
+
const props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
|
|
69
|
+
emitProbs.push('modelchanged', 'update:modelValue');
|
|
70
|
+
for (let props of modelProps) {
|
|
71
|
+
emitProbs.push('update:' + props);
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Represents the Essential JS 2 VueJS MultiColumnComboBox Component
|
|
75
|
+
* ```vue
|
|
76
|
+
* <ejs-multicolumncombobox :dataSource='data'></ejs-multicolumncombobox>
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
let MultiColumnComboBoxComponent = vueDefineComponent({
|
|
80
|
+
name: 'MultiColumnComboBoxComponent',
|
|
81
|
+
mixins: [ComponentBase],
|
|
82
|
+
props: props,
|
|
83
|
+
watch: watch,
|
|
84
|
+
emits: emitProbs,
|
|
85
|
+
model: { event: 'modelchanged' },
|
|
86
|
+
provide() { return { custom: this.custom }; },
|
|
87
|
+
data() {
|
|
88
|
+
return {
|
|
89
|
+
ej2Instances: new MultiColumnComboBox({}),
|
|
90
|
+
propKeys: properties,
|
|
91
|
+
models: modelProps,
|
|
92
|
+
hasChildDirective: true,
|
|
93
|
+
hasInjectedModules: true,
|
|
94
|
+
tagMapper: { "e-columns": "e-column" },
|
|
95
|
+
tagNameMapper: {},
|
|
96
|
+
isVue3: !isExecute,
|
|
97
|
+
templateCollection: {},
|
|
98
|
+
};
|
|
99
|
+
},
|
|
100
|
+
created() {
|
|
101
|
+
this.ej2Instances._trigger = this.ej2Instances.trigger;
|
|
102
|
+
this.ej2Instances.trigger = this.trigger;
|
|
103
|
+
this.bindProperties();
|
|
104
|
+
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
|
105
|
+
this.ej2Instances.setProperties = this.setProperties;
|
|
106
|
+
this.ej2Instances.clearTemplate = this.clearTemplate;
|
|
107
|
+
this.updated = this.updated;
|
|
108
|
+
},
|
|
109
|
+
render(createElement) {
|
|
110
|
+
let h = !isExecute ? gh : createElement;
|
|
111
|
+
let slots = null;
|
|
112
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
113
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
114
|
+
}
|
|
115
|
+
return h('input', slots);
|
|
116
|
+
},
|
|
117
|
+
methods: {
|
|
118
|
+
clearTemplate(templateNames) {
|
|
119
|
+
if (!templateNames) {
|
|
120
|
+
templateNames = Object.keys(this.templateCollection || {});
|
|
121
|
+
}
|
|
122
|
+
if (templateNames.length && this.templateCollection) {
|
|
123
|
+
for (let tempName of templateNames) {
|
|
124
|
+
let elementCollection = this.templateCollection[tempName];
|
|
125
|
+
if (elementCollection && elementCollection.length) {
|
|
126
|
+
for (let ele of elementCollection) {
|
|
127
|
+
let destroy = getValue('__vue__.$destroy', ele);
|
|
128
|
+
if (destroy) {
|
|
129
|
+
ele.__vue__.$destroy();
|
|
130
|
+
}
|
|
131
|
+
if (ele.innerHTML) {
|
|
132
|
+
ele.innerHTML = '';
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
delete this.templateCollection[tempName];
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
setProperties(prop, muteOnChange) {
|
|
141
|
+
if (this.isVue3) {
|
|
142
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
143
|
+
}
|
|
144
|
+
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
|
145
|
+
this.ej2Instances._setProperties(prop, muteOnChange);
|
|
146
|
+
}
|
|
147
|
+
if (prop && this.models && this.models.length) {
|
|
148
|
+
Object.keys(prop).map((key) => {
|
|
149
|
+
this.models.map((model) => {
|
|
150
|
+
if ((key === model) && !(/datasource/i.test(key))) {
|
|
151
|
+
if (this.isVue3) {
|
|
152
|
+
this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
|
153
|
+
}
|
|
154
|
+
else {
|
|
155
|
+
this.$emit('update:' + key, prop[key]);
|
|
156
|
+
this.$emit('modelchanged', prop[key]);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
trigger(eventName, eventProp, successHandler) {
|
|
164
|
+
if (!isExecute) {
|
|
165
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
166
|
+
}
|
|
167
|
+
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
|
168
|
+
let key = this.models.toString().match(/checked|value/) || [];
|
|
169
|
+
let propKey = key[0];
|
|
170
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
171
|
+
if (!isExecute) {
|
|
172
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
173
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
174
|
+
this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
|
|
175
|
+
}
|
|
176
|
+
else {
|
|
177
|
+
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
|
|
178
|
+
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
179
|
+
this.$emit('modelchanged', eventProp[propKey]);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
|
185
|
+
let key = this.models.toString().match(/currentView|selectedDate/) || [];
|
|
186
|
+
let propKey = key[0];
|
|
187
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
188
|
+
if (!isExecute) {
|
|
189
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
190
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
191
|
+
}
|
|
192
|
+
else {
|
|
193
|
+
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
194
|
+
this.$emit('modelchanged', eventProp[propKey]);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
|
199
|
+
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
custom() {
|
|
203
|
+
this.updated();
|
|
204
|
+
},
|
|
205
|
+
addItems(items, index) {
|
|
206
|
+
return this.ej2Instances.addItems(items, index);
|
|
207
|
+
},
|
|
208
|
+
focusIn(e) {
|
|
209
|
+
return this.ej2Instances.focusIn(e);
|
|
210
|
+
},
|
|
211
|
+
focusOut(e) {
|
|
212
|
+
return this.ej2Instances.focusOut(e);
|
|
213
|
+
},
|
|
214
|
+
getDataByValue(value) {
|
|
215
|
+
return this.ej2Instances.getDataByValue(value);
|
|
216
|
+
},
|
|
217
|
+
getItems() {
|
|
218
|
+
return this.ej2Instances.getItems();
|
|
219
|
+
},
|
|
220
|
+
hidePopup(e) {
|
|
221
|
+
return this.ej2Instances.hidePopup(e);
|
|
222
|
+
},
|
|
223
|
+
showPopup(e, isInputOpen) {
|
|
224
|
+
return this.ej2Instances.showPopup(e, isInputOpen);
|
|
225
|
+
},
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
const MultiColumnComboBoxPlugin = {
|
|
229
|
+
name: 'ejs-multicolumncombobox',
|
|
230
|
+
install(Vue) {
|
|
231
|
+
Vue.component(MultiColumnComboBoxPlugin.name, MultiColumnComboBoxComponent);
|
|
232
|
+
Vue.component(ColumnPlugin.name, ColumnDirective);
|
|
233
|
+
Vue.component(ColumnsPlugin.name, ColumnsDirective);
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
|
|
237
|
+
export { ColumnDirective, ColumnPlugin, ColumnsDirective, ColumnsPlugin, MultiColumnComboBoxComponent, MultiColumnComboBoxPlugin };
|
|
238
|
+
//# sourceMappingURL=ej2-vue-multicolumn-combobox.es2015.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ej2-vue-multicolumn-combobox.es2015.js","sources":["../src/es6/multicolumn-combobox/columns.directive.js","../src/es6/multicolumn-combobox/multicolumncombobox.component.js"],"sourcesContent":["import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport let ColumnsDirective = vueDefineComponent({\n inject: { custom: { default: null } },\n render(createElement) {\n if (!isExecute) {\n let h = !isExecute ? gh : createElement;\n let slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('div', { class: 'e-directive' }, slots);\n }\n return;\n },\n updated() {\n if (!isExecute && this.custom) {\n this.custom();\n }\n },\n methods: {\n getTag() {\n return 'e-columns';\n }\n }\n});\nexport const ColumnsPlugin = {\n name: 'e-columns',\n install(Vue) {\n Vue.component(ColumnsPlugin.name, ColumnsDirective);\n }\n};\n/**\n * `e-column` directive represent a column of the VueJS MultiColumnComboBox.\n * It must be contained in a MultiColumnComboBox component(`ejs-multicolumncombobox`).\n * ```vue\n * <ejs-multicolumncombobox :dataSource='data'>\n * <e-columns>\n * <e-column field='ID' width='100'/>\n * <e-column field='name' headerText='Name' width='100'/>\n * </e-columns>\n * </ejs-multicolumncombobox>\n * ```\n */\nexport let ColumnDirective = vueDefineComponent({\n render() {\n return;\n },\n methods: {\n getTag() {\n return 'e-column';\n }\n }\n});\nexport const ColumnPlugin = {\n name: 'e-column',\n install(Vue) {\n Vue.component(ColumnPlugin.name, ColumnDirective);\n }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { isUndefined } from '@syncfusion/ej2-base';\nimport { MultiColumnComboBox } from '@syncfusion/ej2-multicolumn-combobox';\nimport { ColumnsDirective, ColumnDirective, ColumnsPlugin, ColumnPlugin } from './columns.directive';\nexport const properties = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'allowSorting', 'columns', 'cssClass', 'dataSource', 'disabled', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'fields', 'filterType', 'floatLabelType', 'footerTemplate', 'gridSettings', 'groupTemplate', 'htmlAttributes', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'sortType', 'text', 'value', 'width', 'actionBegin', 'actionComplete', 'actionFailure', 'change', 'close', 'created', 'filtering', 'open', 'select'];\nexport const modelProps = ['value'];\nexport const testProp = getProps({ props: properties });\nexport const props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (let props of modelProps) {\n emitProbs.push('update:' + props);\n}\n/**\n * Represents the Essential JS 2 VueJS MultiColumnComboBox Component\n * ```vue\n * <ejs-multicolumncombobox :dataSource='data'></ejs-multicolumncombobox>\n * ```\n */\nexport let MultiColumnComboBoxComponent = vueDefineComponent({\n name: 'MultiColumnComboBoxComponent',\n mixins: [ComponentBase],\n props: props,\n watch: watch,\n emits: emitProbs,\n model: { event: 'modelchanged' },\n provide() { return { custom: this.custom }; },\n data() {\n return {\n ej2Instances: new MultiColumnComboBox({}),\n propKeys: properties,\n models: modelProps,\n hasChildDirective: true,\n hasInjectedModules: true,\n tagMapper: { \"e-columns\": \"e-column\" },\n tagNameMapper: {},\n isVue3: !isExecute,\n templateCollection: {},\n };\n },\n created() {\n this.ej2Instances._trigger = this.ej2Instances.trigger;\n this.ej2Instances.trigger = this.trigger;\n this.bindProperties();\n this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n this.ej2Instances.setProperties = this.setProperties;\n this.ej2Instances.clearTemplate = this.clearTemplate;\n this.updated = this.updated;\n },\n render(createElement) {\n let h = !isExecute ? gh : createElement;\n let slots = null;\n if (!isNullOrUndefined(this.$slots.default)) {\n slots = !isExecute ? this.$slots.default() : this.$slots.default;\n }\n return h('input', slots);\n },\n methods: {\n clearTemplate(templateNames) {\n if (!templateNames) {\n templateNames = Object.keys(this.templateCollection || {});\n }\n if (templateNames.length && this.templateCollection) {\n for (let tempName of templateNames) {\n let elementCollection = this.templateCollection[tempName];\n if (elementCollection && elementCollection.length) {\n for (let ele of elementCollection) {\n let destroy = getValue('__vue__.$destroy', ele);\n if (destroy) {\n ele.__vue__.$destroy();\n }\n if (ele.innerHTML) {\n ele.innerHTML = '';\n }\n }\n delete this.templateCollection[tempName];\n }\n }\n }\n },\n setProperties(prop, muteOnChange) {\n if (this.isVue3) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if (this.ej2Instances && this.ej2Instances._setProperties) {\n this.ej2Instances._setProperties(prop, muteOnChange);\n }\n if (prop && this.models && this.models.length) {\n Object.keys(prop).map((key) => {\n this.models.map((model) => {\n if ((key === model) && !(/datasource/i.test(key))) {\n if (this.isVue3) {\n this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n }\n else {\n this.$emit('update:' + key, prop[key]);\n this.$emit('modelchanged', prop[key]);\n }\n }\n });\n });\n }\n },\n trigger(eventName, eventProp, successHandler) {\n if (!isExecute) {\n this.models = !this.models ? this.ej2Instances.referModels : this.models;\n }\n if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {\n let key = this.models.toString().match(/checked|value/) || [];\n let propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);\n }\n else {\n if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n }\n else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {\n let key = this.models.toString().match(/currentView|selectedDate/) || [];\n let propKey = key[0];\n if (eventProp && key && !isUndefined(eventProp[propKey])) {\n if (!isExecute) {\n this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);\n this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);\n }\n else {\n this.$emit('update:' + propKey, eventProp[propKey]);\n this.$emit('modelchanged', eventProp[propKey]);\n }\n }\n }\n if ((this.ej2Instances && this.ej2Instances._trigger)) {\n this.ej2Instances._trigger(eventName, eventProp, successHandler);\n }\n },\n custom() {\n this.updated();\n },\n addItems(items, index) {\n return this.ej2Instances.addItems(items, index);\n },\n focusIn(e) {\n return this.ej2Instances.focusIn(e);\n },\n focusOut(e) {\n return this.ej2Instances.focusOut(e);\n },\n getDataByValue(value) {\n return this.ej2Instances.getDataByValue(value);\n },\n getItems() {\n return this.ej2Instances.getItems();\n },\n hidePopup(e) {\n return this.ej2Instances.hidePopup(e);\n },\n showPopup(e, isInputOpen) {\n return this.ej2Instances.showPopup(e, isInputOpen);\n },\n }\n});\nexport const MultiColumnComboBoxPlugin = {\n name: 'ejs-multicolumncombobox',\n install(Vue) {\n Vue.component(MultiColumnComboBoxPlugin.name, MultiColumnComboBoxComponent);\n Vue.component(ColumnPlugin.name, ColumnDirective);\n Vue.component(ColumnsPlugin.name, ColumnsDirective);\n }\n};\n"],"names":[],"mappings":";;;;;AAEU,IAAC,gBAAgB,GAAG,kBAAkB,CAAC;AACjD,IAAI,MAAM,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;AACzC,IAAI,MAAM,CAAC,aAAa,EAAE;AAC1B,QAAQ,IAAI,CAAC,SAAS,EAAE;AACxB,YAAY,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,EAAE,GAAG,aAAa,CAAC;AACpD,YAAY,IAAI,KAAK,GAAG,IAAI,CAAC;AAC7B,YAAY,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACzD,gBAAgB,KAAK,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AACjF,aAAa;AACb,YAAY,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;AAC7D,SAAS;AACT,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,OAAO,GAAG;AACd,QAAQ,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;AACvC,YAAY,IAAI,CAAC,MAAM,EAAE,CAAC;AAC1B,SAAS;AACT,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,MAAM,GAAG;AACjB,YAAY,OAAO,WAAW,CAAC;AAC/B,SAAS;AACT,KAAK;AACL,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,IAAI,IAAI,EAAE,WAAW;AACrB,IAAI,OAAO,CAAC,GAAG,EAAE;AACjB,QAAQ,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;AAC5D,KAAK;AACL,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACU,IAAC,eAAe,GAAG,kBAAkB,CAAC;AAChD,IAAI,MAAM,GAAG;AACb,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,MAAM,GAAG;AACjB,YAAY,OAAO,UAAU,CAAC;AAC9B,SAAS;AACT,KAAK;AACL,CAAC,EAAE;AACS,MAAC,YAAY,GAAG;AAC5B,IAAI,IAAI,EAAE,UAAU;AACpB,IAAI,OAAO,CAAC,GAAG,EAAE;AACjB,QAAQ,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC1D,KAAK;AACL;;ACtDO,MAAM,UAAU,GAAG,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,WAAW,EAAE,sBAAsB,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AACznB,AAAO,MAAM,UAAU,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,AAAO,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;AACxD,AAAO,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AACtF,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC,CAAC;AACpD,KAAK,IAAI,KAAK,IAAI,UAAU,EAAE;AAC9B,IAAI,SAAS,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC;AACtC,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA,AAAU,IAAC,4BAA4B,GAAG,kBAAkB,CAAC;AAC7D,IAAI,IAAI,EAAE,8BAA8B;AACxC,IAAI,MAAM,EAAE,CAAC,aAAa,CAAC;AAC3B,IAAI,KAAK,EAAE,KAAK;AAChB,IAAI,KAAK,EAAE,KAAK;AAChB,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE;AACpC,IAAI,OAAO,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE;AACjD,IAAI,IAAI,GAAG;AACX,QAAQ,OAAO;AACf,YAAY,YAAY,EAAE,IAAI,mBAAmB,CAAC,EAAE,CAAC;AACrD,YAAY,QAAQ,EAAE,UAAU;AAChC,YAAY,MAAM,EAAE,UAAU;AAC9B,YAAY,iBAAiB,EAAE,IAAI;AACnC,YAAY,kBAAkB,EAAE,IAAI;AACpC,YAAY,SAAS,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE;AAClD,YAAY,aAAa,EAAE,EAAE;AAC7B,YAAY,MAAM,EAAE,CAAC,SAAS;AAC9B,YAAY,kBAAkB,EAAE,EAAE;AAClC,SAAS,CAAC;AACV,KAAK;AACL,IAAI,OAAO,GAAG;AACd,QAAQ,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;AAC/D,QAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AACjD,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,QAAQ,IAAI,CAAC,YAAY,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC;AAC3E,QAAQ,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;AAC7D,QAAQ,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;AAC7D,QAAQ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AACpC,KAAK;AACL,IAAI,MAAM,CAAC,aAAa,EAAE;AAC1B,QAAQ,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,EAAE,GAAG,aAAa,CAAC;AAChD,QAAQ,IAAI,KAAK,GAAG,IAAI,CAAC;AACzB,QAAQ,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE;AACrD,YAAY,KAAK,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7E,SAAS;AACT,QAAQ,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACjC,KAAK;AACL,IAAI,OAAO,EAAE;AACb,QAAQ,aAAa,CAAC,aAAa,EAAE;AACrC,YAAY,IAAI,CAAC,aAAa,EAAE;AAChC,gBAAgB,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC;AAC3E,aAAa;AACb,YAAY,IAAI,aAAa,CAAC,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE;AACjE,gBAAgB,KAAK,IAAI,QAAQ,IAAI,aAAa,EAAE;AACpD,oBAAoB,IAAI,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAC9E,oBAAoB,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,EAAE;AACvE,wBAAwB,KAAK,IAAI,GAAG,IAAI,iBAAiB,EAAE;AAC3D,4BAA4B,IAAI,OAAO,GAAG,QAAQ,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;AAC5E,4BAA4B,IAAI,OAAO,EAAE;AACzC,gCAAgC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;AACvD,6BAA6B;AAC7B,4BAA4B,IAAI,GAAG,CAAC,SAAS,EAAE;AAC/C,gCAAgC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC;AACnD,6BAA6B;AAC7B,yBAAyB;AACzB,wBAAwB,OAAO,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AACjE,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE;AAC1C,YAAY,IAAI,IAAI,CAAC,MAAM,EAAE;AAC7B,gBAAgB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AACzF,aAAa;AACb,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE;AACvE,gBAAgB,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AACrE,aAAa;AACb,YAAY,IAAI,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;AAC3D,gBAAgB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK;AAC/C,oBAAoB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,KAAK;AAC/C,wBAAwB,IAAI,CAAC,GAAG,KAAK,KAAK,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE;AAC3E,4BAA4B,IAAI,IAAI,CAAC,MAAM,EAAE;AAC7C,gCAAgC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAChG,6BAA6B;AAC7B,iCAAiC;AACjC,gCAAgC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACvE,gCAAgC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACtE,6BAA6B;AAC7B,yBAAyB;AACzB,qBAAqB,CAAC,CAAC;AACvB,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,SAAS;AACT,QAAQ,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE;AACtD,YAAY,IAAI,CAAC,SAAS,EAAE;AAC5B,gBAAgB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;AACzF,aAAa;AACb,YAAY,IAAI,CAAC,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,OAAO,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;AAChH,gBAAgB,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;AAC9E,gBAAgB,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACrC,gBAAgB,IAAI,SAAS,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;AAC1E,oBAAoB,IAAI,CAAC,SAAS,EAAE;AACpC,wBAAwB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACrG,wBAAwB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAChG,wBAAwB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,mBAAmB,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACrG,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,IAAI,SAAS,KAAK,QAAQ,KAAK,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;AAClG,4BAA4B,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAChF,4BAA4B,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAC3E,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,iBAAiB,IAAI,CAAC,SAAS,KAAK,aAAa,IAAI,SAAS,CAAC,WAAW,KAAK,cAAc,KAAK,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;AAC7I,gBAAgB,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,0BAA0B,CAAC,IAAI,EAAE,CAAC;AACzF,gBAAgB,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACrC,gBAAgB,IAAI,SAAS,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE;AAC1E,oBAAoB,IAAI,CAAC,SAAS,EAAE;AACpC,wBAAwB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACrG,wBAAwB,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAChG,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AAC5E,wBAAwB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;AACvE,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,YAAY,KAAK,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG;AACnE,gBAAgB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC;AACjF,aAAa;AACb,SAAS;AACT,QAAQ,MAAM,GAAG;AACjB,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC;AAC3B,SAAS;AACT,QAAQ,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE;AAC/B,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC5D,SAAS;AACT,QAAQ,OAAO,CAAC,CAAC,EAAE;AACnB,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;AAChD,SAAS;AACT,QAAQ,QAAQ,CAAC,CAAC,EAAE;AACpB,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACjD,SAAS;AACT,QAAQ,cAAc,CAAC,KAAK,EAAE;AAC9B,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC3D,SAAS;AACT,QAAQ,QAAQ,GAAG;AACnB,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;AAChD,SAAS;AACT,QAAQ,SAAS,CAAC,CAAC,EAAE;AACrB,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;AAClD,SAAS;AACT,QAAQ,SAAS,CAAC,CAAC,EAAE,WAAW,EAAE;AAClC,YAAY,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AAC/D,SAAS;AACT,KAAK;AACL,CAAC,CAAC,CAAC;AACH,AAAY,MAAC,yBAAyB,GAAG;AACzC,IAAI,IAAI,EAAE,yBAAyB;AACnC,IAAI,OAAO,CAAC,GAAG,EAAE;AACjB,QAAQ,GAAG,CAAC,SAAS,CAAC,yBAAyB,CAAC,IAAI,EAAE,4BAA4B,CAAC,CAAC;AACpF,QAAQ,GAAG,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC1D,QAAQ,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAC;AAC5D,KAAK;AACL,CAAC;;;;"}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import { MultiColumnComboBox } from '@syncfusion/ej2-multicolumn-combobox';
|
|
2
|
+
export * from '@syncfusion/ej2-multicolumn-combobox';
|
|
3
|
+
import { vueDefineComponent, isExecute, gh, getProps, ComponentBase } from '@syncfusion/ej2-vue-base';
|
|
4
|
+
import { isNullOrUndefined, getValue, isUndefined } from '@syncfusion/ej2-base';
|
|
5
|
+
|
|
6
|
+
var ColumnsDirective = vueDefineComponent({
|
|
7
|
+
inject: { custom: { default: null } },
|
|
8
|
+
render: function (createElement) {
|
|
9
|
+
if (!isExecute) {
|
|
10
|
+
var h = !isExecute ? gh : createElement;
|
|
11
|
+
var slots = null;
|
|
12
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
13
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
14
|
+
}
|
|
15
|
+
return h('div', { class: 'e-directive' }, slots);
|
|
16
|
+
}
|
|
17
|
+
return;
|
|
18
|
+
},
|
|
19
|
+
updated: function () {
|
|
20
|
+
if (!isExecute && this.custom) {
|
|
21
|
+
this.custom();
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
methods: {
|
|
25
|
+
getTag: function () {
|
|
26
|
+
return 'e-columns';
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
var ColumnsPlugin = {
|
|
31
|
+
name: 'e-columns',
|
|
32
|
+
install: function (Vue) {
|
|
33
|
+
Vue.component(ColumnsPlugin.name, ColumnsDirective);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* `e-column` directive represent a column of the VueJS MultiColumnComboBox.
|
|
38
|
+
* It must be contained in a MultiColumnComboBox component(`ejs-multicolumncombobox`).
|
|
39
|
+
* ```vue
|
|
40
|
+
* <ejs-multicolumncombobox :dataSource='data'>
|
|
41
|
+
* <e-columns>
|
|
42
|
+
* <e-column field='ID' width='100'/>
|
|
43
|
+
* <e-column field='name' headerText='Name' width='100'/>
|
|
44
|
+
* </e-columns>
|
|
45
|
+
* </ejs-multicolumncombobox>
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
var ColumnDirective = vueDefineComponent({
|
|
49
|
+
render: function () {
|
|
50
|
+
return;
|
|
51
|
+
},
|
|
52
|
+
methods: {
|
|
53
|
+
getTag: function () {
|
|
54
|
+
return 'e-column';
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
var ColumnPlugin = {
|
|
59
|
+
name: 'e-column',
|
|
60
|
+
install: function (Vue) {
|
|
61
|
+
Vue.component(ColumnPlugin.name, ColumnDirective);
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
var properties = ['isLazyUpdate', 'plugins', 'actionFailureTemplate', 'allowFiltering', 'allowSorting', 'columns', 'cssClass', 'dataSource', 'disabled', 'enablePersistence', 'enableRtl', 'enableVirtualization', 'fields', 'filterType', 'floatLabelType', 'footerTemplate', 'gridSettings', 'groupTemplate', 'htmlAttributes', 'index', 'itemTemplate', 'locale', 'noRecordsTemplate', 'placeholder', 'popupHeight', 'popupWidth', 'query', 'readonly', 'showClearButton', 'sortOrder', 'sortType', 'text', 'value', 'width', 'actionBegin', 'actionComplete', 'actionFailure', 'change', 'close', 'created', 'filtering', 'open', 'select'];
|
|
66
|
+
var modelProps = ['value'];
|
|
67
|
+
var testProp = getProps({ props: properties });
|
|
68
|
+
var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
|
|
69
|
+
emitProbs.push('modelchanged', 'update:modelValue');
|
|
70
|
+
for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
|
|
71
|
+
var props_1 = modelProps_1[_i];
|
|
72
|
+
emitProbs.push('update:' + props_1);
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Represents the Essential JS 2 VueJS MultiColumnComboBox Component
|
|
76
|
+
* ```vue
|
|
77
|
+
* <ejs-multicolumncombobox :dataSource='data'></ejs-multicolumncombobox>
|
|
78
|
+
* ```
|
|
79
|
+
*/
|
|
80
|
+
var MultiColumnComboBoxComponent = vueDefineComponent({
|
|
81
|
+
name: 'MultiColumnComboBoxComponent',
|
|
82
|
+
mixins: [ComponentBase],
|
|
83
|
+
props: props,
|
|
84
|
+
watch: watch,
|
|
85
|
+
emits: emitProbs,
|
|
86
|
+
model: { event: 'modelchanged' },
|
|
87
|
+
provide: function () { return { custom: this.custom }; },
|
|
88
|
+
data: function () {
|
|
89
|
+
return {
|
|
90
|
+
ej2Instances: new MultiColumnComboBox({}),
|
|
91
|
+
propKeys: properties,
|
|
92
|
+
models: modelProps,
|
|
93
|
+
hasChildDirective: true,
|
|
94
|
+
hasInjectedModules: true,
|
|
95
|
+
tagMapper: { "e-columns": "e-column" },
|
|
96
|
+
tagNameMapper: {},
|
|
97
|
+
isVue3: !isExecute,
|
|
98
|
+
templateCollection: {},
|
|
99
|
+
};
|
|
100
|
+
},
|
|
101
|
+
created: function () {
|
|
102
|
+
this.ej2Instances._trigger = this.ej2Instances.trigger;
|
|
103
|
+
this.ej2Instances.trigger = this.trigger;
|
|
104
|
+
this.bindProperties();
|
|
105
|
+
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
|
106
|
+
this.ej2Instances.setProperties = this.setProperties;
|
|
107
|
+
this.ej2Instances.clearTemplate = this.clearTemplate;
|
|
108
|
+
this.updated = this.updated;
|
|
109
|
+
},
|
|
110
|
+
render: function (createElement) {
|
|
111
|
+
var h = !isExecute ? gh : createElement;
|
|
112
|
+
var slots = null;
|
|
113
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
114
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
115
|
+
}
|
|
116
|
+
return h('input', slots);
|
|
117
|
+
},
|
|
118
|
+
methods: {
|
|
119
|
+
clearTemplate: function (templateNames) {
|
|
120
|
+
if (!templateNames) {
|
|
121
|
+
templateNames = Object.keys(this.templateCollection || {});
|
|
122
|
+
}
|
|
123
|
+
if (templateNames.length && this.templateCollection) {
|
|
124
|
+
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
|
|
125
|
+
var tempName = templateNames_1[_i];
|
|
126
|
+
var elementCollection = this.templateCollection[tempName];
|
|
127
|
+
if (elementCollection && elementCollection.length) {
|
|
128
|
+
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
|
|
129
|
+
var ele = elementCollection_1[_a];
|
|
130
|
+
var destroy = getValue('__vue__.$destroy', ele);
|
|
131
|
+
if (destroy) {
|
|
132
|
+
ele.__vue__.$destroy();
|
|
133
|
+
}
|
|
134
|
+
if (ele.innerHTML) {
|
|
135
|
+
ele.innerHTML = '';
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
delete this.templateCollection[tempName];
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
setProperties: function (prop, muteOnChange) {
|
|
144
|
+
var _this = this;
|
|
145
|
+
if (this.isVue3) {
|
|
146
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
147
|
+
}
|
|
148
|
+
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
|
149
|
+
this.ej2Instances._setProperties(prop, muteOnChange);
|
|
150
|
+
}
|
|
151
|
+
if (prop && this.models && this.models.length) {
|
|
152
|
+
Object.keys(prop).map(function (key) {
|
|
153
|
+
_this.models.map(function (model) {
|
|
154
|
+
if ((key === model) && !(/datasource/i.test(key))) {
|
|
155
|
+
if (_this.isVue3) {
|
|
156
|
+
_this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
_this.$emit('update:' + key, prop[key]);
|
|
160
|
+
_this.$emit('modelchanged', prop[key]);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
trigger: function (eventName, eventProp, successHandler) {
|
|
168
|
+
if (!isExecute) {
|
|
169
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
170
|
+
}
|
|
171
|
+
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
|
172
|
+
var key = this.models.toString().match(/checked|value/) || [];
|
|
173
|
+
var propKey = key[0];
|
|
174
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
175
|
+
if (!isExecute) {
|
|
176
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
177
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
178
|
+
this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
|
|
182
|
+
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
183
|
+
this.$emit('modelchanged', eventProp[propKey]);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
|
189
|
+
var key = this.models.toString().match(/currentView|selectedDate/) || [];
|
|
190
|
+
var propKey = key[0];
|
|
191
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
192
|
+
if (!isExecute) {
|
|
193
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
194
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
198
|
+
this.$emit('modelchanged', eventProp[propKey]);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
|
203
|
+
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
custom: function () {
|
|
207
|
+
this.updated();
|
|
208
|
+
},
|
|
209
|
+
addItems: function (items, index) {
|
|
210
|
+
return this.ej2Instances.addItems(items, index);
|
|
211
|
+
},
|
|
212
|
+
focusIn: function (e) {
|
|
213
|
+
return this.ej2Instances.focusIn(e);
|
|
214
|
+
},
|
|
215
|
+
focusOut: function (e) {
|
|
216
|
+
return this.ej2Instances.focusOut(e);
|
|
217
|
+
},
|
|
218
|
+
getDataByValue: function (value) {
|
|
219
|
+
return this.ej2Instances.getDataByValue(value);
|
|
220
|
+
},
|
|
221
|
+
getItems: function () {
|
|
222
|
+
return this.ej2Instances.getItems();
|
|
223
|
+
},
|
|
224
|
+
hidePopup: function (e) {
|
|
225
|
+
return this.ej2Instances.hidePopup(e);
|
|
226
|
+
},
|
|
227
|
+
showPopup: function (e, isInputOpen) {
|
|
228
|
+
return this.ej2Instances.showPopup(e, isInputOpen);
|
|
229
|
+
},
|
|
230
|
+
}
|
|
231
|
+
});
|
|
232
|
+
var MultiColumnComboBoxPlugin = {
|
|
233
|
+
name: 'ejs-multicolumncombobox',
|
|
234
|
+
install: function (Vue) {
|
|
235
|
+
Vue.component(MultiColumnComboBoxPlugin.name, MultiColumnComboBoxComponent);
|
|
236
|
+
Vue.component(ColumnPlugin.name, ColumnDirective);
|
|
237
|
+
Vue.component(ColumnsPlugin.name, ColumnsDirective);
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
export { ColumnDirective, ColumnPlugin, ColumnsDirective, ColumnsPlugin, MultiColumnComboBoxComponent, MultiColumnComboBoxPlugin };
|
|
242
|
+
//# sourceMappingURL=ej2-vue-multicolumn-combobox.es5.js.map
|