@syncfusion/ej2-vue-buttons
Version:
A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for Vue
1,233 lines • 51.3 kB
JavaScript
import { Button, CheckBox, RadioButton, Switch, ChipList, Fab, SpeedDial, SmartPasteButton } from '@syncfusion/ej2-buttons';
export * from '@syncfusion/ej2-buttons';
import { getProps, vueDefineComponent, ComponentBase, isExecute, gh } from '@syncfusion/ej2-vue-base';
import { isNullOrUndefined, isUndefined } from '@syncfusion/ej2-base';
var properties = ['isLazyUpdate', 'plugins', 'content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];
var modelProps = [];
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 Essential JS 2 VueJS Button Component
* ```html
* <ejs-button>Button</ejs-button>
* ```
*/
var ButtonComponent = vueDefineComponent({
name: 'ButtonComponent',
mixins: [ComponentBase],
props: props,
watch: watch,
emits: emitProbs,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Button({}),
propKeys: properties,
models: modelProps,
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('button', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
}
});
var ButtonPlugin = {
name: 'ejs-button',
install: function (Vue) {
Vue.component(ButtonPlugin.name, ButtonComponent);
}
};
var properties$1 = ['isLazyUpdate', 'plugins', 'checked', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'indeterminate', 'label', 'labelPosition', 'locale', 'name', 'value', 'change', 'created'];
var modelProps$1 = ['checked', 'indeterminate'];
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 Essential JS 2 VueJS CheckBox Component
* ```html
* <ejs-checkbox label='Default'></ejs-checkbox>
* ```
*/
var CheckBoxComponent = vueDefineComponent({
name: 'CheckBoxComponent',
mixins: [ComponentBase],
props: props$1,
watch: watch$1,
emits: emitProbs$1,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new CheckBox({}),
propKeys: properties$1,
models: modelProps$1,
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('input', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
}
});
var CheckBoxPlugin = {
name: 'ejs-checkbox',
install: function (Vue) {
Vue.component(CheckBoxPlugin.name, CheckBoxComponent);
}
};
var properties$2 = ['isLazyUpdate', 'plugins', 'checked', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'label', 'labelPosition', 'locale', 'name', 'value', 'change', 'created'];
var modelProps$2 = ['value'];
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 RadioButton Component
* ```html
* <ejs-radiobutton label='Default'></ejs-radiobutton>
* ```
*/
var RadioButtonComponent = vueDefineComponent({
name: 'RadioButtonComponent',
mixins: [ComponentBase],
props: props$2,
watch: watch$2,
emits: emitProbs$2,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new RadioButton({}),
propKeys: properties$2,
models: modelProps$2,
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('input', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
getSelectedValue: function () {
return this.ej2Instances.getSelectedValue();
},
}
});
var RadioButtonPlugin = {
name: 'ejs-radiobutton',
install: function (Vue) {
Vue.component(RadioButtonPlugin.name, RadioButtonComponent);
}
};
var properties$3 = ['isLazyUpdate', 'plugins', 'checked', 'cssClass', 'disabled', 'enablePersistence', 'enableRtl', 'htmlAttributes', 'locale', 'name', 'offLabel', 'onLabel', 'value', 'beforeChange', 'change', 'created'];
var modelProps$3 = ['checked'];
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 Essential JS 2 VueJS Switch Component.
* ```html
* <ejs-switch></ejs-switch>
* ```
*/
var SwitchComponent = vueDefineComponent({
name: 'SwitchComponent',
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 Switch({}),
propKeys: properties$3,
models: modelProps$3,
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('input', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
toggle: function () {
return this.ej2Instances.toggle();
},
}
});
var SwitchPlugin = {
name: 'ejs-switch',
install: function (Vue) {
Vue.component(SwitchPlugin.name, SwitchComponent);
}
};
var ChipsDirective = 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-chips';
}
}
});
var ChipsPlugin = {
name: 'e-chips',
install: function (Vue) {
Vue.component(ChipsPlugin.name, ChipsDirective);
}
};
/**
* `e-chip` directive represent a chip of the Vue ChipList.
* ```html
* <ejs-chiplist >
* <e-chips>
* <e-chip text='chip1'></e-chip>
* <e-chip text='chip2'></e-chip>
* </e-chips>
* </ejs-chiplist>
* ```
*/
var ChipDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-chip';
}
}
});
var ChipPlugin = {
name: 'e-chip',
install: function (Vue) {
Vue.component(ChipPlugin.name, ChipDirective);
}
};
var properties$4 = ['isLazyUpdate', 'plugins', 'allowDragAndDrop', 'avatarIconCss', 'avatarText', 'chips', 'cssClass', 'dragArea', 'enableDelete', 'enablePersistence', 'enableRtl', 'enabled', 'htmlAttributes', 'leadingIconCss', 'leadingIconUrl', 'locale', 'selectedChips', 'selection', 'text', 'trailingIconCss', 'trailingIconUrl', 'beforeClick', 'click', 'created', 'delete', 'deleted', 'dragStart', 'dragStop', 'dragging'];
var modelProps$4 = [];
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 Essential JS 2 VueJS ChipList Component.
* ```html
* <ejs-chiplist></ejs-chiplist>
* ```
*/
var ChipListComponent = vueDefineComponent({
name: 'ChipListComponent',
mixins: [ComponentBase],
props: props$4,
watch: watch$4,
emits: emitProbs$4,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new ChipList({}),
propKeys: properties$4,
models: modelProps$4,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-chips": "e-chip" },
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();
},
add: function (chipsData) {
return this.ej2Instances.add(chipsData);
},
destroy: function () {
return this.ej2Instances.destroy();
},
find: function (fields) {
return this.ej2Instances.find(fields);
},
getSelectedChips: function () {
return this.ej2Instances.getSelectedChips();
},
remove: function (fields) {
return this.ej2Instances.remove(fields);
},
select: function (fields, selectionType) {
return this.ej2Instances.select(fields, selectionType);
},
}
});
var ChipListPlugin = {
name: 'ejs-chiplist',
install: function (Vue) {
Vue.component(ChipListPlugin.name, ChipListComponent);
Vue.component(ChipPlugin.name, ChipDirective);
Vue.component(ChipsPlugin.name, ChipsDirective);
}
};
var properties$5 = ['isLazyUpdate', 'plugins', 'content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'position', 'target', 'visible', 'created'];
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 Essential JS 2 VueJS Fab Component
* ```html
* <ejs-fab></ejs-fab>
* ```
*/
var FabComponent = vueDefineComponent({
name: 'FabComponent',
mixins: [ComponentBase],
props: props$5,
watch: watch$5,
emits: emitProbs$5,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Fab({}),
propKeys: properties$5,
models: modelProps$5,
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('button', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
refreshPosition: function () {
return this.ej2Instances.refreshPosition();
},
}
});
var FabPlugin = {
name: 'ejs-fab',
install: function (Vue) {
Vue.component(FabPlugin.name, FabComponent);
}
};
var SpeedDialItemsDirective = 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-speeddial-items';
}
}
});
var SpeedDialItemsPlugin = {
name: 'e-speeddial-items',
install: function (Vue) {
Vue.component(SpeedDialItemsPlugin.name, SpeedDialItemsDirective);
}
};
/**
* 'e-speeddialitem' directive represent a item of Vue SpeedDial
* It must be contained in a SpeedDial component(`ejs-speeddial`).
* ```html
* <ejs-speeddial>
* <e-speeddialitems>
* <e-speeddialitem text='Cut'></e-speeddialitem>
* <e-speeddialitem text='Copy'></e-speeddialitem>
* </e-speeddialitems>
* </ejs-speeddial>
* ```
*/
var SpeedDialItemDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-speeddial-item';
}
}
});
var SpeedDialItemPlugin = {
name: 'e-speeddial-item',
install: function (Vue) {
Vue.component(SpeedDialItemPlugin.name, SpeedDialItemDirective);
}
};
var properties$6 = ['isLazyUpdate', 'plugins', 'animation', 'closeIconCss', 'content', 'cssClass', 'direction', 'disabled', 'enablePersistence', 'enableRtl', 'iconPosition', 'isPrimary', 'itemTemplate', 'items', 'locale', 'modal', 'mode', 'openIconCss', 'opensOnHover', 'popupTemplate', 'position', 'radialSettings', 'target', 'visible', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'clicked', 'created', 'onClose', 'onOpen'];
var modelProps$6 = ['visible'];
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 Essential JS 2 VueJS SpeedDialComponent Component
* ```html
* <ejs-speeddial content='Edit'></ejs-speeddial>
* ```
*/
var SpeedDialComponent = vueDefineComponent({
name: 'SpeedDialComponent',
mixins: [ComponentBase],
props: props$6,
watch: watch$6,
emits: emitProbs$6,
model: { event: 'modelchanged' },
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new SpeedDial({}),
propKeys: properties$6,
models: modelProps$6,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-speeddial-items": "e-speeddial-item" },
tagNameMapper: { "e-speeddial-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('button', 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();
},
createPopup: function () {
return this.ej2Instances.createPopup();
},
destroy: function () {
return this.ej2Instances.destroy();
},
hide: function () {
return this.ej2Instances.hide();
},
refreshPosition: function () {
return this.ej2Instances.refreshPosition();
},
show: function () {
return this.ej2Instances.show();
},
}
});
var SpeedDialPlugin = {
name: 'ejs-speeddial',
install: function (Vue) {
Vue.component(SpeedDialPlugin.name, SpeedDialComponent);
Vue.component(SpeedDialItemPlugin.name, SpeedDialItemDirective);
Vue.component(SpeedDialItemsPlugin.name, SpeedDialItemsDirective);
}
};
var properties$7 = ['isLazyUpdate', 'plugins', 'aiAssistHandler', 'content', 'cssClass', 'disabled', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'iconCss', 'iconPosition', 'isPrimary', 'isToggle', 'locale', 'created'];
var modelProps$7 = [];
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 Vue Smart Paste Button Component
* ```html
* <ejs-smart-paste-button>Smart paste</ejs-smart-paste-button>
* ```
*/
var SmartPasteButtonComponent = vueDefineComponent({
name: 'SmartPasteButtonComponent',
mixins: [ComponentBase],
props: props$7,
watch: watch$7,
emits: emitProbs$7,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new SmartPasteButton({}),
propKeys: properties$7,
models: modelProps$7,
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('button', 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();
},
click: function () {
return this.ej2Instances.click();
},
destroy: function () {
return this.ej2Instances.destroy();
},
focusIn: function () {
return this.ej2Instances.focusIn();
},
}
});
var SmartPasteButtonPlugin = {
name: 'ejs-smartpastebutton',
install: function (Vue) {
Vue.component(SmartPasteButtonPlugin.name, SmartPasteButtonComponent);
}
};
export { ButtonComponent, ButtonPlugin, CheckBoxComponent, CheckBoxPlugin, ChipDirective, ChipListComponent, ChipListPlugin, ChipPlugin, ChipsDirective, ChipsPlugin, FabComponent, FabPlugin, RadioButtonComponent, RadioButtonPlugin, SmartPasteButtonComponent, SmartPasteButtonPlugin, SpeedDialComponent, SpeedDialItemDirective, SpeedDialItemPlugin, SpeedDialItemsDirective, SpeedDialItemsPlugin, SpeedDialPlugin, SwitchComponent, SwitchPlugin };
//# sourceMappingURL=ej2-vue-buttons.es5.js.map