@omnia/velcron 8.0.90-vnext → 8.0.91-vnext

package/models/VelcronDefinitions.d.ts

@@ -7,7 +7,7 @@ import { useVelcronBlueprintStore } from "../stores/VelcronBlueprint";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
-    customComponent: boolean;
+    customComponent?: boolean;
 }
 export interface BuiltInComponentRenderers {
     "view": unknown;
@@ -23,6 +23,7 @@ export interface BuiltInComponentRenderers {
     "icon": unknown;
     "chip": unknown;
     "markdown": unknown;
+    "slot": unknown;
 }
 export interface ColorSchemaReference {
     name: string;
@@ -215,7 +216,7 @@ export interface VelcronTextDefinition extends VelcronDefinitionWithEditMode, Ve
 }
 export declare enum VelcronImageRatios {
     square = "square",
-    landscape = "landscapre"
+    landscape = "landscape"
 }
 export interface VelcronImageDefinition extends VelcronDefinition {
     type: "image";
@@ -279,6 +280,11 @@ export interface VelcronChipDefinition extends VelcronDefinition {
     disabled?: boolean;
     events?: VelcronOnPressEvent;
 }
+export interface VelcronSlotDefinition extends VelcronDefinition {
+    type: "slot";
+    bind: string;
+    value: VelcroncomponentArrayType;
+}
 export type VelcronCustomComponentDefinition = VelcronComponentDefinition;
 export type VelcronRenderProps<TDefinition> = {
     definition: TDefinition;

package/models/VelcronDefinitions.js

@@ -4,5 +4,5 @@ exports.VelcronImageRatios = void 0;
 var VelcronImageRatios;
 (function (VelcronImageRatios) {
     VelcronImageRatios["square"] = "square";
-    VelcronImageRatios["landscape"] = "landscapre";
+    VelcronImageRatios["landscape"] = "landscape";
 })(VelcronImageRatios = exports.VelcronImageRatios || (exports.VelcronImageRatios = {}));

package/models/VelcronPropertyEditorDefinitions.d.ts

@@ -8,7 +8,7 @@ export interface VelcronPropertyEditor<TSettings = any> {
     type: BuiltInPropertyEditorType | string;
     settings?: TSettings;
     stateMapping?: string;
-    propertyMapping?: string;
+    propertyMapping?: boolean;
     component?: unknown;
 }
 export interface BuiltInPropertyEditors {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "8.0.90-vnext",
+  "version": "8.0.91-vnext",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronActions.js

@@ -331,7 +331,7 @@ class VelcronActions {
         return text;
     }
     static parseAndExecuteComputed(renderContext, template) {
-        VelcronData_1.VelcronData.getTokens(template).forEach(token => {
+        VelcronData_1.VelcronData.getTokens(template, false).forEach(token => {
             const paramValues = [];
             VelcronActions.parseFunction(renderContext.computed, token, renderContext, paramValues, (acName, params) => {
                 const funcContent = renderContext.computed[acName];

package/parser/VelcronConstants.d.ts

@@ -13,6 +13,7 @@ export declare const VelcronConstants: {
         icon: string;
         chip: string;
         markdown: string;
+        slot: string;
     };
     events: {
         idTokenStart: string;
@@ -25,5 +26,6 @@ export declare const VelcronConstants: {
     properties: {
         tokenStart: string;
         tokenEnd: string;
+        propsToken: string;
     };
 };

package/parser/VelcronConstants.js

@@ -16,6 +16,7 @@ exports.VelcronConstants = {
         icon: "icon",
         chip: "chip",
         markdown: "markdown",
+        slot: "slot",
     },
     events: {
         idTokenStart: "$ev{",
@@ -26,7 +27,8 @@ exports.VelcronConstants = {
         stateRootToken: "$state"
     },
     properties: {
-        tokenStart: "${",
-        tokenEnd: "}"
+        tokenStart: "{{",
+        tokenEnd: "}}",
+        propsToken: "$props"
     }
 };

package/parser/VelcronData.d.ts

@@ -26,7 +26,7 @@ export declare class VelcronData {
     static extendObject(obj: any): any;
     static getOrSetObjectByPath<T>(object: Object, path: string, value?: any): T | null;
     static getOrSetObjectByPathUsingRenderContext<T>(renderContext: VelcronRenderContext, path: string, value?: any): T;
-    static getTokens(template: any): string[];
+    static getTokens(template: any, removeBrackets: boolean): string[];
     static ensureEventId(event: string): string;
     static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition, generateNewKeys?: boolean): void;
     static removeKeys(ui: VelcronDefinition | VelcronAppDefinition): void;

package/parser/VelcronData.js

@@ -10,10 +10,9 @@ class VelcronData {
         if (!VelcronData.isString(text)) {
             return text;
         }
-        const tokens = this.getTokens(text);
-        tokens.forEach((name) => {
-            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, name);
-            const token = VelcronConstants_1.VelcronConstants.properties.tokenStart + name + VelcronConstants_1.VelcronConstants.properties.tokenEnd;
+        const tokens = this.getTokens(text, false);
+        tokens.forEach((token) => {
+            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
             if (data instanceof TextValue_1.TextValue) {
                 data = data.value;
             }
@@ -508,52 +507,49 @@ class VelcronData {
             variables[renderContext.id].hasOwnProperty(path)) {
             result = variables[renderContext.id][path];
         }
+        else if (path.startsWith(VelcronConstants_1.VelcronConstants.properties.propsToken + ".")) {
+            //props in a custom component $props.
+            path = path.substring(VelcronConstants_1.VelcronConstants.properties.propsToken.length + 1);
+            const propObj = VelcronData.getOrSetObjectByPath(renderContext.properties, path);
+            if (VelcronData.isString(propObj)) {
+                const propString = propObj;
+                path = VelcronData.dataBind(renderContext, propString);
+                result = path;
+            }
+            result = propObj;
+        }
         else {
-            let pathIsPropertyValue = false;
-            if (renderContext.properties?.hasOwnProperty(path)) {
-                pathIsPropertyValue = true;
-                const propObj = renderContext.properties[path];
-                if (VelcronData.isString(propObj)) {
-                    const propString = propObj;
-                    path = VelcronData.dataBind(renderContext, propString);
-                }
-                result = propObj;
+            const tokens = VelcronData.getTokens(path, true);
+            if (tokens.length > 0) {
+                path = tokens[0];
             }
-            if (!result || VelcronData.isString(result)) {
-                const tokens = VelcronData.getTokens(path);
-                if (tokens.length > 0) {
-                    path = tokens[0];
-                }
-                let object = null;
-                if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
-                    //Fetch from the data object
-                    object = renderContext.rootContext;
-                    path = path.substring(6);
-                }
-                else {
-                    //Fetch from current ctx
-                    object = renderContext.currentContext;
-                }
-                if (VelcronData.isObject(object)) {
-                    result = VelcronData.getOrSetObjectByPath(object, path, value);
-                }
-                else {
-                    //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
-                    result = object;
-                }
-                if (typeof result === "undefined" && pathIsPropertyValue) {
-                    result = path;
-                }
+            let object = null;
+            if (path.startsWith(`${VelcronConstants_1.VelcronConstants.state.stateRootToken}.`) || path === VelcronConstants_1.VelcronConstants.state.stateRootToken) {
+                //Fetch from the data object
+                object = renderContext.rootContext;
+                path = path.substring(6);
+            }
+            else {
+                //Fetch from current ctx
+                object = renderContext.currentContext;
+            }
+            if (VelcronData.isObject(object)) {
+                result = VelcronData.getOrSetObjectByPath(object, path, value);
+            }
+            else {
+                //For example if you bind to Array of ["string"] the currentContext is only a string so we just return the object without mapping path
+                result = object;
             }
         }
         return result;
     }
-    static getTokens(template) {
+    static getTokens(template, removeBrackets) {
         const tokens = [];
         if (template) {
-            template.replace(/(\${).+?(?=\})/g, (tokenWithVar, token) => {
-                tokens.push(tokenWithVar.substring(2));
-                return token;
+            template.replace(removeBrackets ? /{{\s*(.+?)\s*}}/g : /(\{{.+?\}})/g, (foundToken, token) => {
+                const tokenWithVar = removeBrackets ? token : foundToken;
+                tokens.push(tokenWithVar);
+                return tokenWithVar;
             });
         }
         return tokens;

package/parser/VelcronRenderers.js

@@ -95,7 +95,6 @@ class VelcronRenderers {
                 //Fetch the custom component definition
                 const customDef = rendererInfo.definition;
                 if (customDef.properties) {
-                    // customDef.properties.forEach((prop) => {
                     Object.keys(customDef.properties).forEach((propName) => {
                         const prop = customDef.properties ? customDef.properties[propName] : null;
                         if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
@@ -106,7 +105,7 @@ class VelcronRenderers {
                             if (VelcronData_1.VelcronData.isString(definition[propName])) {
                                 //Properties can be databound so if its a string we try do databind
                                 //this is true for other values such as number / string also
-                                result.properties[propName] = VelcronData_1.VelcronData.dataBind(currentRenderCtx, definition[propName]);
+                                result.properties[propName] = VelcronData_1.VelcronData.dataBind(result, definition[propName]);
                             }
                             else {
                                 result.properties[propName] = definition[propName];

package/templatebuilder/state/VelcronColorSchemaBuilder.js

@@ -5,7 +5,7 @@ const VelcronStateBuilderBase_1 = require("./VelcronStateBuilderBase");
 class VelcronColorSchemaStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBuilderBase {
     constructor(stateBuilder) {
         super(stateBuilder);
-        this.bind = "${colorSchemaType}";
+        this.bind = "{{colorSchemaType}}";
     }
     add(colorSchema) {
         this.colorSchema = colorSchema;

package/templatebuilder/state/VelcronContentStateBuilder.js

@@ -17,7 +17,7 @@ class VelcronContentStateBuilder extends VelcronStateBuilderBase_1.VelcronStateB
                 this.captionContent = value;
                 return this;
             },
-            bind: "${content.caption}"
+            bind: "{{content.caption}}"
         };
     }
     internalBuild() {

package/templatebuilder/state/VelcronImageStateBuilder.js

@@ -11,14 +11,14 @@ class VelcronImageStateBuilder extends VelcronStateBuilderBase_1.VelcronStateBui
                     this.mainImageUrl = url;
                     return this;
                 },
-                bind: "${main-image.url}"
+                bind: "{{main-image.url}}"
             },
             ratio: {
                 add: (ratio) => {
                     this.mainImageRatio = ratio;
                     return this;
                 },
-                bind: "${main-image.ratio}"
+                bind: "{{main-image.ratio}}"
             }
         };
     }