@saltcorn/builder 0.9.0-beta.9 → 0.9.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.0-beta.9",
+  "version": "0.9.1-beta.0",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -471,7 +471,6 @@ const Builder = ({ options, layout, mode }) => {
                     icon={faSave}
                     className={isSaving ? "d-inline" : "d-none"}
                   />
-                  <ViewPageLink />
                   <SettingsPanel />
                 </div>
               </div>

package/src/components/elements/Columns.js

@@ -15,6 +15,7 @@ import {
   reactifyStyles,
   SettingsSectionHeaderRow,
   buildBootstrapOptions,
+  parseStyles,
 } from "./utils";
 import { BoxModelEditor } from "./BoxModelEditor";
 import {
@@ -83,6 +84,8 @@ const Columns = ({
   gy,
   aligns,
   vAligns,
+  colClasses,
+  colStyles,
 }) => {
   const {
     selected,
@@ -101,7 +104,8 @@ const Columns = ({
           key={ix}
           className={`split-col col-sm-${getWidth(widths, ix)} text-${
             aligns?.[ix]
-          } align-items-${vAligns?.[ix]}`}
+          } align-items-${vAligns?.[ix]} ${colClasses?.[ix] || ""}`}
+          style={parseStyles(colStyles?.[ix] || "")}
         >
           <Element canvas id={`Col${ix}`} is={Column}>
             {contents[ix]}
@@ -129,6 +133,8 @@ const ColumnsSettings = () => {
     gy: node.data.props.gy,
     vAligns: node.data.props.vAligns,
     aligns: node.data.props.aligns,
+    colClasses: node.data.props.colClasses,
+    colStyles: node.data.props.colStyles,
   }));
   const {
     actions: { setProp },
@@ -139,10 +145,14 @@ const ColumnsSettings = () => {
     setting_col_n,
     vAligns,
     aligns,
+    colClasses,
+    colStyles,
   } = node;
   const colSetsNode = {
     vAlign: vAligns?.[setting_col_n - 1],
     hAlign: aligns?.[setting_col_n - 1],
+    colClass: colClasses?.[setting_col_n - 1] || "",
+    colStyle: colStyles?.[setting_col_n - 1] || "",
   };
   return (
     <Accordion>
@@ -283,6 +293,36 @@ const ColumnsSettings = () => {
                 })
               }
             />
+            <SettingsRow
+              field={{
+                name: "colClass",
+                label: "Class",
+                type: "String",
+              }}
+              node={colSetsNode}
+              setProp={setProp}
+              onChange={(k, v) =>
+                setProp((prop) => {
+                  if (!prop.colClasses) prop.colClasses = [];
+                  prop.colClasses[setting_col_n - 1] = v;
+                })
+              }
+            />
+            <SettingsRow
+              field={{
+                name: "colStyle",
+                label: "CSS",
+                type: "textarea",
+              }}
+              node={colSetsNode}
+              setProp={setProp}
+              onChange={(k, v) =>
+                setProp((prop) => {
+                  if (!prop.colStyles) prop.colStyles = [];
+                  prop.colStyles[setting_col_n - 1] = v;
+                })
+              }
+            />
           </tbody>
         </table>
       </div>

package/src/components/elements/HTMLCode.js

@@ -4,7 +4,7 @@
  * @subcategory components / elements
  */
 
-import React from "react";
+import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
 import {
   blockProps,
@@ -12,6 +12,7 @@ import {
   SettingsFromFields,
   TextStyleSetting,
 } from "./utils";
+import optionsCtx from "../context";
 
 export /**
  * @param {object} props
@@ -37,14 +38,20 @@ const HTMLCode = ({ text }) => {
   );
 };
 
-const fields = [
-  {
-    label: "HTML Code",
-    name: "text",
-    type: "textarea",
-    segment_name: "contents"
-  },
-];
+const fields = (mode) => {
+  return [
+    {
+      label: "HTML Code",
+      name: "text",
+      type: "textarea",
+      segment_name: "contents",
+      sublabel:
+        mode === "show"
+          ? "Access fields with <code>{{ var_name }}</code>"
+          : undefined,
+    },
+  ];
+};
 
 /**
  * @type {object}
@@ -52,10 +59,14 @@ const fields = [
 HTMLCode.craft = {
   displayName: "HTMLCode",
   related: {
-    settings: SettingsFromFields(fields),
+    settings: () => {
+      const options = useContext(optionsCtx);
+
+      return SettingsFromFields(fields(options.mode))();
+    },
     segment_type: "blank",
     segment_vars: { isHTML: true },
     segment_match: (segment) => segment.isHTML,
-    fields,
+    fields: fields(),
   },
 };

package/src/components/elements/utils.js

@@ -1078,13 +1078,27 @@ const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
         <td colSpan="2">
           {needLabel && <label>{field.label}</label>}
           {inner}
+          {field.sublabel ? (
+            <i
+              className="small"
+              dangerouslySetInnerHTML={{ __html: field.sublabel }}
+            ></i>
+          ) : null}
         </td>
       ) : (
         <Fragment>
           <td>
             <label>{field.label}</label>
           </td>
-          <td>{inner}</td>
+          <td>
+            {inner}
+            {field.sublabel ? (
+              <i
+                className="small"
+                dangerouslySetInnerHTML={{ __html: field.sublabel }}
+              ></i>
+            ) : null}
+          </td>
         </Fragment>
       )}
     </tr>

package/src/components/storage.js

@@ -283,6 +283,8 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           gx={segment.gx}
           gy={segment.gy}
           vAligns={segment.vAligns}
+          colClasses={segment.colClasses}
+          colStyles={segment.colStyles}
           aligns={segment.aligns}
           setting_col_n={1}
           contents={segment.besides.map(toTag)}
@@ -315,6 +317,8 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
             gx={segment.gx}
             gy={segment.gy}
             vAligns={segment.vAligns}
+            colClasses={segment.colClasses}
+            colStyles={segment.colStyles}
             aligns={segment.aligns}
             setting_col_n={1}
             contents={segment.besides.map(toTag)}
@@ -485,6 +489,8 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         gy: +node.props.gy,
         aligns: node.props.aligns,
         vAligns: node.props.vAligns,
+        colClasses: node.props.colClasses,
+        colStyles: node.props.colStyles,
         style: node.props.style,
         widths,
       };