@omnia/velcron 7.0.499-dev → 7.0.500-dev

package/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./models";
 export * from "./parser";
 export * from "./actions";
+export * from "./stores";
+export * from "../../../shared/models";

package/index.js

@@ -4,3 +4,5 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./models"), exports);
 tslib_1.__exportStar(require("./parser"), exports);
 tslib_1.__exportStar(require("./actions"), exports);
+tslib_1.__exportStar(require("./stores"), exports);
+tslib_1.__exportStar(require("../../../shared/models"), exports);

package/models/Enums.d.ts

@@ -38,8 +38,10 @@ export declare enum VelcronDescriptorTypes {
 }
 export declare enum VelcronComponentPropertyEditors {
     text = 0,
-    colorPicker = 1,
-    slider = 2
+    colorSchemaPicker = 1,
+    slider = 2,
+    colorPicker = 3,
+    typographyPicker = 4
 }
 export declare enum VelcronDataTypes {
     unknown = "unknown",

package/models/Enums.js

@@ -49,8 +49,10 @@ var VelcronDescriptorTypes;
 var VelcronComponentPropertyEditors;
 (function (VelcronComponentPropertyEditors) {
     VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["text"] = 0] = "text";
-    VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["colorPicker"] = 1] = "colorPicker";
+    VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["colorSchemaPicker"] = 1] = "colorSchemaPicker";
     VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["slider"] = 2] = "slider";
