@syncfusion/ej2-vue-inputs 20.4.54 → 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 -37
  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 { NumericTextBox } from '@syncfusion/ej2-inputs';
24
- import { Options } from 'vue-class-component';
25
5
  export var properties = ['isLazyUpdate', 'plugins', 'cssClass', 'currency', 'currencyCode', 'decimals', 'enablePersistence', 'enableRtl', 'enabled', 'floatLabelType', 'format', 'htmlAttributes', 'locale', 'max', 'min', 'placeholder', 'readonly', 'showClearButton', 'showSpinButton', 'step', 'strictMode', 'validateDecimalOnType', '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,161 +17,152 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
39
17
  * <ejs-numerictextbox v-bind:value='value'></ejs-numerictextbox>
40
18
  * ```
41
19
  */
42
- var NumericTextBoxComponent = /** @class */ (function (_super) {
43
- __extends(NumericTextBoxComponent, _super);
44
- function NumericTextBoxComponent() {
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 NumericTextBox({});
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
- NumericTextBoxComponent.prototype.clearTemplate = function (templateNames) {
64
- if (!templateNames) {
65
- templateNames = Object.keys(this.templateCollection || {});
20
+ export var NumericTextBoxComponent = vueDefineComponent({
21
+ name: 'NumericTextBoxComponent',
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 NumericTextBox({}),
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
- NumericTextBoxComponent.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
- NumericTextBoxComponent.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
- NumericTextBoxComponent.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
- NumericTextBoxComponent.prototype.custom = function () {
159
- this.updated();
160
- };
161
- NumericTextBoxComponent.prototype.decrement = function (step) {
162
- return this.ej2Instances.decrement(step);
163
- };
164
- NumericTextBoxComponent.prototype.focusIn = function () {
165
- return this.ej2Instances.focusIn();
166
- };
167
- NumericTextBoxComponent.prototype.focusOut = function () {
168
- return this.ej2Instances.focusOut();
169
- };
170
- NumericTextBoxComponent.prototype.getText = function () {
171
- return this.ej2Instances.getText();
172
- };
173
- NumericTextBoxComponent.prototype.increment = function (step) {
174
- return this.ej2Instances.increment(step);
175
- };
176
- NumericTextBoxComponent = __decorate([
177
- EJComponentDecorator({
178
- props: properties,
179
- model: {
180
- event: 'modelchanged'
181
- }
182
- }, isExecute)
183
- ,Options({
184
- props: props,
185
- watch: watch,
186
- emits: emitProbs,
187
- provide: function provide() {
188
- return {
189
- custom: this.custom
190
- };
191
- }
192
- })
193
- ], NumericTextBoxComponent);
194
- return NumericTextBoxComponent;
195
- }(ComponentBase));
196
- export { NumericTextBoxComponent };
145
+ },
146
+ custom: function () {
147
+ this.updated();
148
+ },
149
+ decrement: function (step) {
150
+ return this.ej2Instances.decrement(step);
151
+ },
152
+ focusIn: function () {
153
+ return this.ej2Instances.focusIn();
154
+ },
155
+ focusOut: function () {
156
+ return this.ej2Instances.focusOut();
157
+ },
158
+ getText: function () {
159
+ return this.ej2Instances.getText();
160
+ },
161
+ increment: function (step) {
162
+ return this.ej2Instances.increment(step);
163
+ },
164
+ }
165
+ });
197
166
  export var NumericTextBoxPlugin = {
198
167
  name: 'ejs-numerictextbox',
199
168
  install: function (Vue) {
@@ -1,38 +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 Rating Component
10
7
  * ```html
11
8
  * <ejs-rating v-bind:value='value'></ejs-rating>
12
9
  * ```
13
10
  */
14
- export declare class RatingComponent 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
- reset(): void;
35
- }
11
+ export declare let RatingComponent: any;
12
+ export declare type RatingComponent = InstanceType<typeof RatingComponent>;
36
13
  export declare const RatingPlugin: {
37
14
  name: string;
38
15
  install(Vue: any): void;