@omnia/velcron 8.0.159-dev → 8.0.161-dev

package/internal-do-not-import-from-here/shared/models/velcron/VelcronDefinition.d.ts

@@ -1,6 +1,6 @@
 import { IFontAwesomeIcon } from "@omnia/fx-models";
 import { DynamicState } from "../DynamicState";
-import { VelcronEvent, VelcronOnEditModeEvent, VelcronOnLoadEvent, VelcronOnPersistingStateEvent, VelcronOnSavingEvent } from "./VelcronEvents";
+import { VelcronEvent, VelcronOnActiveEvent, VelcronOnEditModeEvent, VelcronOnLoadEvent, VelcronOnPersistingStateEvent, VelcronOnSavingEvent } from "./VelcronEvents";
 /**
  * Velcron definition base
  */
@@ -31,9 +31,11 @@ export interface VelcronSpacing {
     bottom?: number | string;
     left?: number | string;
 }
+export type VelcronSpacingTypes = "inner" | "layout";
 interface VelcronDimensionStyling {
     margin?: VelcronSpacing;
     padding?: VelcronSpacing;
+    spacingType?: VelcronSpacingTypes;
 }
 export interface VelcronStyling {
     margin?: number;
@@ -75,7 +77,7 @@ export interface VelcronAppDefinition<TState extends DynamicState = DynamicState
     version?: string;
     name?: string;
     body?: Array<VelcronDefinition>;
-    events?: VelcronOnLoadEvent & VelcronOnEditModeEvent & VelcronOnSavingEvent & VelcronOnPersistingStateEvent;
+    events?: VelcronOnLoadEvent & VelcronOnEditModeEvent & VelcronOnSavingEvent & VelcronOnPersistingStateEvent & VelcronOnActiveEvent;
     actions?: {
         [name: string]: Array<string>;
     };

package/internal-do-not-import-from-here/shared/models/velcron/VelcronEvents.d.ts

@@ -7,6 +7,9 @@ export type VelcronOnLoadEvent = {
 export type VelcronOnSavingEvent = {
     onSaving?: Array<string>;
 };
+export type VelcronOnActiveEvent = {
+    onActive?: Array<string>;
+};
 export type VelcronOnPersistingStateEvent = {
     onPersistState?: Array<string>;
     onRestoreState?: Array<string>;

package/models/VelcronDefinitions.d.ts

@@ -1,4 +1,4 @@
-import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, ContainerBlueprint, BackgroundDefinition } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
+import { VelcronOnUpdatedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnPressEvent, VelcronSpacing, VelcronStyling, VelcronCustomComponentDefinition, VelcronAppDefinition, VelcronRendererResolverReference, EventHook, Future, TextBlueprint, VelcronBindableProp, ContainerBlueprint, BackgroundDefinition, VelcronStateEditor } from "@omnia/velcron/internal-do-not-import-from-here/shared/models";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronVerticalAlignments } from "./Enums";
 import { DynamicState, VelcronDefinition, useVelcronThemingStore } from "..";
@@ -35,6 +35,7 @@ export interface BuiltInComponentRenderers {
     "rive": unknown;
     "lottie": unknown;
     "slide-panel": unknown;
+    "editor": unknown;
 }
 export interface ColorSchemaReference {
     name: string;
@@ -63,7 +64,8 @@ export interface VelcronRenderContext {
     parent?: VelcronRenderContext;
     hooks?: VelcronRenderContextHooks;
     eventHandlers?: VelcronRenderContextEventHandlersInstance;
-    editMode?: boolean;
+    $editmode?: boolean;
+    $active?: boolean;
     disposers: Array<() => void>;
     subApp?: boolean;
 }
@@ -293,6 +295,12 @@ export interface VelcronSlidePanelDefinition extends VelcronDefinition {
     style?: VelcronCardStyling;
     events?: VelcronOnPressEvent;
 }
+export interface VelcronEditorDefinition extends VelcronDefinition {
+    type: "editor";
+    editor: VelcronStateEditor;
+    value: VelcronBindableProp<string>;
+    events?: VelcronOnUpdatedEvent;
+}
 export interface VelcronDimensions {
     top: number | string;
     right: number | string;

package/package.json

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

package/parser/VelcronConstants.d.ts

@@ -24,6 +24,7 @@ export declare const VelcronConstants: {
         rive: string;
         lottie: string;
         "slide-panel": string;
+        editor: string;
     };
     events: {
         idTokenStart: string;
@@ -42,6 +43,8 @@ export declare const VelcronConstants: {
     };
     context: {
         thisToken: string;
+        editModeToken: string;
+        activeToken: string;
     };
     async: {
         noWaitToken: string;

package/parser/VelcronConstants.js

@@ -27,6 +27,7 @@ exports.VelcronConstants = {
         rive: "rive",
         lottie: "lottie",
         "slide-panel": "slide-panel",
+        editor: "editor",
     },
     events: {
         idTokenStart: "$ev{",
@@ -44,7 +45,9 @@ exports.VelcronConstants = {
         propsToken: "$props"
     },
     context: {
-        thisToken: "$this"
+        thisToken: "$this",
+        editModeToken: "$editmode",
+        activeToken: "$active"
     },
     async: {
         noWaitToken: "nowait",

package/parser/VelcronData.js

@@ -10,11 +10,18 @@ class VelcronData {
         if (!VelcronData.isString(text)) {
             return text;
         }
+        //Bound to one state property and supports 2 way data binding > $bind: $state.title
         if (text.startsWith(VelcronConstants_1.VelcronConstants.state.bindToken)) {
-            //Bound to one state property and supports 2 way data binding > $bind: $state.title
             text = text.substring(VelcronConstants_1.VelcronConstants.state.bindToken.length).trim();
             return VelcronData.getOrSet(renderContext, text);
         }
+        //Built-in context tokens
+        if (text === VelcronConstants_1.VelcronConstants.context.editModeToken) {
+            return renderContext.$editmode;
+        }
+        else if (text === VelcronConstants_1.VelcronConstants.context.activeToken) {
+            return renderContext.$active;
+        }
         //String interpolation > {{ $state.title }} and {{ $state.description }}
         const tokens = this.getTokens(text, false);
         tokens.forEach((token) => {
@@ -92,6 +99,13 @@ class VelcronData {
         else if (overrideNamesMatching) {
             propertiesToEval = overrideNamesMatching;
         }
+        propertiesToEval ??= {};
+        if (template.indexOf(VelcronConstants_1.VelcronConstants.context.editModeToken) > -1) {
+            propertiesToEval[VelcronConstants_1.VelcronConstants.context.editModeToken] = "renderContext";
+        }
+        if (template.indexOf(VelcronConstants_1.VelcronConstants.context.activeToken) > -1) {
+            propertiesToEval[VelcronConstants_1.VelcronConstants.context.activeToken] = "renderContext";
+        }
         const reservedWords = [
             "null",
             "return"
@@ -100,8 +114,10 @@ class VelcronData {
         template = VelcronData.addCtxToVariableNames(template, skipName, reservedWords, propertiesToEval);
         names.push("rootCtx");
         names.push("currentCtx");
+        names.push("renderContext");
         obj.push(renderContext.rootContext);
         obj.push(renderContext.currentContext);
+        obj.push(renderContext);
         //TODO we shouls try catch and return info 
         const evalResult = Function(...names, "\"use strict\";return " + template)(...obj);
         return evalResult;

package/parser/VelcronRenderers.js

@@ -89,7 +89,8 @@ class VelcronRenderers {
             hooks: currentRenderCtx.hooks,
             computed: currentRenderCtx.computed,
             colors: currentRenderCtx.colors,
-            editMode: currentRenderCtx.editMode,
+            $editmode: currentRenderCtx.$editmode,
+            $active: currentRenderCtx.$active,
             //blueprints: currentRenderCtx.blueprints,
             disposers: currentRenderCtx.disposers,
             properties: currentRenderCtx.properties,

package/parser/VelcronStyles.js

@@ -89,14 +89,14 @@ class VelcronStyles {
         const styleBase = { ...definition.style };
         /**Generic styling */
         if (definition.margin) {
-            const spacing = renderCtx.theming.get.spacing();
+            const spacing = renderCtx.theming.get.spacing(definition);
             styleBase["marginTop"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.top), spacing));
             styleBase["marginRight"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.right), spacing));
             styleBase["marginBottom"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.bottom), spacing));
             styleBase["marginLeft"] = this.unitProvider.formatDimension((0, __1.getSpacingValueFromBlueprint)(VelcronData_1.VelcronData.dataBind(renderCtx, definition.margin.left), spacing));
         }
         if (definition.padding) {
-            const spacing = renderCtx.theming.get.spacing();
+            const spacing = renderCtx.theming.get.spacing(definition);
             //  const padding:VelcronSpacing = definition.padding instanceof Object ? definition.padding : 
             //                  VelcronData.getOrSetObjectByPathUsingRenderContext(renderCtx, definition.padding);             
             //const padding = VelcronData.dataBind(renderCtx, definition.padding) as any as VelcronDimensions;          

package/rules/IsEditMode.js

@@ -29,7 +29,7 @@ function isEditMode(definition, bindableProp, renderContext) {
     if ("edit" in definition && definition.edit !== undefined) {
         result = parser_1.VelcronData.evaluateBoolean(definition.edit, renderContext);
     }
-    else if (renderContext.editMode) {
+    else if (renderContext.$editmode) {
         result = true;
     }
     return result;

package/stores/VelcronTheming.d.ts

@@ -1,4 +1,4 @@
-import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes } from "..";
+import { ColorSchemaType, ColorSchemaTypes, ColorType, ColorTypes, ContainerBlueprint, ContainerVariant, ThemeDefinitionV2, TypographySize, TypographySizes, TypographyType, TypographyTypes, VelcronDefinition } from "..";
 export declare const useVelcronThemingStore: (newStateWithName?: string) => {
     state: {
         currentTheme: ThemeDefinitionV2;
@@ -7,7 +7,7 @@ export declare const useVelcronThemingStore: (newStateWithName?: string) => {
         componentBlueprints: () => void;
         containerBlueprint: (type: ContainerVariant | ContainerBlueprint | string) => any;
         colorSchema: (colorSchemaType: ColorSchemaTypes | ColorSchemaType) => import("..").ColorSchema;
-        spacing: () => import("..").SpacingDefinition;
+        spacing: (definition?: VelcronDefinition) => import("..").SpacingDefinition;
         typography: (typographyType: TypographyTypes | TypographyType, size: TypographySizes | TypographySize) => any;
         color: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => string;
         colorDefinition: (colorSchemaType: ColorSchemaTypes | ColorSchemaType, colorType: ColorTypes | ColorType) => import("..").ColorDefinition;

package/stores/VelcronTheming.js

@@ -22,8 +22,10 @@ exports.useVelcronThemingStore = (0, _1.defineVelcronStore)("VelcronTheming", {
             colorSchema: (colorSchemaType) => {
                 return (0, __1.useThemeMethods)(() => state.currentTheme).colorSchema(colorSchemaType);
             },
-            spacing: () => {
-                return state.currentTheme.spacing.primary.inner;
+            spacing: (definition) => {
+                return definition?.spacingType === "layout" ?
+                    state.currentTheme.spacing.primary.layout :
+                    state.currentTheme.spacing.primary.inner;
             },
             typography: (typographyType, size) => {
                 const typography = state.currentTheme.typography.primary;