@omnia/velcron 8.0.146-dev → 8.0.148-dev

package/models/VelcronDefinitions.d.ts

@@ -82,7 +82,8 @@ export interface VelcronRenderContextEventHandlersInstance extends VelcronRender
 export interface VelcronRenderContextHooks {
     dialogVisibilityChanged?: ((visible: boolean) => void);
     onItemSelected?: ((item: VelcronDefinition) => void);
-    onItemRendered?: ((item: VelcronDefinition) => OnItemRenderedHookResult);
+    wrapperStyleExtensions?: ((item: VelcronDefinition) => string);
+    appStyleExtension?: (() => string);
     onItemCreatedProps?: ((item: VelcronDefinition) => object);
 }
 export interface VelcronContainerRenderer {
@@ -123,8 +124,6 @@ export interface VelcronColorStyling {
     color?: string;
 }
 export interface VelcronTextStyling {
-    text: string;
-    placeholder?: string;
     typography?: string;
     size?: string;
 }
@@ -180,6 +179,8 @@ export interface VelcronCardDefinition extends VelcronDefinition, VelcronColorSt
 }
 export interface VelcronTextDefinition extends VelcronDefinitionWithEditMode, VelcronColorStyling, VelcronTextStyling {
     type: "text";
+    value: VelcronBindableProp<string>;
+    placeholder?: VelcronBindableProp<string>;
     editLabel?: VelcronBindableProp;
     lineClamp?: number;
     noWrap?: boolean;
@@ -245,6 +246,8 @@ export interface VelcronIconDefinition extends VelcronDefinition, VelcronColorSt
 }
 export interface VelcronMarkdownDefinition extends VelcronDefinitionWithEditMode, VelcronColorStyling, VelcronTextStyling {
     type: "markdown";
+    value: VelcronBindableProp<string>;
+    placeholder: VelcronBindableProp<string>;
     events: VelcronOnUpdatedEvent;
 }
 export interface VelcronRiveDefinition extends VelcronDefinition {

package/package.json

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

package/parser/VelcronRenderers.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronRenderers = void 0;
-const VelcronData_1 = require("./VelcronData");
 const __1 = require("..");
 class VelcronRenderers {
     static { this.components = {}; }
@@ -96,10 +95,12 @@ class VelcronRenderers {
             properties: currentRenderCtx.properties,
         };
         if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
-            const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
-            const colorSchemaType = VelcronData_1.VelcronData.dataBind(currentRenderCtx, definition.colorSchemaType);
-            colorSchemaStore.actions.setThemeStore(currentRenderCtx.theming, colorSchemaType);
-            result.colors = colorSchemaStore;
+            const colorSchemaType = __1.VelcronData.dataBind(currentRenderCtx, definition.colorSchemaType);
+            if (colorSchemaType && colorSchemaType !== "" && result.colors.state.colorSchemaType !== colorSchemaType) {
+                const colorSchemaStore = (0, __1.useVelcronColorSchemaStore)(definition.key.toString());
+                colorSchemaStore.actions.setThemeStore(currentRenderCtx.theming, colorSchemaType);
+                result.colors = colorSchemaStore;
+            }
         }
         return result;
     }

package/stores/VelcronColorSchema.d.ts

@@ -9,26 +9,6 @@ export declare const useVelcronColorSchemaStore: (newStateWithName?: string) =>
         isContainer: boolean;
         name: string;
         colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic";
-        themeStore: {
-            state: {
-                currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
-            };
-            get: {
-                componentBlueprints: () => void;
-                colorSchema: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic") => ColorSchema;
-                spacing: () => import("@omnia/fx-models").SpacingDefinition;
-                typography: (typographyType: "title" | "text" | "navigation" | import("@omnia/fx-models").TypographyTypes, size: "xs" | "s" | "m" | "l" | "xl" | import("@omnia/fx-models").TypographySizes) => any;
-                color: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
-                colorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
-                complementaryColorType: (colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => import("@omnia/fx-models").ColorTypes;
-                complementaryColor: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => string;
-                complementaryColorDefinition: (colorSchemaType: "info" | "error" | "primary" | "secondary" | ColorSchemaTypes | "accent1" | "accent2" | "accent3" | "neutral" | "warning" | "notification" | "background" | "dynamic", colorType: "base" | "onBase" | "container" | "onContainer" | import("@omnia/fx-models").ColorTypes) => ColorDefinition;
-                currentTheme: () => import("@omnia/fx-models").ThemeDefinitionV2;
-            };
-            actions: {
-                setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
-            };
-        };
         id: import("@omnia/fx-models").GuidValue;
     };
     get: {

package/stores/VelcronColorSchema.js

@@ -12,10 +12,13 @@ exports.useVelcronColorSchemaStore = (0, _1.defineVelcronStore)("ColorSchemaStor
                 container: {},
                 onContainer: {},
                 isContainer: false,
-                name: "",
+                name: (0, fx_models_1.valueOf)(""),
                 colorSchemaType: fx_models_1.ColorSchemaTypes.background,
-                themeStore: undefined,
                 id: fx_models_1.Guid.newGuid(),
+            },
+            //The private state is not reactive that means it will not trigger re-rendering of the component
+            privateState: {
+                themeStore: (0, fx_models_1.valueOf)(null)
             }
         };
     },
@@ -56,17 +59,16 @@ exports.useVelcronColorSchemaStore = (0, _1.defineVelcronStore)("ColorSchemaStor
             },
             get onContainer() {
                 return onContainer();
-            },
+            }
         };
     },
-    actions(state) {
+    actions(state, privateState) {
         function setThemeStore(themeStoreInstance, colorSchemaType, container) {
-            state.themeStore = themeStoreInstance;
+            privateState.themeStore = themeStoreInstance;
             setColorSchema(colorSchemaType ? colorSchemaType : state.colorSchemaType, container);
         }
         function setColorSchema(colorSchemaType, container) {
-            const colorSchema = state.themeStore.get.colorSchema(colorSchemaType);
-            //ctx.mutate.colorSchema(colorSchema);
+            const colorSchema = privateState.themeStore.get.colorSchema(colorSchemaType);
             state.colorSchemaType = colorSchemaType;
             state.name = colorSchema.name;
             state.isContainer = container ? true : false;
@@ -81,4 +83,3 @@ exports.useVelcronColorSchemaStore = (0, _1.defineVelcronStore)("ColorSchemaStor
         };
     }
 });
-//return schemaStore;

package/stores/VelcronStore.js

@@ -9,7 +9,13 @@ function defineVelcronStore(name, definition) {
             name = newStateWithName;
         }
         if (!stateMap.has(name)) {
-            stateMap.set(name, _1.ReactivitySystem.makeReactive(definition.setup()));
+            //NOTE: At the moment the privateState is not reactive this is because we dont have a way to declare non reactive stuff
+            //we needed it in useVelcronColorSchemaStore. If we need privateState to be reactive and support non reactive stuff
+            // we need to rewrite defineVelcronStore to the new defineStore pattern that supports setup in a better way
+            const setup = definition.setup();
+            const reactive = _1.ReactivitySystem.makeReactive(setup.state);
+            setup.state = reactive;
+            stateMap.set(name, setup);
         }
         const reactiveState = stateMap.get(name);
         return {