@omnia/velcron 8.0.94-vnext → 8.0.95-dev

package/models/VelcronPropertyEditorDefinitions.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuiltInPropertyEditorTypes = void 0;
+exports.VelcronStateBinding = exports.VelcronSpacingStateBinding = exports.VelcronColorSchemasStateBinding = exports.VelcronContentStateBinding = exports.VelcronHeaderStateBinding = exports.VelcronImagesStateBinding = exports.BuiltInPropertyEditorTypes = void 0;
+// export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "color-schema-type" | "spacing" ;
 var BuiltInPropertyEditorTypes;
 (function (BuiltInPropertyEditorTypes) {
     BuiltInPropertyEditorTypes["text"] = "text";
@@ -12,5 +13,116 @@ var BuiltInPropertyEditorTypes;
     BuiltInPropertyEditorTypes["icon"] = "icon";
     BuiltInPropertyEditorTypes["image"] = "image";
     BuiltInPropertyEditorTypes["typography"] = "typography";
+    BuiltInPropertyEditorTypes["spacing"] = "spacing";
     BuiltInPropertyEditorTypes["color-schema-type"] = "color-schema-type";
-})(BuiltInPropertyEditorTypes = exports.BuiltInPropertyEditorTypes || (exports.BuiltInPropertyEditorTypes = {}));
+})(BuiltInPropertyEditorTypes || (exports.BuiltInPropertyEditorTypes = BuiltInPropertyEditorTypes = {}));
+exports.VelcronImagesStateBinding = {
+    main: {
+        editor: "{{images.main.url}}",
+        url: "{{images.main.url}}",
+        ratio: "{{images.main.ratio}}",
+        caption: "{{images.main.caption}}",
+        width: "{{images.main.width}}",
+        height: "{{images.main.height}}",
+    },
+    alt1: {
+        editor: "{{images.alt1.url}}",
+        url: "{{images.alt1.url}}",
+        ratio: "{{images.alt1.ratio}}",
+        caption: "{{images.alt1.caption}}",
+        width: "{{images.alt1.width}}",
+        height: "{{images.alt1.height}}",
+    },
+    alt2: {
+        editor: "{{images.alt2.url}}",
+        url: "{{images.alt2.url}}",
+        ratio: "{{images.alt2.ratio}}",
+        caption: "{{images.alt2.caption}}",
+        width: "{{images.alt2.width}}",
+        height: "{{images.alt2.height}}",
+    },
+};
+exports.VelcronHeaderStateBinding = {
+    title: {
+        text: "{{header.title.text}}",
+        placeholder: "{{header.title.placeholder}}",
+        typography: {
+            editor: "header.title.typography",
+            type: "{{header.title.typography.type}}",
+            size: "{{header.title.typography.size}}",
+            toned: "{{header.title.typography.toned}}",
+        }
+    },
+    icon: "{{header.icon}}"
+};
+exports.VelcronContentStateBinding = {
+    title: {
+        text: "{{content.title.text}}",
+        placeholder: "{{content.title.placeholder}}",
+        typography: {
+            editor: "content.title.typography",
+            type: "{{content.title.typography.type}}",
+            size: "{{content.title.typography.size}}",
+            toned: "{{content.title.typography.toned}}",
+        }
+    },
+    main: {
+        text: "{{content.main.text}}",
+        placeholder: "{{content.main.placeholder}}",
+        typography: {
+            editor: "content.main.typography",
+            type: "{{content.main.typography.type}}",
+            size: "{{content.main.typography.size}}",
+            toned: "{{content.main.typography.toned}}",
+        }
+    },
+    caption: {
+        text: "{{content.caption.text}}",
+        placeholder: "{{content.caption.placeholder}}",
+        typography: {
+            editor: "content.caption.typography",
+            type: "{{content.caption.typography.type}}",
+            size: "{{content.caption.typography.size}}",
+            toned: "{{content.caption.typography.toned}}",
+        }
+    },
+    summary: {
+        text: "{{content.summary.text}}",
+        placeholder: "{{content.summary.placeholder}}",
+        typography: {
+            editor: "content.summary.typography",
+            type: "{{content.summary.typography.type}}",
+            size: "{{content.summary.typography.size}}",
+            toned: "{{content.summary.typography.toned}}",
+        }
+    },
+};
+exports.VelcronColorSchemasStateBinding = {
+    main: {
+        type: "{{colorSchemas.main.type}}",
+        filled: "{{colorSchemas.main.filled}}"
+    }
+};
+exports.VelcronSpacingStateBinding = {
+    chrome: {
+        "top": "{{spacing.chrome.top}}",
+        "right": "{{spacing.chrome.right}}",
+        "bottom": "{{spacing.chrome.bottom}}",
+        "left": "{{spacing.chrome.left}}",
+    }
+};
+// export interface VelcronSpacingState {
+//     chrome?: VelcronDimensionState 
+// }
+// export interface VelcronDimensionState {
+//     margin?: VelcronSpacing;
+//     padding?: VelcronSpacing;
+// } 
+exports.VelcronStateBinding = {
+    colorSchemas: exports.VelcronColorSchemasStateBinding,
+    images: exports.VelcronImagesStateBinding,
+    content: exports.VelcronContentStateBinding,
+    header: exports.VelcronHeaderStateBinding,
+    spacing: exports.VelcronSpacingStateBinding
+    //properties?:VelcronPropertiesState,    
+};

