@flozy/editor 1.4.6 → 1.4.8

package/dist/Editor/Elements/Button/EditorButton.js

@@ -32,7 +32,6 @@ const EditorButton = props => {
     bannerSpacing,
     textColor,
     url,
-    borderColor,
     buttonLink,
     textSize,
     textAlign,
@@ -40,7 +39,10 @@ const EditorButton = props => {
     textColorHover,
     bgColorHover,
     buttonIcon,
-    iconPosition
+    iconPosition,
+    borderStyle,
+    borderWidth,
+    borderColor
   } = element;
   const {
     linkType,
@@ -119,7 +121,7 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
-  const borderStyle = borderColor?.indexOf("linear") >= 0 ? {
+  const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
     borderImageSource: borderColor,
     borderImageSlice: 1
   } : {
@@ -142,10 +144,12 @@ const EditorButton = props => {
         component: "button",
         sx: {
           background: bgColor || "rgb(30, 75, 122)",
-          borderWidth: "1px",
           borderBlockStyle: "solid",
-          ...borderStyle,
+          // ...borderStyleColor,
+          borderColor: borderColor || "transparent",
+          borderWidth: borderWidth || "1px",
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+          borderStyle: borderStyle || "solid",
           paddingLeft: `${left || 8}px`,
           paddingRight: `${right || 8}px`,
           paddingTop: `${top || 8}px`,

package/dist/Editor/Elements/Form/Form.js

@@ -27,8 +27,30 @@ const Form = props => {
   const {
     buttonProps,
     textColor,
-    formName
+    formName,
+    borderWidth,
+    borderColor,
+    borderStyle,
+    borderRadius,
+    bannerSpacing,
+    bgColor,
+    formTitle,
+    textSize,
+    fontFamily,
+    textAlign
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
   const btnAlign = buttonProps?.alignment || {};
@@ -152,6 +174,10 @@ const Form = props => {
     return /*#__PURE__*/_jsxs("div", {
       className: "",
       contentEditable: false,
+      style: {
+        backgroundColor: "#ccc",
+        width: "fit-content"
+      },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Form Settings",
         arrow: true,
@@ -187,47 +213,71 @@ const Form = props => {
       id: `${formName}`,
       onSubmit: handleSubmit,
       style: {
-        color: textColor || "#FFF"
+        color: textColor || "#FFF",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        background: bgColor || "transparent",
+        paddingLeft: `${left}px`,
+        paddingRight: `${right}px`,
+        paddingTop: `${top}px`,
+        paddingBottom: `${bottom}px`
       },
       ref: formEle,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        className: "form-grid",
+        item: true,
+        xs: 12,
         spacing: 2,
-        children: [children, /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: buttonProps?.grid || 6,
-          className: "form-btn-wrpr",
-          contentEditable: false,
-          style: {
-            display: "flex",
-            justifyContent: btnAlign?.horizantal || "start",
-            alignItems: btnAlign?.vertical || "start"
-          },
-          children: /*#__PURE__*/_jsx("button", {
-            onClick: onSubmitClick,
-            disabled: loading,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx("legend", {
             style: {
-              background: buttonProps?.bgColor || "rgb(30, 75, 122)",
-              borderWidth: "1px",
-              borderBlockStyle: "solid",
-              ...btnBorderStyle,
-              borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
-              paddingLeft: `${btnSpacing?.left || 8}px`,
-              paddingRight: `${btnSpacing?.right || 8}px`,
-              paddingTop: `${btnSpacing?.top || 8}px`,
-              paddingBottom: `${btnSpacing?.bottom || 8}px`,
-              marginLeft: `${btnM?.left || 0}px`,
-              marginRight: `${btnM?.right || 0}px`,
-              marginTop: `${btnM?.top || 0}px`,
-              marginBottom: `${btnM?.bottom || 0}px`,
-              color: `${buttonProps?.textColor || "#FFFFFF"}`,
-              fontSize: buttonProps?.textSize || "inherit",
-              height: "fit-content",
-              fontFamily: buttonProps?.fontFamily || "PoppinsRegular"
+              fontSize: textSize || "inherit",
+              fontFamily: fontFamily || "PoppinsRegular",
+              textAlign: textAlign || "left",
+              width: "100%"
             },
-            children: buttonProps?.label || "Submit"
-          })
-        })]
+            children: formTitle
+          }), children, /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            xs: buttonProps?.grid || 6,
+            className: "form-btn-wrpr",
+            contentEditable: false,
+            style: {
+              display: "flex",
+              justifyContent: btnAlign?.horizantal || "start",
+              alignItems: btnAlign?.vertical || "start"
+            },
+            children: /*#__PURE__*/_jsx("button", {
+              onClick: onSubmitClick,
+              disabled: loading,
+              style: {
+                background: buttonProps?.bgColor || "rgb(30, 75, 122)",
+                borderWidth: "1px",
+                borderBlockStyle: "solid",
+                ...btnBorderStyle,
+                borderRadius: `${btnR?.topLeft}px ${btnR?.topRight}px ${btnR?.bottomLeft}px ${btnR?.bottomRight}px`,
+                paddingLeft: `${btnSpacing?.left || 8}px`,
+                paddingRight: `${btnSpacing?.right || 8}px`,
+                paddingTop: `${btnSpacing?.top || 8}px`,
+                paddingBottom: `${btnSpacing?.bottom || 8}px`,
+                marginLeft: `${btnM?.left || 0}px`,
+                marginRight: `${btnM?.right || 0}px`,
+                marginTop: `${btnM?.top || 0}px`,
+                marginBottom: `${btnM?.bottom || 0}px`,
+                color: `${buttonProps?.textColor || "#FFFFFF"}`,
+                fontSize: buttonProps?.textSize || "inherit",
+                height: "fit-content",
+                fontFamily: buttonProps?.fontFamily || "PoppinsRegular",
+                width: buttonProps?.fullWidth ? "100%" : "auto"
+              },
+              children: buttonProps?.label || "Submit"
+            })
+          })]
+        })
       }), loading && /*#__PURE__*/_jsx("div", {
         style: {
           position: "absolute",

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -5,10 +5,14 @@ const FormText = props => {
     fieldProps
   } = props;
   const {
-    borderColor,
     bannerSpacing,
+    height,
     borderRadius,
-    height
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor
   } = fieldProps;
   const {
     left,
@@ -37,12 +41,17 @@ const FormText = props => {
       style: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
         paddingBottom: `${bottom || 8}px`,
-        height: height || "auto"
+        height: height || "auto",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -5,10 +5,14 @@ const FormTextArea = props => {
     fieldProps
   } = props;
   const {
-    borderColor,
     bannerSpacing,
+    height,
     borderRadius,
-    height
+    borderStyle,
+    borderWidth,
+    borderColor,
+    textColor,
+    bgColor
   } = fieldProps;
   const {
     left,
@@ -22,7 +26,6 @@ const FormTextArea = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  console.log(fieldProps);
   const onChange = e => {
     e.preventDefault();
   };
@@ -38,12 +41,17 @@ const FormTextArea = props => {
       style: {
         width: "100%",
         border: `1px solid ${borderColor || "#FFF"}`,
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
         paddingLeft: `${left || 8}px`,
         paddingRight: `${right || 8}px`,
         paddingTop: `${top || 8}px`,
         paddingBottom: `${bottom || 8}px`,
-        height: height || "150px"
+        height: height || "150px",
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        color: textColor || "#000",
+        background: bgColor || "transparent"
       }
     })
   });

package/dist/Editor/Elements/Grid/Grid.js

@@ -31,9 +31,12 @@ const Grid = props => {
     bgColor,
     alignment,
     backgroundImage,
-    borderColor,
     size: elSize,
-    fgColor
+    fgColor,
+    borderWidth,
+    borderColor,
+    borderStyle,
+    borderRadius
   } = element;
   const {
     left,
@@ -46,6 +49,12 @@ const Grid = props => {
     horizantal,
     flexDirection
   } = alignment || {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = borderRadius || {};
   const {
     height: elHeight
   } = elSize || {};
@@ -217,7 +226,10 @@ const Grid = props => {
       background: bgColor,
       alignContent: vertical,
       backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
-      border: `1px solid ${borderColor}`
+      borderColor: borderColor || "transparent",
+      borderWidth: borderWidth || "1px",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderStyle: borderStyle || "solid"
     },
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {

package/dist/Editor/common/StyleBuilder/buttonStyle.js

@@ -83,12 +83,39 @@ const buttonStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

package/dist/Editor/common/StyleBuilder/fieldStyle.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 const fieldStyle = [{
   tab: "General",
   value: "general",
@@ -30,12 +31,39 @@ const fieldStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -72,7 +72,7 @@ const Color = props => {
           color: "textSecondary",
           sx: {
             fontSize: "14px",
-            marginBottom: '5px'
+            marginBottom: "5px"
           },
           children: label
         }), /*#__PURE__*/_jsx(TextField, {

package/dist/Editor/common/StyleBuilder/formButtonStyle.js

@@ -30,6 +30,11 @@ const formButtonStyle = [{
     key: "textAlign",
     type: "textAlign",
     placeholder: "16px or 1em"
+  }, {
+    label: "Full Width",
+    key: "fullWidth",
+    type: "selectBox",
+    placeholder: "Set Button Width to full"
   }]
 }, {
   tab: "Position",

package/dist/Editor/common/StyleBuilder/formStyle.js

@@ -1,3 +1,5 @@
+import { fontOptions } from "../../utils/font";
+import { jsx as _jsx } from "react/jsx-runtime";
 const formStyle = [{
   tab: "General",
   value: "general",
@@ -16,6 +18,37 @@ const formStyle = [{
     type: "selectBox",
     placeholder: "Save Response"
   }]
+}, {
+  tab: "Form Title",
+  value: "formTitle",
+  fields: [{
+    label: "Title",
+    key: "formTitle",
+    type: "text"
+  }, {
+    label: "Font Size",
+    key: "textSize",
+    type: "text",
+    placeholder: "16px or 1em"
+  }, {
+    label: "Font Family",
+    key: "fontFamily",
+    type: "textOptions",
+    options: fontOptions,
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }, {
+    label: "Text Align",
+    key: "textAlign",
+    type: "textAlign",
+    placeholder: "16px or 1em"
+  }]
 }, {
   tab: "Banner Spacing",
   value: "bannerSpacing",
@@ -25,12 +58,39 @@ const formStyle = [{
     type: "bannerSpacing"
   }]
 }, {
-  tab: "Border Radius",
-  value: "borderRadius",
+  tab: "Border",
+  value: "border",
   fields: [{
     label: "Border Radius",
     key: "borderRadius",
     type: "borderRadius"
+  }, {
+    label: "Border Width",
+    key: "borderWidth",
+    type: "text",
+    placeholder: "1px"
+  }, {
+    label: "Border Style",
+    key: "borderStyle",
+    type: "textOptions",
+    options: [{
+      text: "Solid",
+      value: "solid"
+    }, {
+      text: "Dotted",
+      value: "dotted"
+    }, {
+      text: "Dashed",
+      value: "dashed"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
   }]
 }, {
   tab: "Colors",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"