@omnia/velcron 7.0.498-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

@@ -18,12 +18,13 @@ export interface BuiltInComponentRenderers {
     "WebView": any;
     "CustomComponent": any;
     "Dialog": any;
-    "Section": any;
+    "FlexView": any;
     "Icon": any;
 }
 export type DynamicViewModel = object;
 export interface OnItemRenderedHookResult {
-    cssClass: Object;
+    cssClass: string;
+    containerRenderer?: VelcronContainerRenderer;
 }
 export interface VelcronRenderContext {
     id?: string;
@@ -47,6 +48,11 @@ export interface VelcronRenderContextHooks {
     onItemSelected?: ((item: VelcronDefinition) => void);
     onItemRendered?: ((item: VelcronDefinition) => OnItemRenderedHookResult);
 }
+export interface VelcronContainerRenderer {
+    definition: VelcronDefinition;
+    renderContext: VelcronRenderContext;
+    component: JSX.Element;
+}
 export interface VelcronAction extends VelcronRenderContext {
     type: VelcronActionTypes;
 }
@@ -149,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 {
@@ -160,7 +166,9 @@ export interface VelcronImageDefinition extends VelcronDefinition {
 export interface VelcronButtonDefinition extends VelcronDefinition {
     type: "Button";
     text: string;
-    icon: VelcronIcon;
+    color: string;
+    icon?: VelcronIcon;
+    disabled?: boolean;
     events?: VelcronOnPressEvent;
 }
 export interface VelcronTextInputDefinition extends VelcronDefinition {
@@ -191,15 +199,15 @@ export interface VelcronIconDefinition extends VelcronDefinition {
     size?: number;
     events?: VelcronOnPressEvent;
 }
-export interface VelcronSectionDefinition extends VelcronDefinition {
-    type: "Section";
-    columns: Array<VelcronSectionColumn>;
-    columnStyle?: object;
-}
-export interface VelcronSectionColumn extends VelcronDefinition {
+export interface VelcronFlexViewDefinition extends VelcronDefinition {
+    type: "FlexView";
+    column?: boolean;
     body: Array<VelcronDefinition>;
+    columnStyle?: object;
     horizontalAlignment?: VelcronHorizontalAlignments;
     verticalAlignment?: VerticalAlignments;
+    grow?: number;
+    colorSchema?: string;
     width?: "auto" | "stretch" | number | string;
 }
 export interface VelcronSectionColumnWidth {

package/models/VelcronDescriptors.d.ts

@@ -24,6 +24,7 @@ export interface VelcronComponentPropertyDescriptor {
     editor?: VelcronComponentPropertyEditors;
     required?: boolean;
     defaultValue?: VelcronPrimitiveType | VelcroncomponentArrayType;
+    disableRemovePropertyOnEmptyOrFalse?: boolean;
 }
 export interface VelcronComponentArrayPropertyDescriptor extends VelcronComponentPropertyDescriptor {
     type: VelcronDataTypes.componentArray;

package/package.json

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

package/parser/VelcronConstants.d.ts

@@ -10,7 +10,7 @@ export declare const VelcronConstants: {
         progressCircle: string;
         webView: string;
         dialog: string;
-        section: string;
+        flexView: string;
         icon: string;
     };
     events: {

package/parser/VelcronConstants.js

@@ -13,7 +13,7 @@ exports.VelcronConstants = {
         progressCircle: "ProgressCircle",
         webView: "WebView",
         dialog: "Dialog",
-        section: "Section",
+        flexView: "FlexView",
         icon: "Icon"
     },
     events: {

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

@@ -367,6 +367,9 @@ class VelcronData {
         return result;
     }
     static evaluateBoolean(template, renderContext) {
+        if (VelcronData.isUndefined(template)) {
+            return false;
+        }
         if (VelcronData.isBoolean(template)) {
             return template;
         }
@@ -418,7 +421,7 @@ class VelcronData {
         return !isNaN(value);
     }
     static isUndefined(value) {
-        return typeof value === undefined;
+        return typeof value === "undefined";
     }
     static isArray(obj) {
         return Array.isArray(obj);
@@ -553,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) {
@@ -569,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,8 +1,19 @@
-import { VelcronDefinition, VelcronSectionDefinition, VelcronSectionColumn, VelcronRenderContext } from "../models";
+import { VelcronDefinition, VelcronRenderContext } from "../models";
+export declare enum VelcronSizeUnits {
+    Pixels = 1,
+    Numbers = 2
+}
+export interface VelcronStyleSettings {
+    sizeUnit: VelcronSizeUnits;
+}
 export declare class VelcronStyles {
-    static component(definition: VelcronDefinition, renderCtx: VelcronRenderContext): any;
+    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;
-    static section(sectionDef: VelcronSectionDefinition, renderCtx: VelcronRenderContext): any;
-    static layoutColumn(layoutDef: VelcronSectionDefinition, columnDef: VelcronSectionColumn, renderCtx: VelcronRenderContext): object;
-    static layoutColumnComponent(layoutDef: VelcronSectionDefinition, columnDef: VelcronSectionColumn, renderCtx: VelcronRenderContext): object;
+    private static setUnitForValue;
+    private static setup;
 }

package/parser/VelcronStyles.js

@@ -1,121 +1,144 @@
 "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 component(definition, renderCtx) {
-        const bliblu = ";";
+    static create(definition, renderCtx) {
         let result = { ...definition.style };
-        // let result = {
-        //     //Margin
-        //     margin: definition?.style?.margin,
-        //     marginTop: definition?.style?.marginTop,
-        //     marginRight: definition?.style?.marginRight,
-        //     marginBottom: definition?.style?.marginBottom,
-        //     marginLeft: definition?.style?.marginLeft,
-        //     //Padding
-        //     padding: definition?.style?.padding,
-        //     paddingTop: definition?.style?.paddingTop,
-        //     paddingRight: definition?.style?.paddingRight,
-        //     paddingBottom: definition?.style?.paddingBottom,
-        //     paddingLeft: definition?.style?.paddingLeft,
-        //     height: definition.style?.height,
-        //     width: definition.style?.width
-        // }
         if (definition.type === VelcronConstants_1.VelcronConstants.components.image) {
-            //Set default width and height values on Images
-            if (!result.width) {
-                result.width = "100%";
-            }
-            if (!result.height) {
-                result.height = 400;
-            }
+            result = this.createStylesForImage(definition, result);
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
-            const textDef = definition;
-            if (textDef.color) {
-                result["color"] = textDef.color;
-            }
-            if (textDef.size) {
-                result["fontSize"] = textDef.size + "px";
-            }
+            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);
+        // }
         if (renderCtx) {
             result = VelcronStyles.dataBindStyles(result, renderCtx);
         }
         return result;
     }
-    static dataBindStyles(styles, renderCtx) {
-        Object.keys(styles).forEach((key) => {
-            const style = styles[key];
-            if (style && VelcronData_1.VelcronData.isString(style)) {
-                styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
-            }
-        });
+    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 section(sectionDef, renderCtx) {
-        let result = {
-            "display": "flex",
-            ...sectionDef.style,
-        };
-        result = VelcronStyles.dataBindStyles(result, renderCtx);
-        return result;
+    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;
     }
-    static layoutColumn(layoutDef, columnDef, renderCtx) {
-        //Default is stretch
-        const width = {};
-        width["flex"] = 1;
+    // 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 (columnDef.width && columnDef.width === models_1.VelcronSectionColumnWidthTypes.auto) {
-            width["flex"] = "0 0 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")) {
-            width["flex"] = `0 0 ${columnDef.width}`;
+        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 (columnDef.width && (isNaN(columnDef.width) === false)) {
-            width["flex"] = `0 0 ${columnDef.width}%`;
+        else if (flexViewDefinition.width && (isNaN(flexViewDefinition.width) === false)) {
+            styles["flex"] = `${flexGrow} ${flextShrink} ${flexViewDefinition.width}%`;
         }
-        let result = {
-            "display": "flex",
-            ...width,
-            ...layoutDef.columnStyle,
-            ...columnDef.style
-        };
-        if (columnDef.horizontalAlignment && columnDef.horizontalAlignment !== models_1.VelcronHorizontalAlignments.left) {
+        // 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
-            result["flex-direction"] = "column";
+            styles["justify-content"] = flexViewDefinition.horizontalAlignment;
         }
-        if (columnDef.verticalAlignment) {
-            if (columnDef.verticalAlignment === models_1.VerticalAlignments.center) {
-                result["flex-direction"] = "column";
-                result["justify-content"] = "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) {
-                result["flex-direction"] = "column";
-                result["justify-content"] = "flex-end";
+            else if (flexViewDefinition.verticalAlignment === models_1.VerticalAlignments.bottom) {
+                //result["flex-direction"] = "column";
+                styles["align-items"] = "flex-end";
             }
         }
-        result = VelcronStyles.dataBindStyles(result, renderCtx);
-        return result;
+        // 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 layoutColumnComponent(layoutDef, columnDef, renderCtx) {
-        const result = {
-            "display": "flex",
-        };
+    static createStylesForLayoutColumnComponent(layoutDef, columnDef, styles) {
+        styles.display = "flex";
         if (columnDef.horizontalAlignment) {
             if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.center) {
-                result["justify-content"] = "center";
+                styles["justify-content"] = "center";
             }
             else if (columnDef.horizontalAlignment === models_1.VelcronHorizontalAlignments.right) {
-                result["justify-content"] = "flex-end";
+                styles["justify-content"] = "flex-end";
             }
         }
-        return result;
+        return styles;
+    }
+    static dataBindStyles(styles, renderCtx) {
+        Object.keys(styles).forEach((key) => {
+            const style = styles[key];
+            if (style && VelcronData_1.VelcronData.isString(style)) {
+                styles[key] = VelcronData_1.VelcronData.dataBind(renderCtx, style);
+            }
+        });
+        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);