+    VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["colorPicker"] = 3] = "colorPicker";
+    VelcronComponentPropertyEditors[VelcronComponentPropertyEditors["typographyPicker"] = 4] = "typographyPicker";
 })(VelcronComponentPropertyEditors = exports.VelcronComponentPropertyEditors || (exports.VelcronComponentPropertyEditors = {}));
 var VelcronDataTypes;
 (function (VelcronDataTypes) {

package/models/VelcronDefinitions.d.ts

@@ -23,7 +23,7 @@ export interface BuiltInComponentRenderers {
 }
 export type DynamicViewModel = object;
 export interface OnItemRenderedHookResult {
-    cssClass?: Object;
+    cssClass: string;
     containerRenderer?: VelcronContainerRenderer;
 }
 export interface VelcronRenderContext {
@@ -155,7 +155,7 @@ export interface VelcronTextDefinition extends VelcronDefinition {
     type: "Text";
     text: string;
     color?: string;
-    size?: number;
+    typography?: string;
     events?: VelcronOnPressEvent;
 }
 export interface VelcronImageDefinition extends VelcronDefinition {
@@ -166,6 +166,7 @@ export interface VelcronImageDefinition extends VelcronDefinition {
 export interface VelcronButtonDefinition extends VelcronDefinition {
     type: "Button";
     text: string;
+    color: string;
     icon?: VelcronIcon;
     disabled?: boolean;
     events?: VelcronOnPressEvent;
@@ -206,6 +207,7 @@ export interface VelcronFlexViewDefinition extends VelcronDefinition {
     horizontalAlignment?: VelcronHorizontalAlignments;
     verticalAlignment?: VerticalAlignments;
     grow?: number;
+    colorSchema?: string;
     width?: "auto" | "stretch" | number | string;
 }
 export interface VelcronSectionColumnWidth {

package/package.json

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

package/parser/VelcronData.d.ts

@@ -28,7 +28,7 @@ export declare class VelcronData {
     static getOrSetObjectByPathUsingRenderContext<T>(renderContext: VelcronRenderContext, path: string, value?: any): T;
     static getTokens(template: any): string[];
     static ensureEventId(event: string): string;
-    static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition): void;
+    static ensureKeys(ui: VelcronDefinition | VelcronAppDefinition, generateNewKeys?: boolean): void;
     static removeKeys(ui: VelcronDefinition | VelcronAppDefinition): void;
     static generateId(): string;
     static createDeferredPromise<T>(): DeferredPromise<T>;

package/parser/VelcronData.js

@@ -556,8 +556,8 @@ class VelcronData {
             event :
             VelcronConstants_1.VelcronConstants.events.idTokenStart + VelcronData.generateId() + VelcronConstants_1.VelcronConstants.events.idTokenEnd + " " + event;
     }
-    static ensureKeys(ui) {
-        if (!ui.key) {
+    static ensureKeys(ui, generateNewKeys = false) {
+        if (!ui.key || generateNewKeys) {
             ui.key = VelcronData.generateId();
         }
         if (ui.events) {
@@ -572,10 +572,10 @@ class VelcronData {
         Object.keys(ui).forEach((key) => {
             if (Array.isArray(ui[key])) {
                 ui[key].forEach((item) => {
-                    if (!item.key) {
+                    if (!item.key || generateNewKeys) {
                         item.key = VelcronData.generateId();
                     }
-                    VelcronData.ensureKeys(item);
+                    VelcronData.ensureKeys(item, generateNewKeys);
                 });
             }
         });

package/parser/VelcronStyles.d.ts

@@ -1,9 +1,19 @@
 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;
     private static dataBindStyles;
+    private static setUnitForValue;
+    private static setup;
 }

package/parser/VelcronStyles.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VelcronStyles = void 0;
+exports.VelcronStyles = exports.VelcronSizeUnits = 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 create(definition, renderCtx) {
         let result = { ...definition.style };
@@ -26,20 +31,25 @@ class VelcronStyles {
         return result;
     }
     static createStylesForText(textDefinition, styles) {
-        if (textDefinition.color) {
-            styles["color"] = textDefinition.color;
-        }
-        if (textDefinition.size) {
-            styles["fontSize"] = textDefinition.size + "px";
-        }
+        // 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 = 200;
+            styles.width = this.setUnitForValue(200);
         }
         if (!styles.height) {
-            styles.height = 400;
+            styles.height = this.setUnitForValue(400);
         }
         styles.flex = "0 0 auto!important";
         return styles;
@@ -50,44 +60,51 @@ class VelcronStyles {
     //     styles["flex-direction"] = sectionDef.column ? "column" : "row";
     //     return styles;
     // }
-    static createStylesForFlexbox(columnDef, styles) {
-        const flexGrow = columnDef.grow ? columnDef.grow : 1;
+    static createStylesForFlexbox(flexViewDefinition, styles) {
+        const flexGrow = flexViewDefinition.grow ? flexViewDefinition.grow : 1;
         const flextShrink = flexGrow;
         styles.display = "flex";
-        styles.flex = `${flexGrow}`;
+        styles.flex = flexGrow;
         styles["max-width"] = "100%";
-        styles["flex-direction"] = columnDef.column ? "column" : "row";
+        styles["flex-direction"] = flexViewDefinition.column ? "column" : "row";
         //Auto
-        if (columnDef.width && columnDef.width === models_1.VelcronSectionColumnWidthTypes.auto) {
+        if (flexViewDefinition.width && flexViewDefinition.width === models_1.VelcronSectionColumnWidthTypes.auto) {
             styles["flex"] = `${flexGrow} ${flextShrink} auto`;
         }
         //Pixels
-        else if (columnDef.width && VelcronData_1.VelcronData.isString(columnDef.width) && columnDef.width.endsWith("px")) {
+        else if (flexViewDefinition.width && VelcronData_1.VelcronData.isString(flexViewDefinition.width) && flexViewDefinition.width.endsWith("px")) {
             //width["flex"] = `${flexGrow} ${flextShrink} ${columnDef.width}`;
-            styles["max-width"] = columnDef.width;
+            styles["max-width"] = this.setUnitForValue(flexViewDefinition.width);
         }
         //Percentage
-        else if (columnDef.width && (isNaN(columnDef.width) === false)) {
-            styles["flex"] = `${flexGrow} ${flextShrink} ${columnDef.width}%`;
+        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 (columnDef.horizontalAlignment) {
+        if (flexViewDefinition.horizontalAlignment) {
             //Need to add this to make horizontalAlignment work for child div
-            styles["justify-content"] = columnDef.horizontalAlignment;
+            styles["justify-content"] = flexViewDefinition.horizontalAlignment;
         }
-        if (columnDef.verticalAlignment) {
-            if (columnDef.verticalAlignment === models_1.VerticalAlignments.center) {
+        if (flexViewDefinition.verticalAlignment) {
+            if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.center) {
                 //result["flex-direction"] = "column";
                 styles["align-items"] = "center";
             }
-            else if (columnDef.verticalAlignment === models_1.VerticalAlignments.bottom) {
+            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) {
@@ -111,5 +128,17 @@ 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

@@ -0,0 +1,12 @@
+export declare class VelcronStore {
+    static makeReactive: (obj: any) => unknown;
+    static reactivityCreator(fn: (obj: any) => unknown): void;
+    state<T>(obj: T): T;
+    mutation(fn: () => void): void;
+}
+export declare class TestStore extends VelcronStore {
+    test: {
+        title: string;
+    };
+    increment: (text: string) => string;
+}

package/stores/VelcronStore.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TestStore = exports.VelcronStore = void 0;
+class VelcronStore {
+    static reactivityCreator(fn) {
+        VelcronStore.makeReactive = fn;
+    }
+    state(obj) {
+        if (!VelcronStore.makeReactive) {
+            throw new Error("Reactivity creator not set");
+        }
+        return VelcronStore.makeReactive(obj);
+    }
+    mutation(fn) {
+        fn();
+    }
+}
+exports.VelcronStore = VelcronStore;
+class TestStore extends VelcronStore {
+    constructor() {
+        super(...arguments);
+        this.test = this.state({ title: "Hello" });
+        this.increment = (text) => this.test.title = text;
+    }
+}
+exports.TestStore = TestStore;

package/stores/index.d.ts

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

package/stores/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./VelcronStore"), exports);