impaktapps-ui-builder 1.0.4 → 1.0.9-4.card.2

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

@@ -1,8 +1,8 @@
 
 import _ from "lodash";
-export const emptyBox = (scope:string,layout?: any) => {
+export const emptyBox = (scope: string, layout?: any) => {
 
-  if(layout !== undefined){
+  if (layout !== undefined) {
     return {
       type: "Control",
       scope: `#/properties/${scope}`,
@@ -15,123 +15,75 @@ export const emptyBox = (scope:string,layout?: any) => {
     }
   }
   return {
-  type: "Control",
-  scope: "#/properties/empty",
+    type: "Control",
+    scope: "#/properties/empty",
 
-  options: {
-    widget: "EmptyBox",
-  },
-  config: {
-    layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-  },
-}
+    options: {
+      widget: "EmptyBox",
+    },
+    config: {
+      layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+    },
+  }
 }
-// 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: 12,
-  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",
+  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: 3 },
+        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",
@@ -171,7 +123,7 @@ const getArrayControl = (parentScope: string, childScope: string, childLabel?: s
           },
         },
       },
-      emptyBox("ArrayControlEmpty1", {xs: 6, sm: 6, md: 8, lg: 8 }),
+      emptyBox("ArrayControlEmpty1", { xs: 6, sm: 6, md: 8, lg: 8 }),
     ],
   }
 };
