@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,39 +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 VueJS Slider Component.
10
7
  * ```html
11
8
  * <ejs-slider :value='value'></ejs-slider>
12
9
  * ```
13
10
  */
14
- export declare class SliderComponent 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
- reposition(): void;
35
- setTooltip(args?: string): void;
36
- }
11
+ export declare let SliderComponent: any;
12
+ export declare type SliderComponent = InstanceType<typeof SliderComponent>;
37
13
  export declare const SliderPlugin: {
38
14
  name: string;
39
15
  install(Vue: any): void;
@@ -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 { Slider } from '@syncfusion/ej2-inputs';
24
- import { Options } from 'vue-class-component';
25
5
  export var properties = ['isLazyUpdate', 'plugins', 'colorRange', 'cssClass', 'customValues', 'enableAnimation', 'enableHtmlSanitizer', 'enablePersistence', 'enableRtl', 'enabled', 'limits', 'locale', 'max', 'min', 'orientation', 'readonly', 'showButtons', 'step', 'ticks', 'tooltip', 'type', 'value', 'width', 'change', 'changed', 'created', 'renderedTicks', 'renderingTicks', 'tooltipChange'];
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,152 +17,143 @@ for (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {
39
17
  * <ejs-slider :value='value'></ejs-slider>
40
18
  * ```
41
19
  */
42
- var SliderComponent = /** @class */ (function (_super) {
43
- __extends(SliderComponent, _super);
44
- function SliderComponent() {
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 Slider({});
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
- SliderComponent.prototype.clearTemplate = function (templateNames) {
64
- if (!templateNames) {
65
- templateNames = Object.keys(this.templateCollection || {});
20
+ export var SliderComponent = vueDefineComponent({
21
+ name: 'SliderComponent',
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 Slider({}),
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('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
- SliderComponent.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
- SliderComponent.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
- SliderComponent.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('div', slots);
157
- };
158
- SliderComponent.prototype.custom = function () {
159
- this.updated();
160
- };
161
- SliderComponent.prototype.reposition = function () {
162
- return this.ej2Instances.reposition();
163
- };
164
- SliderComponent.prototype.setTooltip = function (args) {
165
- return this.ej2Instances.setTooltip(args);
166
- };
167
- SliderComponent = __decorate([
168
- EJComponentDecorator({
169
- props: properties,
170
- model: {
171
- event: 'modelchanged'
172
- }
173
- }, isExecute)
174
- ,Options({
175
- props: props,
176
- watch: watch,
177
- emits: emitProbs,
178
- provide: function provide() {
179
- return {
180
- custom: this.custom
181
- };
182
- }
183
- })
184
- ], SliderComponent);
185
- return SliderComponent;
186
- }(ComponentBase));
187
- export { SliderComponent };
145
+ },
146
+ custom: function () {
147
+ this.updated();
148
+ },
149
+ reposition: function () {
150
+ return this.ej2Instances.reposition();
151
+ },
152
+ setTooltip: function (args) {
153
+ return this.ej2Instances.setTooltip(args);
154
+ },
155
+ }
156
+ });
188
157
  export var SliderPlugin = {
189
158
  name: 'ejs-slider',
190
159
  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 TextBox Component
10
7
  * ```html
11
8
  * <ejs-textbox v-bind:value='value'></ejs-textbox>
12
9
  * ```
13
10
  */
14
- export declare class TextBoxComponent 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
- addAttributes(attributes: undefined): void;
35
- addIcon(position: string, icons: string | string[]): void;
36
- focusIn(): void;
37
- focusOut(): void;
38
- removeAttributes(attributes: string[]): void;
39
- }
11
+ export declare let TextBoxComponent: any;
12
+ export declare type TextBoxComponent = InstanceType<typeof TextBoxComponent>;
40
13
  export declare const TextBoxPlugin: {
41
14
  name: string;
42
15
  install(Vue: any): void;