@syncfusion/ej2-vue-navigations
Version:
A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another for Vue
2,041 lines • 83.3 kB
JavaScript
import { Accordion, Toolbar, ContextMenu, Breadcrumb, Carousel, Tab, TreeView, Sidebar, Menu, AppBar, Stepper } from '@syncfusion/ej2-navigations';
export * from '@syncfusion/ej2-navigations';
import { vueDefineComponent, isExecute, gh, getProps, ComponentBase } from '@syncfusion/ej2-vue-base';
import { isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
var AccordionItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-accordionitems';
}
}
});
var AccordionItemsPlugin = {
name: 'e-accordionitems',
install: function (Vue) {
Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
}
};
/**
* 'e-accordionitem' directive represent a item of Vue Accordion
* It must be contained in a Accordion component(`ejs-accordion`).
* ```html
* <ejs-accordion>
* <e-accordionitems>
* <e-accordionitem header='Header1'></e-accordionitem>
* <e-accordionitem header='Header2' content='Content2'></e-accordionitem>
* </e-accordionitems>
* </ejs-accordion>
* ```
*/
var AccordionItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-accordionitem';
}
}
});
var AccordionItemPlugin = {
name: 'e-accordionitem',
install: function (Vue) {
Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
}
};
var properties = ['isLazyUpdate', 'plugins', 'animation', 'dataSource', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandMode', 'expandedIndices', 'headerTemplate', 'height', 'itemTemplate', 'items', 'locale', 'width', 'clicked', 'created', 'destroyed', 'expanded', 'expanding'];
var modelProps = ['expandedIndices'];
var testProp = getProps({ props: properties });
var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
emitProbs.push('modelchanged', 'update:modelValue');
for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
var props_1 = modelProps_1[_i];
emitProbs.push('update:' + props_1);
}
/**
* Represents the VueJS Accordion Component.
* ```html
* <ejs-accordion></ejs-accordion>
* ```
*/
var AccordionComponent = vueDefineComponent({
name: 'AccordionComponent',
mixins: [ComponentBase],
props: props,
watch: watch,
emits: emitProbs,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Accordion({}),
propKeys: properties,
models: modelProps,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-accordionitems": "e-accordionitem" },
tagNameMapper: { "e-accordionitems": "e-items" },
isVue3: !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 (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
trigger: function (eventName, eventProp, successHandler) {
if (!isExecute) {
this.models = !this.models ? this.ej2Instances.referModels : this.models;
}
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/checked|value/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
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]);
}
else {
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
}
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/currentView|selectedDate/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
if (!isExecute) {
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
}
else {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
if ((this.ej2Instances && this.ej2Instances._trigger)) {
this.ej2Instances._trigger(eventName, eventProp, successHandler);
}
},
custom: function () {
this.updated();
},
addItem: function (item, index) {
return this.ej2Instances.addItem(item, index);
},
destroy: function () {
return this.ej2Instances.destroy();
},
enableItem: function (index, isEnable) {
return this.ej2Instances.enableItem(index, isEnable);
},
expandItem: function (isExpand, index) {
return this.ej2Instances.expandItem(isExpand, index);
},
hideItem: function (index, isHidden) {
return this.ej2Instances.hideItem(index, isHidden);
},
removeItem: function (index) {
return this.ej2Instances.removeItem(index);
},
select: function (index) {
return this.ej2Instances.select(index);
},
}
});
var AccordionPlugin = {
name: 'ejs-accordion',
install: function (Vue) {
Vue.component(AccordionPlugin.name, AccordionComponent);
Vue.component(AccordionItemPlugin.name, AccordionItemDirective);
Vue.component(AccordionItemsPlugin.name, AccordionItemsDirective);
}
};
var ItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-items';
}
}
});
var ItemsPlugin = {
name: 'e-items',
install: function (Vue) {
Vue.component(ItemsPlugin.name, ItemsDirective);
}
};
/**
* 'e-item' directive represent a item of Vue Toolbar
* It must be contained in a Toolbar component(`ejs-toolbar`).
* ```html
* <ejs-toolbar>
* <e-items>
* <e-item text='Cut'></e-item>
* <e-item text='Copy'></e-item>
* </e-items>
* </ejs-toolbar>
* ```
*/
var ItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-item';
}
}
});
var ItemPlugin = {
name: 'e-item',
install: function (Vue) {
Vue.component(ItemPlugin.name, ItemDirective);
}
};
var properties$1 = ['isLazyUpdate', 'plugins', 'allowKeyboard', 'cssClass', 'enableCollision', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'height', 'items', 'locale', 'overflowMode', 'scrollStep', 'width', 'beforeCreate', 'clicked', 'created', 'destroyed', 'keyDown'];
var modelProps$1 = [];
var testProp$1 = getProps({ props: properties$1 });
var props$1 = testProp$1[0], watch$1 = testProp$1[1], emitProbs$1 = Object.keys(watch$1);
emitProbs$1.push('modelchanged', 'update:modelValue');
for (var _i$1 = 0, modelProps_1$1 = modelProps$1; _i$1 < modelProps_1$1.length; _i$1++) {
var props_1$1 = modelProps_1$1[_i$1];
emitProbs$1.push('update:' + props_1$1);
}
/**
* Represents the VueJS Toolbar Component.
* ```html
* <ejs-toolbar></ejs-toolbar>
* ```
*/
var ToolbarComponent = vueDefineComponent({
name: 'ToolbarComponent',
mixins: [ComponentBase],
props: props$1,
watch: watch$1,
emits: emitProbs$1,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Toolbar({}),
propKeys: properties$1,
models: modelProps$1,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-items": "e-item" },
tagNameMapper: {},
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
addItems: function (items, index) {
return this.ej2Instances.addItems(items, index);
},
destroy: function () {
return this.ej2Instances.destroy();
},
disable: function (value) {
return this.ej2Instances.disable(value);
},
enableItems: function (items, isEnable) {
return this.ej2Instances.enableItems(items, isEnable);
},
hideItem: function (index, value) {
return this.ej2Instances.hideItem(index, value);
},
refreshOverflow: function () {
return this.ej2Instances.refreshOverflow();
},
removeItems: function (args) {
return this.ej2Instances.removeItems(args);
},
}
});
var ToolbarPlugin = {
name: 'ejs-toolbar',
install: function (Vue) {
Vue.component(ToolbarPlugin.name, ToolbarComponent);
Vue.component(ItemPlugin.name, ItemDirective);
Vue.component(ItemsPlugin.name, ItemsDirective);
}
};
var properties$2 = ['isLazyUpdate', 'plugins', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hoverDelay', 'itemTemplate', 'items', 'locale', 'showItemOnClick', 'target', 'template', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
var modelProps$2 = [];
var testProp$2 = getProps({ props: properties$2 });
var props$2 = testProp$2[0], watch$2 = testProp$2[1], emitProbs$2 = Object.keys(watch$2);
emitProbs$2.push('modelchanged', 'update:modelValue');
for (var _i$2 = 0, modelProps_1$2 = modelProps$2; _i$2 < modelProps_1$2.length; _i$2++) {
var props_1$2 = modelProps_1$2[_i$2];
emitProbs$2.push('update:' + props_1$2);
}
/**
* Represents the Essential JS 2 VueJS ContextMenu Component.
* ```html
* <div id='target'>Right click / Touch hold to open the ContextMenu</div>
* <ejs-contextmenu target='#target' :items='menuItems'></ejs-contextmenu>
* ```
*/
var ContextMenuComponent = vueDefineComponent({
name: 'ContextMenuComponent',
mixins: [ComponentBase],
props: props$2,
watch: watch$2,
emits: emitProbs$2,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new ContextMenu({}),
propKeys: properties$2,
models: modelProps$2,
hasChildDirective: false,
hasInjectedModules: false,
tagMapper: {},
tagNameMapper: {},
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('ul', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
close: function () {
return this.ej2Instances.close();
},
destroy: function () {
return this.ej2Instances.destroy();
},
enableItems: function (items, enable, isUniqueId) {
return this.ej2Instances.enableItems(items, enable, isUniqueId);
},
getItemIndex: function (item, isUniqueId) {
return this.ej2Instances.getItemIndex(item, isUniqueId);
},
getMenuWidth: function (menuElement, width, isRtl) {
return this.ej2Instances.getMenuWidth(menuElement, width, isRtl);
},
hideItems: function (items, isUniqueId) {
return this.ej2Instances.hideItems(items, isUniqueId);
},
insertAfter: function (items, text, isUniqueId) {
return this.ej2Instances.insertAfter(items, text, isUniqueId);
},
insertBefore: function (items, text, isUniqueId) {
return this.ej2Instances.insertBefore(items, text, isUniqueId);
},
open: function (top, left, target) {
return this.ej2Instances.open(top, left, target);
},
removeItems: function (items, isUniqueId) {
return this.ej2Instances.removeItems(items, isUniqueId);
},
setItem: function (item, id, isUniqueId) {
return this.ej2Instances.setItem(item, id, isUniqueId);
},
showItems: function (items, isUniqueId) {
return this.ej2Instances.showItems(items, isUniqueId);
},
}
});
var ContextMenuPlugin = {
name: 'ejs-contextmenu',
install: function (Vue) {
Vue.component(ContextMenuPlugin.name, ContextMenuComponent);
}
};
var BreadcrumbItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-breadcrumb-items';
}
}
});
var BreadcrumbItemsPlugin = {
name: 'e-breadcrumb-items',
install: function (Vue) {
Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
}
};
/**
* `e-breadcrumb-item` directive represent a item of the Vue Breadcrumb.
* It must be contained in a Breadcrumb component(`ejs-breadcrumb`).
* ```html
* <ejs-breadcrumb>
* <e-breadcrumb-items>
* <e-breadcrumb-item text='Home' url='/'></e-breadcrumb-item>
* <e-breadcrumb-item text='Index' url='./index'></e-breadcrumb-item>
* </e-breadcrumb-items>
* </ejs-breadcrumb>
* ```
*/
var BreadcrumbItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-breadcrumb-item';
}
}
});
var BreadcrumbItemPlugin = {
name: 'e-breadcrumb-item',
install: function (Vue) {
Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
}
};
var properties$3 = ['isLazyUpdate', 'plugins', 'activeItem', 'cssClass', 'disabled', 'enableActiveItemNavigation', 'enableNavigation', 'enablePersistence', 'enableRtl', 'itemTemplate', 'items', 'locale', 'maxItems', 'overflowMode', 'separatorTemplate', 'url', 'beforeItemRender', 'created', 'itemClick'];
var modelProps$3 = ['activeItem'];
var testProp$3 = getProps({ props: properties$3 });
var props$3 = testProp$3[0], watch$3 = testProp$3[1], emitProbs$3 = Object.keys(watch$3);
emitProbs$3.push('modelchanged', 'update:modelValue');
for (var _i$3 = 0, modelProps_1$3 = modelProps$3; _i$3 < modelProps_1$3.length; _i$3++) {
var props_1$3 = modelProps_1$3[_i$3];
emitProbs$3.push('update:' + props_1$3);
}
/**
* Represents the VueJS Breadcrumb Component.
* ```html
* <ejs-breadcrumb :items='breadcrumbItems'></ejs-breadcrumb>
* ```
*/
var BreadcrumbComponent = vueDefineComponent({
name: 'BreadcrumbComponent',
mixins: [ComponentBase],
props: props$3,
watch: watch$3,
emits: emitProbs$3,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Breadcrumb({}),
propKeys: properties$3,
models: modelProps$3,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-breadcrumb-items": "e-breadcrumb-item" },
tagNameMapper: { "e-breadcrumb-items": "e-items" },
isVue3: !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 (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('nav', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
trigger: function (eventName, eventProp, successHandler) {
if (!isExecute) {
this.models = !this.models ? this.ej2Instances.referModels : this.models;
}
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/checked|value/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
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]);
}
else {
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
}
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/currentView|selectedDate/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
if (!isExecute) {
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
}
else {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
if ((this.ej2Instances && this.ej2Instances._trigger)) {
this.ej2Instances._trigger(eventName, eventProp, successHandler);
}
},
custom: function () {
this.updated();
},
destroy: function () {
return this.ej2Instances.destroy();
},
}
});
var BreadcrumbPlugin = {
name: 'ejs-breadcrumb',
install: function (Vue) {
Vue.component(BreadcrumbPlugin.name, BreadcrumbComponent);
Vue.component(BreadcrumbItemPlugin.name, BreadcrumbItemDirective);
Vue.component(BreadcrumbItemsPlugin.name, BreadcrumbItemsDirective);
}
};
var CarouselItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-carousel-items';
}
}
});
var CarouselItemsPlugin = {
name: 'e-carousel-items',
install: function (Vue) {
Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
}
};
/**
* `e-carousel-item` directive represent a item of the Vue Carousel.
* It must be contained in a Carousel component(`ejs-carousel`).
* ```html
* <ejs-carousel>
* <e-carousel-items>
* <e-carousel-item template='itemTemplate'></e-carousel-item>
* <e-carousel-item template='secondItemTemplate'></e-carousel-item>
* </e-carousel-items>
* </ejs-carousel>
* ```
*/
var CarouselItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-carousel-item';
}
}
});
var CarouselItemPlugin = {
name: 'e-carousel-item',
install: function (Vue) {
Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
}
};
var properties$4 = ['isLazyUpdate', 'plugins', 'allowKeyboardInteraction', 'animationEffect', 'autoPlay', 'buttonsVisibility', 'cssClass', 'dataSource', 'enablePersistence', 'enableRtl', 'enableTouchSwipe', 'height', 'htmlAttributes', 'indicatorsTemplate', 'indicatorsType', 'interval', 'itemTemplate', 'items', 'locale', 'loop', 'nextButtonTemplate', 'partialVisible', 'pauseOnHover', 'playButtonTemplate', 'previousButtonTemplate', 'selectedIndex', 'showIndicators', 'showPlayButton', 'swipeMode', 'width', 'slideChanged', 'slideChanging'];
var modelProps$4 = ['selectedIndex'];
var testProp$4 = getProps({ props: properties$4 });
var props$4 = testProp$4[0], watch$4 = testProp$4[1], emitProbs$4 = Object.keys(watch$4);
emitProbs$4.push('modelchanged', 'update:modelValue');
for (var _i$4 = 0, modelProps_1$4 = modelProps$4; _i$4 < modelProps_1$4.length; _i$4++) {
var props_1$4 = modelProps_1$4[_i$4];
emitProbs$4.push('update:' + props_1$4);
}
/**
* Represents the VueJS Carousel Component.
* ```html
* <ejs-carousel :items='carouselItems'></ejs-carousel>
* ```
*/
var CarouselComponent = vueDefineComponent({
name: 'CarouselComponent',
mixins: [ComponentBase],
props: props$4,
watch: watch$4,
emits: emitProbs$4,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Carousel({}),
propKeys: properties$4,
models: modelProps$4,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-carousel-items": "e-carousel-item" },
tagNameMapper: { "e-carousel-items": "e-items" },
isVue3: !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 (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
trigger: function (eventName, eventProp, successHandler) {
if (!isExecute) {
this.models = !this.models ? this.ej2Instances.referModels : this.models;
}
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/checked|value/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
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]);
}
else {
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
}
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/currentView|selectedDate/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
if (!isExecute) {
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
}
else {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
if ((this.ej2Instances && this.ej2Instances._trigger)) {
this.ej2Instances._trigger(eventName, eventProp, successHandler);
}
},
custom: function () {
this.updated();
},
destroy: function () {
return this.ej2Instances.destroy();
},
next: function () {
return this.ej2Instances.next();
},
pause: function () {
return this.ej2Instances.pause();
},
play: function () {
return this.ej2Instances.play();
},
prev: function () {
return this.ej2Instances.prev();
},
}
});
var CarouselPlugin = {
name: 'ejs-carousel',
install: function (Vue) {
Vue.component(CarouselPlugin.name, CarouselComponent);
Vue.component(CarouselItemPlugin.name, CarouselItemDirective);
Vue.component(CarouselItemsPlugin.name, CarouselItemsDirective);
}
};
var TabItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-tabitems';
}
}
});
var TabItemsPlugin = {
name: 'e-tabitems',
install: function (Vue) {
Vue.component(TabItemsPlugin.name, TabItemsDirective);
}
};
/**
* 'e-tabitem' directive represent a item of the Vue Tab
* It must be contained in a Tab component(`ejs-tab`).
* ```html
* <ejs-tab>
* <e-tabitems>
* <e-tabitem :header='Header 1' :content='Content 1'></e-tabitem>
* <e-tabitem :header='Header 2' :content='Content 2'></e-tabitem>
* <e-tabitems>
* </ejs-tab>
* ```
*/
var TabItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-tabitem';
}
}
});
var TabItemPlugin = {
name: 'e-tabitem',
install: function (Vue) {
Vue.component(TabItemPlugin.name, TabItemDirective);
}
};
var properties$5 = ['isLazyUpdate', 'plugins', 'allowDragAndDrop', 'animation', 'clearTemplates', 'cssClass', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'headerPlacement', 'height', 'heightAdjustMode', 'items', 'loadOn', 'locale', 'overflowMode', 'reorderActiveTab', 'scrollStep', 'selectedItem', 'showCloseButton', 'swipeMode', 'width', 'added', 'adding', 'created', 'destroyed', 'dragged', 'dragging', 'onDragStart', 'removed', 'removing', 'selected', 'selecting'];
var modelProps$5 = [];
var testProp$5 = getProps({ props: properties$5 });
var props$5 = testProp$5[0], watch$5 = testProp$5[1], emitProbs$5 = Object.keys(watch$5);
emitProbs$5.push('modelchanged', 'update:modelValue');
for (var _i$5 = 0, modelProps_1$5 = modelProps$5; _i$5 < modelProps_1$5.length; _i$5++) {
var props_1$5 = modelProps_1$5[_i$5];
emitProbs$5.push('update:' + props_1$5);
}
/**
* Represents the VueJS Tab Component.
* ```html
* <ejs-tab></ejs-tab>
* ```
*/
var TabComponent = vueDefineComponent({
name: 'TabComponent',
mixins: [ComponentBase],
props: props$5,
watch: watch$5,
emits: emitProbs$5,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Tab({}),
propKeys: properties$5,
models: modelProps$5,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-tabitems": "e-tabitem" },
tagNameMapper: { "e-tabitems": "e-items" },
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
addTab: function (items, index) {
return this.ej2Instances.addTab(items, index);
},
destroy: function () {
return this.ej2Instances.destroy();
},
disable: function (value) {
return this.ej2Instances.disable(value);
},
enableTab: function (index, value) {
return this.ej2Instances.enableTab(index, value);
},
getItemIndex: function (tabItemId) {
return this.ej2Instances.getItemIndex(tabItemId);
},
hideTab: function (index, value) {
return this.ej2Instances.hideTab(index, value);
},
refresh: function () {
return this.ej2Instances.refresh();
},
refreshActiveTab: function () {
return this.ej2Instances.refreshActiveTab();
},
refreshActiveTabBorder: function () {
return this.ej2Instances.refreshActiveTabBorder();
},
refreshOverflow: function () {
return this.ej2Instances.refreshOverflow();
},
removeTab: function (index) {
return this.ej2Instances.removeTab(index);
},
select: function (args, event) {
return this.ej2Instances.select(args, event);
},
}
});
var TabPlugin = {
name: 'ejs-tab',
install: function (Vue) {
Vue.component(TabPlugin.name, TabComponent);
Vue.component(TabItemPlugin.name, TabItemDirective);
Vue.component(TabItemsPlugin.name, TabItemsDirective);
}
};
var properties$6 = ['isLazyUpdate', 'plugins', 'allowDragAndDrop', 'allowEditing', 'allowMultiSelection', 'allowTextWrap', 'animation', 'autoCheck', 'checkDisabledChildren', 'checkOnClick', 'checkedNodes', 'cssClass', 'disabled', 'dragArea', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'expandOn', 'expandedNodes', 'fields', 'fullRowNavigable', 'fullRowSelect', 'loadOnDemand', 'locale', 'nodeTemplate', 'selectedNodes', 'showCheckBox', 'sortOrder', 'actionFailure', 'created', 'dataBound', 'dataSourceChanged', 'destroyed', 'drawNode', 'keyPress', 'nodeChecked', 'nodeChecking', 'nodeClicked', 'nodeCollapsed', 'nodeCollapsing', 'nodeDragStart', 'nodeDragStop', 'nodeDragging', 'nodeDropped', 'nodeEdited', 'nodeEditing', 'nodeExpanded', 'nodeExpanding', 'nodeSelected', 'nodeSelecting'];
var modelProps$6 = [];
var testProp$6 = getProps({ props: properties$6 });
var props$6 = testProp$6[0], watch$6 = testProp$6[1], emitProbs$6 = Object.keys(watch$6);
emitProbs$6.push('modelchanged', 'update:modelValue');
for (var _i$6 = 0, modelProps_1$6 = modelProps$6; _i$6 < modelProps_1$6.length; _i$6++) {
var props_1$6 = modelProps_1$6[_i$6];
emitProbs$6.push('update:' + props_1$6);
}
/**
* Represents the EJ2 VueJS TreeView Component.
* ```html
* <ejs-treeview></ejs-treeview>
* ```
*/
var TreeViewComponent = vueDefineComponent({
name: 'TreeViewComponent',
mixins: [ComponentBase],
props: props$6,
watch: watch$6,
emits: emitProbs$6,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new TreeView({}),
propKeys: properties$6,
models: modelProps$6,
hasChildDirective: false,
hasInjectedModules: false,
tagMapper: {},
tagNameMapper: {},
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
addNodes: function (nodes, target, index, preventTargetExpand) {
return this.ej2Instances.addNodes(nodes, target, index, preventTargetExpand);
},
beginEdit: function (node) {
return this.ej2Instances.beginEdit(node);
},
checkAll: function (nodes) {
return this.ej2Instances.checkAll(nodes);
},
collapseAll: function (nodes, level, excludeHiddenNodes) {
return this.ej2Instances.collapseAll(nodes, level, excludeHiddenNodes);
},
destroy: function () {
return this.ej2Instances.destroy();
},
disableNodes: function (nodes) {
return this.ej2Instances.disableNodes(nodes);
},
enableNodes: function (nodes) {
return this.ej2Instances.enableNodes(nodes);
},
ensureVisible: function (node) {
return this.ej2Instances.ensureVisible(node);
},
expandAll: function (nodes, level, excludeHiddenNodes, preventAnimation) {
return this.ej2Instances.expandAll(nodes, level, excludeHiddenNodes, preventAnimation);
},
getAllCheckedNodes: function () {
return this.ej2Instances.getAllCheckedNodes();
},
getDisabledNodes: function () {
return this.ej2Instances.getDisabledNodes();
},
getNode: function (node) {
return this.ej2Instances.getNode(node);
},
getTreeData: function (node) {
return this.ej2Instances.getTreeData(node);
},
moveNodes: function (sourceNodes, target, index, preventTargetExpand) {
return this.ej2Instances.moveNodes(sourceNodes, target, index, preventTargetExpand);
},
refreshNode: function (target, newData) {
return this.ej2Instances.refreshNode(target, newData);
},
removeNodes: function (nodes) {
return this.ej2Instances.removeNodes(nodes);
},
uncheckAll: function (nodes) {
return this.ej2Instances.uncheckAll(nodes);
},
updateNode: function (target, newText) {
return this.ej2Instances.updateNode(target, newText);
},
}
});
var TreeViewPlugin = {
name: 'ejs-treeview',
install: function (Vue) {
Vue.component(TreeViewPlugin.name, TreeViewComponent);
}
};
var properties$7 = ['isLazyUpdate', 'plugins', 'animate', 'closeOnDocumentClick', 'dockSize', 'enableDock', 'enableGestures', 'enablePersistence', 'enableRtl', 'height', 'isOpen', 'locale', 'mediaQuery', 'position', 'showBackdrop', 'target', 'type', 'width', 'zIndex', 'change', 'close', 'created', 'destroyed', 'open'];
var modelProps$7 = ['isOpen'];
var testProp$7 = getProps({ props: properties$7 });
var props$7 = testProp$7[0], watch$7 = testProp$7[1], emitProbs$7 = Object.keys(watch$7);
emitProbs$7.push('modelchanged', 'update:modelValue');
for (var _i$7 = 0, modelProps_1$7 = modelProps$7; _i$7 < modelProps_1$7.length; _i$7++) {
var props_1$7 = modelProps_1$7[_i$7];
emitProbs$7.push('update:' + props_1$7);
}
/**
* Represents the Essential JS 2 VueJS Sidebar Component.
* ```html
* <ejs-sidebar></ejs-sidebar>
* ```
*/
var SidebarComponent = vueDefineComponent({
name: 'SidebarComponent',
mixins: [ComponentBase],
props: props$7,
watch: watch$7,
emits: emitProbs$7,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Sidebar({}),
propKeys: properties$7,
models: modelProps$7,
hasChildDirective: false,
hasInjectedModules: false,
tagMapper: {},
tagNameMapper: {},
isVue3: !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 (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
trigger: function (eventName, eventProp, successHandler) {
if (!isExecute) {
this.models = !this.models ? this.ej2Instances.referModels : this.models;
}
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/checked|value/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
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]);
}
else {
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
}
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/currentView|selectedDate/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
if (!isExecute) {
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
}
else {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
if ((this.ej2Instances && this.ej2Instances._trigger)) {
this.ej2Instances._trigger(eventName, eventProp, successHandler);
}
},
custom: function () {
this.updated();
},
destroy: function () {
return this.ej2Instances.destroy();
},
hide: function (e) {
return this.ej2Instances.hide(e);
},
show: function (e) {
return this.ej2Instances.show(e);
},
toggle: function () {
return this.ej2Instances.toggle();
},
}
});
var SidebarPlugin = {
name: 'ejs-sidebar',
install: function (Vue) {
Vue.component(SidebarPlugin.name, SidebarComponent);
}
};
var MenuItemsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-menu-items';
}
}
});
var MenuItemsPlugin = {
name: 'e-menu-items',
install: function (Vue) {
Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
}
};
var MenuItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-';
}
}
});
var MenuItemPlugin = {
name: 'e-',
install: function (Vue) {
Vue.component(MenuItemPlugin.name, MenuItemDirective);
}
};
var properties$8 = ['isLazyUpdate', 'plugins', 'animationSettings', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enableScrolling', 'fields', 'filter', 'hamburgerMode', 'hoverDelay', 'items', 'locale', 'orientation', 'showItemOnClick', 'target', 'template', 'title', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'created', 'onClose', 'onOpen', 'select'];
var modelProps$8 = [];
var testProp$8 = getProps({ props: properties$8 });
var props$8 = testProp$8[0], watch$8 = testProp$8[1], emitProbs$8 = Object.keys(watch$8);
emitProbs$8.push('modelchanged', 'update:modelValue');
for (var _i$8 = 0, modelProps_1$8 = modelProps$8; _i$8 < modelProps_1$8.length; _i$8++) {
var props_1$8 = modelProps_1$8[_i$8];
emitProbs$8.push('update:' + props_1$8);
}
/**
* Represents the Essential JS 2 VueJS Menu Component.
* ```html
* <ejs-menu :items='menuItems'></ejs-menu>
* ```
*/
var MenuComponent = vueDefineComponent({
name: 'MenuComponent',
mixins: [ComponentBase],
props: props$8,
watch: watch$8,
emits: emitProbs$8,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Menu({}),
propKeys: properties$8,
models: modelProps$8,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-menu-items": "e-" },
tagNameMapper: { "e-menu-items": "e-items" },
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('ul', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
close: function () {
return this.ej2Instances.close();
},
destroy: function () {
return this.ej2Instances.destroy();
},
enableItems: function (items, enable, isUniqueId) {
return this.ej2Instances.enableItems(items, enable, isUniqueId);
},
getItemIndex: function (item, isUniqueId) {
return this.ej2Instances.getItemIndex(item, isUniqueId);
},
getMenuWidth: function (menuElement, width, isRtl) {
return this.ej2Instances.getMenuWidth(menuElement, width, isRtl);
},
hideItems: function (items, isUniqueId) {
return this.ej2Instances.hideItems(items, isUniqueId);
},
insertAfter: function (items, text, isUniqueId) {
return this.ej2Instances.insertAfter(items, text, isUniqueId);
},
insertBefore: function (items, text, isUniqueId) {
return this.ej2Instances.insertBefore(items, text, isUniqueId);
},
open: function () {
return this.ej2Instances.open();
},
removeItems: function (items, isUniqueId) {
return this.ej2Instances.removeItems(items, isUniqueId);
},
setItem: function (item, id, isUniqueId) {
return this.ej2Instances.setItem(item, id, isUniqueId);
},
showItems: function (items, isUniqueId) {
return this.ej2Instances.showItems(items, isUniqueId);
},
}
});
var MenuPlugin = {
name: 'ejs-menu',
install: function (Vue) {
Vue.component(MenuPlugin.name, MenuComponent);
Vue.component(MenuItemPlugin.name, MenuItemDirective);
Vue.component(MenuItemsPlugin.name, MenuItemsDirective);
}
};
var properties$9 = ['isLazyUpdate', 'plugins', 'colorMode', 'cssClass', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'isSticky', 'locale', 'mode', 'position', 'created', 'destroyed'];
var modelProps$9 = [];
var testProp$9 = getProps({ props: properties$9 });
var props$9 = testProp$9[0], watch$9 = testProp$9[1], emitProbs$9 = Object.keys(watch$9);
emitProbs$9.push('modelchanged', 'update:modelValue');
for (var _i$9 = 0, modelProps_1$9 = modelProps$9; _i$9 < modelProps_1$9.length; _i$9++) {
var props_1$9 = modelProps_1$9[_i$9];
emitProbs$9.push('update:' + props_1$9);
}
/**
* Represents the Essential JS 2 VueJS AppBar Component.
* ```html
* <ejs-appbar></ejs-appbar>
* ```
*/
var AppBarComponent = vueDefineComponent({
name: 'AppBarComponent',
mixins: [ComponentBase],
props: props$9,
watch: watch$9,
emits: emitProbs$9,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new AppBar({}),
propKeys: properties$9,
models: modelProps$9,
hasChildDirective: false,
hasInjectedModules: false,
tagMapper: {},
tagNameMapper: {},
isVue3: !isExecute,
templateCollection: {},
};
},
created: function () {
this.bindProperties();
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
this.ej2Instances.setProperties = this.setProperties;
this.ej2Instances.clearTemplate = this.clearTemplate;
this.updated = this.updated;
},
render: function (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('header', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
custom: function () {
this.updated();
},
destroy: function () {
return this.ej2Instances.destroy();
},
}
});
var AppBarPlugin = {
name: 'ejs-appbar',
install: function (Vue) {
Vue.component(AppBarPlugin.name, AppBarComponent);
}
};
var StepsDirective = vueDefineComponent({
inject: { custom: { default: null } },
render: function (createElement) {
if (!isExecute) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('div', { class: 'e-directive' }, slots);
}
return;
},
updated: function () {
if (!isExecute && this.custom) {
this.custom();
}
},
methods: {
getTag: function () {
return 'e-steps';
}
}
});
var StepsPlugin = {
name: 'e-steps',
install: function (Vue) {
Vue.component(StepsPlugin.name, StepsDirective);
}
};
/**
* 'e-step' directive represents a step of the Vue Stepper
* It must be contained in a Stepper component(`ejs-stepper`).
* ```html
* <ejs-stepper>
* <e-steps>
* <e-step :iconCss='e-icons e-folder' :text='Step 1' />
* <e-step :iconCss='e-icons e-folder' :text='Step 2' />
* </e-steps>
* </ejs-stepper>
* ```
*/
var StepDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-step';
}
}
});
var StepPlugin = {
name: 'e-step',
install: function (Vue) {
Vue.component(StepPlugin.name, StepDirective);
}
};
var properties$a = ['isLazyUpdate', 'plugins', 'activeStep', 'animation', 'cssClass', 'enablePersistence', 'enableRtl', 'labelPosition', 'linear', 'locale', 'orientation', 'readOnly', 'showTooltip', 'stepType', 'steps', 'template', 'tooltipTemplate', 'beforeStepRender', 'created', 'stepChanged', 'stepChanging', 'stepClick'];
var modelProps$a = ['activeStep'];
var testProp$a = getProps({ props: properties$a });
var props$a = testProp$a[0], watch$a = testProp$a[1], emitProbs$a = Object.keys(watch$a);
emitProbs$a.push('modelchanged', 'update:modelValue');
for (var _i$a = 0, modelProps_1$a = modelProps$a; _i$a < modelProps_1$a.length; _i$a++) {
var props_1$a = modelProps_1$a[_i$a];
emitProbs$a.push('update:' + props_1$a);
}
/**
* Represents the Essential JS 2 VueJS Stepper Component.
* ```html
* <ejs-stepper :steps='stepItems'></ejs-stepper>
* ```
*/
var StepperComponent = vueDefineComponent({
name: 'StepperComponent',
mixins: [ComponentBase],
props: props$a,
watch: watch$a,
emits: emitProbs$a,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Stepper({}),
propKeys: properties$a,
models: modelProps$a,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-steps": "e-step" },
tagNameMapper: {},
isVue3: !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 (createElement) {
var h = !isExecute ? gh : createElement;
var slots = null;
if (!isNullOrUndefined(this.$slots.default)) {
slots = !isExecute ? this.$slots.default() : this.$slots.default;
}
return h('nav', slots);
},
methods: {
clearTemplate: function (templateNames) {
if (!templateNames) {
templateNames = Object.keys(this.templateCollection || {});
}
if (templateNames.length && this.templateCollection) {
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
var tempName = templateNames_1[_i];
var elementCollection = this.templateCollection[tempName];
if (elementCollection && elementCollection.length) {
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
var ele = elementCollection_1[_a];
this.destroyPortals(ele);
}
delete this.templateCollection[tempName];
}
}
}
},
setProperties: function (prop, muteOnChange) {
var _this = this;
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(function (key) {
_this.models.map(function (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]);
}
}
});
});
}
},
trigger: function (eventName, eventProp, successHandler) {
if (!isExecute) {
this.models = !this.models ? this.ej2Instances.referModels : this.models;
}
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/checked|value/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
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]);
}
else {
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
}
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
var key = this.models.toString().match(/currentView|selectedDate/) || [];
var propKey = key[0];
if (eventProp && key && !isUndefined(eventProp[propKey])) {
if (!isExecute) {
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
}
else {
this.$emit('update:' + propKey, eventProp[propKey]);
this.$emit('modelchanged', eventProp[propKey]);
}
}
}
if ((this.ej2Instances && this.ej2Instances._trigger)) {
this.ej2Instances._trigger(eventName, eventProp, successHandler);
}
},
custom: function () {
this.updated();
},
destroy: function () {
return this.ej2Instances.destroy();
},
nextStep: function () {
return this.ej2Instances.nextStep();
},
previousStep: function () {
return this.ej2Instances.previousStep();
},
refreshProgressbar: function () {
return this.ej2Instances.refreshProgressbar();
},
reset: function () {
return this.ej2Instances.reset();
},
}
});
var StepperPlugin = {
name: 'ejs-stepper',
install: function (Vue) {
Vue.component(StepperPlugin.name, StepperComponent);
Vue.component(StepPlugin.name, StepDirective);
Vue.component(StepsPlugin.name, StepsDirective);
}
};
export { AccordionComponent, AccordionItemDirective, AccordionItemPlugin, AccordionItemsDirective, AccordionItemsPlugin, AccordionPlugin, AppBarComponent, AppBarPlugin, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbItemPlugin, BreadcrumbItemsDirective, BreadcrumbItemsPlugin, BreadcrumbPlugin, CarouselComponent, CarouselItemDirective, CarouselItemPlugin, CarouselItemsDirective, CarouselItemsPlugin, CarouselPlugin, ContextMenuComponent, ContextMenuPlugin, ItemDirective, ItemPlugin, ItemsDirective, ItemsPlugin, MenuComponent, MenuItemDirective, MenuItemPlugin, MenuItemsDirective, MenuItemsPlugin, MenuPlugin, SidebarComponent, SidebarPlugin, StepDirective, StepPlugin, StepperComponent, StepperPlugin, StepsDirective, StepsPlugin, TabComponent, TabItemDirective, TabItemPlugin, TabItemsDirective, TabItemsPlugin, TabPlugin, ToolbarComponent, ToolbarPlugin, TreeViewComponent, TreeViewPlugin };
//# sourceMappingURL=ej2-vue-navigations.es5.js.map