@omnia/velcron 8.0.108-vnext → 8.0.109-dev

package/models/VelcronPropertyEditorDefinitions.d.ts

@@ -1,17 +1,7 @@
-import { TypographySize, TypographyType, VelcronImageRatios } from "@omnia/fx-models";
+import { TypographySize, TypographyType, VelcronImageRatios, VelcronPropertyEditor, VelcronSpacing } from "@omnia/fx-models";
 export interface ResolvedPropertyEditor {
     editor: VelcronPropertyEditor;
 }
-export interface VelcronPropertyEditor<TSettings = any> {
-    name?: string;
-    category?: string;
-    type: BuiltInPropertyEditorType | string;
-    settings?: TSettings;
-    stateMapping?: string;
-    propertyMapping?: boolean;
-    multiple?: boolean;
-    component?: unknown;
-}
 export interface BuiltInPropertyEditors {
     text: unknown;
     slider: unknown;
@@ -22,9 +12,9 @@ export interface BuiltInPropertyEditors {
     icon: unknown;
     image: unknown;
     typography: unknown;
+    spacing: unknown;
     "color-schema-type": unknown;
 }
-export type BuiltInPropertyEditorType = "text" | "slider" | "switch" | "alignment" | "color" | "markdown" | "icon" | "image" | "typography" | "color-schema-type";
 export declare enum BuiltInPropertyEditorTypes {
     text = "text",
     slider = "slider",
@@ -35,6 +25,7 @@ export declare enum BuiltInPropertyEditorTypes {
     icon = "icon",
     image = "image",
     typography = "typography",
+    spacing = "spacing",
     "color-schema-type" = "color-schema-type"
 }
 export interface VelcronSliderPropertyEditorSettings {
@@ -45,10 +36,20 @@ export interface VelcronSliderPropertyEditorSettings {
 export interface VelcronTypographyEditorSettings {
     type: "title" | "text";
 }
+export interface VelcronMarkdownEditorSettings {
+    placeholder: string;
+}
+export interface VelcronSpacingEditorSettings {
+    individualSelection: boolean;
+}
+export interface VelcronTextEditorSettings {
+    type: TypographyType;
+    placeholder: string;
+}
 export interface VelcronSliderPropertyEditor extends VelcronPropertyEditor<VelcronSliderPropertyEditorSettings> {
     type: "slider";
 }
-export interface VelcronTextPropertyEditor extends VelcronPropertyEditor<any> {
+export interface VelcronTextPropertyEditor extends VelcronPropertyEditor<VelcronTextEditorSettings> {
     type: "text";
 }
 export interface VelcronEnterprisePropertyEditor extends VelcronPropertyEditor<any> {
@@ -72,21 +73,34 @@ export interface VelcronColorSchemaPropertyEditor extends VelcronPropertyEditor<
 export interface VelcronIconPropertyEditor extends VelcronPropertyEditor<any> {
     type: "icon";
 }
-export interface VelcronMarkdownPropertyEditor extends VelcronPropertyEditor<any> {
+export interface VelcronMarkdownPropertyEditor extends VelcronPropertyEditor<VelcronMarkdownEditorSettings> {
     type: "markdown";
 }
 export interface VelcronImagePropertyEditor extends VelcronPropertyEditor<any> {
     type: "image";
 }
+export interface VelcronSpacingPropertyEditor extends VelcronPropertyEditor<VelcronSpacingEditorSettings> {
+    type: "spacing";
+}
 export interface VelcronState {
     images?: VelcronImagesState;
     styling?: VelcronStylingState;
-    colorSchema?: VelcronColorSchemaState;
+    colorSchemas?: VelcronColorSchemasState;
     content?: VelcronContentState;
+    header?: VelcronHeaderState;
     properties?: VelcronPropertiesState;
+    spacing?: VelcronSpacingState;
+}
+export interface VelcronSpacingState {
+    chrome?: VelcronSpacing;
+}
+export interface VelcronHeaderState {
+    title?: VelcronTextState;
+    icon?: string;
 }
 export interface VelcronTextState {
-    text: string;
+    text?: string;
+    placeholder?: string;
     typography?: VelcronTypographyState;
 }
 export interface VelcronTypographyState {
@@ -106,15 +120,214 @@ export interface VelcronPropertiesState {
 }
 export interface VelcronImagesState {
     main?: VelcronImageState;
+    alt1?: VelcronImageState;
+    alt2?: VelcronImageState;
 }
 export interface VelcronImageState {
     url?: string;
     ratio?: VelcronImageRatios;
     caption?: VelcronTextState;
+    width?: number;
+    height?: number;
 }
 export interface VelcronStylingState {
 }
+export interface VelcronColorSchemasState {
+    main: VelcronColorSchemaState;
+}
 export interface VelcronColorSchemaState {
     type?: string;
     filled?: boolean;
 }
+export declare const VelcronImagesStateBinding: {
+    main: {
+        editor: string;
+        url: string;
+        ratio: string;
+        caption: string;
+        width: string;
+        height: string;
+    };
+    alt1: {
+        editor: string;
+        url: string;
+        ratio: string;
+        caption: string;
+        width: string;
+        height: string;
+    };
+    alt2: {
+        editor: string;
+        url: string;
+        ratio: string;
+        caption: string;
+        width: string;
+        height: string;
+    };
+};
+export declare const VelcronHeaderStateBinding: {
+    title: {
+        text: string;
+        placeholder: string;
+        typography: {
+            editor: any;
+            type: any;
+            size: any;
+            toned: any;
+        };
+    };
+    icon: string;
+};
+export declare const VelcronContentStateBinding: {
+    title: {
+        text: string;
+        placeholder: string;
+        typography: {
+            editor: any;
+            type: any;
+            size: any;
+            toned: any;
+        };
+    };
+    main: {
+        text: string;
+        placeholder: string;
+        typography: {
+            editor: any;
+            type: any;
+            size: any;
+            toned: any;
+        };
+    };
+    caption: {
+        text: string;
+        placeholder: string;
+        typography: {
+            editor: any;
+            type: any;
+            size: any;
+            toned: any;
+        };
+    };
+    summary: {
+        text: string;
+        placeholder: string;
+        typography: {
+            editor: any;
+            type: any;
+            size: any;
+            toned: any;
+        };
+    };
+};
+export declare const VelcronColorSchemasStateBinding: {
+    main: {
+        type: string;
+        filled: string;
+    };
+};
+export declare const VelcronSpacingStateBinding: {
+    chrome: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+};
+export declare const VelcronStateBinding: {
+    colorSchemas: {
+        main: {
+            type: string;
+            filled: string;
+        };
+    };
+    images: {
+        main: {
+            editor: string;
+            url: string;
+            ratio: string;
+            caption: string;
+            width: string;
+            height: string;
+        };
+        alt1: {
+            editor: string;
+            url: string;
+            ratio: string;
+            caption: string;
+            width: string;
+            height: string;
+        };
+        alt2: {
+            editor: string;
+            url: string;
+            ratio: string;
+            caption: string;
+            width: string;
+            height: string;
+        };
+    };
+    content: {
+        title: {
+            text: string;
+            placeholder: string;
+            typography: {
+                editor: any;
+                type: any;
+                size: any;
+                toned: any;
+            };
+        };
+        main: {
+            text: string;
+            placeholder: string;
+            typography: {
+                editor: any;
+                type: any;
+                size: any;
+                toned: any;
+            };
+        };
+        caption: {
+            text: string;
+            placeholder: string;
+            typography: {
+                editor: any;
+                type: any;
+                size: any;
+                toned: any;
+            };
+        };
+        summary: {
+            text: string;
+            placeholder: string;
+            typography: {
+                editor: any;
+                type: any;
+                size: any;
+                toned: any;
+            };
+        };
+    };
+    header: {
+        title: {
+            text: string;
+            placeholder: string;
+            typography: {
+                editor: any;
+                type: any;
+                size: any;
+                toned: any;
+            };
+        };
+        icon: string;
+    };
+    spacing: {
+        chrome: {
+            top: string;
+            right: string;
+            bottom: string;
+            left: string;
+        };
+    };
+};

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.108-vnext",
+  "version": "8.0.109-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronActions.d.ts

@@ -1,9 +1,12 @@
-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: {
@@ -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

@@ -351,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;
@@ -417,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 });
@@ -435,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,10 +1,13 @@
 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;
         "text-input": string;
         "progress-circle": string;
@@ -16,6 +19,8 @@ export declare const VelcronConstants: {
         markdown: string;
         slot: string;
         property: string;
+        checkbox: string;
+        reference: string;
     };
     events: {
         idTokenStart: string;

package/parser/VelcronConstants.js

@@ -4,10 +4,13 @@ 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",
         "text-input": "text-input",
         "progress-circle": "progress-circle",
@@ -18,7 +21,9 @@ exports.VelcronConstants = {
         chip: "chip",
         markdown: "markdown",
         slot: "slot",
-        property: "property"
+        property: "property",
+        checkbox: "checkbox",
+        reference: "reference"
     },
     events: {
         idTokenStart: "$ev{",

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;
             }
@@ -224,7 +224,7 @@ class VelcronData {
                     }
                     else {
                         //Try get value from rootContext or currentContext
-                        value = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        value = VelcronData.getOrSet(renderContext, value);
                     }
                 }
             }
@@ -244,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") {
@@ -286,7 +286,7 @@ class VelcronData {
                     }
                     else {
                         //try get value from render context
-                        const localVal = VelcronData.getOrSetObjectByPathUsingRenderContext(renderContext, value);
+                        const localVal = VelcronData.getOrSet(renderContext, value);
                         if (localVal !== undefined && localVal !== null) {
                             value = localVal;
                         }
@@ -495,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;
@@ -638,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 = {};