@omnia/velcron 7.0.501-dev → 7.0.503-dev

package/models/VelcronDefinitions.d.ts

@@ -2,24 +2,26 @@ import { VelcronComponentDescriptor } from "./VelcronDescriptors";
 import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VelcronSectionColumnWidthTypes, VerticalAlignments } from "./Enums";
+import { VelcronTheming } from "..";
 export interface ResolvedComponentRenderer {
-    component: any;
+    component: unknown;
     definition: VelcronDefinition;
     customComponent: boolean;
 }
 export interface BuiltInComponentRenderers {
-    "View": any;
-    "Card": any;
-    "Text": any;
-    "Image": any;
-    "Button": any;
-    "TextInput": any;
-    "ProgressCircle": any;
-    "WebView": any;
-    "CustomComponent": any;
-    "Dialog": any;
-    "FlexView": any;
-    "Icon": any;
+    "View": unknown;
+    "Card": unknown;
+    "Text": unknown;
+    "Image": unknown;
+    "Button": unknown;
+    "TextInput": unknown;
+    "ProgressCircle": unknown;
+    "WebView": unknown;
+    "CustomComponent": unknown;
+    "Dialog": unknown;
+    "FlexView": unknown;
+    "Icon": unknown;
+    "Chip": unknown;
 }
 export type DynamicViewModel = object;
 export interface OnItemRenderedHookResult {
@@ -30,6 +32,7 @@ export interface VelcronRenderContext {
     id?: string;
     rootContext: DynamicViewModel;
     currentContext: DynamicViewModel;
+    theming?: VelcronTheming;
     actions?: {
         [name: string]: [];
     };
@@ -213,6 +216,14 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition {
 export interface VelcronSectionColumnWidth {
     type: VelcronSectionColumnWidthTypes;
 }
+export interface VelcronChipDefinition extends VelcronDefinition {
+    type: "Chip";
+    text: string;
+    colorSchema: string;
+    icon?: VelcronIcon;
+    disabled?: boolean;
+    events?: VelcronOnPressEvent;
+}
 /*** Custom Components ***********************************************************************/
 export type VelcronCustomComponentDefinition = VelcronComponentDescriptor & VelcronComponentDefinition;
 export type VelcronRenderProps<TDefinition> = {

package/package.json

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

package/parser/VelcronConstants.d.ts

@@ -12,6 +12,7 @@ export declare const VelcronConstants: {
         dialog: string;
         flexView: string;
         icon: string;
+        chip: string;
     };
     events: {
         idTokenStart: string;

package/parser/VelcronConstants.js

@@ -14,7 +14,8 @@ exports.VelcronConstants = {
         webView: "WebView",
         dialog: "Dialog",
         flexView: "FlexView",
-        icon: "Icon"
+        icon: "Icon",
+        chip: "Chip"
     },
     events: {
         idTokenStart: "$ev{",

package/parser/VelcronRenderers.js

@@ -13,10 +13,6 @@ class VelcronRenderers {
             throw `Velcron Component of type ${type} is already registered`;
         }
     }
-    // private static reactivePropertyCreator: (objToCreateOn: object, propertyName: string, value: any ) => void
-    // static registerReactiveObjectCreator(reactivePropertyCreator: (objToCreateOn: object, propertyName: string, value: any) => void){
-    //         this.reactivePropertyCreator = reactivePropertyCreator;
-    // }
     static hasComponents() {
         return Object.keys(this.components).length > 0;
     }
@@ -69,6 +65,7 @@ class VelcronRenderers {
         if (rendererInfo.customComponent || newViewModel) {
             result = {
                 rootContext: currentRenderCtx.rootContext,
+                theming: currentRenderCtx.theming,
                 currentContext: newViewModel ? newViewModel : currentRenderCtx.currentContext,
                 actions: currentRenderCtx.actions,
                 components: currentRenderCtx.components,
@@ -86,10 +83,6 @@ class VelcronRenderers {
                             VelcronLogger_1.VelcronLogger.logCustomComponentError(`Component of type ${customDef.type} requires property ${propName} but its missing`);
                         }
                         result.properties = result.properties || {};
-                        //Callback to reactive property creator (for example vue register to make it using Vue.set but can be different in react etc)
-                        // if(!result.properties){
-                        //     this.reactivePropertyCreator(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

package/parser/VelcronStyles.d.ts

@@ -1,19 +1,7 @@
 import { VelcronDefinition, VelcronRenderContext } from "../models";
-export declare enum VelcronSizeUnits {
-    Pixels = 1,
-    Numbers = 2
-}
-export interface VelcronStyleSettings {
-    sizeUnit: VelcronSizeUnits;
-}
 export declare class VelcronStyles {
-    private static styleSettings;
-    static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): any;
-    private static createStylesForText;
-    private static createStylesForImage;
-    private static createStylesForFlexbox;
-    private static createStylesForLayoutColumnComponent;
+    static styleProvider: (definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object;
+    static registerStyleProvider(fn: (definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object): void;
+    static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object;
     private static dataBindStyles;
-    private static setUnitForValue;
-    private static setup;
 }

package/parser/VelcronStyles.js

@@ -1,124 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VelcronStyles = exports.VelcronSizeUnits = void 0;
+exports.VelcronStyles = void 0;
 const VelcronData_1 = require("./VelcronData");
-const models_1 = require("../models");
-const VelcronConstants_1 = require("./VelcronConstants");
-var VelcronSizeUnits;
-(function (VelcronSizeUnits) {
-    VelcronSizeUnits[VelcronSizeUnits["Pixels"] = 1] = "Pixels";
-    VelcronSizeUnits[VelcronSizeUnits["Numbers"] = 2] = "Numbers";
-})(VelcronSizeUnits = exports.VelcronSizeUnits || (exports.VelcronSizeUnits = {}));
 class VelcronStyles {
+    static registerStyleProvider(fn) {
+        VelcronStyles.styleProvider = fn;
+    }
     static create(definition, renderCtx) {
-        let result = { ...definition.style };
-        if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
-            result = this.createStylesForImage(definition, result);
-        }
-        else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
-            result = this.createStylesForText(definition, result);
-        }
-        else if (definition.type === VelcronConstants_1.VelcronConstants.components.flexView) {
-            //result = this.createStylesForSection(definition as VelcronFlexBoxDefinition, result);
-            result = this.createStylesForFlexbox(definition, result);
-        }
-        // else if (definition.type === VelcronConstants.components.flexPanel) {
-        //     result = this.createStylesForColumn(definition as VelcronFlexBoxDefinition, result);
-        // }
+        let result = VelcronStyles.styleProvider(definition, renderCtx);
         if (renderCtx) {
             result = VelcronStyles.dataBindStyles(result, renderCtx);
         }
         return result;
     }
-    static createStylesForText(textDefinition, styles) {
-        // const themeStore = useInject(ThemeStore);
-        // if (textDefinition.color && textDefinition.color != "") {
-        //     styles["color"] = themeStore.getters.getColor(textDefinition.color);
-        // }
-        // else {
-        //     styles["color"] = themeStore.getters.activeSchema().onBase.color;
-        // }
-        // const typography = themeStore.getters.typography(textDefinition.typography);
-        // styles["fontSize"] = this.setUnitForValue(typography.large.size);
-        // styles["font-weight"] = typography.large.weight;
-        // styles["line-height"] = this.setUnitForValue(typography.large.lineHeight);
-        return styles;
-    }
-    static createStylesForImage(imageDef, styles) {
-        if (!styles.width) {
-            styles.width = this.setUnitForValue(200);
-        }
-        if (!styles.height) {
-            styles.height = this.setUnitForValue(400);
-        }
-        styles.flex = "0 0 auto!important";
-        return styles;
-    }
-    // private static createStylesForSection(sectionDef: VelcronFlexBoxDefinition, styles: any) {
-    //     styles.display = "flex";
-    //     styles.width = "100%";
-    //     styles["flex-direction"] = sectionDef.column ? "column" : "row";
-    //     return styles;
-    // }
-    static createStylesForFlexbox(flexViewDefinition, styles) {
-        const flexGrow = flexViewDefinition.grow ? flexViewDefinition.grow : 1;
-        const flextShrink = flexGrow;
-        styles.display = "flex";
-        styles.flex = flexGrow;
-        styles["max-width"] = "100%";
-        styles["flex-direction"] = flexViewDefinition.column ? "column" : "row";
-        //Auto
-        if (flexViewDefinition.width && flexViewDefinition.width === models_1.VelcronSectionColumnWidthTypes.auto) {
-            styles["flex"] = `${flexGrow} ${flextShrink} auto`;
-        }
-        //Pixels
-        else if (flexViewDefinition.width && VelcronData_1.VelcronData.isString(flexViewDefinition.width) && flexViewDefinition.width.endsWith("px")) {
-            //width["flex"] = `${flexGrow} ${flextShrink} ${columnDef.width}`;
-            styles["max-width"] = this.setUnitForValue(flexViewDefinition.width);
-        }
-        //Percentage
-        else if (flexViewDefinition.width && (isNaN(flexViewDefinition.width) === false)) {
-            styles["flex"] = `${flexGrow} ${flextShrink} ${flexViewDefinition.width}%`;
-        }
-        // if (columnDef.horizontalAlignment && columnDef.horizontalAlignment !== VelcronHorizontalAlignments.left) {
-        //     //Need to add this to make horizontalAlignment work for child div
-        //     result["flex-direction"] = "column";
-        // }
-        if (flexViewDefinition.horizontalAlignment) {
-            //Need to add this to make horizontalAlignment work for child div
-            styles["justify-content"] = flexViewDefinition.horizontalAlignment;
-        }
-        if (flexViewDefinition.verticalAlignment) {
-            if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.center) {
-                //result["flex-direction"] = "column";
-                styles["align-items"] = "center";
-            }
-            else if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.bottom) {
-                //result["flex-direction"] = "column";
-                styles["align-items"] = "flex-end";
-            }
-        }
-        // if (flexViewDefinition.colorSchema && flexViewDefinition.colorSchema != "") {
-        //     const themeStore = useInject(ThemeStore);
-        //     styles["background-color"] = themeStore.getters.activeSchema().base.color;
-        // }
-        //Color
-        //if(flexViewDefinition.co)
-        //const { theming } =  useTheme();
-        return styles;
-    }
-    static createStylesForLayoutColumnComponent(layoutDef, columnDef, styles) {
-        styles.display = "flex";
-        if (columnDef.horizontalAlignment) {
-            if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
-                styles["justify-content"] = "center";
-            }
-            else if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
-                styles["justify-content"] = "flex-end";
-            }
-        }
-        return styles;
-    }
     static dataBindStyles(styles, renderCtx) {
         Object.keys(styles).forEach((key) => {
             const style = styles[key];
@@ -128,17 +22,5 @@ class VelcronStyles {
         });
         return styles;
     }
-    static setUnitForValue(value) {
-        if (this.styleSettings.sizeUnit === VelcronSizeUnits.Pixels) {
-            return value + "px";
-        }
-        return value;
-    }
-    static setup(settings) {
-        this.styleSettings = settings;
-    }
 }
 exports.VelcronStyles = VelcronStyles;
-VelcronStyles.styleSettings = {
-    sizeUnit: VelcronSizeUnits.Pixels
-};

package/stores/VelcronStore.d.ts

@@ -1,6 +1,6 @@
 export declare class VelcronStore {
-    static makeReactive: (obj: any) => unknown;
-    static reactivityCreator(fn: (obj: any) => unknown): void;
+    static reactivityProvider: (obj: any) => unknown;
+    static registerReactivityProvider(fn: (obj: any) => unknown): void;
     state<T>(obj: T): T;
     mutation(fn: () => void): void;
 }

package/stores/VelcronStore.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TestStore = exports.VelcronStore = void 0;
 class VelcronStore {
-    static reactivityCreator(fn) {
-        VelcronStore.makeReactive = fn;
+    static registerReactivityProvider(fn) {
+        VelcronStore.reactivityProvider = fn;
     }
     state(obj) {
-        if (!VelcronStore.makeReactive) {
+        if (!VelcronStore.reactivityProvider) {
             throw new Error("Reactivity creator not set");
         }
-        return VelcronStore.makeReactive(obj);
+        return VelcronStore.reactivityProvider(obj);
     }
     mutation(fn) {
         fn();

package/stores/VelcronTheming.d.ts

@@ -0,0 +1,13 @@
+import { ColorSchema, ThemeDefinitionV2, TypographyType } from "..";
+import { VelcronStore } from "./VelcronStore";
+export declare class VelcronTheming extends VelcronStore {
+    currentTheme: ThemeDefinitionV2;
+    private activeSchemaState;
+    typography: (name: string) => TypographyType;
+    activeColorSchema: () => ColorSchema;
+    getColorFromActiveSchema: (name: any) => string;
+    mutations: {
+        setActiveSchema: (name: string) => void;
+        setTheme: (newTheme: ThemeDefinitionV2) => void;
+    };
+}

package/stores/VelcronTheming.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VelcronTheming = void 0;
+const __1 = require("..");
+const VelcronStore_1 = require("./VelcronStore");
+class VelcronTheming extends VelcronStore_1.VelcronStore {
+    constructor() {
+        super(...arguments);
+        this.currentTheme = this.state({});
+        this.activeSchemaState = this.state("");
+        this.typography = (name) => {
+            if (name === __1.TypographyTypes.h1) {
+                return this.currentTheme.typography.h1;
+            }
+            else if (name === __1.TypographyTypes.h2) {
+                return this.currentTheme.typography.h2;
+            }
+            else if (name === __1.TypographyTypes.h3) {
+                return this.currentTheme.typography.h3;
+            }
+            else if (name === __1.TypographyTypes.caption) {
+                return this.currentTheme.typography.caption;
+            }
+            else if (name === __1.TypographyTypes.link) {
+                return this.currentTheme.typography.link;
+            }
+            else if (name === __1.TypographyTypes.text) {
+                return this.currentTheme.typography.text;
+            }
+            return this.currentTheme.typography.text;
+        };
+        this.activeColorSchema = () => {
+            if (this.activeSchemaState === __1.ColorSchemaTypes.primary) {
+                return this.currentTheme.primary;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.secondary) {
+                return this.currentTheme.secondary;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent1) {
+                return this.currentTheme.accent1;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent2) {
+                return this.currentTheme.accent2;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent3) {
+                return this.currentTheme.accent3;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.background) {
+                return this.currentTheme.background;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.neutral) {
+                return this.currentTheme.neutral;
+            }
+            else if (this.activeSchemaState === __1.ColorSchemaTypes.error) {
+                return this.currentTheme.error;
+            }
+            return this.currentTheme.background;
+        };
+        this.getColorFromActiveSchema = (name) => {
+            if (name === __1.ColorTypes.base) {
+                return this.activeColorSchema().base.color;
+            }
+            else if (name === __1.ColorTypes.baseTone) {
+                return this.activeColorSchema().base.colorToned;
+            }
+            else if (name === __1.ColorTypes.onBase) {
+                return this.activeColorSchema().onBase.color;
+            }
+            else if (name === __1.ColorTypes.onBaseTone) {
+                return this.activeColorSchema().onBase.colorToned;
+            }
+            else if (name === __1.ColorTypes.container) {
+                return this.activeColorSchema().container.color;
+            }
+            else if (name === __1.ColorTypes.containerTone) {
+                return this.activeColorSchema().container.colorToned;
+            }
+            else if (name === __1.ColorTypes.onContainer) {
+                return this.activeColorSchema().onContainer.color;
+            }
+            else if (name === __1.ColorTypes.onContainerTone) {
+                return this.activeColorSchema().onContainer.colorToned;
+            }
+            return name;
+        };
+        this.mutations = {
+            setActiveSchema: (name) => {
+                this.activeSchemaState = name;
+            },
+            setTheme: (newTheme) => {
+                this.currentTheme = newTheme;
+            }
+        };
+    }
+}
+exports.VelcronTheming = VelcronTheming;

package/stores/index.d.ts

@@ -1 +1,2 @@
 export * from "./VelcronStore";
+export * from "./VelcronTheming";

package/stores/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./VelcronStore"), exports);
+tslib_1.__exportStar(require("./VelcronTheming"), exports);