@saltcorn/builder 1.1.4-alpha.1 → 1.1.4-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.4-alpha.1",
+  "version": "1.1.4-alpha.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.1.4-alpha.1",
+    "@saltcorn/common-code": "1.1.4-alpha.2",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/elements/Columns.js

@@ -86,6 +86,7 @@ const Columns = ({
   vAligns,
   colClasses,
   colStyles,
+  customClass,
 }) => {
   const {
     selected,
@@ -93,7 +94,7 @@ const Columns = ({
   } = useNode((node) => ({ selected: node.events.selected }));
   return (
     <div
-      className={`row builder-columns ${selected ? "selected-node" : ""} ${
+      className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
         typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
       } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -135,6 +136,7 @@ const ColumnsSettings = () => {
     aligns: node.data.props.aligns,
     colClasses: node.data.props.colClasses,
     colStyles: node.data.props.colStyles,
+    customClass: node.data.props.customClass,
   }));
   const {
     actions: { setProp },
@@ -147,6 +149,7 @@ const ColumnsSettings = () => {
     aligns,
     colClasses,
     colStyles,
+    customClass,
   } = node;
   const colSetsNode = {
     vAlign: vAligns?.[setting_col_n - 1],
@@ -326,7 +329,7 @@ const ColumnsSettings = () => {
           </tbody>
         </table>
       </div>
-      <table className="w-100" accordiontitle="Gutters">
+      <table className="w-100" accordiontitle="Gutters and class">
         <tbody>
           <SettingsRow
             field={{
@@ -346,6 +349,15 @@ const ColumnsSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              name: "customClass",
+              label: "Custom class",
+              type: "String",
+            }}
+            node={node}
+            setProp={setProp}
+          />
         </tbody>
       </table>
       <div accordiontitle="Box" className="w-100">
@@ -366,6 +378,7 @@ Columns.craft = {
     style: {},
     breakpoints: ["sm", "sm"],
     setting_col_n: 1,
+    customClass: "",
   },
   related: {
     settings: ColumnsSettings,

package/src/components/elements/Table.js

@@ -33,6 +33,7 @@ const Table = ({
   bs_bordered,
   bs_borderless,
   bs_wauto,
+  customClass
 }) => {
   const {
     selected,
@@ -40,7 +41,7 @@ const Table = ({
   } = useNode((node) => ({ selected: node.events.selected }));
   return (
     <table
-      className={`${selected ? "selected-node" : ""} ${
+      className={`${selected ? "selected-node" : ""} ${customClass} ${
         bs_style ? "table" : ""
       } ${bs_style && bs_small ? "table-sm" : ""} ${
         bs_style && bs_striped ? "table-striped" : ""
@@ -79,6 +80,11 @@ const fields = [
     type: "Integer",
     attributes: { min: 0 },
   },
+  {
+    name: "customClass",
+    label: "Custom class",
+    type: "String",
+  },
   {
     label: "Bootstrap style",
     name: "bs_style",

package/src/components/elements/utils.js

@@ -545,6 +545,9 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
       }
       const newHtml = $(".preview-scratchpad").html();
       setPreviews((prevState) => ({ ...prevState, [node_id]: newHtml }));
+
+      // for react-view previews
+      document.dispatchEvent(new Event("preview-loaded"));
     })
     .catch((e) => {
       console.log("Unable to fetch the preview:");

package/src/components/storage.js

@@ -248,8 +248,8 @@ const layoutToNodes = (
             (segment.block === true
               ? "block"
               : segment.block === false
-              ? "inline-block"
-              : "block")
+                ? "inline-block"
+                : "block")
           }
           fullPageWidth={
             typeof segment.fullPageWidth === "undefined"
@@ -314,6 +314,7 @@ const layoutToNodes = (
           rows={segment.rows || 2}
           columns={segment.columns || 2}
           bs_style={segment.bs_style || false}
+          customClass={segment.customClass}
           bs_small={segment.bs_small || false}
           bs_striped={segment.bs_striped || false}
           bs_bordered={segment.bs_bordered || false}
@@ -357,6 +358,7 @@ const layoutToNodes = (
           style={segment.style || {}}
           gx={segment.gx}
           gy={segment.gy}
+          customClass={segment.customClass}
           vAligns={segment.vAligns}
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
@@ -392,6 +394,7 @@ const layoutToNodes = (
             style={segment.style || {}}
             gx={segment.gx}
             gy={segment.gy}
+            customClass={segment.customClass}
             vAligns={segment.vAligns}
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
@@ -602,6 +605,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         columns,
         contents,
         bs_style: node.props.bs_style,
+        customClass: node.props.customClass,
         bs_small: node.props.bs_small,
         bs_striped: node.props.bs_striped,
         bs_bordered: node.props.bs_bordered,
@@ -616,6 +620,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       return {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
+        customClass: node.props.customClass,
         gx: +node.props.gx,
         gy: +node.props.gy,
         aligns: node.props.aligns,