@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
141 lines (140 loc) • 6 kB
JavaScript
import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DashboardLayout } from '@syncfusion/ej2-layouts';
import { PanelsDirective, PanelDirective, PanelsPlugin, PanelPlugin } from './panels.directive';
export var properties = ['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'];
export var modelProps = [];
export var testProp = getProps({ props: properties });
export 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 DashboardLayout Component.
* ```html
* <ejs-dashboardlayout></ejs-dashboardlayout>
* ```
*/
export var DashboardLayoutComponent = vueDefineComponent({
name: 'DashboardLayoutComponent',
mixins: [ComponentBase],
props: props,
watch: watch,
emits: emitProbs,
provide: function () { return { custom: this.custom }; },
data: function () {
return {
ej2Instances: new DashboardLayout({}),
propKeys: properties,
models: modelProps,
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);
},
}
});
export var DashboardLayoutPlugin = {
name: 'ejs-dashboardlayout',
install: function (Vue) {
Vue.component(DashboardLayoutPlugin.name, DashboardLayoutComponent);
Vue.component(PanelPlugin.name, PanelDirective);
Vue.component(PanelsPlugin.name, PanelsDirective);
}
};