package/models/VelcronTypes.d.ts

@@ -1,4 +1,4 @@
-import { VelcronDefinition } from "./VelcronDefinitions";
+import { VelcronDefinition } from "@omnia/fx-models";
 export type VelcronPrimitiveType = string | number | boolean;
 export type VelcronArrayType<T> = Array<T>;
 export type VelcronObjectType<T extends Object> = T;

package/models/ViewModelAndContext.d.ts

@@ -1,4 +1,4 @@
-import { VelcronAppDefinition } from "./VelcronDefinitions";
+import { VelcronAppDefinition } from "@omnia/fx-models";
 export interface AppJson {
     app: VelcronAppDefinition;
 }

package/models/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./VelcronDefinitions";
 export * from "./ViewModelAndContext";
-export * from "./VelcronEvents";
 export * from "./VelcronTypes";
 export * from "./Enums";
 export * from "./VelcronUnitProvider";
 export * from "./VelcronPropertyEditorDefinitions";
+export * from "./ActionHooks";

package/models/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./VelcronDefinitions"), exports);
 tslib_1.__exportStar(require("./ViewModelAndContext"), exports);
-tslib_1.__exportStar(require("./VelcronEvents"), exports);
 tslib_1.__exportStar(require("./VelcronTypes"), exports);
 tslib_1.__exportStar(require("./Enums"), exports);
 tslib_1.__exportStar(require("./VelcronUnitProvider"), exports);
 tslib_1.__exportStar(require("./VelcronPropertyEditorDefinitions"), exports);
+tslib_1.__exportStar(require("./ActionHooks"), exports);

package/package.json

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

package/parser/VelcronActions.d.ts

