v22.1.39 is released

Author: pipeline

components/base/CHANGELOG.md

@@ -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/package.json

@@ -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/component-base.ts

@@ -20,7 +20,7 @@ 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
@@ -68,9 +68,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,6 +91,14 @@ export function compile(
             }
           }
         }
+        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.createApp(templateCompRef);
         if (plugins) {
@@ -94,7 +111,7 @@ export function compile(
         app.mount("#" + pid);
         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 +157,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,7 +196,7 @@ function getValues(app: any, cInstance: any, root: any): any {
     return;
   }
   // Get globally defined variables.
-  let globalVariables: string[] = ['components', 'mixins', 'provides'];
+  let globalVariables: string[] = ['components', 'mixins', 'provides', 'directives'];
   for (let i: number = 0; i < globalVariables.length; i++) {
     let gVariable: string = globalVariables[i];
     if (app['_context'][gVariable] && vueInstance['$']['appContext'][gVariable]) {
@@ -258,6 +281,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/base/src/template.ts

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-vue-buttons",
-	"version": "21.1.37",
+	"version": "22.1.38",
 	"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/CHANGELOG.md

@@ -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/package.json

@@ -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/button/button.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/check-box/checkbox.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/chips/chiplist.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/floating-action-button/fab.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/radio-button/radiobutton.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,

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

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/button/material3-dark.scss';

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

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/button/material3.scss';

components/buttons/styles/button/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3-dark.scss';

components/buttons/styles/button/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/check-box/material3.scss';

components/buttons/styles/check-box/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/chips/material3-dark.scss';

components/buttons/styles/check-box/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/chips/material3.scss';

components/buttons/styles/chips/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/floating-action-button/material3-dark.scss';

components/buttons/styles/chips/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/floating-action-button/material3.scss';

components/buttons/styles/floating-action-button/material3-dark.scss

@@ -0,0 +1,8 @@
+
+@import 'button/material3-dark.scss';
+@import 'check-box/material3-dark.scss';
+@import 'radio-button/material3-dark.scss';
+@import 'switch/material3-dark.scss';
+@import 'chips/material3-dark.scss';
+@import 'floating-action-button/material3-dark.scss';
+@import 'speed-dial/material3-dark.scss';

components/buttons/styles/floating-action-button/material3.scss

@@ -0,0 +1,8 @@
+
+@import 'button/material3.scss';
+@import 'check-box/material3.scss';
+@import 'radio-button/material3.scss';
+@import 'switch/material3.scss';
+@import 'chips/material3.scss';
+@import 'floating-action-button/material3.scss';
+@import 'speed-dial/material3.scss';

components/buttons/styles/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3-dark.scss';

components/buttons/styles/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/radio-button/material3.scss';

components/buttons/styles/radio-button/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/speed-dial/material3-dark.scss';

components/buttons/styles/radio-button/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/speed-dial/material3.scss';

components/buttons/styles/speed-dial/material3-dark.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-dark-definition.scss';
+@import 'ej2-buttons/styles/switch/material3-dark.scss';

components/buttons/styles/speed-dial/material3.scss

@@ -0,0 +1,2 @@
+@import 'ej2-base/styles/material3-definition.scss';
+@import 'ej2-buttons/styles/switch/material3.scss';