@syncfusion/ej2-vue-layouts
Version:
A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person. for Vue
554 lines (546 loc) • 20.2 kB
JavaScript
import { Splitter, DashboardLayout, Timeline } from '@syncfusion/ej2-layouts';
export * from '@syncfusion/ej2-layouts';
import { vueDefineComponent, isExecute, gh, getProps, ComponentBase } from '@syncfusion/ej2-vue-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
var PanesDirective = 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-panes';
}
}
});
var PanesPlugin = {
name: 'e-panes',
install: function (Vue) {
Vue.component(PanesPlugin.name, PanesDirective);
}
};
/**
* 'e-pane' directive represent a pane of Vue Splitter
* It must be contained in a Splitter component(`ejs-splitter`).
* ```html
* <ejs-splitter id='splitter'>
* <e-panes>
* <e-pane size='150px'></e-pane>
* <e-pane size='150px'></e-pane>
* </e-panes>
* </ejs-splitter>
* ```
*/
var PaneDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-pane';
}
}
});
var PanePlugin = {
name: 'e-pane',
install: function (Vue) {
Vue.component(PanePlugin.name, PaneDirective);
}
};
var properties = ['isLazyUpdate', 'plugins', 'cssClass', 'enableHtmlSanitizer', 'enablePersistence', 'enableReversePanes', 'enableRtl', 'enabled', 'height', 'locale', 'orientation', 'paneSettings', 'separatorSize', 'width', 'beforeCollapse', 'beforeExpand', 'beforeSanitizeHtml', 'collapsed', 'created', 'expanded', 'resizeStart', 'resizeStop', 'resizing'];
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 VueJS Splitter component
* ```html
* <ejs-splitter></ejs-splitter>
* ```
*/
var SplitterComponent = vueDefineComponent({
name: 'SplitterComponent',
mixins: [ComponentBase],
props: props,
watch: watch,
emits: emitProbs,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Splitter({}),
propKeys: properties,
models: modelProps,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-panes": "e-pane" },
tagNameMapper: { "e-panes": "e-paneSettings" },
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();
},
addPane: function (paneProperties, index) {
return this.ej2Instances.addPane(paneProperties, index);
},
collapse: function (index) {
return this.ej2Instances.collapse(index);
},
destroy: function () {
return this.ej2Instances.destroy();
},
expand: function (index) {
return this.ej2Instances.expand(index);
},
removePane: function (index) {
return this.ej2Instances.removePane(index);
},
}
});
var SplitterPlugin = {
name: 'ejs-splitter',
install: function (Vue) {
Vue.component(SplitterPlugin.name, SplitterComponent);
Vue.component(PanePlugin.name, PaneDirective);
Vue.component(PanesPlugin.name, PanesDirective);
}
};
var PanelsDirective = 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-panels';
}
}
});
var PanelsPlugin = {
name: 'e-panels',
install: function (Vue) {
Vue.component(PanelsPlugin.name, PanelsDirective);
}
};
/**
* 'e-panels' directive represent a presets of VueJS dashboardlayout component
* It must be contained in a dashboardlayout component(`ejs-dashboardlayout`).
* ```html
* <ejs-dashboardlayout>
* <e-panels>
* <e-panel></e-panel>
* <e-panel></e-panel>
* </e-panels>
* </ejs-dashboardlayout>
* ```
*/
var PanelDirective = vueDefineComponent({
render: function () {
return;
},
methods: {
getTag: function () {
return 'e-panel';
}
}
});
var PanelPlugin = {
name: 'e-panel',
install: function (Vue) {
Vue.component(PanelPlugin.name, PanelDirective);
}
};
var properties$1 = ['isLazyUpdate', 'plugins', 'allowDragging', 'allowFloating', 'allowPushing', 'allowResizing', 'cellAspectRatio', 'cellSpacing', 'columns', 'draggableHandle', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'locale', 'mediaQuery', 'panels', 'resizableHandles', 'showGridLines', 'change', 'created', 'destroyed', 'drag', 'dragStart', 'dragStop', 'resize', 'resizeStart', 'resizeStop'];
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 Essential JS 2 VueJS DashboardLayout Component.
* ```html
* <ejs-dashboardlayout></ejs-dashboardlayout>
* ```
*/
var DashboardLayoutComponent = vueDefineComponent({
name: 'DashboardLayoutComponent',
mixins: [ComponentBase],
props: props$1,
watch: watch$1,
emits: emitProbs$1,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new DashboardLayout({}),
propKeys: properties$1,
models: modelProps$1,
hasChildDirective: true,
hasInjectedModules: false,
tagMapper: { "e-panels": "e-panel" },
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();
},
addPanel: function (panel) {
return this.ej2Instances.addPanel(panel);
},
destroy: function () {
return this.ej2Instances.destroy();
},
movePanel: function (id, row, col) {
return this.ej2Instances.movePanel(id, row, col);
},
refresh: function () {
return this.ej2Instances.refresh();
},
refreshDraggableHandle: function () {
return this.ej2Instances.refreshDraggableHandle();
},
removeAll: function () {
return this.ej2Instances.removeAll();
},
removePanel: function (id) {
return this.ej2Instances.removePanel(id);
},
resizePanel: function (id, sizeX, sizeY) {
return this.ej2Instances.resizePanel(id, sizeX, sizeY);
},
serialize: function () {
return this.ej2Instances.serialize();
},
updatePanel: function (panel) {
return this.ej2Instances.updatePanel(panel);
},
}
});
var DashboardLayoutPlugin = {
name: 'ejs-dashboardlayout',
install: function (Vue) {
Vue.component(DashboardLayoutPlugin.name, DashboardLayoutComponent);
Vue.component(PanelPlugin.name, PanelDirective);
Vue.component(PanelsPlugin.name, PanelsDirective);
}
};
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-timelineItem' directive represents a item of the Vue Timeline
* It must be contained in a Timeline component(`ejs-timeline`).
* ```html
* <ejs-timeline>
* <e-items>
* <e-item :dotCss='e-icons e-folder' :content='Item 1' />
* <e-item :dotCss='e-icons e-folder' :content='Item 2' />
* </e-items>
* </ejs-timeline>
* ```
*/
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$2 = ['isLazyUpdate', 'plugins', 'align', 'cssClass', 'enablePersistence', 'enableRtl', 'items', 'locale', 'orientation', 'reverse', 'template', 'beforeItemRender', 'created'];
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 Timeline Component.
* ```html
* <ejs-timeline :items='timelineItems'></ejs-timeline>
* ```
*/
var TimelineComponent = vueDefineComponent({
name: 'TimelineComponent',
mixins: [ComponentBase],
props: props$2,
watch: watch$2,
emits: emitProbs$2,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new Timeline({}),
propKeys: properties$2,
models: modelProps$2,
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();
},
destroy: function () {
return this.ej2Instances.destroy();
},
}
});
var TimelinePlugin = {
name: 'ejs-timeline',
install: function (Vue) {
Vue.component(TimelinePlugin.name, TimelineComponent);
Vue.component(ItemPlugin.name, ItemDirective);
Vue.component(ItemsPlugin.name, ItemsDirective);
}
};
export { DashboardLayoutComponent, DashboardLayoutPlugin, ItemDirective, ItemPlugin, ItemsDirective, ItemsPlugin, PaneDirective, PanePlugin, PanelDirective, PanelPlugin, PanelsDirective, PanelsPlugin, PanesDirective, PanesPlugin, SplitterComponent, SplitterPlugin, TimelineComponent, TimelinePlugin };
//# sourceMappingURL=ej2-vue-layouts.es5.js.map