v20.1.52 is released

Author: pipeline

components/base/CHANGELOG.md

@@ -8,6 +8,14 @@
 
 #### Bug Fixes
 
+- `#FB9750` - The issue with "Providers are not accessible for Vue component with typescript application environment" has been resolved.
+
+## 20.1.51 (2022-04-26)
+
+### Common
+
+#### Bug Fixes
+
 - `#I334904`, `#I347008` - The issue with "Script error in Vite + Vue application" has been resolved.
 
 ## 20.1.48 (2022-04-12)

components/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-base",
-	"version": "20.1.48",
+	"version": "20.1.51",
 	"description": "A common package of Essential JS 2 base Vue libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/base/src/component-base.ts

@@ -46,6 +46,7 @@
       protected hasChildDirective: boolean = false;
       protected childDirObjects: string = '';
       protected propKeys: any;
+      protected isDecorator: boolean = false;
 
      constructor() {
          super(arguments);
@@ -64,7 +65,10 @@
           let vueInjectables: any = getValue('$parent.$options.provide', this);
           if (this.hasInjectedModules && !isExecute) {
              let prevModule: Object[] = [];
-             if (injectables) {
+             if (injectables && injectables.managed) {
+                this.isDecorator = true;
+                prevModule = this.getInjectedServices() || [];   
+             } else if (injectables) {
                  prevModule = injectables[this.ej2Instances.getModuleName()] || [];
              } else if (vueInjectables) {
                  prevModule = this.getInjectedServices() || [];
@@ -97,7 +101,9 @@
       }
       public getInjectedServices(): Object[] {
          let ret = []; let provide: any;
-         if (this.$vnode) {
+         if (this.$root && this.isDecorator) {
+            provide = getValue('$root.$options.provide', this);
+         } else if (this.$vnode) {
              provide = getValue('$vnode.context.$options.provide', this);
          } else if (this.$parent) {
              provide = getValue('$parent.$options.provide', this);
@@ -106,15 +112,42 @@
              // tslint:disable:no-any
              let injectables: any = provide;
              if (typeof provide === 'function') {
+                if (provide.managed) {
+                    let provideKey: Object = provide.managed;
+                    let provideValue: string[] = Object.keys(provideKey);
+                    let key: string[];
+                    if (this.$root && this.isDecorator) {
+                        key = Object.keys(this.$root);
+                    } else if (this.$vnode) {
+                        key = Object.keys(this.$vnode.context);
+                    } else if (this.$parent) {
+                        key = Object.keys(this.$parent);
+                    }
+                    for (let i: number = 0; i < provideValue.length; i++) {
+                        for (let j: number = 0; j < key.length; j++) {
+                            if ((key[j].indexOf(provideValue[i])) !== -1) {
+                                if (this.$root && this.isDecorator) {
+                                    provideKey[provideValue[j]] = this.$root[key[i]];
+                                } else if (this.$vnode) {
+                                    provideKey[provideValue[i]] = this.$vnode.context[key[j]];
+                                } else if (this.$parent) {
+                                    provideKey[provideValue[i]] = this.$parent[key[j]];
+                                }
+                                injectables = provideKey;
+                            }
+                        }
+                    }  
+                }
                  // tslint:disable:no-any
-                 if (this.$vnode) {
+                 else if (this.$vnode) {
                      injectables = this.$vnode.context.$options.provide();
                  } else if(this.$parent) {
                      injectables = this.$parent.$options.provide();
                  }
              }
              ret = injectables[this.ej2Instances.getModuleName()] || [];
          }
+         this.isDecorator = false;
          return ret; 
       }
       public updated(): void {

components/buttons/CHANGELOG.md

@@ -2,7 +2,15 @@
 
 ## [Unreleased]
 
-## 20.1.51 (2022-04-26)
+## 20.1.52 (2022-05-04)
+
+### Switch
+
+#### Bug Fixes
+
+- `#I362372` - The issue with "Script error occurs while using the reactive method in the switch component in Vue 3" has been resolved.
+
+## 20.1.50 (2022-04-19)
 
 ### Radio Button
 

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-buttons",
-	"version": "20.1.47",
+	"version": "20.1.50",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch. for Vue",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

components/buttons/src/check-box/checkbox.component.ts

@@ -130,6 +130,7 @@ export class CheckBoxComponent extends ComponentBase {
                 if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 } else {
                     if (eventName === 'change' || ((this as any).$props && !(this as any).$props.isLazyUpdate)) {
                         (this as any).$emit('update:'+ propKey, eventProp[propKey]);

components/buttons/src/radio-button/radiobutton.component.ts

@@ -130,6 +130,7 @@ export class RadioButtonComponent extends ComponentBase {
                 if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 } else {
                     if (eventName === 'change' || ((this as any).$props && !(this as any).$props.isLazyUpdate)) {
                         (this as any).$emit('update:'+ propKey, eventProp[propKey]);

components/buttons/src/switch/switch.component.ts

@@ -130,6 +130,7 @@ export class SwitchComponent extends ComponentBase {
                 if (!isExecute) {
                     this.ej2Instances.vueInstance.$emit('update:' + propKey, eventProp[propKey]);
                     this.ej2Instances.vueInstance.$emit('modelchanged', eventProp[propKey]);
+                    this.ej2Instances.vueInstance.$emit('update:modelValue', eventProp[propKey]);
                 } else {
                     if (eventName === 'change' || ((this as any).$props && !(this as any).$props.isLazyUpdate)) {
                         (this as any).$emit('update:'+ propKey, eventProp[propKey]);

components/charts/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 ## [Unreleased]
 
+## 20.1.52 (2022-05-04)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I375071` - Now axis labels is rendering properly with label rotation.
+
+## 20.1.51 (2022-04-26)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I375071` - Now axis labels is rendering properly with label rotation.
+
 ## 20.1.50 (2022-04-19)
 
 ### Chart

components/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-charts",
-	"version": "20.1.50",
+	"version": "20.1.51",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Vue",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",