@syncfusion/ej2-vue-inplace-editor 20.4.54 → 21.1.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/dist/ej2-vue-inplace-editor.umd.min.js +2 -2
- package/dist/ej2-vue-inplace-editor.umd.min.js.map +1 -1
- package/dist/es6/ej2-vue-inplace-editor.es2015.js +113 -136
- package/dist/es6/ej2-vue-inplace-editor.es2015.js.map +1 -1
- package/dist/es6/ej2-vue-inplace-editor.es5.js +129 -157
- package/dist/es6/ej2-vue-inplace-editor.es5.js.map +1 -1
- package/package.json +11 -10
- package/src/inplace-editor/inplaceeditor.component.d.ts +3 -29
- package/src/inplace-editor/inplaceeditor.component.js +131 -162
|
@@ -1,33 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
var extendStatics = function (d, b) {
|
|
3
|
-
extendStatics = Object.setPrototypeOf ||
|
|
4
|
-
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
5
|
-
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
6
|
-
return extendStatics(d, b);
|
|
7
|
-
};
|
|
8
|
-
return function (d, b) {
|
|
9
|
-
extendStatics(d, b);
|
|
10
|
-
function __() { this.constructor = d; }
|
|
11
|
-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
12
|
-
};
|
|
13
|
-
})();
|
|
14
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
15
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
16
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
17
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
18
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
19
|
-
};
|
|
20
|
-
import { isUndefined } from '@syncfusion/ej2-base';
|
|
21
|
-
import { ComponentBase, EJComponentDecorator, getProps, gh, isExecute } from '@syncfusion/ej2-vue-base';
|
|
1
|
+
import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';
|
|
22
2
|
import { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';
|
|
3
|
+
import { isUndefined } from '@syncfusion/ej2-base';
|
|
23
4
|
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';
|
|
24
|
-
import { Options } from 'vue-class-component';
|
|
25
5
|
export var properties = ['isLazyUpdate', 'plugins', 'actionOnBlur', 'adaptor', 'cancelButton', 'cssClass', 'disabled', 'editableOn', 'emptyText', 'enableEditMode', 'enableHtmlParse', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'locale', 'mode', 'model', 'name', 'popupSettings', 'primaryKey', 'saveButton', 'showButtons', 'submitOnEnter', 'template', 'textOption', 'type', 'url', 'validationRules', 'value', 'actionBegin', 'actionFailure', 'actionSuccess', 'beforeSanitizeHtml', 'beginEdit', 'cancelClick', 'change', 'created', 'destroyed', 'endEdit', 'submitClick', 'validating'];
|
|
26
6
|
export var modelProps = ['value'];
|
|
27
7
|
export var testProp = getProps({ props: properties });
|
|
28
|
-
export var props = testProp[0];
|
|
29
|
-
export var watch = testProp[1];
|
|
30
|
-
export var emitProbs = Object.keys(watch);
|
|
8
|
+
export var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);
|
|
31
9
|
emitProbs.push('modelchanged', 'update:modelValue');
|
|
32
10
|
for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
|
|
33
11
|
var props_1 = modelProps_1[_i];
|
|
@@ -39,158 +17,149 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
|
|
|
39
17
|
* <ejs-inplaceeditor></ejs-inplaceeditor>
|
|
40
18
|
* ```
|
|
41
19
|
*/
|
|
42
|
-
var InPlaceEditorComponent =
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
20
|
+
export var InPlaceEditorComponent = vueDefineComponent({
|
|
21
|
+
name: 'InPlaceEditorComponent',
|
|
22
|
+
mixins: [ComponentBase],
|
|
23
|
+
props: props,
|
|
24
|
+
watch: watch,
|
|
25
|
+
emits: emitProbs,
|
|
26
|
+
model: { event: 'modelchanged' },
|
|
27
|
+
provide: function () { return { custom: this.custom }; },
|
|
28
|
+
data: function () {
|
|
29
|
+
return {
|
|
30
|
+
ej2Instances: new InPlaceEditor({}),
|
|
31
|
+
propKeys: properties,
|
|
32
|
+
models: modelProps,
|
|
33
|
+
hasChildDirective: false,
|
|
34
|
+
hasInjectedModules: true,
|
|
35
|
+
tagMapper: {},
|
|
36
|
+
tagNameMapper: {},
|
|
37
|
+
isVue3: !isExecute,
|
|
38
|
+
templateCollection: {},
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
created: function () {
|
|
42
|
+
this.ej2Instances._trigger = this.ej2Instances.trigger;
|
|
43
|
+
this.ej2Instances.trigger = this.trigger;
|
|
44
|
+
this.bindProperties();
|
|
45
|
+
this.ej2Instances._setProperties = this.ej2Instances.setProperties;
|
|
46
|
+
this.ej2Instances.setProperties = this.setProperties;
|
|
47
|
+
this.ej2Instances.clearTemplate = this.clearTemplate;
|
|
48
|
+
this.updated = this.updated;
|
|
49
|
+
},
|
|
50
|
+
render: function (createElement) {
|
|
51
|
+
var h = !isExecute ? gh : createElement;
|
|
52
|
+
var slots = null;
|
|
53
|
+
if (!isNullOrUndefined(this.$slots.default)) {
|
|
54
|
+
slots = !isExecute ? this.$slots.default() : this.$slots.default;
|
|
66
55
|
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
56
|
+
return h('div', slots);
|
|
57
|
+
},
|
|
58
|
+
methods: {
|
|
59
|
+
clearTemplate: function (templateNames) {
|
|
60
|
+
if (!templateNames) {
|
|
61
|
+
templateNames = Object.keys(this.templateCollection || {});
|
|
62
|
+
}
|
|
63
|
+
if (templateNames.length && this.templateCollection) {
|
|
64
|
+
for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
|
|
65
|
+
var tempName = templateNames_1[_i];
|
|
66
|
+
var elementCollection = this.templateCollection[tempName];
|
|
67
|
+
if (elementCollection && elementCollection.length) {
|
|
68
|
+
for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
|
|
69
|
+
var ele = elementCollection_1[_a];
|
|
70
|
+
var destroy = getValue('__vue__.$destroy', ele);
|
|
71
|
+
if (destroy) {
|
|
72
|
+
ele.__vue__.$destroy();
|
|
73
|
+
}
|
|
74
|
+
if (ele.innerHTML) {
|
|
75
|
+
ele.innerHTML = '';
|
|
76
|
+
}
|
|
80
77
|
}
|
|
78
|
+
delete this.templateCollection[tempName];
|
|
81
79
|
}
|
|
82
|
-
delete this.templateCollection[tempName];
|
|
83
80
|
}
|
|
84
81
|
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
82
|
+
},
|
|
83
|
+
setProperties: function (prop, muteOnChange) {
|
|
84
|
+
var _this = this;
|
|
85
|
+
if (this.isVue3) {
|
|
86
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
87
|
+
}
|
|
88
|
+
if (this.ej2Instances && this.ej2Instances._setProperties) {
|
|
89
|
+
this.ej2Instances._setProperties(prop, muteOnChange);
|
|
90
|
+
}
|
|
91
|
+
if (prop && this.models && this.models.length) {
|
|
92
|
+
Object.keys(prop).map(function (key) {
|
|
93
|
+
_this.models.map(function (model) {
|
|
94
|
+
if ((key === model) && !(/datasource/i.test(key))) {
|
|
95
|
+
if (_this.isVue3) {
|
|
96
|
+
_this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
_this.$emit('update:' + key, prop[key]);
|
|
100
|
+
_this.$emit('modelchanged', prop[key]);
|
|
101
|
+
}
|
|
101
102
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
},
|
|
107
|
+
trigger: function (eventName, eventProp, successHandler) {
|
|
108
|
+
if (!isExecute) {
|
|
109
|
+
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
110
|
+
}
|
|
111
|
+
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
|
112
|
+
var key = this.models.toString().match(/checked|value/) || [];
|
|
113
|
+
var propKey = key[0];
|
|
114
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
115
|
+
if (!isExecute) {
|
|
116
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
117
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
118
|
+
this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
|
|
119
|
+
}
|
|
120
|
+
else {
|
|
121
|
+
if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
|
|
122
|
+
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
123
|
+
this.$emit('modelchanged', eventProp[propKey]);
|
|
105
124
|
}
|
|
106
125
|
}
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
};
|
|
111
|
-
InPlaceEditorComponent.prototype.trigger = function (eventName, eventProp, successHandler) {
|
|
112
|
-
if (!isExecute) {
|
|
113
|
-
this.models = !this.models ? this.ej2Instances.referModels : this.models;
|
|
114
|
-
}
|
|
115
|
-
if ((eventName === 'change' || eventName === 'input') && this.models && (this.models.length !== 0)) {
|
|
116
|
-
var key = this.models.toString().match(/checked|value/) || [];
|
|
117
|
-
var propKey = key[0];
|
|
118
|
-
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
119
|
-
if (!isExecute) {
|
|
120
|
-
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
121
|
-
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
122
|
-
this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
|
|
123
126
|
}
|
|
124
|
-
|
|
125
|
-
|
|
127
|
+
}
|
|
128
|
+
else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
|
|
129
|
+
var key = this.models.toString().match(/currentView|selectedDate/) || [];
|
|
130
|
+
var propKey = key[0];
|
|
131
|
+
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
132
|
+
if (!isExecute) {
|
|
133
|
+
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
134
|
+
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
135
|
+
}
|
|
136
|
+
else {
|
|
126
137
|
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
127
138
|
this.$emit('modelchanged', eventProp[propKey]);
|
|
128
139
|
}
|
|
129
140
|
}
|
|
130
141
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
var key = this.models.toString().match(/currentView|selectedDate/) || [];
|
|
134
|
-
var propKey = key[0];
|
|
135
|
-
if (eventProp && key && !isUndefined(eventProp[propKey])) {
|
|
136
|
-
if (!isExecute) {
|
|
137
|
-
this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
|
|
138
|
-
this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
|
|
139
|
-
}
|
|
140
|
-
else {
|
|
141
|
-
this.$emit('update:' + propKey, eventProp[propKey]);
|
|
142
|
-
this.$emit('modelchanged', eventProp[propKey]);
|
|
143
|
-
}
|
|
142
|
+
if ((this.ej2Instances && this.ej2Instances._trigger)) {
|
|
143
|
+
this.ej2Instances._trigger(eventName, eventProp, successHandler);
|
|
144
144
|
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
this.
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
};
|
|
164
|
-
InPlaceEditorComponent.prototype.save = function () {
|
|
165
|
-
return this.ej2Instances.save();
|
|
166
|
-
};
|
|
167
|
-
InPlaceEditorComponent.prototype.setValue = function () {
|
|
168
|
-
return this.ej2Instances.setValue();
|
|
169
|
-
};
|
|
170
|
-
InPlaceEditorComponent.prototype.validate = function () {
|
|
171
|
-
return this.ej2Instances.validate();
|
|
172
|
-
};
|
|
173
|
-
InPlaceEditorComponent = __decorate([
|
|
174
|
-
EJComponentDecorator({
|
|
175
|
-
props: properties,
|
|
176
|
-
model: {
|
|
177
|
-
event: 'modelchanged'
|
|
178
|
-
}
|
|
179
|
-
}, isExecute)
|
|
180
|
-
,Options({
|
|
181
|
-
props: props,
|
|
182
|
-
watch: watch,
|
|
183
|
-
emits: emitProbs,
|
|
184
|
-
provide: function provide() {
|
|
185
|
-
return {
|
|
186
|
-
custom: this.custom
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
})
|
|
190
|
-
], InPlaceEditorComponent);
|
|
191
|
-
return InPlaceEditorComponent;
|
|
192
|
-
}(ComponentBase));
|
|
193
|
-
export { InPlaceEditorComponent };
|
|
145
|
+
},
|
|
146
|
+
custom: function () {
|
|
147
|
+
this.updated();
|
|
148
|
+
},
|
|
149
|
+
extendModelValue: function (val) {
|
|
150
|
+
return this.ej2Instances.extendModelValue(val);
|
|
151
|
+
},
|
|
152
|
+
save: function () {
|
|
153
|
+
return this.ej2Instances.save();
|
|
154
|
+
},
|
|
155
|
+
setValue: function () {
|
|
156
|
+
return this.ej2Instances.setValue();
|
|
157
|
+
},
|
|
158
|
+
validate: function () {
|
|
159
|
+
return this.ej2Instances.validate();
|
|
160
|
+
},
|
|
161
|
+
}
|
|
162
|
+
});
|
|
194
163
|
export var InPlaceEditorPlugin = {
|
|
195
164
|
name: 'ejs-inplaceeditor',
|
|
196
165
|
install: function (Vue) {
|