impaktapps-ui-builder 1.0.63 → 1.0.64-alpha.100

package/dist/src/impaktapps-ui-builder/builder/build/buildHorizontalLayout.d.ts

@@ -0,0 +1 @@
+export declare const buildHorizontalLayout: (config: any, componentScope: any) => any;

package/dist/src/impaktapps-ui-builder/builder/build/uischema/horizontalLayout.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    type: string;
+    config: {
+        layout: number;
+        main: {
+            rowSpacing: number;
+            divider: boolean;
+        };
+        defaultStyle: boolean;
+    };
+    elements: any[];
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "1.0.63",
+    "version": "1.0.64-alpha.100",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

package/src/impaktapps-ui-builder/builder/build/buildConfig.ts

@@ -28,7 +28,7 @@ export default (FormData: any) => {
 
 export const createLayoutFormat = (layout: any[], type?: string) => {
   if (_.isEmpty(layout)) {
-    const fullLayoutComponents: string[] = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought"]
+    const fullLayoutComponents: string[] = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout"]
     if(fullLayoutComponents.includes(type)){
       return { xs: 12, sm: 12, md: 12, lg: 12 }
     }

package/src/impaktapps-ui-builder/builder/build/buildHorizontalLayout.ts

@@ -0,0 +1,15 @@
+import { createLayoutFormat } from "./buildConfig";
+import horizontalLayout from "./uischema/horizontalLayout";
+import _ from "lodash";
+
+export const buildHorizontalLayout = (config, componentScope) => {
+  const horizontal: any = _.cloneDeep(horizontalLayout);
+  horizontal.scope = componentScope;
+  if (config.style) {
+    horizontal.config.style = JSON.parse(config.style)
+  }
+  if (config.layout) {
+    horizontal.config.layout = createLayoutFormat(config.layout, config.type)
+  }
+  return horizontal;
+}

package/src/impaktapps-ui-builder/builder/build/buildTabSection.ts

@@ -14,6 +14,9 @@ export const buildTabSection = (config:any,componentScope:string) => {
     if (config.sectionLabels) {
       tab.config.main.tabLabels = config.sectionLabels.map(e => e.label);
     }
+    if (config.style) {
+      tab.config.style = JSON.parse(config.style)
+    }
     tab.config.main.id = config.name;
     return tab
 }

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -40,6 +40,7 @@ import { buildDataGrid } from "./buildDataGrid";
 import { buildInputSlider } from "./buildInputSlider";
 import { buildTreeMap } from "./buildTreeMap";
 import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
+import { buildHorizontalLayout } from "./buildHorizontalLayout";
 export let schema = {
   type: "object",
   properties: {},
@@ -206,6 +207,9 @@ const buildUiSchema = (config: any, store?: any) => {
     case "WrapperSection":
       elements = buildWrapperSection(config, componentScope);
       break;
+    case "HorizontalLayout":
+      elements = buildHorizontalLayout(config, componentScope);
+      break;
     case "Text":
       elements = buildTextField(config, componentScope);
       break;
@@ -351,7 +355,7 @@ const buildUiSchema = (config: any, store?: any) => {
       config.elements.filter((cellElem, elemInd) => {
         const commonProperties = {
           accessorKey: cellElem.name,
-          type: cellElem.columnFormat,
+          type: cellElem.type === "ColumnGroup" ? "ColumnGroup" : cellElem.columnFormat,
           header: cellElem.label || cellElem.name,
           size: sizeMap[cellElem.name] || 180,
           enableColumnFilter: cellElem.enableFilter === "No" ? false : true,

package/src/impaktapps-ui-builder/builder/build/uischema/horizontalLayout.ts

@@ -0,0 +1,11 @@
+export default {
+    type: "HorizontalLayout",
+    config: {
+      layout: 12,
+      main: {
+        rowSpacing: 3,
+        divider: false,
+      },
+      defaultStyle: true,
+    },
+    elements: []}

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts

@@ -10,6 +10,7 @@ export const ComponentSchema: any = {
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
         { title: "Container", const: "WrapperSection" },
+        { title: "Tab Container", const: "HorizontalLayout" },
         { title: "Data Grid", const: "DataGrid" },
         { title: "Date", const: "Date" },
         { title: "Time Stamp", const: "DateTime" },

package/src/impaktapps-ui-builder/builder/services/component.ts

@@ -15,6 +15,7 @@ const sectionLabels = {
   Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
   WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
   SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -69,7 +70,7 @@ export function refreshPage(type: string, store: any) {
 
   const parentObj = _.get(currentConfig, parentPath)
 
-  if(parentObj?.type === "Table"){
+  if(parentObj?.type === "Table" || parentObj?.type === "ColumnGroup"){
     UiSchema.elements[0].elements[0].elements[4] = 
     {
       type: "Control",