impaktapps-ui-builder 0.0.382460 → 1.0.1-alpha.1

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

@@ -11,7 +11,7 @@ export const APISection = {
         widget: "SelectInputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Method",
           type: "text",
@@ -26,7 +26,7 @@ export const APISection = {
         widget: "InputField",
       },
       config: {
-        layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
         main: {
           label: "Path",
           type: "text",
@@ -43,121 +43,136 @@ export const APISection = {
         widget: "EmptyBox",
       },
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+        layout: { xs: 0, sm: 0, md: 4, lg: 6 },
       },
     },
     {
       type: "Control",
-      scope: "#/properties/emptyBox",
-
+      scope: "#/properties/headers",
       options: {
-        widget: "EmptyBox",
+        widget: "Array",
       },
       config: {
-        layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+        layout: 12,
+        main: {
+          label: "Headers",
+          childElementLabel: "Headers",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
       },
-    },
-    {
-      type: "Control",
-      scope: "#/properties/headers",
-      layout: 11.5,
-      options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "InputField",
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Key",
-                },
-              },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key",
             },
-            {
-              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",
-                },
-              },
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
             },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-        
-              options: {
-                widget: "EmptyBox",
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-              },
-            },
-          ],
+          },
         },
-      },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+    
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+        },
+      ],
     },
     {
       type: "Control",
       scope: "#/properties/body",
-      layout: 11.5,
       options: {
-        "elementLabelProp": "key",
-        detail: {
-          type: "HorizontalLayout",
-          elements: [
-            {
-              type: "Control",
-              scope: "#/properties/key",
-              options: {
-                widget: "InputField",
-              },
-              config: {
-                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
-                main: {
-                  label: "Key",
-                },
-              },
+        widget: "Array",
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Body",
+          childElementLabel: "Body",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key",
             },
-            {
-              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",
-                },
-              },
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
             },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-        
-              options: {
-                widget: "EmptyBox",
-              },
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-              },
-            },
-          ],
+          },
         },
-      },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+    
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+        },
+      ],
     },
     getTextArea("apiBody", "Transformer", true,12),
   ],

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

@@ -1,8 +1,6 @@
 
 import _ from "lodash";
-import { buildLabel } from "../buildLabel";
-import Box from "./box";
-const emptyBox = (scope:string,layout?: any) => {
+export const emptyBox = (scope:string,layout?: any) => {
 
   if(layout !== undefined){
     return {
@@ -12,7 +10,6 @@ const emptyBox = (scope:string,layout?: any) => {
         widget: "EmptyBox",
       },
       config: {
-        //[{},{},{}]
         layout: layout,
       },
     }
@@ -29,10 +26,70 @@ const emptyBox = (scope:string,layout?: any) => {
   },
 }
 }
+// const cardLayout = {
+//   type: "Control",
+//   scope: "#/properties/cardLayout",
+//   options: {
+//     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",
+
+//       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")
+//   ],
+// };
 const cardLayout = {
   type: "Control",
   scope: "#/properties/cardLayout",
-  layout: 11.5,
+  layout: 12,
   options: {
     detail: {
       type: "HorizontalLayout",
@@ -79,35 +136,47 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
   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: childLabel,
+        childElementLabel: childLabel,
+      },
+      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`,
 
@@ -121,7 +190,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",
@@ -131,7 +200,7 @@ const getInputField = (scope: String, label: String) => {
       widget: "InputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
       },
@@ -148,7 +217,7 @@ export const getRadioInputField = (scope: String, label: String, options: string
       widget: "RadioInputField",
     },
     config: {
-      layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 12, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
 
@@ -165,16 +234,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 || []
   }
@@ -189,22 +248,8 @@ export const getTextArea = (scope: string, heading: string, hideButton: boolean,
     },
     config: {
       layout: layout || 12,
-      style: {
-        containerStyle: {
-          borderRadius: "20px",
-        },
-        headerContainerStyle: {
-
-        },
-        textAreaStyle: {
-          borderRadius: "20px",
-          padding: "20px"
-          // background:"black",
-          // color:"white"
-        }
-      },
       main: {
-        heading: heading,
+        label: heading,
         minRows: 8,
         hideButton: hideButton,
         enableCodeEditor: true
@@ -221,7 +266,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
       widget: "SelectInputField",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         label: label,
         type: "text",
@@ -239,7 +284,7 @@ export const getMultiSelectField = (scope: string, label: string) => {
       widget: "MultipleSelect",
     },
     config: {
-      layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+      layout: { xs: 6, sm: 6, md: 4, lg: 3 },
       main: {
         multiple: true,
         label: label,
@@ -250,13 +295,19 @@ export const getMultiSelectField = (scope: string, label: string) => {
 }
 
 
-const GraphSection = {
+const BaseSection = {
   type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
   elements: [],
 };
 
 export const buildPropertiesSection = function (type: String) {
-  let uiSchema = _.cloneDeep(GraphSection);
+  let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
 
     case "TreeMap":
@@ -317,7 +368,7 @@ export const buildPropertiesSection = function (type: String) {
     case "Text":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        emptyBox("TextEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ]
@@ -327,6 +378,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
         getInputField("codeEditorLanguage", "Enter Code Language"),
+        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
       ]
       break;
 
@@ -413,7 +465,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"),
       ];

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

@@ -6,7 +6,8 @@ export default function Card(theme){
       wrapperStyle: {
         position: "relative",
         top: "50%",
-        transform: "translateY(-50%)"
+        transform: "translateY(-50%)",
+        marginBottom: 0
       },
       componentsBoxStyle: {
         boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
@@ -46,6 +47,7 @@ export default function Card(theme){
               },
               wrapperStyle: {
                 background: "transparent",
+                marginBottom: 0
               },
               componentsBoxStyle: {
                 flexDirection: "column",
@@ -67,6 +69,7 @@ export default function Card(theme){
                   },
                   wrapperStyle: {
                     background: "transparent",
+                    marginBottom: 0
                   },
                   componentsBoxStyle: {
                     flexDirection: "row",
@@ -99,6 +102,7 @@ export default function Card(theme){
                         justifyContent: "flex-start",
                         width: "auto",
                         margin: "-8px",
+                        marginLeft: "-24px",
                         height: 0
                       },
                       // layout: 1,
@@ -124,7 +128,7 @@ export default function Card(theme){
                         width: "auto",
                         margin: "-8px",
                         position: "absolute",
-                        left: "8px"
+                        left: "24px"
                       },
                       // layout: 11,
                     },
@@ -149,8 +153,7 @@ export default function Card(theme){
                     background: "inherit",
                     width: "calc(100%+8px)",
                     margin: "-8px",
-                    marginTop: "12px",
-                    lineHeight: "1",
+                    marginTop: {xs: "16px", md: "20px"},
                   },
                   layout: 12,
                 },
@@ -177,6 +180,7 @@ export default function Card(theme){
               justifyContent: "end",
             },
             imageStyle: {
+              width: "unset",
               fontSize: "none",
               padding: "4px",
               margin: "0px 0px 0px 8px",