v22.2.5 is released

Author: pipeline

components/base/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 ## [Unreleased]
 
+## 22.2.5 (2023-07-27)
+
+### Common
+
+#### Bug Fixes
+
+- `#I460439` - The issue with "the Vue components create multiple app instances when using templates" has been resolved.
+
+## 22.1.34 (2023-06-21)
+
+### Common
+
+#### New Features
+
+- Provided the TypeScript 5 compatible support for the Vue components.
+
+## 21.2.9 (2023-06-06)
+
+### Common
+
+#### Bug Fixes
+
+- `#I457123` - The issue with "Unable to render Grid component using v-for and a slot template in Vue 3" has been resolved.
+- `#I468694` - The issue with "Unable to access the global directives in Vue 3 slot templates" has been resolved.
+
+## 21.2.6 (2023-05-23)
+
+### Common
+
+#### Bug Fixes
+
+- `#I453141` - The issue with "Unable to access the template data inside the external template while using Composition API" has been resolved.
+
 ## 21.1.41 (2023-04-18)
 
 ### Common

components/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-base",
-	"version": "21.2.3",
+	"version": "19.3.53",
 	"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

@@ -78,18 +78,7 @@ export let ComponentBase = vueDefineComponent({
         this.ej2Instances.appendTo(this.$el);
     },
     updated(): void {
-        if (this.isVue3) {
-            this.setModelValue();
-        }
-        if (this.hasChildDirective) {
-            let childKey: Object = {};
-            this.fetchChildPropValues(childKey);
-            let curChildDir: string = JSON.stringify(childKey);
-            if (this.childDirObjects !== curChildDir) {
-                this.childDirObjects = curChildDir;
-                this.assignValueToWrapper(childKey, false);
-            }
-        }
+        this.updated();
     },
     beforeDestroy(): void {
         this.destroyComponent();
@@ -257,6 +246,7 @@ export let ComponentBase = vueDefineComponent({
             let slot: any = [];
             let innerDirValues: any;
             slot = slots.default ? slots.default() : slots;
+            slot = slot.flatMap((item: any) => Array.isArray(item.children) ? item.children : item);
             let items: any = {};
             items[`${tagName}`] = [];
             for (const childSlot of slot) {

components/base/src/template.ts

@@ -20,23 +20,19 @@ export function compile(
         innerHTML: '<div id="' + id + '"></div>',
       });
       document.body.appendChild(ele);
-      if (!isExecute && typeof templateElement === "string") {
+      if (!isExecute && (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function'))) {
         let vueSlot: any = getCurrentVueSlot(context.vueInstance, templateElement, root);
         if (vueSlot) {
           // Compilation for Vue 3 slot template
-          let app: any = Vue.createApp({
+          let app: any = Vue.createVNode({
             render () {
               return vueSlot[`${templateElement}`]({ data: data });
             }
-          });
-          if (plugins) {
-            for (let i: number = 0; i < plugins.length; i++) {
-              app.use(plugins[parseInt(i.toString(), 10)]);
-            }
-          }
+          }, plugins);
+          ele.innerHTML = '';
           // Get values for Vue 3 slot template
           getValues(app, context.vueInstance, root);
-          app.mount("#" + pid);
+          Vue.render(app, ele);
           returnEle = ele.childNodes;
           detach(ele);
         } else {
@@ -68,9 +64,18 @@ export function compile(
         }
         let tempRef: any;
         if (propsData) {
-          tempRef = (<any>Object).assign(templateCompRef.data(), propsData);
-        } else {
-          tempRef = (<any>Object).assign(templateCompRef.data(), dataObj.data);
+          if (templateCompRef.setup) {
+            tempRef = (<any>Object).assign(templateCompRef.setup(null, { expose: function () {}}), propsData);
+          } else {
+            tempRef = (<any>Object).assign(templateCompRef.data(), propsData);
+          }
+        }
+        else {
+          if (templateCompRef.setup) {
+            tempRef = (<any>Object).assign(templateCompRef.setup(null, { expose: function () {}}), dataObj.data);
+          } else {
+            tempRef = (<any>Object).assign(templateCompRef.data(), dataObj.data);
+          }
           if (templateCompRef.components) {
             let objkeys: any = Object.keys(templateCompRef.components) || [];
             for (let objstring of objkeys) {
@@ -82,19 +87,23 @@ export function compile(
             }
           }
         }
-        templateCompRef.data = function () { return tempRef; };
-        let app: any = Vue.createApp(templateCompRef);
-        if (plugins) {
-          for (let i: number = 0; i < plugins.length; i++) {
-            app.use(plugins[parseInt(i.toString(), 10)]);
+        if (templateCompRef.setup) {
+          templateCompRef.setup = function (__props: any, { expose: __expose }: any) {
+            __expose();
+            const __returned__ = tempRef;
+            Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+            return __returned__;
           }
         }
+        templateCompRef.data = function () { return tempRef; };
+        let app: any = Vue.createVNode(templateCompRef, plugins);
+        ele.innerHTML = '';
         // Get values for Vue 3 functional template
         getValues(app, context.vueInstance, root);
-        app.mount("#" + pid);
+        Vue.render(app, ele);
         returnEle = ele.childNodes;
         detach(ele);
-      } else if (typeof templateElement === "string") {
+      } else if (typeof templateElement === "string" || (templateElement.prototype && templateElement.prototype.CSPTemplate && typeof templateElement === 'function')) {
         let vueSlot: any = getVueSlot(context.vueInstance, templateElement, root);
         if (vueSlot) {
           // Get provide values for Vue 2 slot template
@@ -140,6 +149,12 @@ export function compile(
         if (typeof templateFunction !== "function") {
           templateFunction = Vue.extend(templateFunction);
         }
+        if (templateFunction.options.setup) {
+          var variables: any = (<any>Object).assign(templateFunction.options.setup(), dataObj.data);
+          templateFunction.options.setup = function(__props: any) {
+            return variables;
+          };
+        }
         let templateVue: any = new templateFunction(dataObj);
         // let templateVue = new Vue(tempObj.template);
         // templateVue.$data.data = extend(tempObj.data, data);
@@ -173,13 +188,7 @@ function getValues(app: any, cInstance: any, root: any): any {
     return;
   }
   // Get globally defined variables.
-  let globalVariables: string[] = ['components', 'mixins', 'provides'];
-  for (let i: number = 0; i < globalVariables.length; i++) {
-    let gVariable: string = globalVariables[i];
-    if (app['_context'][gVariable] && vueInstance['$']['appContext'][gVariable]) {
-      app['_context'][gVariable] = vueInstance['$']['appContext'][gVariable];
-    }
-  }
+  app['appContext'] = vueInstance['$']['appContext'];
   // Get provide value from child component.
   let provided: any = {};
   let getProvideValue: any = (vueinstance: any) => {
@@ -189,12 +198,8 @@ function getValues(app: any, cInstance: any, root: any): any {
     }
   };
   getProvideValue(vueInstance);
-  if (app['_context']['provides']) {
-    app._context.provides = {...app._context.provides, ...provided};
-  }
-  // Get globally defined properties.
-  if (app['_context']['config']['globalProperties'] && vueInstance['$']['appContext']['config']['globalProperties']) {
-    app['_context']['config']['globalProperties'] = vueInstance['$']['appContext']['config']['globalProperties'];
+  if (app['appContext']['provides']) {
+    app.appContext.provides = {...app.appContext.provides, ...provided};
   }
 }
 
@@ -258,6 +263,7 @@ function getChildVueSlot(slots: any, templateElement: any): any {
     return slots;
   } else if (slots && slots.default) {
     let childSlots: any = slots.default();
+    childSlots = childSlots.flatMap((item: any) => Array.isArray(item.children) ? item.children : item);
     for (let i: number = 0; i < childSlots.length; i++) {
       let slot: any = getChildVueSlot(childSlots[parseInt(i.toString(), 10)].children, templateElement);
       if (slot) {

components/buttons/CHANGELOG.md

@@ -2,49 +2,73 @@
 
 ## [Unreleased]
 
-## 21.2.3 (2023-05-03)
+## 22.2.5 (2023-07-27)
 
-### Switch
+### Checkbox
 
 #### Bug Fixes
 
-- `#I456259` - provided the `role` attribute support to `htmlAttributes` property of switch component.
+- `#I483250` - The issue with "CheckBox not working in IE 11" has been resolved.
 
-## 21.1.37 (2023-03-29)
+## 22.1.39 (2023-07-18)
+
+### Speed Dial
+
+#### Bug Fixes
+
+- `#I478092` - Enhanced the component's functionality, by introducing the `isPrimary` property to specify whether it is a primary button or not.
+
+## 22.1.38 (2023-07-11)
+
+### Switch
+
+#### Bug Fixes
+
+- `#I478637` - The issue with "Change event trigger twice for key down action of switch component" has been resolved.
 
 ### Checkbox
 
+- Resolved checkbox wrapper width issue.
+
+## 21.2.10 (2023-06-13)
+
+### RadioButton
+
 #### Bug Fixes
 
-- `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
+- `#F182133` - The issue with "Correcting Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
 
-### Chip
+## 21.2.6 (2023-05-23)
 
-#### New Features
+### RadioButton
 
-- `#I422263` - The Chip component now supports htmlAttributes, which enables users to add required attributes such as 'aria-label', 'title', 'class', and more to the Chip item.
+#### Bug Fixes
 
-### Floating Action Button `Preview`
+- `#I463728` - The issue with "Provide the boolean value support for radio button while using the v-model property in VUE platform" has been resolved.
 
-The Floating Action Button (FAB) component performs the primary action that appears in front of all screen contents. It can be positioned in relation to a page or a target container.
+## 21.2.5 (2023-05-16)
 
+### RadioButton
 
-- **Rendering** - The FAB component can be rendered as Icon only, Icon with Label, Label only, or in a disabled state.
-- **Positioning** - Supports to place various built-in positions on the target element.
-- **Styles** - The appearance of the FAB can be customized using predefined styles.
-- **Accessibility** - The FAB provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
+#### Bug Fixes
 
-### Speed Dial `Preview`
+- `#F182133` - The issue with "Ripple element is not destroyed properly while clicking on radio button component" has been resolved.
 
-The Speed Dial component is an extension of the floating action button that displays a list of action buttons when clicked. It is useful when there is more than one primary action for the page.
+## 21.2.3 (2023-05-03)
 
+### Switch
 
-- **Rendering** - The Speed Dial component can be rendered in two display modes: Linear and Radial.
-- **Positioning** - Supports to place various built-in positions on the target element.
-- **Styles** - The appearance of the Speed Dial can be customized using predefined styles.
-- **Template Support** - The Speed Dial component action items and popup container can also be rendered with custom templates.
-- **Modal Support** - Supports showing a modal overlay behind the Speed Dial.
-- **Accessibility** - The Speed Dial provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
+#### Bug Fixes
+
+- `#I456259` - provided the `role` attribute support to `htmlAttributes` property of switch component.
+
+## 21.1.37 (2023-03-29)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#I436942` - The issue with "Validation rule not display properly when we use Checkbox within form validator" has been resolved.
 
 ## 21.1.35 (2023-03-23)
 
@@ -517,6 +541,14 @@ RadioButton is a graphical user interface element that allows to select one opti
 - **Sizes** - Provided with different sizes of RadioButton.
 
 
+## 21.1.36 (2023-06-28)
+
+### Chip
+
+#### New Features
+
+- `#I422263` - Provided the htmlAttributes support for the Chip component.
+
 ## 18.4.39 (2021-01-28)
 
 ### RadioButton

components/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-buttons",
-	"version": "21.1.37",
+	"version": "22.1.39",
 	"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/button/button.component.ts

@@ -27,7 +27,7 @@ export let ButtonComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new Button({}) as any,
+            ej2Instance: new Button({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: false as boolean,

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

@@ -29,7 +29,7 @@ export let CheckBoxComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new CheckBox({}) as any,
+            ej2Instance: new CheckBox({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: false as boolean,

components/buttons/src/chips/chiplist.component.ts

@@ -28,7 +28,7 @@ export let ChipListComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new ChipList({}) as any,
+            ej2Instance: new ChipList({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: true as boolean,

components/buttons/src/floating-action-button/fab.component.ts

@@ -27,7 +27,7 @@ export let FabComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new Fab({}) as any,
+            ej2Instance: new Fab({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: false as boolean,

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

@@ -29,7 +29,7 @@ export let RadioButtonComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new RadioButton({}) as any,
+            ej2Instance: new RadioButton({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: false as boolean,

components/buttons/src/speed-dial/speeddial.component.ts

@@ -6,7 +6,7 @@ import { SpeedDial } from '@syncfusion/ej2-buttons';
 import { SpeedDialItemsDirective, SpeedDialItemDirective, SpeedDialItemsPlugin, SpeedDialItemPlugin } from './items.directive'
 
 
-export const properties: string[] = ['isLazyUpdate', 'plugins', 'animation', 'closeIconCss', 'content', 'cssClass', 'direction', 'disabled', 'enablePersistence', 'enableRtl', 'iconPosition', 'itemTemplate', 'items', 'locale', 'modal', 'mode', 'openIconCss', 'opensOnHover', 'popupTemplate', 'position', 'radialSettings', 'target', 'visible', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'clicked', 'created', 'onClose', 'onOpen'];
+export const properties: string[] = ['isLazyUpdate', 'plugins', 'animation', 'closeIconCss', 'content', 'cssClass', 'direction', 'disabled', 'enablePersistence', 'enableRtl', 'iconPosition', 'isPrimary', 'itemTemplate', 'items', 'locale', 'modal', 'mode', 'openIconCss', 'opensOnHover', 'popupTemplate', 'position', 'radialSettings', 'target', 'visible', 'beforeClose', 'beforeItemRender', 'beforeOpen', 'clicked', 'created', 'onClose', 'onOpen'];
 export const modelProps: string[] = ['visible'];
 
 export const testProp: any = getProps({props: properties});
@@ -30,7 +30,7 @@ export let SpeedDialComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new SpeedDial({}) as any,
+            ej2Instance: new SpeedDial({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: true as boolean,

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

@@ -29,7 +29,7 @@ export let SwitchComponent =  vueDefineComponent({
     provide() { return { custom: this.custom } },
     data() {
         return {
-            ej2Instances: new Switch({}) as any,
+            ej2Instance: new Switch({}) as any,
             propKeys: properties as string[],
             models: modelProps as string[],
             hasChildDirective: false as boolean,