@@ -1,13 +1,16 @@
-import { VelcronAction, VelcronActionWithAutoAwait, VelcronRenderContext, DeferredPromise } from "../models";
+import { VelcronAction, VelcronActionWithAutoAwait, VelcronRenderContext, DeferredPromise, VelcronActionHooks } from "../models";
 import { IActionHandler } from "../actions";
 export declare class VelcronActions {
     static _actionHandlers: {
         [name: string]: IActionHandler;
     } | null;
+    static actionHooks: {
+        [name: string]: VelcronActionHooks;
+    };
     static registerAction(name: string, handler: IActionHandler): void;
     static parseAndExecuteActions(templates: Array<string>, renderContext: VelcronRenderContext, customActionContext?: VelcronCustomActionExecutionContext): void;
     static parseFunction(target: {
-        [name: string]: [];
+        [name: string]: Array<string>;
     }, template: string, renderContext: VelcronRenderContext, params: Array<VelcronActionParameterValue>, foundCb: (name: string, params: {}) => void): void;
     static getActionFromTemplate(partialTemplate: string, eventId: string, renderContext: VelcronRenderContext, customActionContext?: VelcronCustomActionExecutionContext): VelcronAction;
     static valueIsAction(value: string): boolean;
@@ -15,6 +18,9 @@ export declare class VelcronActions {
     static executeAction(awAction: VelcronActionWithAutoAwait, callback: (continueExecution: boolean) => void): void;
     static dataBindComputed(renderContext: VelcronRenderContext, template: string): string;
     static parseAndExecuteComputed(renderContext: VelcronRenderContext, template: string): string;
+    static registerActionHook<TBefore, TAfter>(actionName: string, handler: VelcronActionHooks<TBefore, TAfter>): void;
+    static tryTriggerBeforeActionHook<T>(actionName: string, args: T): T;
+    static tryTriggerAfterActionHook<T>(actionName: string, args: T): T;
     private static extractParameterValues;
 }
 interface VelcronActionParameterValue {

package/parser/VelcronActions.js

@@ -271,6 +271,9 @@ class VelcronActions {
             if (VelcronActions._actionHandlers[actionName]) {
                 //Built in handler
                 promise = VelcronActions._actionHandlers[actionName].action(awAction, ...paramValues);
+                if (VelcronActions._actionHandlers[actionName].dispose) {
+                    awAction.disposers.push(VelcronActions._actionHandlers[actionName].dispose(awAction));
+                }
             }
             else {
                 //Custom handler
@@ -348,6 +351,22 @@ class VelcronActions {
         });
         return template;
     }
+    static registerActionHook(actionName, handler) {
+        VelcronActions.actionHooks ?? (VelcronActions.actionHooks = {});
+        VelcronActions.actionHooks[actionName] = handler;
+    }
+    static tryTriggerBeforeActionHook(actionName, args) {
+        if (VelcronActions.actionHooks && VelcronActions.actionHooks[actionName] && VelcronActions.actionHooks[actionName].beforeHandler) {
+            return VelcronActions.actionHooks[actionName].beforeHandler(args);
+        }
+        return args;
+    }
+    static tryTriggerAfterActionHook(actionName, args) {
+        if (VelcronActions.actionHooks && VelcronActions.actionHooks[actionName] && VelcronActions.actionHooks[actionName].afterHandler) {
+            return VelcronActions.actionHooks[actionName].afterHandler(args);
+        }
+        return args;
+    }
     static extractParameterValues(template, action) {
         const params = [];
         let hasMoreParams = true;
@@ -414,7 +433,7 @@ class VelcronActions {
                     }
                     else {
                         //Try get it from ViewModel
-                        castedValue = VelcronData_1.VelcronData.getOrSetObjectByPathUsingRenderContext(action, castedValue);
+                        castedValue = VelcronData_1.VelcronData.getOrSet(action, castedValue);
                     }
                 }
                 params.push({ dataType: dataType, value: castedValue });
@@ -432,12 +451,13 @@ class VelcronActions {
         return params;
     }
 }
-VelcronActions._actionHandlers = null;
 exports.VelcronActions = VelcronActions;
+VelcronActions._actionHandlers = null;
+VelcronActions.actionHooks = {};
 var VelcronActionParameterDataType;
 (function (VelcronActionParameterDataType) {
     VelcronActionParameterDataType[VelcronActionParameterDataType["text"] = 0] = "text";
     VelcronActionParameterDataType[VelcronActionParameterDataType["number"] = 1] = "number";
     VelcronActionParameterDataType[VelcronActionParameterDataType["boolean"] = 2] = "boolean";
     VelcronActionParameterDataType[VelcronActionParameterDataType["pointer"] = 3] = "pointer";
-})(VelcronActionParameterDataType = exports.VelcronActionParameterDataType || (exports.VelcronActionParameterDataType = {}));
+})(VelcronActionParameterDataType || (exports.VelcronActionParameterDataType = VelcronActionParameterDataType = {}));

package/parser/VelcronConstants.d.ts

