devextreme-vue
Version:
DevExtreme Vue UI and Visualization Components
219 lines (217 loc) • 8.02 kB
JavaScript
/*!
* devextreme-vue
* Version: 25.2.3
* Build date: Fri Dec 12 2025
*
* Copyright (c) 2012 - 2025 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";
Object.defineProperty(exports, "__esModule", { value: true });
exports.setEmitOptionChangedFunc = exports.bindOptionWatchers = void 0;
const vue_1 = require("vue");
const config_1 = require("./config");
const helpers_1 = require("./helpers");
const vue_helper_1 = require("./vue-helper");
class Configuration {
constructor(updateFunc, name, initialValues, expectedChildren, isCollectionItem, collectionItemIndex, ownerConfig) {
this._updateFunc = updateFunc;
this._name = name;
this._initialValues = initialValues || {};
this._nestedConfigurations = [];
this._isCollectionItem = !!isCollectionItem;
this._collectionItemIndex = collectionItemIndex;
this._expectedChildren = expectedChildren || {};
this._ownerConfig = ownerConfig;
this._componentChanges = [];
this.updateValue = this.updateValue.bind(this);
}
get name() {
return this._name;
}
get fullName() {
return this._name && this._isCollectionItem
? `${this._name}[${this._collectionItemIndex}]`
: this._name;
}
get componentsCountChanged() {
return this._componentChanges;
}
cleanComponentsCountChanged() {
this._componentChanges = [];
}
get fullPath() {
return this._ownerConfig?.fullPath
? `${this._ownerConfig.fullPath}.${this.fullName}`
: this.fullName;
}
get ownerConfig() {
return this._ownerConfig;
}
get options() {
return this._options;
}
get initialValues() {
return this._initialValues;
}
get expectedChildren() {
return this._expectedChildren;
}
get nested() {
return this._nestedConfigurations;
}
get prevNestedOptions() {
return this._prevNestedConfigOptions;
}
get collectionItemIndex() {
return this._collectionItemIndex;
}
get isCollectionItem() {
return this._isCollectionItem;
}
get updateFunc() {
return this._updateFunc;
}
init(options) {
this._options = options || [];
}
set emitOptionChanged(handler) {
this._emitOptionChanged = handler;
}
setPrevNestedOptions(value) {
this._prevNestedConfigOptions = value;
}
onOptionChanged(args) {
if ((0, helpers_1.isEqual)(args.value, args.previousValue)) {
return;
}
this._onOptionChanged(args.fullName.split('.'), args);
}
cleanNested() {
this._nestedConfigurations = [];
}
createNested(name, initialValues, isCollectionItem, expectedChildren) {
const expected = this._expectedChildren[name];
let actualName = name;
let actualIsCollectionItem = isCollectionItem;
if (expected) {
actualIsCollectionItem = expected.isCollectionItem;
if (expected.optionName) {
actualName = expected.optionName;
}
}
let collectionItemIndex = -1;
if (actualIsCollectionItem && actualName) {
collectionItemIndex = this._nestedConfigurations.filter((c) => c._name && c._name === actualName).length;
}
const configuration = new Configuration(this._updateFunc, actualName, initialValues, expectedChildren, actualIsCollectionItem, collectionItemIndex, this);
this._nestedConfigurations.push(configuration);
return configuration;
}
updateValue(nestedName, value) {
const fullName = [this.fullPath, nestedName].filter((n) => n).join('.');
this._updateFunc(fullName, value);
}
getNestedOptionValues() {
const values = {};
this._nestedConfigurations.forEach((o) => {
if (!o._name) {
return;
}
const nestedValue = { ...o.initialValues, ...o.getNestedOptionValues() };
if (!nestedValue) {
return;
}
if (!o._isCollectionItem) {
values[o._name] = nestedValue;
}
else {
let arr = values[o._name];
if (!arr || !Array.isArray(arr)) {
arr = [];
values[o._name] = arr;
}
arr.push(nestedValue);
}
});
return values;
}
getOptionsToWatch() {
const blackList = {};
this._nestedConfigurations.forEach((c) => c._name && (blackList[c._name] = true));
return this._options.filter((o) => !blackList[o]);
}
_onOptionChanged(optionRelPath, args) {
if (optionRelPath.length === 0) {
return;
}
const optionInfo = (0, helpers_1.getOptionInfo)(optionRelPath[0]);
if (optionInfo.isCollection || optionRelPath.length > 1) {
const nestedConfig = this._getNestedConfig(optionInfo.fullName);
if (nestedConfig) {
nestedConfig._onOptionChanged(optionRelPath.slice(1), args);
return;
}
this._tryEmitOptionChanged(optionInfo.name, args.component.option(this.fullPath ? `${this.fullPath}.${optionInfo.name}` : optionInfo.name));
}
else {
this._tryEmitOptionChanged(optionInfo.name, args.value);
}
}
_getNestedConfig(fullName) {
for (const nestedConfig of this._nestedConfigurations) {
if (nestedConfig.fullName === fullName) {
return nestedConfig;
}
}
return undefined;
}
_tryEmitOptionChanged(name, value) {
if (this._emitOptionChanged) {
this._emitOptionChanged(name, value);
}
}
}
function bindOptionWatchers(config, vueInstance, innerChanges) {
const targets = config && config.getOptionsToWatch();
if (targets) {
targets.forEach((optionName) => {
vueInstance.$watch(optionName, (value) => {
const rawValue = (0, vue_1.toRaw)(value);
if (!innerChanges.hasOwnProperty(optionName)
|| innerChanges[optionName] !== rawValue) {
config.updateValue(optionName, value);
}
delete innerChanges[optionName];
}, { deep: (0, config_1.getOption)('deepWatch') });
});
}
}
exports.bindOptionWatchers = bindOptionWatchers;
function hasProp(vueInstance, propName) {
const { props } = vueInstance.$options;
return props?.hasOwnProperty(propName);
}
function hasVModelValue(options, props, vnode) {
return options.model
&& props.hasOwnProperty(vue_helper_1.VMODEL_NAME)
&& vnode?.props?.hasOwnProperty(vue_helper_1.VMODEL_NAME);
}
function setEmitOptionChangedFunc(config, vueInstance, innerChanges) {
config.emitOptionChanged = (name, value) => {
const props = vueInstance.$props;
const vnode = vueInstance?.$?.vnode;
const propsName = name === 'value' && hasVModelValue(vueInstance.$options, props, vnode) ? vue_helper_1.VMODEL_NAME : name;
const eventName = `update:${propsName}`;
if (hasProp(vueInstance, name) && !(0, helpers_1.isEqual)(value, props[propsName]) && vueInstance.$emit) {
innerChanges[propsName] = (0, vue_1.toRaw)(value);
vueInstance.$emit(eventName, value);
}
};
}
exports.setEmitOptionChangedFunc = setEmitOptionChangedFunc;
exports.default = Configuration;