impaktapps-ui-builder 0.0.101-alpha.24 → 0.0.101-alpha.26

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

@@ -34,16 +34,6 @@ export declare const buildWrapper: (label: string, elements: any[]) => {
             label: string;
             isAccordion: boolean;
         };
-        wrapperStyle: {
-            marginTop: string;
-            marginBottom: string;
-            marginLeft: string;
-            width: string;
-        };
-        componentsBoxStyle: {
-            marginLeft: string;
-        };
-        defaultStyle: boolean;
     };
     elements: any[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.101-alpha.24",
+    "version": "0.0.101-alpha.26",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -1,7 +1,5 @@
 
 import _ from "lodash";
-import { buildLabel } from "../buildLabel";
-import Box from "./box";
 export const emptyBox = (scope:string,layout?: any) => {
 
   if(layout !== undefined){
@@ -31,82 +29,108 @@ export const emptyBox = (scope:string,layout?: any) => {
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 11.5,
   options: {
-    detail: {
-      type: "HorizontalLayout",
-      elements: [
-        {
-          type: "Control",
-          scope: "#/properties/key",
-          options: {
-            widget: "SelectInputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Screen Size",
+    widget: "Array",
+  },
+  config: {
+    layout: 12,
+    main: {
+      label: "Card Layout",
+      childElementLabel: "Card Layout",
+    },
+    style: {
+      marginLeft: "-24px",
+      marginBottom: "24px !important",
+      labelStyle: {
+        marginLeft: "24px",
+      },
+      detailsStyle: {
+        marginLeft: "24px",
+      }
+    }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/key",
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Screen Size",
 
-            },
-          },
         },
-        {
-          type: "Control",
-          scope: "#/properties/value",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/value",
 
-          options: {
-            widget: "InputField",
-          },
-          config: {
-            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-            main: {
-              label: "Value",
-              type: "number",
-              // freeSolo:true,
-              helperText: 'Number should be in range of 0 to 12',
-              errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
+      options: {
+        widget: "InputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        main: {
+          label: "Value",
+          type: "number",
+          // freeSolo:true,
+          helperText: 'Number should be in range of 0 to 12',
+          errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
 
-            },
-          },
         },
-        emptyBox("cardEmpty")
-      ],
+      },
     },
-  },
+    emptyBox("cardEmpty")
+  ],
 };
 const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
   return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
-    layout: 12,
     options: {
-      "elementLabelProp": childScope,
-      detail: {
-        type: "HorizontalLayout",
-        elements: [
-          {
-            type: "Control",
-            scope: `#/properties/${childScope}`,
+      widget: "Array"
+    },
+    config: {
+      layout: 12,
+      main: {
+        label: childScope,
+        childElementLabel: childScope,
+      },
+      style: {
+        marginLeft: "-24px",
+        marginBottom: "24px !important",
+        labelStyle: {
+          marginLeft: "24px",
+        },
+        detailsStyle: {
+          marginLeft: "24px",
+        }
+      }
+    },
+    elements: [
+      {
+        type: "Control",
+        scope: `#/properties/${childScope}`,
 
-            options: {
-              widget: "InputField",
-            },
-            config: {
-              layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-              main: {
-                label: childLabel || "Labels for Tab",
-              },
-            },
+        options: {
+          widget: "InputField",
+        },
+        config: {
+          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+          main: {
+            label: childLabel || "Labels for Tab",
           },
-          emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
-          emptyBox("ArrayControlEmpty2", {xs: 0, sm: 0, md: 4, lg: 4 })
-        ],
+        },
       },
-    },
+      emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 8, lg: 8 }),
+    ],
   }
 };
 const sizeHolder = getArrayControl("sizeHolder", "keyName", "Component Name");
-sizeHolder.options.detail.elements[1] = {
+sizeHolder.elements[1] = {
   type: "Control",
   scope: `#/properties/value`,
 
@@ -120,7 +144,7 @@ sizeHolder.options.detail.elements[1] = {
     },
   },
 };
-sizeHolder.options.detail.elements[2] = emptyBox("sizeHolderempty")
+sizeHolder.elements[2] = emptyBox("sizeHolderempty")
 const getInputField = (scope: String, label: String) => {
   return {
     type: "Control",
@@ -164,16 +188,6 @@ export const buildWrapper = (label: string, elements: any[]) => {
         label: label || "Details",
         isAccordion: true,
       },
-      wrapperStyle: {
-        marginTop: '-6px',
-        marginBottom: '-8px',
-        marginLeft: "-34px",
-        width: "108%"
-      },
-      componentsBoxStyle: {
-        marginLeft: "12px",
-      },
-      defaultStyle: true
     },
     elements: elements || []
   }
@@ -404,7 +418,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 8 }),
+        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];