@@ -1,20 +1,26 @@
 export declare const VelcronConstants: {
     components: {
         velcron: string;
-        view: string;
+        flex: string;
+        row: string;
+        column: string;
         card: string;
         text: string;
         image: string;
+        video: string;
         button: string;
-        textInput: string;
-        progress: string;
-        webView: string;
+        "text-input": string;
+        "progress-circle": string;
+        "web-view": string;
+        "custom-component": string;
         dialog: string;
         icon: string;
         chip: string;
         markdown: string;
         slot: string;
         property: string;
+        checkbox: string;
+        reference: string;
     };
     events: {
         idTokenStart: string;
@@ -29,4 +35,7 @@ export declare const VelcronConstants: {
         tokenEnd: string;
         propsToken: string;
     };
+    context: {
+        thisToken: string;
+    };
 };

package/parser/VelcronConstants.js

@@ -4,20 +4,26 @@ exports.VelcronConstants = void 0;
 exports.VelcronConstants = {
     components: {
         velcron: "velcron",
-        view: "view",
+        flex: "flex",
+        row: "row",
+        column: "column",
         card: "card",
         text: "text",
         image: "image",
+        video: "video",
         button: "button",
-        textInput: "text-input",
-        progress: "progress",
-        webView: "web-view",
+        "text-input": "text-input",
+        "progress-circle": "progress-circle",
+        "web-view": "web-view",
+        "custom-component": "custom-component",
         dialog: "dialog",
         icon: "icon",
         chip: "chip",
         markdown: "markdown",
         slot: "slot",
-        property: "property"
+        property: "property",
+        checkbox: "checkbox",
+        reference: "reference"
     },
     events: {
         idTokenStart: "$ev{",
@@ -31,5 +37,8 @@ exports.VelcronConstants = {
         tokenStart: "{{",
         tokenEnd: "}}",
         propsToken: "$props"
+    },
+    context: {
+        thisToken: "$this"
     }
 };

package/parser/VelcronData.d.ts

@@ -1,4 +1,5 @@
-import { VelcronAppDefinition, VelcronDefinition, VelcronRenderContext, DeferredPromise, VelcronBindableProp } from "../models";
+import { VelcronRenderContext, DeferredPromise, VelcronBindableProp } from "../models";
+import { VelcronAppDefinition, VelcronDefinition } from "..";
 export interface ParseResult<T> {
     is: boolean;
     value: T;
@@ -25,7 +26,7 @@ export declare class VelcronData {
     static isObject(value: any): boolean;
     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 getOrSet<T>(renderContext: VelcronRenderContext, path: string, value?: any): T;
     static getTokens(template: any, removeBrackets: boolean): string[];
     static ensureEventId(event: string): string;
     static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition, generateNewKeys?: boolean): void;

package/parser/VelcronData.js

@@ -12,7 +12,7 @@ class VelcronData {
         }
         const tokens = this.getTokens(text, false);
         tokens.forEach((token) => {
-            let data = this.getOrSetObjectByPathUsingRenderContext(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
+            let data = this.getOrSet(renderContext, token.replace(/\s*{{\s*|\s*}}\s*/g, ""));
             if (data instanceof TextValue_1.TextValue) {
                 data = data.value;
             }
@@ -70,11 +70,11 @@ class VelcronData {
         let propertiesToEval = {};
         if (renderContext.properties) {
             //Custom component properties evaluation
-            propertiesToEval = {};
-            Object.keys(renderContext.properties).forEach((key) => {
-                propertiesToEval[key] = "properties";
-            });
-            names.push("properties");
+            // propertiesToEval = {};
+            // Object.keys(renderContext.properties).forEach((key) => {
+            //     propertiesToEval[key] = VelcronConstants.properties.propsToken;
+            // });
+            names.push(VelcronConstants_1.VelcronConstants.properties.propsToken);
             obj.push(renderContext.properties);
         }
         else if (overrideNamesMatching) {
@@ -84,7 +84,8 @@ class VelcronData {
             "null",
             "return"
         ];
-        template = VelcronData.addCtxToVariableNames(template, undefined, reservedWords, propertiesToEval);
+        const skipName = "$props";
+        template = VelcronData.addCtxToVariableNames(template, skipName, reservedWords, propertiesToEval);
         names.push("rootCtx");
         names.push("currentCtx");
         obj.push(renderContext.rootContext);
@@ -223,7 +224,7 @@ class VelcronData {
                     }
                     else {
                         //Try get value from rootContext or currentContext
-                        value = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        value = VelcronData.getOrSet(renderContext, value);
                     }
                 }
             }
@@ -243,7 +244,7 @@ class VelcronData {
                 runEvaluation = true;
             }
         }
-        const existingVal = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, path);
+        const existingVal = VelcronData.getOrSet(renderContext, path);
         if (assignOperator === models_1.AssignOperators.equals || assignOperator === models_1.AssignOperators.equalsExclamation) {
             //debugger;
             if (typeof existingVal === "boolean" && typeof value !== "boolean") {
@@ -274,7 +275,7 @@ class VelcronData {
             else if (assignOperator && VelcronData.isString(value)) {
                 //Value is assignment from renderContext
                 // "$state.title = title" or "$state.title = $state.anotherTitle"
-                if (value === "this") {
+                if (value === "$this") {
                     // $state.currentItem = this (this means currentContext)
                     value = renderContext.currentContext;
                 }
@@ -285,7 +286,10 @@ class VelcronData {
                     }
                     else {
                         //try get value from render context
-                        value = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        const localVal = VelcronData.getOrSet(renderContext, value);
+                        if (localVal !== undefined && localVal !== null) {
+                            value = localVal;
+                        }
                     }
                 }
             }
@@ -491,7 +495,7 @@ class VelcronData {
         }
         return object;
     }
-    static getOrSetObjectByPathUsingRenderContext(renderContext, path, value = undefined) {
+    static getOrSet(renderContext, path, value = undefined) {
         let result;
         if (VelcronData.isUndefined(path)) {
             return result;
@@ -518,6 +522,10 @@ class VelcronData {
             }
             result = propObj;
         }
+        else if (path === VelcronConstants_1.VelcronConstants.context.thisToken) {
+            //Eg foreach loop and binding to the whole object in binding use $this
+            result = renderContext.currentContext;
+        }
         else {
             const tokens = VelcronData.getTokens(path, true);
             if (tokens.length > 0) {
@@ -630,5 +638,5 @@ class VelcronData {
         return { promise, reject, resolve };
     }
 }
-VelcronData.variables = {};
 exports.VelcronData = VelcronData;
+VelcronData.variables = {};

package/parser/VelcronPropertyEditors.js

@@ -36,5 +36,5 @@ class VelcronPropertyEditors {
         return result;
     }
 }
-VelcronPropertyEditors.editors = {};
 exports.VelcronPropertyEditors = VelcronPropertyEditors;
+VelcronPropertyEditors.editors = {};

package/parser/VelcronRenderers.d.ts

@@ -1,4 +1,5 @@
-import { BuiltInComponentRenderers, DynamicState, ResolvedComponentRenderer, VelcronDefinition, VelcronRenderContext } from "../models";
+import { BuiltInComponentRenderers, ResolvedComponentRenderer, VelcronRenderContext } from "../models";
+import { DynamicState, VelcronDefinition } from "..";
 export declare class VelcronRenderers {
     private static components;
     static registerComponent(type: string, component: any): void;

package/parser/VelcronRenderers.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronRenderers = void 0;
-const VelcronLogger_1 = require("./VelcronLogger");
 const VelcronData_1 = require("./VelcronData");
 const __1 = require("..");
 class VelcronRenderers {
@@ -33,7 +32,7 @@ class VelcronRenderers {
             customComponentDefinition = renderContext.components?.find(p => p.type.toLowerCase() === definition.type.toLowerCase());
         }
         if (customComponentDefinition) {
-            if (!this.components["customcomponent"]) {
+            if (!this.components[__1.VelcronConstants.components["custom-component"]]) {
                 throw "Cant find the custom component renderer";
             }
             //Make a new instance of the custom component
@@ -43,7 +42,7 @@ class VelcronRenderers {
             //comes from the current instance and override the ones from the original to make style overide work as we want
             customComponentInstance.style = definition.style;
             result = {
-                component: this.components["customcomponent"],
+                component: this.components[__1.VelcronConstants.components["custom-component"]],
                 definition: customComponentInstance,
                 customComponent: true
             };
@@ -74,7 +73,9 @@ class VelcronRenderers {
             computed: currentRenderCtx.computed,
             colors: currentRenderCtx.colors,
             editMode: currentRenderCtx.editMode,
-            blueprints: currentRenderCtx.blueprints,
+            //blueprints: currentRenderCtx.blueprints,
+            disposers: currentRenderCtx.disposers,
+            properties: currentRenderCtx.properties,
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
             const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
@@ -97,23 +98,23 @@ class VelcronRenderers {
                 if (customDef.properties) {
                     Object.keys(customDef.properties).forEach((propName) => {
                         const prop = customDef.properties ? customDef.properties[propName] : null;
-                        if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
-                            VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
-                        }
+                        // if (!prop || (prop.required && !definition.hasOwnProperty(propName))) {
+                        //     VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
+                        // }
                         result.properties = result.properties || {};
-                        if (definition.hasOwnProperty(propName)) {
-                            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(result, definition[propName]);
-                            }
-                            else {
-                                result.properties[propName] = definition[propName];
-                            }
-                        }
-                        else if (prop.hasOwnProperty("defaultValue")) {
-                            result.properties[propName] = prop.defaultValue;
-                        }
+                        // if (definition.hasOwnProperty(propName)) {
+                        //     if (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.dataBind(result, definition[propName]);
+                        //     }
+                        //     else {
+                        //         result.properties[propName] = definition[propName];
+                        //     }
+                        // }
+                        // else if (prop.hasOwnProperty("defaultValue")) {
+                        //     result.properties[propName] = prop.defaultValue;
+                        // }
                     });
                 }
             }
@@ -121,5 +122,5 @@ class VelcronRenderers {
         return result;
     }
 }
-VelcronRenderers.components = {};
 exports.VelcronRenderers = VelcronRenderers;
+VelcronRenderers.components = {};

package/parser/VelcronStyles.d.ts

@@ -1,5 +1,6 @@
-import { VelcronBorder, VelcronColorStyling, VelcronDefinition, VelcronDimensions, VelcronRenderContext } from "../models";
+import { VelcronBorder, VelcronColorStyling, VelcronDimensions, VelcronRenderContext } from "../models";
 import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
+import { VelcronDefinition } from "..";
 export declare class VelcronStyles {
     static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
     static unitProvider: VelcronUnitProvider;