@flozy/editor 9.3.0 → 9.3.1

package/dist/Editor/Elements/DataView/Layouts/ColumnView.js

@@ -57,7 +57,10 @@ const ColumnView = props => {
       value: row[property?.key] || "",
       rowIndex: rowIndex,
       label: property?.label,
-      readOnly: readOnly
+      readOnly: readOnly,
+      settings: {
+        wrapColumn: property?.wrapColumn
+      }
     }), needAnchor && !readOnly ? /*#__PURE__*/_jsx(Popper, {
       sx: classes.root,
       open: open,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/Select.js

@@ -40,13 +40,14 @@ export default function Select(props) {
     limitTags = 2,
     placeholder = "",
     disabled = false,
-    optionAvatar = false
+    optionAvatar = false,
+    className = ""
   } = props;
   const value = Array.isArray(pValue) ? pValue : [];
   const options = selectOptions?.length ? selectOptions.filter(s => s.value) : [];
   return /*#__PURE__*/_jsx(Autocomplete, {
     disabled: disabled,
-    className: "tv-ac-field",
+    className: `tv-ac-field ${className}`,
     multiple: true,
     limitTags: limitTags,
     placeholder: placeholder,
@@ -102,7 +103,7 @@ export default function Select(props) {
     },
     renderTags: (value, getTagProps) => {
       return /*#__PURE__*/_jsx(Box, {
-        className: "tv-ms-tag-wrpr",
+        className: `tv-ms-tag-wrpr ${className}`,
         sx: {
           "& svg": {
             marginRight: "5px",

package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js

@@ -9,8 +9,12 @@ const MultiSelectType = props => {
     value: pValue,
     options,
     label = "",
-    readOnly
+    readOnly,
+    settings
   } = props;
+  const {
+    wrapColumn
+  } = settings;
   const {
     onChange
   } = useDataView();
@@ -27,6 +31,7 @@ const MultiSelectType = props => {
     });
   };
   return /*#__PURE__*/_jsx(Select, {
+    className: `wrap-${wrapColumn}`,
     value: coloredValues,
     onChange: handleChange,
     options: options,

package/dist/Editor/Elements/DataView/Layouts/DataTypes/TextType.js

@@ -8,8 +8,12 @@ const TextType = props => {
     rowIndex,
     property,
     value,
-    readOnly
+    readOnly,
+    settings
   } = props;
+  const {
+    wrapColumn
+  } = settings;
   const {
     onChange
   } = useDataView();
@@ -34,7 +38,8 @@ const TextType = props => {
     onChange: handleChange,
     disabled: readOnly,
     id: `tv-text-input-${rowIndex}-${property}` // * should be unique
+    ,
+    multiline: wrapColumn
   });
 };
-
 export default TextType;

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -7,6 +7,7 @@ import Icon from "../../../../common/Icon";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const NEED_WRAPS = ["text", "multi-select"];
 const EditProperty = props => {
   const {
     classes,
@@ -21,6 +22,8 @@ const EditProperty = props => {
   const editData = useRef({
     ...edit
   });
+  const type = mode?.edit?.type || "";
+  const needWrap = NEED_WRAPS?.indexOf(type) >= 0;
   useEffect(() => {
     return () => {
       // on un-mount update the label
@@ -89,6 +92,12 @@ const EditProperty = props => {
         }, false);
         onEvent("close");
         break;
+      case "wrapColumn":
+        onUpdate({
+          wrapColumn: !edit?.wrapColumn
+        });
+        // onEvent("close");
+        break;
       case "Delete":
         onEvent("deleteProperty", {
           ...editData?.current
@@ -109,17 +118,17 @@ const EditProperty = props => {
           size: "small",
           onClick: onBack,
           sx: {
-            paddingLeft: '0px',
-            '&:hover': {
-              background: 'transparent !important'
+            paddingLeft: "0px",
+            "&:hover": {
+              background: "transparent !important"
             },
-            '& svg': {
-              width: '14px !important',
-              height: '14px !important'
+            "& svg": {
+              width: "14px !important",
+              height: "14px !important"
             }
           },
           children: /*#__PURE__*/_jsx(Icon, {
-            icon: 'leftArrow'
+            icon: "leftArrow"
           })
         }), translation("Edit Property")]
       }), /*#__PURE__*/_jsx(IconButton, {
@@ -127,8 +136,8 @@ const EditProperty = props => {
         size: "small",
         onClick: onClose,
         sx: {
-          '& svg': {
-            '& path': {
+          "& svg": {
+            "& path": {
               strokeWidth: 0
             }
           }
@@ -141,8 +150,8 @@ const EditProperty = props => {
         label: translation("Field Name"),
         labelPlacement: "top",
         sx: {
-          '& .MuiFormControl-root': {
-            marginBottom: '4px'
+          "& .MuiFormControl-root": {
+            marginBottom: "4px"
           }
         },
         control: /*#__PURE__*/_jsx(TextField, {
@@ -152,31 +161,45 @@ const EditProperty = props => {
           fullWidth: true,
           placeholder: translation("Field Name")
         })
-      }), /*#__PURE__*/_jsx(List, {
+      }), needWrap ? /*#__PURE__*/_jsx(List, {
+        className: "fe-dv-opt-list",
+        children: /*#__PURE__*/_jsxs(ListItemButton, {
+          onClick: onAction("wrapColumn"),
+          children: [/*#__PURE__*/_jsx(ListItemText, {
+            children: "Wrap Column"
+          }), /*#__PURE__*/_jsx(ListItemIcon, {
+            children: edit?.wrapColumn ? /*#__PURE__*/_jsx(Icon, {
+              icon: "toggleOn"
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: "toggleOff"
+            })
+          })]
+        })
+      }) : null, /*#__PURE__*/_jsx(List, {
         className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           sx: {
-            paddingBottom: '12px'
+            paddingBottom: "12px"
           },
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: translation("Type")
           }), /*#__PURE__*/_jsxs(ListItemIcon, {
             sx: {
-              display: 'flex',
+              display: "flex",
               alignItems: "center",
               gap: 1
             },
             children: [/*#__PURE__*/_jsx(Box, {
               sx: {
                 background: "#64748B1F",
-                borderRadius: '4px',
-                display: 'flex',
-                alignItems: 'center',
-                padding: '2px',
-                '& svg': {
-                  width: '16px',
-                  height: '16px'
+                borderRadius: "4px",
+                display: "flex",
+                alignItems: "center",
+                padding: "2px",
+                "& svg": {
+                  width: "16px",
+                  height: "16px"
                 }
               },
               children: /*#__PURE__*/_jsx(Icon, {
@@ -186,7 +209,7 @@ const EditProperty = props => {
               className: "label-tp",
               children: translation(TYPE_LABELS[edit?.type])
             }), /*#__PURE__*/_jsx(Icon, {
-              icon: 'rightArrow'
+              icon: "rightArrow"
             })]
           })]
         })
@@ -208,9 +231,9 @@ const EditProperty = props => {
           onClick: onAction("Visibilty"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: edit?.visible ? /*#__PURE__*/_jsx(Icon, {
-              icon: 'eyeSlash'
+              icon: "eyeSlash"
             }) : /*#__PURE__*/_jsx(Icon, {
-              icon: 'eyeIcon'
+              icon: "eyeIcon"
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: `${edit?.visible ? translation("Hide") : translation("Show")} ${translation("in View")}`
@@ -219,7 +242,7 @@ const EditProperty = props => {
           onClick: onAction("Duplicate"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: 'duplicateIcon'
+              icon: "duplicateIcon"
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: translation("Duplicate Property")
@@ -228,7 +251,7 @@ const EditProperty = props => {
           onClick: onAction("Delete"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
             children: /*#__PURE__*/_jsx(Icon, {
-              icon: 'trashIcon'
+              icon: "trashIcon"
             })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: translation("Delete Property")

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -33,7 +33,7 @@ const useTableStyles = (theme, appTheme) => ({
       height: "40px",
       maxWidth: "0px !important",
       minWidth: "0px !important",
-      "& input": {
+      "& input, & textarea": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         background: "transparent",
         fontSize: "14px"
@@ -107,6 +107,9 @@ const useTableStyles = (theme, appTheme) => ({
             "& .MuiChip-deleteIcon": {
               minWidth: "22px",
               minHeight: "22px"
+            },
+            "&.wrap-true": {
+              flexWrap: "wrap"
             }
           },
           "&.Mui-disabled": {

package/dist/Editor/common/Icon.js

@@ -13,6 +13,9 @@ import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import GridOnIcon from "@mui/icons-material/GridOn";
 import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
+import WrapTextIcon from "@mui/icons-material/WrapText";
+import ToggleOn from "@mui/icons-material/ToggleOn";
+import ToggleOff from "@mui/icons-material/ToggleOff";
 import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
@@ -340,7 +343,21 @@ const iconList = {
   trashIcon: /*#__PURE__*/_jsx(TrashIcon, {}),
   dataTable: /*#__PURE__*/_jsx(DataTableIcon, {}),
   chervUp: /*#__PURE__*/_jsx(ChervUp, {}),
-  chervDown: /*#__PURE__*/_jsx(ChervDown, {})
+  chervDown: /*#__PURE__*/_jsx(ChervDown, {}),
+  wrapColumn: /*#__PURE__*/_jsx(WrapTextIcon, {}),
+  toggleOn: /*#__PURE__*/_jsx(ToggleOn, {
+    sx: {
+      fill: "rgb(37, 99, 235)",
+      stroke: "rgb(37, 99, 235)"
+    }
+  }),
+  toggleOff: /*#__PURE__*/_jsx(ToggleOff, {
+    sx: {
+      fill: "#64748B",
+      stroke: "#64748B",
+      color: "#64748B"
+    }
+  })
 };
 export const icons = {
   ...iconList

package/package.json

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