@omnia/velcron 7.0.513-dev → 7.0.515-dev

package/models/VelcronDefinitions.d.ts

@@ -2,7 +2,7 @@ import { VelcronComponentDescriptor } from "./VelcronDescriptors";
 import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VerticalAlignments } from "./Enums";
-import { useVelcronThemingStore } from "..";
+import { ColorSchema, useVelcronThemingStore } from "..";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -33,6 +33,8 @@ export interface VelcronRenderContext {
     rootContext: DynamicViewModel;
     currentContext: DynamicViewModel;
     theming?: ReturnType<typeof useVelcronThemingStore>;
+    colorSchemaName?: string;
+    colorSchema?: ColorSchema;
     actions?: {
         [name: string]: [];
     };
@@ -91,6 +93,9 @@ export interface VelcronDefinitionBase {
      */
     key?: string;
 }
+export interface VelcronCustomThemeSettings {
+    colorSchema?: string;
+}
 export interface VelcronDefinition extends VelcronDefinitionBase {
     body?: Array<VelcronDefinition>;
     style?: VelcronStyling;
@@ -202,7 +207,7 @@ export interface VelcronIconDefinition extends VelcronDefinition {
     size?: number;
     events?: VelcronOnPressEvent;
 }
-export interface VelcronFlexViewDefinition extends VelcronDefinition {
+export interface VelcronFlexViewDefinition extends VelcronDefinition, VelcronCustomThemeSettings {
     type: "FlexView";
     column?: boolean;
     body: Array<VelcronDefinition>;
@@ -212,7 +217,6 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition {
     grow?: number;
     border?: VelcronBorder;
     borderRadius?: VelcronDimensions;
-    colorSchema?: string;
     width: string;
 }
 export interface VelcronDimensions {

package/package.json

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

package/parser/VelcronRenderers.d.ts

@@ -1,4 +1,4 @@
-import { BuiltInComponentRenderers, DynamicViewModel, ResolvedComponentRenderer, VelcronDefinition, VelcronRenderContext } from "../models";
+import { BuiltInComponentRenderers, DynamicViewModel, ResolvedComponentRenderer, VelcronCustomComponentDefinition, VelcronDefinition, VelcronRenderContext } from "../models";
 export declare class VelcronRenderers {
     private static components;
     static registerComponent(type: string, component: any): void;
@@ -6,5 +6,31 @@ export declare class VelcronRenderers {
     static hasComponent(type: string): any;
     static registerComponents(components: BuiltInComponentRenderers): void;
     static getComponent(definition: VelcronDefinition, renderContext: VelcronRenderContext): ResolvedComponentRenderer;
+    static definitionContainsCustomColorSchema(definition: VelcronDefinition): boolean;
+    static createNewRendererContext(currentRenderCtx: VelcronRenderContext, definition: VelcronDefinition, newViewModel?: DynamicViewModel): {
+        rootContext: object;
+        theming: {
+            state: {
+                currentTheme: import("@omnia/fx-models").ThemeDefinitionV2;
+            };
+            get: {
+                colorSchema: (schema: string) => import("@omnia/fx-models").ColorSchema;
+                typography: (name: string) => import("@omnia/fx-models").TypographyType;
+                color: (schemaName: string, colorType: string) => string;
+            };
+            actions: {
+                setTheme(newTheme: import("@omnia/fx-models").ThemeDefinitionV2): void;
+            };
+        };
+        currentContext: object;
+        actions: {
+            [name: string]: [];
+        };
+        components: VelcronCustomComponentDefinition[];
+        hooks: import("../models").VelcronRenderContextHooks;
+        computed: {
+            [name: string]: [];
+        };
+    };
     static ensureRenderContext(rendererInfo: ResolvedComponentRenderer, definition: VelcronDefinition, currentRenderCtx: VelcronRenderContext, newViewModel?: DynamicViewModel): VelcronRenderContext;
 }

package/parser/VelcronRenderers.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VelcronRenderers = void 0;
 const VelcronLogger_1 = require("./VelcronLogger");
 const VelcronData_1 = require("./VelcronData");
+const stores_1 = require("../stores");
 class VelcronRenderers {
     static registerComponent(type, component) {
         type = type.toLowerCase();
@@ -59,19 +60,37 @@ class VelcronRenderers {
         }
         return result;
     }
+    static definitionContainsCustomColorSchema(definition) {
+        return (definition.colorSchema && definition.colorSchema !== "");
+    }
+    static createNewRendererContext(currentRenderCtx, definition, newViewModel) {
+        const result = {
+            rootContext: currentRenderCtx.rootContext,
+            theming: currentRenderCtx.theming,
+            currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
+            actions: currentRenderCtx.actions,
+            components: currentRenderCtx.components,
+            hooks: currentRenderCtx.hooks,
+            computed: currentRenderCtx.computed,
+        };
+        if (VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
+            const schema = VelcronData_1.VelcronData.dataBind(result, definition.colorSchema);
+            result.colorSchemaName = stores_1.ReactivitySystem.makeReactive(schema);
+            result.colorSchema = result.theming.get.colorSchema(result.colorSchemaName);
+        }
+        else {
+            result.colorSchemaName = currentRenderCtx.colorSchemaName;
+            result.colorSchema = currentRenderCtx.colorSchema;
+        }
+        return result;
+    }
     static ensureRenderContext(rendererInfo, definition, currentRenderCtx, newViewModel) {
         //Ensure we have the correct render context passing properties etc to sub components 
         let result = currentRenderCtx;
-        if (rendererInfo.customComponent || newViewModel) {
-            result = {
-                rootContext: currentRenderCtx.rootContext,
-                theming: currentRenderCtx.theming,
-                currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
-                actions: currentRenderCtx.actions,
-                components: currentRenderCtx.components,
-                hooks: currentRenderCtx.hooks,
-                computed: currentRenderCtx.computed
-            };
+        if (rendererInfo.customComponent
+            || newViewModel ||
+            VelcronRenderers.definitionContainsCustomColorSchema(definition)) {
+            result = VelcronRenderers.createNewRendererContext(currentRenderCtx, definition, newViewModel);
             if (rendererInfo.customComponent) {
                 //Fetch the custom component definition
                 const customDef = rendererInfo.definition;

package/parser/VelcronStyles.js

@@ -22,10 +22,10 @@ class VelcronStyles {
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
             const textDefinition = definition;
             if (textDefinition.color) {
-                styleBase["color"] = renderCtx.theming.get.colorFromActiveSchema(textDefinition.color);
+                styleBase["color"] = renderCtx.theming.get.color(renderCtx.colorSchemaName, textDefinition.color);
             }
             else {
-                styleBase["color"] = renderCtx.theming.get.activeColorSchema().onBase.color;
+                styleBase["color"] = renderCtx.colorSchema.onBase.color;
             }
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.flexView) {
@@ -53,8 +53,8 @@ class VelcronStyles {
                 }
             }
             if (flexViewDefinition.colorSchema && flexViewDefinition.colorSchema != "") {
-                const color = renderCtx.theming.get.activeColorSchema().base.color;
-                styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
+                //styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
+                styleBase["backgroundColor"] = renderCtx.colorSchema.base.color;
             }
         }
         return VelcronStyles.styleProvider(styleBase, definition, renderCtx);

package/stores/VelcronStore.d.ts

@@ -1,9 +1,12 @@
-export declare const defineVelcronStore: <TState, TGetters, TActions>(name: string, definition: {
-    state: TState;
-    getters: (state: TState) => TGetters;
-    actions: (state: TState) => TActions;
-}) => () => {
-    state: TState;
+export declare const defineVelcronStore: <TSetup extends {
+    state: object;
+    privateState?: object;
+}, TGetters, TActions>(name: string, definition: {
+    setup: () => TSetup;
+    getters?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TGetters;
+    actions?: (state: TSetup["state"], privateState?: TSetup["privateState"]) => TActions;
+}) => (newStateWithName?: string) => {
+    state: TSetup["state"];
     get: TGetters;
     actions: TActions;
 };

package/stores/VelcronStore.js

@@ -4,17 +4,29 @@ exports.defineVelcronStore = void 0;
 const ReactivitySystem_1 = require("./ReactivitySystem");
 const stateMap = new Map();
 const defineVelcronStore = (name, definition) => {
-    const result = () => {
+    const result = (newStateWithName) => {
+        if (newStateWithName && newStateWithName !== "" && newStateWithName !== name) {
+            name = newStateWithName;
+        }
         if (!stateMap.has(name)) {
-            stateMap.set(name, ReactivitySystem_1.ReactivitySystem.makeReactive(definition.state));
+            stateMap.set(name, ReactivitySystem_1.ReactivitySystem.makeReactive(definition.setup()));
         }
         const reactiveState = stateMap.get(name);
         return {
-            state: reactiveState,
-            get: definition.getters(reactiveState),
-            actions: definition.actions(reactiveState)
+            state: reactiveState.state,
+            get: definition.getters(reactiveState.state, reactiveState.privateState),
+            actions: definition.actions(reactiveState.state, reactiveState.privateState)
         };
     };
     return result;
 };
 exports.defineVelcronStore = defineVelcronStore;
+const pelle = (0, exports.defineVelcronStore)("pelle", {
+    setup() {
+        return {
+            state: {
+                test: "Hello"
+            },
+        };
+    }
+});

package/stores/VelcronTheming.d.ts

@@ -1,16 +1,14 @@
-import { ColorSchema, ThemeDefinitionV2, TypographyType } from "..";
-export declare const useVelcronThemingStore: () => {
+import { ThemeDefinitionV2, TypographyType } from "..";
+export declare const useVelcronThemingStore: (newStateWithName?: string) => {
     state: {
         currentTheme: ThemeDefinitionV2;
-        activeSchema: string;
     };
     get: {
-        activeColorSchema: () => ColorSchema;
+        colorSchema: (schema: string) => import("..").ColorSchema;
         typography: (name: string) => TypographyType;
-        colorFromActiveSchema: (name: string) => string;
+        color: (schemaName: string, colorType: string) => string;
     };
     actions: {
-        setActiveSchema(name: string): void;
         setTheme(newTheme: ThemeDefinitionV2): void;
     };
 };

package/stores/VelcronTheming.js

@@ -4,34 +4,37 @@ exports.useVelcronThemingStore = void 0;
 const __1 = require("..");
 const VelcronStore_1 = require("./VelcronStore");
 exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
-    state: {
-        currentTheme: {},
-        activeSchema: ""
+    setup() {
+        return {
+            state: {
+                currentTheme: {}
+            }
+        };
     },
     getters(state) {
-        const activeColorSchema = () => {
-            if (state.activeSchema === __1.ColorSchemaTypes.primary) {
+        const colorSchema = (schema) => {
+            if (schema === __1.ColorSchemaTypes.primary) {
                 return state.currentTheme?.primary;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.secondary) {
+            else if (schema === __1.ColorSchemaTypes.secondary) {
                 return state.currentTheme?.secondary;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.accent1) {
+            else if (schema === __1.ColorSchemaTypes.accent1) {
                 return state.currentTheme?.accent1;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.accent2) {
+            else if (schema === __1.ColorSchemaTypes.accent2) {
                 return state.currentTheme?.accent2;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.accent3) {
+            else if (schema === __1.ColorSchemaTypes.accent3) {
                 return state.currentTheme?.accent3;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.background) {
+            else if (schema === __1.ColorSchemaTypes.background) {
                 return state.currentTheme?.background;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.neutral) {
+            else if (schema === __1.ColorSchemaTypes.neutral) {
                 return state.currentTheme?.neutral;
             }
-            else if (state.activeSchema === __1.ColorSchemaTypes.error) {
+            else if (schema === __1.ColorSchemaTypes.error) {
                 return state.currentTheme?.error;
             }
             return state.currentTheme?.background;
@@ -57,44 +60,42 @@ exports.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("Velcron
             }
             return state.currentTheme.typography.text;
         };
-        const colorFromActiveSchema = (name) => {
-            if (name === __1.ColorTypes.base) {
-                return activeColorSchema().base.color;
+        const color = (schemaName, colorType) => {
+            const mappedColorSchema = colorSchema(schemaName);
+            if (colorType === __1.ColorTypes.base) {
+                return mappedColorSchema.base.color;
             }
-            else if (name === __1.ColorTypes.baseTone) {
-                return activeColorSchema().base.colorToned;
+            else if (colorType === __1.ColorTypes.baseTone) {
+                return mappedColorSchema.base.colorToned;
             }
-            else if (name === __1.ColorTypes.onBase) {
-                return activeColorSchema().onBase.color;
+            else if (colorType === __1.ColorTypes.onBase) {
+                return mappedColorSchema.onBase.color;
             }
-            else if (name === __1.ColorTypes.onBaseTone) {
-                return activeColorSchema().onBase.colorToned;
+            else if (colorType === __1.ColorTypes.onBaseTone) {
+                return mappedColorSchema.onBase.colorToned;
             }
-            else if (name === __1.ColorTypes.container) {
-                return activeColorSchema().container.color;
+            else if (colorType === __1.ColorTypes.container) {
+                return mappedColorSchema.container.color;
             }
-            else if (name === __1.ColorTypes.containerTone) {
-                return activeColorSchema().container.colorToned;
+            else if (colorType === __1.ColorTypes.containerTone) {
+                return mappedColorSchema.container.colorToned;
             }
-            else if (name === __1.ColorTypes.onContainer) {
-                return activeColorSchema().onContainer.color;
+            else if (colorType === __1.ColorTypes.onContainer) {
+                return mappedColorSchema.onContainer.color;
             }
-            else if (name === __1.ColorTypes.onContainerTone) {
-                return activeColorSchema().onContainer.colorToned;
+            else if (colorType === __1.ColorTypes.onContainerTone) {
+                return mappedColorSchema.onContainer.colorToned;
             }
-            return name;
+            return colorType;
         };
         return {
-            activeColorSchema,
+            colorSchema,
             typography,
-            colorFromActiveSchema
+            color
         };
     },
     actions(state) {
         return {
-            setActiveSchema(name) {
-                state.activeSchema = name;
-            },
             setTheme(newTheme) {
                 state.currentTheme = newTheme;
             }