@syncfusion/ej2-vue-inputs 20.4.52 → 21.1.35

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.
Files changed (67) hide show
  1. package/CHANGELOG.md +0 -29
  2. package/README.md +184 -112
  3. package/dist/ej2-vue-inputs.umd.min.js +2 -2
  4. package/dist/ej2-vue-inputs.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-vue-inputs.es2015.js +933 -1148
  6. package/dist/es6/ej2-vue-inputs.es2015.js.map +1 -1
  7. package/dist/es6/ej2-vue-inputs.es5.js +1033 -1300
  8. package/dist/es6/ej2-vue-inputs.es5.js.map +1 -1
  9. package/dist/global/ej2-vue-inputs.min.js +2 -2
  10. package/package.json +9 -9
  11. package/src/color-picker/colorpicker.component.d.ts +3 -28
  12. package/src/color-picker/colorpicker.component.js +128 -159
  13. package/src/maskedtextbox/maskedtextbox.component.d.ts +3 -28
  14. package/src/maskedtextbox/maskedtextbox.component.js +128 -159
  15. package/src/numerictextbox/numerictextbox.component.d.ts +3 -30
  16. package/src/numerictextbox/numerictextbox.component.js +134 -165
  17. package/src/rating/rating.component.d.ts +3 -26
  18. package/src/rating/rating.component.js +122 -153
  19. package/src/signature/signature.component.d.ts +3 -34
  20. package/src/signature/signature.component.js +119 -148
  21. package/src/slider/slider.component.d.ts +3 -27
  22. package/src/slider/slider.component.js +125 -156
  23. package/src/textbox/textbox.component.d.ts +3 -30
  24. package/src/textbox/textbox.component.js +134 -165
  25. package/src/uploader/files.directive.d.ts +2 -12
  26. package/src/uploader/files.directive.js +22 -71
  27. package/src/uploader/uploader.component.d.ts +3 -34
  28. package/src/uploader/uploader.component.js +119 -148
  29. package/styles/bootstrap-dark.css +6 -0
  30. package/styles/bootstrap.css +6 -0
  31. package/styles/bootstrap4.css +6 -0
  32. package/styles/bootstrap5-dark.css +10 -4
  33. package/styles/bootstrap5.css +10 -4
  34. package/styles/color-picker/bootstrap-dark.css +6 -0
  35. package/styles/color-picker/bootstrap.css +6 -0
  36. package/styles/color-picker/bootstrap4.css +6 -0
  37. package/styles/color-picker/bootstrap5-dark.css +6 -0
  38. package/styles/color-picker/bootstrap5.css +6 -0
  39. package/styles/color-picker/fabric-dark.css +6 -0
  40. package/styles/color-picker/fabric.css +6 -0
  41. package/styles/color-picker/fluent-dark.css +6 -0
  42. package/styles/color-picker/fluent.css +6 -0
  43. package/styles/color-picker/highcontrast-light.css +6 -0
  44. package/styles/color-picker/highcontrast.css +6 -0
  45. package/styles/color-picker/material-dark.css +6 -0
  46. package/styles/color-picker/material.css +6 -0
  47. package/styles/color-picker/tailwind-dark.css +6 -0
  48. package/styles/color-picker/tailwind.css +6 -0
  49. package/styles/fabric-dark.css +6 -0
  50. package/styles/fabric.css +6 -0
  51. package/styles/fluent-dark.css +6 -0
  52. package/styles/fluent.css +6 -0
  53. package/styles/highcontrast-light.css +6 -0
  54. package/styles/highcontrast.css +6 -0
  55. package/styles/input/material-dark.css +1 -1
  56. package/styles/input/material.css +1 -1
  57. package/styles/material-dark.css +7 -5
  58. package/styles/material.css +7 -1
  59. package/styles/rating/tailwind-dark.css +1 -1
  60. package/styles/rating/tailwind.css +1 -1
  61. package/styles/tailwind-dark.css +8 -2
  62. package/styles/tailwind.css +8 -2
  63. package/styles/uploader/bootstrap5-dark.css +4 -4
  64. package/styles/uploader/bootstrap5.css +4 -4
  65. package/styles/uploader/material-dark.css +0 -4
  66. package/styles/uploader/tailwind-dark.css +1 -1
  67. package/styles/uploader/tailwind.css +1 -1