@@ -276,7 +228,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
   }
 }
 export const getMultiSelectField = (scope: string, label: string) => {
-  return  {
+  return {
     type: "Control",
     scope: `#/properties/${scope}`,
 
@@ -309,7 +261,17 @@ const BaseSection = {
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(BaseSection);
   switch (type) {
+    case "Array":
+      uiSchema.elements = [
+        getRadioInputField("allExpanded", "Initial Expand", ["YES", "NO"]),
+        getRadioInputField("disableAddButton", "Disable Add Button", ["YES", "NO"]),
+        getRadioInputField("disableExpandAllButton", "Disable Expand Buttons", ["YES", "NO"]),
+        getRadioInputField("disableRowActions", "Disable Row Actions", ["YES", "NO"]),
+        getInputField("childElementLabel", "Child Element Label"),
+        emptyBox("empty1", { xs: 12, sm: 6, md: 4, lg: 3 }),
 
+      ]
+      break;
     case "TreeMap":
       uiSchema.elements = [
         getSelectField("orientation", "orientation", []),
@@ -317,7 +279,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("graphHeight", "Graph Height"),
         getInputField("graphWidth", "Graph Width"),
         getInputField("graphZoomHeight", "Zoom Height"),
-        emptyBox("TreeEmpty", {xs: 6, sm: 6, md: 4, lg: 4})
+        emptyBox("TreeEmpty", { xs: 6, sm: 6, md: 4, lg: 4 })
       ]
       break;
     case "InputSlider":
@@ -325,9 +287,9 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("max", "Max Limit"),
         getInputField("step", "Step"),
         getInputField("min", "Min Limit"),
-        emptyBox("InputSliderEmpty1", {xs: 6, sm: 0, md: 0, lg: 0}),
+        emptyBox("InputSliderEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("limitToMax", "Applly Max. Limit", ["YES", "NO"]),
-        emptyBox("InputSliderEmpty2", {xs: 0, sm: 0, md: 8, lg: 8})
+        emptyBox("InputSliderEmpty2", { xs: 0, sm: 0, md: 8, lg: 8 })
       ]
       break;
     case "DataGrid":
@@ -336,8 +298,8 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        emptyBox("DataGridEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }),
-        emptyBox("DataGridEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
+        emptyBox("DataGridEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
+        emptyBox("DataGridEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 }),
         cardLayout,
       ]
       break;
@@ -351,7 +313,7 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Horizontal", value: "horizontal" },
           { label: "Vertical", value: "vertical" },
         ]),
-        emptyBox("Stepper", {xs: 6, sm: 6, md: 4, lg: 4 }),
+        emptyBox("Stepper", { xs: 6, sm: 6, md: 4, lg: 4 }),
 
         getArrayControl("sectionLabels", "label")
 
@@ -362,23 +324,29 @@ export const buildPropertiesSection = function (type: String) {
         getRadioInputField("fullScreen", "FullScreen", ["YES", "NO"]),
         getRadioInputField("fullWidth", "FullWidth", ["YES", "NO"]),
         getInputField("maxWidth", "Max. Width"),
-        emptyBox("PopUpEmpty", {xs: 6, sm: 6, md: 0, lg: 0 })
+        emptyBox("PopUpEmpty", { xs: 6, sm: 6, md: 0, lg: 0 })
       ]
       break;
-    case "Text":
+    case "Text": 
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
-        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 }),
-        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
+        getSelectField("variant", "Variant", [
+          { label: "Outlined", value: "outlined" },
+          { label: "Filled", value: "filled" },
+          { label: "Standard", value: "standard" },
+        ]),
+        emptyBox("TextEmpty1", { xs: 6, sm: 6, md: 0, lg: 3 }),
+        getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
+        getInputField("keyName", "Event Key Name"),
       ]
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        getRadioInputField("enableCodeEditor", "Enable Code Editor",["YES", "NO"]),
+        getRadioInputField("enableCodeEditor", "Enable Code Editor", ["YES", "NO"]),
         getInputField("codeEditorLanguage", "Enter Code Language"),
-        emptyBox("TextEmpty1", {xs: 0, sm: 0, md: 0, lg: 3 }),
+        emptyBox("TextEmpty1", { xs: 0, sm: 0, md: 0, lg: 3 }),
       ]
       break;
 
@@ -389,14 +357,14 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
         getInputField("width", "Speedometer Width"),
-        emptyBox("SpeedoMeterEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
+        emptyBox("SpeedoMeterEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
       ]
       break;
     case "RankCard":
       uiSchema.elements = [
         getInputField("rank", "Rank"),
         getInputField("height", "Height"),
-        emptyBox("RankCardEmpty1", {xs: 0, sm: 0, md: 4, lg: 4 })];
+        emptyBox("RankCardEmpty1", { xs: 0, sm: 0, md: 4, lg: 4 })];
       break;
     case "LeaderBoard":
       uiSchema.elements = [
@@ -406,7 +374,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("nameKey", "Key for Name"),
         getInputField("imageKey", "Key for Image"),
         getInputField("scoreKey", "Key for comparing parameter"),
-        emptyBox("LeaderBoardEmpty1", {xs: 6, sm: 6, md: 0, lg: 0 }),
+        emptyBox("LeaderBoardEmpty1", { xs: 6, sm: 6, md: 0, lg: 0 }),
       ];
       break;
     case "CardSlider":
@@ -429,7 +397,7 @@ export const buildPropertiesSection = function (type: String) {
         getInputField("label", "Label"),
         getInputField("titleIcon", "Unicode of Icon for title"),
         getInputField("description", "Description"),
-        emptyBox("cardEmpty", {xs: 0, sm: 0, md: 8, lg: 8 })
+        emptyBox("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
     case "Button":
@@ -442,7 +410,13 @@ export const buildPropertiesSection = function (type: String) {
           { label: "Apply Default Style", value: "true" },
           { label: "No Style", value: "false" },
         ]),
-        emptyBox("ButtonEmpty1", {xs: 6, sm: 6, md: 4, lg: 4 })
+        emptyBox("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
+      ];
+      break;
+    case "Box":
+      uiSchema.elements = [
+        getSelectField("iconName", "Icon Name", []),
+        emptyBox("BoxEmpty1", { xs: 6, sm: 6, md: 4, lg: 8 })
       ];
       break;
     case "Graph":
@@ -459,13 +433,13 @@ export const buildPropertiesSection = function (type: String) {
         ]),
         getInputField("leftLabel", "Left Label"),
         getInputField("bottomLabel", "Bottom Label"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 0, lg: 0 }),
+        emptyBox("GraphEmpty1", { xs: 6, sm: 0, md: 0, lg: 0 }),
         getRadioInputField("legendHide", "Legend Hide", ["YES", "No"]),
         getInputField("yAxisValue", "Y-AxisValue"),
         getInputField("xAxisValue", "X-AxisValue"),
         getRadioInputField("bottomAxisAngle", "Bottom Axis Angled", ["YES", "No"]),
         getInputField("leftMargin", "Left Margin"),
-        emptyBox("GraphEmpty1", {xs: 6, sm: 0, md: 8, lg: 6 }),
+        emptyBox("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
         getArrayControl("pieArcColors", "color"),
       ];
@@ -475,7 +449,7 @@ export const buildPropertiesSection = function (type: String) {
       getRadioInputField("isAccordion", "Accordion", ["YES", "No"])
         , getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
       getInputField("rowSpacing", "Row Spacing"),
-        emptyBox("WrapperSectionEmpty1", {xs: 6, sm: 0, md: 4, lg: 4 }), emptyBox("WrapperSectionEmpty2")
+      emptyBox("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }), emptyBox("WrapperSectionEmpty2")
       ]
       break;
 
@@ -528,21 +502,63 @@ export const buildPropertiesSection = function (type: String) {
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
+        getSelectField("variant", "Variant", [
+          { label: "Outlined", value: "outlined" },
+          { label: "Filled", value: "filled" },
+          { label: "Standard", value: "standard" },
+        ]),
         emptyBox("SelectEmpty")
       ]
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        emptyBox("MultipleSelectEmpty1", {xs: 0, sm: 6, md: 4, lg: 4 }),
+        getSelectField("variant", "Variant", [
+          { label: "Outlined", value: "outlined" },
+          { label: "Filled", value: "filled" },
+          { label: "Standard", value: "standard" },
+        ]),
+        emptyBox("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
         emptyBox("MultipleSelectEmpty2")
       ]
       break;
+    case "Date": 
+      uiSchema.elements = [
+        getSelectField("variant", "Variant", [
+          { label: "Outlined", value: "outlined" },
+          { label: "Filled", value: "filled" },
+          { label: "Standard", value: "standard" },
+        ]),
+        emptyBox("DateEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 }),
+      ]
+      break;
+    case "DateTime": 
+      uiSchema.elements = [
+        getSelectField("variant", "Variant", [
+          { label: "Outlined", value: "outlined" },
+          { label: "Filled", value: "filled" },
+          { label: "Standard", value: "standard" },
+        ]),
+        emptyBox("DateTimeEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 }),
+      ]
+      break;
     case "Thought":
       uiSchema.elements = [
         getTextArea("thought", "Today's thought", false),
       ]
       break;
+    case "Image":
+      uiSchema.elements = [
+        getInputField("imageUrl", "Image URL"),
+        getInputField("height", "Image Height"),
+        emptyBox("imageEmpty", { xs: 0, sm: 0, md: 4, lg: 6 }),
+      ]
+      break;
+    case "FileInput":
+      uiSchema.elements = [
+        getRadioInputField("variant", "Variant", ["Outlined", "Standard"])
+      ]
+      break;
   }
   return uiSchema;
 };

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

@@ -5,7 +5,7 @@ export default  {
     widget: "Button",
   },
   config: {
-    layout: 3,
+    layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
     main: {
       name: "Compare",
       variant: "contained",

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

@@ -35,7 +35,7 @@ export default function Card(theme){
       {
         type: "HorizontalLayout",
         config: {
-          layout: 8,
+          layout: 9,
         },
         elements: [
           {
@@ -56,6 +56,7 @@ export default function Card(theme){
                 height: "inherit",
                 background: "transparent",
                 borderRadius: "0px",
+                padding: 0
               },
               layout: 12,
             },
@@ -81,7 +82,8 @@ export default function Card(theme){
                     marginLeft: "-10px",
                     marginTop: "-8px",
                     justifyContent: "start",
-                    position: "relative"
+                    position: "relative",
+                    padding: 0,
                   },
                   layout: 12,
                 },
@@ -187,7 +189,7 @@ export default function Card(theme){
               height: "64px",
             },
           },
-          layout: 4,
+          layout: 3,
         },
         options: {
           widget: "Image",

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

@@ -89,129 +89,68 @@ export const CoreSection = {
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
-      options: {
-        "elementLabelProp": "key",
-        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",
-
-                },
-              },
-            },
-            {
-              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.",
-                },
-              },
-            },
-            {
-              type: "Control",
-              scope: "#/properties/proc",
-              config: {
-                layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-              },
-              options: {
-                widget: "EmptyBox",
-              },
-            },
-          ],
+      config: {
+        layout: 12,
+        main: {
+          label: "Layout",
+          childElementLabel: "Layout",
         },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
       },
-    },
-
-    
-    // {
-    //   type: "Control",
-    //   scope: "#/properties/layout",
-    //   options: {
-    //     widget: "Array",
-    //   },
-    //   config: {
-    //     layout: 12,
-    //     main: {
-    //       label: "Layout",
-    //       childElementLabel: "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",
+      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.",
              
-    //         },
-    //       },
-    //     },
-    //     {
-    //       type: "Control",
-    //       scope: "#/properties/proc",
-    //       config: {
-    //         layout: { xs: 0, sm: 0, md: 4, lg: 4 },
-    //       },
-    //       options: {
-    //         widget: "EmptyBox",
-    //       },
-    //     },
-    //   ],
-    // },
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/proc",
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+          options: {
+            widget: "EmptyBox",
+          },
+        },
+      ],
+    },
   ],
 };