impaktapps-ui-builder 0.0.278 → 0.0.280

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

@@ -43,8 +43,8 @@ export declare const APISection: {
                 label: string;
                 type: string;
                 options: {
-                    label: string;
-                    value: string;
+                    title: string;
+                    const: string;
                 }[];
                 multiple?: undefined;
             };
@@ -114,7 +114,7 @@ export declare const APISectionSchema: {
                 key: {
                     type: string;
                 };
-                value: {
+                const: {
                     type: string;
                 };
             };
@@ -128,7 +128,7 @@ export declare const APISectionSchema: {
                 key: {
                     type: string;
                 };
-                value: {
+                const: {
                     type: string;
                 };
             };

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

@@ -24,8 +24,8 @@ export declare const getTextArea: (scope: string, heading: string, hideButton: b
     };
 };
 export declare const getSelectField: (scope: string, label: string, options: {
-    label: string;
-    value: string;
+    title: string;
+    const: string;
 }[]) => {
     type: string;
     scope: string;
@@ -43,8 +43,8 @@ export declare const getSelectField: (scope: string, label: string, options: {
             label: string;
             type: string;
             options: {
-                label: string;
-                value: string;
+                title: string;
+                const: string;
             }[];
         };
     };

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

@@ -19,8 +19,8 @@ export declare const CoreSection: {
                 label: string;
                 type: string;
                 options: {
-                    label: string;
-                    value: string;
+                    title: string;
+                    const: string;
                 }[];
             };
         };
@@ -89,8 +89,8 @@ export declare const CoreSection: {
                         main: {
                             label: string;
                             options: {
-                                label: string;
-                                value: string;
+                                title: string;
+                                const: string;
                             }[];
                         };
                     };

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

@@ -24,8 +24,8 @@ export declare const ValidationSection: {
                         main: {
                             label: string;
                             options: {
-                                value: string;
-                                label: string;
+                                const: string;
+                                title: string;
                             }[];
                         };
                     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "impaktapps-ui-builder",
-    "version": "0.0.278",
+    "version": "0.0.280",
     "scripts": {
         "dev": "vite",
         "build": "tsc && vite build",

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

@@ -6,11 +6,17 @@ export const buildMultiSelect = (config,componentScope) =>{
     const multipleSelect: any = _.cloneDeep(MultipleSelect);
     multipleSelect.scope = componentScope;
     if (config.label) {
+      
       multipleSelect.config.main.label = config.label;
     }
     if(config.layout){
       multipleSelect.config.layout = createLayoutFormat(config.layout)
     }
-    multipleSelect.config.main.options = config.value ?? [];
+    if(config.value){
+      const options = config.value.map((e:any)=>{
+        return {title:e.label,const:e.value}
+     });
+    multipleSelect.config.main.options = options??[];
+    }
     return multipleSelect;
 }

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

@@ -7,7 +7,7 @@ export const buildSelect = (config:any,componentScope:string) =>{
     selectInputField.config.main.label = config.label;
     if(config.value){
         const options = config.value.map((e:any)=>{
-           return {label:e.label,value:e.value}
+           return {title:e.label,const:e.value}
         });
         selectInputField.config.main.options = options;
     };

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

@@ -16,10 +16,10 @@ export const APISection = {
           label: "Method",
           type: "text",
           options: [
-            { label: "Get", value: "get" },
-            { label: "Post", value: "post" },
-            { label: "Delete", value: "delete" },
-            { label: "Put", value: "put" },
+            { title: "Get", const: "get" },
+            { title: "Post", const: "post" },
+            { title: "Delete", const: "delete" },
+            { title: "Put", const: "put" },
           ],
         },
       },
@@ -155,7 +155,7 @@ export const APISectionSchema = {
         key: {
           type: "string",
         },
-        value: {
+        const: {
           type: "string",
         },
       },
@@ -169,7 +169,7 @@ export const APISectionSchema = {
         key: {
           type: "string",
         },
-        value: {
+        const: {
           type: "string",
         },
       },

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

@@ -1,6 +1,6 @@
 
 import _ from "lodash";
-const EmptyBox =  {
+const EmptyBox = {
   type: "Control",
   scope: `#/properties/empty`,
 
@@ -15,12 +15,12 @@ const EmptyBox =  {
       lg: 5.5,
     },
     main: {
-      
+
     },
   },
 };
-const getArrayControl = (parentScope:string,childScope:string,childLabel?:string,) =>{
-  return  {
+const getArrayControl = (parentScope: string, childScope: string, childLabel?: string,) => {
+  return {
     type: "Control",
     scope: `#/properties/${parentScope}`,
     layout: 11.5,
@@ -32,7 +32,7 @@ const getArrayControl = (parentScope:string,childScope:string,childLabel?:string
           {
             type: "Control",
             scope: `#/properties/${childScope}`,
-  
+
             options: {
               widget: "InputField",
             },
@@ -44,7 +44,7 @@ const getArrayControl = (parentScope:string,childScope:string,childLabel?:string
                 lg: 5.5,
               },
               main: {
-                label: childLabel||"Labels for Tab",
+                label: childLabel || "Labels for Tab",
               },
             },
           },
@@ -75,7 +75,7 @@ const getInputField = (scope: String, label: String) => {
   };
 };
 
-const getRadioInputField = (scope: String, label: String,options:string[]) => {
+const getRadioInputField = (scope: String, label: String, options: string[]) => {
   return {
     type: "Control",
     scope: `#/properties/${scope}`,
@@ -92,15 +92,15 @@ const getRadioInputField = (scope: String, label: String,options:string[]) => {
       },
       main: {
         label: label,
-       
-        options:options,
+
+        options: options,
       },
     },
   };
 };
 
-export const getTextArea = (scope:string,heading:string,hideButton:boolean,layout?:any)=>{
-  return  {
+export const getTextArea = (scope: string, heading: string, hideButton: boolean, layout?: any) => {
+  return {
     type: "Control",
     scope: `#/properties/${scope}`,
 
@@ -108,30 +108,30 @@ export const getTextArea = (scope:string,heading:string,hideButton:boolean,layou
       widget: "TextArea",
     },
     config: {
-      layout:layout||12,
-      style:{
-        containerStyle:{
-          borderRadius:"20px",
+      layout: layout || 12,
+      style: {
+        containerStyle: {
+          borderRadius: "20px",
         },
-        headerContainerStyle:{
-          
+        headerContainerStyle: {
+
         },
-        textAreaStyle:{
-          borderRadius:"20px",
-          padding:"20px"
+        textAreaStyle: {
+          borderRadius: "20px",
+          padding: "20px"
           // background:"black",
           // color:"white"
         }
       },
       main: {
-        heading:heading,
-        minRows:8,
-        hideButton:hideButton
+        heading: heading,
+        minRows: 8,
+        hideButton: hideButton
       },
     },
   }
 }
-export const getSelectField = (scope: string, label: string, options: { label: string, value: string }[]) => {
+export const getSelectField = (scope: string, label: string, options: { title: string, const: string }[]) => {
   return {
     type: "Control",
     scope: `#/properties/${scope}`,
@@ -158,28 +158,28 @@ const GraphSection = {
 
 export const buildPropertiesSection = function (type: String) {
   let uiSchema = _.cloneDeep(GraphSection);
-if(type === "SpeedoMeter" ){
-  uiSchema.elements = [
-  getInputField("segments", "Segments Count"),
-  getInputField("heading", "Container Heading"),
-  getInputField("heading", "Container Heading"),
-  getInputField("speedoCaption", "Speedometer Caption"),
-  getInputField("width","Speedometer Width")
-  ]
-}
-  else if ( type === "RankCard") {
+  if (type === "SpeedoMeter") {
+    uiSchema.elements = [
+      getInputField("segments", "Segments Count"),
+      getInputField("heading", "Container Heading"),
+      getInputField("heading", "Container Heading"),
+      getInputField("speedoCaption", "Speedometer Caption"),
+      getInputField("width", "Speedometer Width")
+    ]
+  }
+  else if (type === "RankCard") {
     uiSchema.elements = [
-    getInputField("rank", "Rank"),
-    getInputField("image", "Image Url"), 
-    getInputField("title", "Card Title"),
-    getInputField("description", "Card Description")];
-  } 
+      getInputField("rank", "Rank"),
+      getInputField("image", "Image Url"),
+      getInputField("title", "Card Title"),
+      getInputField("description", "Card Description")];
+  }
   else if (type === "LeaderBoard") {
-    uiSchema.elements = [getInputField("valueLabel", "Value Label"), 
+    uiSchema.elements = [getInputField("valueLabel", "Value Label"),
     getInputField("firstImage", "First Image url"),
-     getInputField("secondImage", "Second Image url"),
-     getInputField("thirdImage", "Third Image url"),
-     getTextArea("functionCode","Write Compare Code",false)
+    getInputField("secondImage", "Second Image url"),
+    getInputField("thirdImage", "Third Image url"),
+    getTextArea("functionCode", "Write Compare Code", false)
     ];
   }
   else if (type === "CardSlider") {
@@ -193,64 +193,66 @@ if(type === "SpeedoMeter" ){
     const bottomLabel_3 = getInputField("bottomLabel_3", "Third BottomLabel");
     uiSchema.elements = [heading, bottomLabel_1, bottomLabel_2, bottomLabel_3];
   } else if (type === "card") {
-    uiSchema.elements = [getInputField("url", "Image Url"),getInputField("label", "Label"),getInputField("description", "Description"), ];}
-    else if (type === "Box") {
-      const iconName = getInputField("value", "Value");
-      uiSchema.elements = [getSelectField("graphType","Label Type",[
-        { label: "URL", value: "url" },
-        { label: "Heading", value: "heading" }
-      ]), iconName];}
-    else if (type === "Button" ) {
-      const caption = getInputField("color", "Color");
-      const size = getInputField("size", "Size");
-      const iconName = getInputField("iconName", "Icon Name");
-      uiSchema.elements = [getSelectField("buttonType","Button Type",[
-        { label: "Button With Text", value: "Button" },
-        { label: "Button With Icon", value: "IconButton" },
-        { label: "Button With Icon and Text", value: "ButtonWithIconAndText" },
-      ]), iconName,size,caption,
-      getSelectField("defaultStyle","Default Style",[
-        { label: "Apply Default Style", value: "true" },
-        { label: "No Style", value: "false" },
-      ]),
-      JSON.parse(JSON.stringify(EmptyBox))
+    uiSchema.elements = [getInputField("url", "Image Url"), getInputField("label", "Label"), getInputField("description", "Description"),];
+  }
+  else if (type === "Box") {
+    const iconName = getInputField("value", "Value");
+    uiSchema.elements = [getSelectField("graphType", "Label Type", [
+      { title: "URL", const: "url" },
+      { title: "Heading", const: "heading" }
+    ]), iconName];
+  }
+  else if (type === "Button") {
+    const caption = getInputField("color", "Color");
+    const size = getInputField("size", "Size");
+    const iconName = getInputField("iconName", "Icon Name");
+    uiSchema.elements = [getSelectField("buttonType", "Button Type", [
+      { title: "Button With Text", const: "Button" },
+      { title: "Button With Icon", const: "IconButton" },
+      { title: "Button With Icon and Text", const: "ButtonWithIconAndText" },
+    ]), iconName, size, caption,
+    getSelectField("defaultStyle", "Default Style", [
+      { title: "Apply Default Style", const: "true" },
+      { title: "No Style", const: "false" },
+    ]),
+    JSON.parse(JSON.stringify(EmptyBox))
     ];
   } else if (type === "Graph") {
     const height = getInputField("height", "Height");
     const heading = getInputField("heading", "Heading");
     const leftLabel = getInputField("leftLabel", "Left Label");
     const bottomLabel = getInputField("bottomLabel", "Bottom Label");
-   const legendAvailabe = getRadioInputField("legendHide","Legend Hide",["YES","No"])
+    const legendAvailabe = getRadioInputField("legendHide", "Legend Hide", ["YES", "No"])
 
     uiSchema.elements = [
       heading,
       height,
-      getSelectField("graphType","Graph Type",[
-        { label: "Bar Graph", value: "BarGraph" },
-        { label: "Stack Bar Graph", value: "StackBarGraph" },
-        { label: "Line Graph", value: "LineGraph" },
-        { label: "Pie Graph", value: "PieGraph" },
-        { label: "Horizontal Bar Graph", value: "HorizontalBarGraph" },
+      getSelectField("graphType", "Graph Type", [
+        { title: "Bar Graph", const: "BarGraph" },
+        { title: "Stack Bar Graph", const: "StackBarGraph" },
+        { title: "Line Graph", const: "LineGraph" },
+        { title: "Pie Graph", const: "PieGraph" },
+        { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
       ]),
       leftLabel,
       bottomLabel,
       legendAvailabe,
-      getArrayControl("legendLabels","label"),
-      getArrayControl("pieArcColors","color"),
+      getArrayControl("legendLabels", "label"),
+      getArrayControl("pieArcColors", "color"),
     ];
-  }else if(type === "WrapperSection"){
-   uiSchema.elements = [getRadioInputField("divider","Divider",["YES","No"]),getRadioInputField("heading","Page Heading",["YES","No"])]
+  } else if (type === "WrapperSection") {
+    uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), getRadioInputField("heading", "Page Heading", ["YES", "No"])]
   }
-  else if(type === "TabSection"){
-     uiSchema.elements =[
-      getArrayControl("sectionLabels","label"),
-     ]
+  else if (type === "TabSection") {
+    uiSchema.elements = [
+      getArrayControl("sectionLabels", "label"),
+    ]
   }
-  else if(type === "Radio"){
-    uiSchema.elements =[
-      getArrayControl("sectionLabels","label","Options Of Radio"),
+  else if (type === "Radio") {
+    uiSchema.elements = [
+      getArrayControl("sectionLabels", "label", "Options Of Radio"),
     ]
- }
+  }
 
   return uiSchema;
 };

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

@@ -14,33 +14,33 @@ export const CoreSection = {
           label: "Type",
           type: "text",
           options: [
-            { label: "Select", value: "Select" },
-            { label: "Date", value: "Date" },
-            { label: "CheckBox", value: "CheckBox" },
-            { label: "Table", value: "Table" },
-            { label: "Array", value: "Array" },
-            { label: "Container", value: "WrapperSection" },
-            { label: "Tabs", value: "TabSection" },
-            { label: "Text", value: "Text" },
-            { label: "Text Area", value: "TextArea" },
-            { label: "Button", value: "Button" },
-            { label: "Card", value: "card" },
-            { label: "Radio", value: "Radio" },
-            { label: "Rank", value: "Rank" },
-            { label: "SpeedoMeter", value: "SpeedoMeter" },
-            { label: "ProgressBar", value: "ProgressBar" },
-            { label: "Graph", value: "Graph" },
-            { label: "Label", value: "Box" },
-            { label: "Upload File", value: "UploadFile" },
-            { label: "Download File", value: "DownloadFile" },
-            { label: "Empty Box", value: "EmptyBox" },
-            { label: "ProgressBar Card", value: "ProgressBarCard" },
-            { label: "Rank Card", value: "RankCard" },
-            { label: "Runner Boy Progress Bar", value: "RunnerBoyProgressBar" },
-            { label: "Slider", value: "Slider" },
-            { label: "Timer", value: "Timer" },
-            { label: "MultipleSelect", value: "MultipleSelect" },
-            { label: "LeaderBoard", value: "LeaderBoard" },],
+            { title: "Select", const: "Select" },
+            { title: "Date", const: "Date" },
+            { title: "CheckBox", const: "CheckBox" },
+            { title: "Table", const: "Table" },
+            { title: "Array", const: "Array" },
+            { title: "Container", const: "WrapperSection" },
+            { title: "Tabs", const: "TabSection" },
+            { title: "Text", const: "Text" },
+            { title: "Text Area", const: "TextArea" },
+            { title: "Button", const: "Button" },
+            { title: "Card", const: "card" },
+            { title: "Radio", const: "Radio" },
+            { title: "Rank", const: "Rank" },
+            { title: "SpeedoMeter", const: "SpeedoMeter" },
+            { title: "ProgressBar", const: "ProgressBar" },
+            { title: "Graph", const: "Graph" },
+            { title: "Label", const: "Box" },
+            { title: "Upload File", const: "UploadFile" },
+            { title: "Download File", const: "DownloadFile" },
+            { title: "Empty Box", const: "EmptyBox" },
+            { title: "ProgressBar Card", const: "ProgressBarCard" },
+            { title: "Rank Card", const: "RankCard" },
+            { title: "Runner Boy Progress Bar", const: "RunnerBoyProgressBar" },
+            { title: "Slider", const: "Slider" },
+            { title: "Timer", const: "Timer" },
+            { title: "MultipleSelect", const: "MultipleSelect" },
+            { title: "LeaderBoard", const: "LeaderBoard" },],
         },
       },
     },
@@ -118,10 +118,10 @@ export const CoreSection = {
                 main: {
                   label: "Screen Size",
                   options: [
-                    { label: "Extra Small", value: "xs" },
-                    { label: "Small", value: "sm" },
-                    { label: "Medium", value: "md" },
-                    { label: "Large", value: "lg" },
+                    { title: "Extra Small", const: "xs" },
+                    { title: "Small", const: "sm" },
+                    { title: "Medium", const: "md" },
+                    { title: "Large", const: "lg" },
                   ],
                 },
               },
@@ -143,10 +143,10 @@ export const CoreSection = {
                 main: {
                   label: "Value",
                   options: [
-                    { label: "3", value: "3" },
-                    { label: "5.5", value: "5.5" },
-                    { label: "8", value: "8" },
-                    { label: "12", value: "12" },
+                    { title: "3", const: "3" },
+                    { title: "5.5", const: "5.5" },
+                    { title: "8", const: "8" },
+                    { title: "12", const: "12" },
                   ],
                 },
               },

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

@@ -1,32 +1,7 @@
 export const ValidationSection = {
   type: "HorizontalLayout",
   elements: [
-    // {
-    //   type: "Control",
-    //   scope: "#/properties/validationType",
-
-    //   options: {
-    //     widget: "SelectInputField",
-    //   },
-    //   config: {
-    //     layout: {
-    //       xs: 11,
-    //       sm: 11,
-    //       md: 5.5,
-    //       lg: 5.5,
-    //     },
-    //     main: {
-    //       label: "Validation Type",
-    //       options: [
-    //         { value: "String", label: "string" },
-    //         { value: "minLength", label: "Minimum Length" },
-    //         { value: "maxLength", label: "Maximum Length" },
-    //         { value: "pattern", label: "Pattern" },
-    //       ]
-    //     },
-    //   },
-    // },
-    {
+   {
       type: "Control",
       scope: "#/properties/validation",
       layout: 11.5,
@@ -52,10 +27,10 @@ export const ValidationSection = {
                 main: {
                   label: "Validation Type",
                   options: [
-                    { value: "required", label: "Required" },
-                    { value: "minLength", label: "Minimum Length" },
-                    { value: "maxLength", label: "Maximum Length" },
-                    { value: "pattern", label: "Pattern" },
+                    { const: "required", title: "Required" },
+                    { const: "minLength", title: "Minimum Length" },
+                    { const: "maxLength", title: "Maximum Length" },
+                    { const: "pattern", title: "Pattern" },
                   ]
                 },
               },