@@ -1,33 +1,11 @@
1
- var __extends = (this && this.__extends) || (function () {
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 { MaskedTextBox } from '@syncfusion/ej2-inputs';
24
- import { Options } from 'vue-class-component';
25
5
  export var properties = ['isLazyUpdate', 'plugins', 'cssClass', 'customCharacters', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'htmlAttributes', 'locale', 'mask', 'placeholder', 'promptChar', 'readonly', 'showClearButton', 'value', 'width', 'blur', 'change', 'created', 'destroyed', 'focus'];
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,155 +17,146 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
39
17
  * <ejs-maskedtextbox v-bind:value='value'></ejs-maskedtextbox>
40
18
  * ```
41
19
  */
42
- var MaskedTextBoxComponent = /** @class */ (function (_super) {
43
- __extends(MaskedTextBoxComponent, _super);
44
- function MaskedTextBoxComponent() {
45
- var _this = _super.call(this, arguments) || this;
46
- _this.propKeys = properties;
47
- _this.models = modelProps;
48
- _this.hasChildDirective = false;
49
- _this.hasInjectedModules = false;
50
- _this.tagMapper = {};
51
- _this.tagNameMapper = {};
52
- _this.isVue3 = !isExecute;
53
- _this.ej2Instances = new MaskedTextBox({});
54
- _this.ej2Instances._trigger = _this.ej2Instances.trigger;
55
- _this.ej2Instances.trigger = _this.trigger;
56
- _this.bindProperties();
57
- _this.ej2Instances._setProperties = _this.ej2Instances.setProperties;
58
- _this.ej2Instances.setProperties = _this.setProperties;
59
- _this.ej2Instances.clearTemplate = _this.clearTemplate;
60
- _this.updated = _this.updated;
61
- return _this;
62
- }
63
- MaskedTextBoxComponent.prototype.clearTemplate = function (templateNames) {
64
- if (!templateNames) {
65
- templateNames = Object.keys(this.templateCollection || {});
20
+ export var MaskedTextBoxComponent = vueDefineComponent({
21
+ name: 'MaskedTextBoxComponent',
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 MaskedTextBox({}),
31
+ propKeys: properties,
32
+ models: modelProps,
33
+ hasChildDirective: false,
34
+ hasInjectedModules: false,
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
- if (templateNames.length && this.templateCollection) {
68
- for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {
69
- var tempName = templateNames_1[_i];
70
- var elementCollection = this.templateCollection[tempName];
71
- if (elementCollection && elementCollection.length) {
72
- for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {
73
- var ele = elementCollection_1[_a];
74
- var destroy = getValue('__vue__.$destroy', ele);
75
- if (destroy) {
76
- ele.__vue__.$destroy();
77
- }
78
- if (ele.innerHTML) {
79
- ele.innerHTML = '';
56
+ return h('input', 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
- MaskedTextBoxComponent.prototype.setProperties = function (prop, muteOnChange) {
88
- var _this = this;
89
- if (this.isVue3) {
90
- this.models = !this.models ? this.ej2Instances.referModels : this.models;
91
- }
92
- if (this.ej2Instances && this.ej2Instances._setProperties) {
93
- this.ej2Instances._setProperties(prop, muteOnChange);
94
- }
95
- if (prop && this.models && this.models.length) {
96
- Object.keys(prop).map(function (key) {
97
- _this.models.map(function (model) {
98
- if ((key === model) && !(/datasource/i.test(key))) {
99
- if (_this.isVue3) {
100
- _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);
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
- else {
103
- _this.$emit('update:' + key, prop[key]);
104
- _this.$emit('modelchanged', prop[key]);
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
- MaskedTextBoxComponent.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
- else {
125
- if (eventName === 'change' || (this.$props && !this.$props.isLazyUpdate)) {
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
- else if ((eventName === 'actionBegin' && eventProp.requestType === 'dateNavigate') && this.models && (this.models.length !== 0)) {
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
- if ((this.ej2Instances && this.ej2Instances._trigger)) {
147
- this.ej2Instances._trigger(eventName, eventProp, successHandler);
148
- }
149
- };
150
- MaskedTextBoxComponent.prototype.render = function (createElement) {
151
- var h = !isExecute ? gh : createElement;
152
- var slots = null;
153
- if (!isNullOrUndefined(this.$slots.default)) {
154
- slots = !isExecute ? this.$slots.default() : this.$slots.default;
155
- }
156
- return h('input', slots);
157
- };
158
- MaskedTextBoxComponent.prototype.custom = function () {
159
- this.updated();
160
- };
161
- MaskedTextBoxComponent.prototype.focusIn = function () {
162
- return this.ej2Instances.focusIn();
163
- };
164
- MaskedTextBoxComponent.prototype.focusOut = function () {
165
- return this.ej2Instances.focusOut();
166
- };
167
- MaskedTextBoxComponent.prototype.getMaskedValue = function () {
168
- return this.ej2Instances.getMaskedValue();
169
- };
170
- MaskedTextBoxComponent = __decorate([
171
- EJComponentDecorator({
172
- props: properties,
173
- model: {
174
- event: 'modelchanged'
175
- }
176
- }, isExecute)
177
- ,Options({
178
- props: props,
179
- watch: watch,
180
- emits: emitProbs,
181
- provide: function provide() {
182
- return {
183
- custom: this.custom
184
- };
185
- }
186
- })
187
- ], MaskedTextBoxComponent);
188
- return MaskedTextBoxComponent;
189
- }(ComponentBase));
190
- export { MaskedTextBoxComponent };
145
+ },
146
+ custom: function () {
147
+ this.updated();
148
+ },
149
+ focusIn: function () {
150
+ return this.ej2Instances.focusIn();
151
+ },
152
+ focusOut: function () {
153
+ return this.ej2Instances.focusOut();
154
+ },
155
+ getMaskedValue: function () {
156
+ return this.ej2Instances.getMaskedValue();
157
+ },
158
+ }
159
+ });
191
160
  export var MaskedTextBoxPlugin = {
192
161
  name: 'ejs-maskedtextbox',
193
162
  install: function (Vue) {
@@ -1,42 +1,15 @@
1
- import { ComponentBase } from '@syncfusion/ej2-vue-base';
2
1
  export declare const properties: string[];
3
2
  export declare const modelProps: string[];
4
3
  export declare const testProp: any;
5
- export declare const props: any;
6
- export declare const watch: any;
7
- export declare const emitProbs: any;
4
+ export declare const props: any, watch: any, emitProbs: any;
8
5
  /**
9
6
  * Represents the Essential JS 2 VueJS NumericTextBox Component
10
7
  * ```html
11
8
  * <ejs-numerictextbox v-bind:value='value'></ejs-numerictextbox>
12
9
  * ```
13
10
  */
14
- export declare class NumericTextBoxComponent extends ComponentBase {
15
- ej2Instances: any;
16
- propKeys: string[];
17
- models: string[];
18
- hasChildDirective: boolean;
19
- protected hasInjectedModules: boolean;
20
- tagMapper: {
21
- [key: string]: Object;
22
- };
23
- tagNameMapper: Object;
24
- isVue3: boolean;
25
- templateCollection: any;
26
- constructor();
27
- clearTemplate(templateNames?: string[]): any;
28
- setProperties(prop: any, muteOnChange: boolean): void;
29
- trigger(eventName: string, eventProp: {
30
- [key: string]: Object;
31
- }, successHandler?: Function): void;
32
- render(createElement: any): any;
33
- custom(): void;
34
- decrement(step: number): void;
35
- focusIn(): void;
36
- focusOut(): void;
37
- getText(): string;
38
- increment(step: number): void;
39
- }
11
+ export declare let NumericTextBoxComponent: any;
12
+ export declare type NumericTextBoxComponent = InstanceType<typeof NumericTextBoxComponent>;
40
13
  export declare const NumericTextBoxPlugin: {
41
14
  name: string;
42
15
  install(Vue: any): void;