devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
265 lines (263 loc) • 10.2 kB
JavaScript
/*!
* devextreme-vue
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
*
* This software may be modified and distributed under the terms
* of the MIT license. See the LICENSE file in the root of the project for details.
*
* https://github.com/DevExpress/devextreme-vue
*/
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var VueType = require("vue");
var events = require("devextreme/events");
var children_processing_1 = require("./children-processing");
var configuration_1 = require("./configuration");
var configuration_component_1 = require("./configuration-component");
var constants_1 = require("./constants");
var helpers_1 = require("./helpers");
var templates_manager_1 = require("./templates-manager");
var Vue = VueType.default || VueType;
var BaseComponent = Vue.extend({
inheritAttrs: false,
data: function () {
return {
eventBus: new Vue()
};
},
provide: function () {
return {
eventBus: this.eventBus
};
},
render: function (createElement) {
var children = [];
if (this.$_config.cleanNested) {
this.$_config.cleanNested();
}
children_processing_1.pullAllChildren(this.$slots.default, children, this.$_config);
this.$_processChildren(children);
if (this.$vnode && this.$vnode.componentOptions.children && this.$_hasTranscludedContent) {
var nodes = splitNodes(children);
children = __spreadArrays([
createElement("div", {
attrs: { class: constants_1.DX_TEMPLATE_WRAPPER_CLASS }
}, nodes.domNodes)
], nodes.configNodes);
}
return createElement("div", {
attrs: { id: this.$attrs.id }
}, children);
},
beforeUpdate: function () {
this.$_config.setPrevNestedOptions(this.$_config.getNestedOptionValues());
},
updated: function () {
var _this = this;
this.$children.forEach((configuration_component_1.initBinding));
this.$_templatesManager.discover();
this.$_instance.beginUpdate();
if (this.$_templatesManager.isDirty) {
this.$_instance.option("integrationOptions.templates", this.$_templatesManager.templates);
for (var _i = 0, _a = Object.keys(this.$_templatesManager.templates); _i < _a.length; _i++) {
var name_1 = _a[_i];
this.$_instance.option(name_1, name_1);
}
this.$_templatesManager.resetDirtyFlag();
}
for (var _b = 0, _c = Object.keys(this.$_pendingOptions); _b < _c.length; _b++) {
var name_2 = _c[_b];
this.$_instance.option(name_2, this.$_pendingOptions[name_2]);
}
this.$_pendingOptions = {};
if (this.$_config.componentsCountChanged) {
var options = this.$_config.getNestedOptionValues();
var prevOptions = this.$_config.prevNestedOptions;
var optionsList_1 = Object.keys(options);
var prevOptionsList = Object.keys(prevOptions);
if (optionsList_1.length < prevOptionsList.length) {
prevOptionsList.forEach(function (prevName) {
var hasOption = optionsList_1.some(function (name) {
return prevName === name;
});
if (!hasOption) {
_this.$_instance.resetOption(prevName);
}
});
}
for (var name_3 in options) {
if (options.hasOwnProperty(name_3)) {
this.$_instance.option(name_3, options[name_3]);
}
}
this.$_config.componentsCountChanged = false;
}
this.$_instance.endUpdate();
this.eventBus.$emit("updated");
},
beforeDestroy: function () {
var instance = this.$_instance;
if (instance) {
events.triggerHandler(this.$el, constants_1.DX_REMOVE_EVENT);
instance.dispose();
}
},
created: function () {
var _this = this;
this.$_config = new configuration_1.default(function (n, v) { return _this.$_pendingOptions[n] = v; }, null, this.$options.propsData && __assign({}, this.$options.propsData), this.$_expectedChildren);
this.$_config.init(this.$props && Object.keys(this.$props));
},
methods: {
$_createWidget: function (element) {
var thisComponent = this;
thisComponent.$_pendingOptions = {};
thisComponent.$_templatesManager = new templates_manager_1.TemplatesManager(this);
var innerChanges = {};
var config = this.$_config;
var options = __assign(__assign(__assign(__assign({}, this.$options.propsData), config.initialValues), config.getNestedOptionValues()), this.$_getIntegrationOptions());
var instance = new this.$_WidgetClass(element, options);
thisComponent.$_instance = instance;
instance.on("optionChanged", function (args) { return config.onOptionChanged(args); });
configuration_1.setEmitOptionChangedFunc(config, this, innerChanges);
configuration_1.bindOptionWatchers(config, this, innerChanges);
this.$_createEmitters(instance);
},
$_getIntegrationOptions: function () {
var result = __assign({ integrationOptions: {
watchMethod: this.$_getWatchMethod(),
} }, this.$_getExtraIntegrationOptions());
if (this.$_templatesManager.isDirty) {
var templates = this.$_templatesManager.templates;
result.integrationOptions.templates = templates;
for (var _i = 0, _a = Object.keys(templates); _i < _a.length; _i++) {
var name_4 = _a[_i];
result[name_4] = name_4;
}
this.$_templatesManager.resetDirtyFlag();
}
return result;
},
$_getWatchMethod: function () {
var _this = this;
return function (valueGetter, valueChangeCallback, options) {
options = options || {};
if (!options.skipImmediate) {
valueChangeCallback(valueGetter());
}
return _this.$watch(function () {
return valueGetter();
}, function (newValue, oldValue) {
if (helpers_1.toComparable(oldValue) !== helpers_1.toComparable(newValue) || options.deep) {
valueChangeCallback(newValue);
}
}, {
deep: options.deep
});
};
},
$_getExtraIntegrationOptions: function () {
return {};
},
$_processChildren: function (_children) {
return;
},
$_createEmitters: function (instance) {
var _this = this;
Object.keys(this.$listeners).forEach(function (listenerName) {
var eventName = helpers_1.camelize(listenerName);
instance.on(eventName, function (e) {
_this.$emit(listenerName, e);
});
});
}
}
});
exports.BaseComponent = BaseComponent;
function splitNodes(nodes) {
var domNodes = [];
var configNodes = [];
for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
var node = nodes_1[_i];
if (node.componentOptions && node.componentOptions.$_hasOwner) {
configNodes.push(node);
}
else {
domNodes.push(node);
}
}
return {
domNodes: domNodes,
configNodes: configNodes
};
}
function cleanWidgetNode(node) {
var removedNodes = [];
helpers_1.forEachChildNode(node, function (childNode) {
var parent = childNode.parentNode;
var isExtension = childNode.hasAttribute && childNode.hasAttribute("isExtension");
if ((childNode.nodeName === "#comment" || isExtension) && parent) {
removedNodes.push(childNode);
parent.removeChild(childNode);
}
});
return removedNodes;
}
function restoreNodes(el, nodes) {
nodes.forEach(function (node) {
el.appendChild(node);
});
}
var DxComponent = BaseComponent.extend({
methods: {
$_getExtraIntegrationOptions: function () {
return {
onInitializing: function () {
this.beginUpdate();
}
};
},
$_processChildren: function (children) {
children.forEach(function (childNode) {
if (!childNode.componentOptions) {
return;
}
childNode.componentOptions.$_hasOwner = true;
});
},
},
mounted: function () {
var _this = this;
var nodes = cleanWidgetNode(this.$el);
this.$_createWidget(this.$el);
this.$_instance.endUpdate();
restoreNodes(this.$el, nodes);
this.$children.forEach(function (child) {
var childExtension = child;
if (childExtension.$_isExtension) {
childExtension.attachTo(_this.$el);
}
});
}
});
exports.DxComponent = DxComponent;