@saltcorn/builder 1.7.0-beta.1 → 1.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -30,7 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@monaco-editor/react": "4.7.0",
-    "@saltcorn/common-code": "1.7.0-beta.1",
+    "@saltcorn/common-code": "1.7.0-beta.2",
     "@tippyjs/react": "4.2.6",
     "babel-loader": "9.2.1",
     "ckeditor4-react": "2.0.0",

package/src/components/elements/Columns.js

@@ -121,6 +121,7 @@ const Columns = ({
   colClasses,
   colStyles,
   customClass,
+  isFormula,
   breakpoints,
 }) => {
   const {
@@ -149,7 +150,9 @@ const Columns = ({
   }
   return (
     <div
-      className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
+      className={`row builder-columns ${
+        (!isFormula?.customClass && customClass) || ""
+      } ${selected ? "selected-node" : ""} ${
         typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
       } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -204,6 +207,7 @@ const ColumnsSettings = () => {
     colClasses: node.data.props.colClasses,
     colStyles: node.data.props.colStyles,
     customClass: node.data.props.customClass,
+    isFormula: node.data.props.isFormula,
     currentSettingsTab: node.data.props.currentSettingsTab,
   }));
   const {
@@ -409,6 +413,8 @@ const ColumnsSettings = () => {
               name: "customClass",
               label: t("Custom class"),
               type: "String",
+              canBeFormula: true,
+              formulaInEdit: true,
             }}
             node={node}
             setProp={setProp}
@@ -434,6 +440,7 @@ Columns.craft = {
     breakpoints: ["sm", "sm"],
     setting_col_n: 0,
     customClass: "",
+    isFormula: {},
   },
   related: {
     settings: ColumnsSettings,

package/src/components/elements/utils.js

@@ -327,14 +327,23 @@ export /**
  * @param {object} props.node
  * @param {string} props.nodekey
  * @param {string} props.children
+ * @param {boolean} [props.allowInEdit] also offer the formula in edit views
  * @returns {Fragment}
  * @namespace
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
+const OrFormula = ({
+  setProp,
+  isFormula,
+  node,
+  nodekey,
+  children,
+  allowInEdit,
+}) => {
   const { mode } = React.useContext(optionsCtx);
-  const allowFormula = mode === "show" || mode === "list";
+  const allowFormula =
+    mode === "show" || mode === "list" || (allowInEdit && mode === "edit");
   /**
    * @returns {void}
    */
@@ -1616,6 +1625,7 @@ const SettingsRow = ({
     <OrFormula
       nodekey={field.name}
       isFormula={node.isFormula}
+      allowInEdit={field.formulaInEdit}
       {...{ setProp, node }}
     >
       <ConfigField

package/src/components/storage.js

@@ -409,6 +409,7 @@ const layoutToNodes = (
             header_label={col.header_label}
             col_width={col.col_width}
             showif={col.showif}
+            cell_css_formula={col.cell_css_formula}
             col_width_units={col.col_width_units}
             contents={toTag(col.contents)}
             {...addProps}
@@ -427,6 +428,7 @@ const layoutToNodes = (
           gx={segment.gx}
           gy={segment.gy}
           customClass={segment.customClass}
+          isFormula={segment.isFormula || {}}
           vAligns={segment.vAligns}
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
@@ -469,6 +471,7 @@ const layoutToNodes = (
             gx={segment.gx}
             gy={segment.gy}
             customClass={segment.customClass}
+            isFormula={segment.isFormula || {}}
             vAligns={segment.vAligns}
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
@@ -635,6 +638,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         alignment: node.props.alignment,
         header_label: node.props.header_label,
         showif: node.props.showif,
+        cell_css_formula: node.props.cell_css_formula,
         ...customProps,
       };
       (addFields || []).forEach((f) => {
@@ -728,6 +732,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
         customClass: node.props.customClass,
+        isFormula: node.props.isFormula,
         gx: node.props.gx != null ? +node.props.gx : undefined,
         gy: node.props.gy != null ? +node.props.gy : undefined,
         aligns: node.props.aligns,