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

package/package.json

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

package/src/components/Toolbox.js

@@ -382,6 +382,7 @@ const JoinFieldElem = ({ connectors, options }) => (
   >
     <JoinField
       name={options.parent_field_list[0]}
+      configuration={{}}
       textStyle={""}
       block={false}
     />
@@ -621,6 +622,9 @@ const ToolboxEdit = () => {
         <HTMLElem connectors={connectors} />
         <ViewElem connectors={connectors} views={views} />
       </div>
+      <div className="toolbar-row">
+        <JoinFieldElem connectors={connectors} options={options} />
+      </div>
     </Fragment>
   );
 };

package/src/components/elements/BoxModelEditor.js

@@ -12,7 +12,7 @@ Copyright (c) 2017 Taha Paksu
 */
 
 export /**
- * 
+ *
  * @param {object} props
  * @param {function} props.setProp
  * @param {object} props.node
@@ -21,7 +21,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const BoxModelEditor = ({ setProp, node }) => {
+const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory
@@ -146,7 +146,9 @@ const BoxModelEditor = ({ setProp, node }) => {
                             name="boxmodel-ex-1_width"
                             size="3"
                             value={
-                              node.width
+                              sizeWithStyle
+                                ? style["width"]
+                                : node.width
                                 ? `${node.width}${node.widthUnits || "px"}`
                                 : ""
                             }
@@ -159,7 +161,9 @@ const BoxModelEditor = ({ setProp, node }) => {
                             name="boxmodel-ex-1_height"
                             size="3"
                             value={
-                              node.height
+                              sizeWithStyle
+                                ? style["height"]
+                                : node.height
                                 ? `${node.height}${node.heightUnits || "px"}`
                                 : ""
                             }
@@ -271,20 +275,23 @@ const BoxModelEditor = ({ setProp, node }) => {
                 field={{ name: "width", label: "width", type: "DimUnits" }}
                 node={node}
                 setProp={setProp}
+                isStyle={!!sizeWithStyle}
               />
               <SettingsRow
                 field={{ name: "height", label: "height", type: "DimUnits" }}
                 node={node}
                 setProp={setProp}
+                isStyle={!!sizeWithStyle}
               />
               <SettingsRow
                 field={{
-                  name: "minHeight",
+                  name: sizeWithStyle ? "min-height" : "minHeight",
                   label: "min height",
                   type: "DimUnits",
                 }}
                 node={node}
                 setProp={setProp}
+                isStyle={!!sizeWithStyle}
               />
             </Fragment>
           )}

package/src/components/elements/Card.js

@@ -19,20 +19,13 @@ export /**
  * @param {string} [props.title]
  * @param {string} props.shadow
  * @param {boolean} props.noPadding
- * @param {object} props.style 
+ * @param {object} props.style
  * @returns {div}
  * @category saltcorn-builder
  * @subcategory components
  * @namespace
  */
-const Card = ({
-  children,
-  isFormula,
-  title,
-  shadow,
-  noPadding,
-  style,
-}) => {
+const Card = ({ children, isFormula, title, shadow, noPadding, style }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -119,7 +112,7 @@ const CardSettings = () => {
         </tbody>
       </table>
       <div accordiontitle="Box" className="w-100">
-        <BoxModelEditor setProp={setProp} node={node} />
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
       </div>
     </Accordion>
   );
@@ -138,8 +131,8 @@ const fields = [
   { name: "style", default: {} },
 ];
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Card.craft = {
   props: {

package/src/components/elements/Columns.js

@@ -8,11 +8,13 @@ import React, { Fragment } from "react";
 import { Column } from "./Column";
 
 import { Element, useNode } from "@craftjs/core";
+import { Accordion, reactifyStyles } from "./utils";
+import { BoxModelEditor } from "./BoxModelEditor";
 
 export /**
- * 
- * @param {number} n 
- * @param {function} f 
+ *
+ * @param {number} n
+ * @param {function} f
  * @returns {object[]}
  */
 const ntimes = (n, f) => {
@@ -24,8 +26,8 @@ const ntimes = (n, f) => {
 };
 
 export /**
- * 
- * @param {number[]} xs 
+ *
+ * @param {number[]} xs
  * @returns {number}
  */
 const sum = (xs) => {
@@ -35,14 +37,14 @@ const sum = (xs) => {
 };
 
 /**
- * @param {number} ncols 
+ * @param {number} ncols
  * @returns {number}
  */
 const resetWidths = (ncols) => ntimes(ncols - 1, () => 12 / ncols);
 
 /**
- * @param {number[]} widths 
- * @param {number} colix 
+ * @param {number[]} widths
+ * @param {number} colix
  * @returns {number}
  */
 const getWidth = (widths, colix) =>
@@ -58,7 +60,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Columns = ({ widths, contents, ncols }) => {
+const Columns = ({ widths, contents, ncols, style }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -67,6 +69,7 @@ const Columns = ({ widths, contents, ncols }) => {
     <div
       className={`row ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
+      style={reactifyStyles(style || {})}
     >
       {ntimes(ncols, (ix) => (
         <div key={ix} className={`split-col col-sm-${getWidth(widths, ix)}`}>
@@ -86,19 +89,22 @@ export /**
  * @subcategory components
  */
 const ColumnsSettings = () => {
+  const node = useNode((node) => ({
+    widths: node.data.props.widths,
+    ncols: node.data.props.ncols,
+    breakpoints: node.data.props.breakpoints,
+    style: node.data.props.style,
+  }));
   const {
     actions: { setProp },
     widths,
     ncols,
     breakpoints,
-  } = useNode((node) => ({
-    widths: node.data.props.widths,
-    ncols: node.data.props.ncols,
-    breakpoints: node.data.props.breakpoints,
-  }));
+    style,
+  } = node;
   return (
-    <div>
-      <table>
+    <Accordion>
+      <table accordiontitle="Column properties">
         <tbody>
           <tr>
             <td colSpan="3">
@@ -171,18 +177,22 @@ const ColumnsSettings = () => {
           ))}
         </tbody>
       </table>
-    </div>
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
+      </div>
+    </Accordion>
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Columns.craft = {
   displayName: "Columns",
   defaultProps: {
     widths: [6],
     ncols: 2,
+    style: {},
     breakpoints: ["sm", "sm"],
   },
   related: {

package/src/components/elements/Image.js

@@ -8,8 +8,15 @@ import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
+import { BoxModelEditor } from "./BoxModelEditor";
 
-import { blockProps, BlockSetting, TextStyleSetting, OrFormula } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  reactifyStyles,
+  Accordion,
+  OrFormula,
+} from "./utils";
 
 export /**
  * @param {object} props
@@ -23,7 +30,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Image = ({ fileid, block, srctype, url, alt }) => {
+const Image = ({ fileid, block, srctype, url, alt, style }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -35,7 +42,10 @@ const Image = ({ fileid, block, srctype, url, alt }) => {
         "No images Available"
       ) : (
         <img
-          className={`w-100 image-widget ${selected ? "selected-node" : ""}`}
+          className={`${style && style.width ? "" : "w-100"} image-widget ${
+            selected ? "selected-node" : ""
+          }`}
+          style={reactifyStyles(style || {})}
           src={theurl}
           alt={alt}
         ></img>
@@ -59,6 +69,7 @@ const ImageSettings = () => {
     srctype: node.data.props.srctype,
     alt: node.data.props.alt,
     block: node.data.props.block,
+    style: node.data.props.style,
     isFormula: node.data.props.isFormula,
   }));
   const {
@@ -71,6 +82,7 @@ const ImageSettings = () => {
     block,
     isFormula,
     filepath,
+    style,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
@@ -113,141 +125,146 @@ const ImageSettings = () => {
     }
   };
   return (
-    <table>
-      <tbody>
-        <tr>
-          <td colSpan="2">
-            <i>
-              <small>Preview shown in canvas is indicative</small>
-            </i>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Source</label>
-          </td>
-          <td>
-            <select
-              value={srctype}
-              className="form-control"
-              onChange={setAProp("srctype")}
-            >
-              <option>File</option>
-              <option>URL</option>
-              <option>Upload</option>
-              {options.mode === "show" && <option>Field</option>}
-            </select>
-          </td>
-        </tr>
-        {srctype === "File" && (
+    <Accordion>
+      <table accordiontitle="Select image">
+        <tbody>
           <tr>
-            <td>
-              <label>File</label>
-            </td>
-            <td>
-              <select
-                value={fileid}
-                className="form-control"
-                onChange={setAProp("fileid")}
-              >
-                {options.images.map((f, ix) => (
-                  <option key={ix} value={f.id}>
-                    {f.filename}
-                  </option>
-                ))}
-                {(uploadedFiles || []).map((uf, ix) => (
-                  <option key={ix} value={uf.id}>
-                    {uf.filename}
-                  </option>
-                ))}
-              </select>
-            </td>
-          </tr>
-        )}
-        {srctype === "URL" && (
-          <tr>
-            <td>
-              <label>URL</label>
-            </td>
-            <td>
-              <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
-                <input
-                  type="text"
-                  className="form-control"
-                  value={url}
-                  onChange={setAProp("url")}
-                />
-              </OrFormula>
-            </td>
-          </tr>
-        )}
-        {srctype === "Upload" && (
-          <tr>
-            <td>
-              <label>File</label>
-            </td>
-            <td>
-              <input
-                type="file"
-                className="form-control"
-                value={filepath}
-                onChange={handleUpload}
-              />
+            <td colSpan="2">
+              <i>
+                <small>Preview shown in canvas is indicative</small>
+              </i>
             </td>
           </tr>
-        )}
-        {srctype === "Field" && (
           <tr>
             <td>
-              <label>Field</label>
+              <label>Source</label>
             </td>
             <td>
               <select
-                value={field}
+                value={srctype}
                 className="form-control"
-                onChange={setAProp("field")}
+                onChange={setAProp("srctype")}
               >
-                {options.fields
-                  .filter(
-                    (f) =>
-                      (f.type && f.type.name === "String") ||
-                      f.reftable_name === "_sc_files"
-                  )
-                  .map((f, ix) => (
-                    <option key={ix} value={f.name}>
-                      {f.label}
-                    </option>
-                  ))}
+                <option>File</option>
+                <option>URL</option>
+                <option>Upload</option>
+                {options.mode === "show" && <option>Field</option>}
               </select>
             </td>
           </tr>
-        )}
-        {srctype !== "Upload" && (
-          <tr>
-            <td>
-              <label>Alt text</label>
-            </td>
-            <td>
-              <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
+          {srctype === "File" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <select
+                  value={fileid}
+                  className="form-control"
+                  onChange={setAProp("fileid")}
+                >
+                  {options.images.map((f, ix) => (
+                    <option key={ix} value={f.id}>
+                      {f.filename}
+                    </option>
+                  ))}
+                  {(uploadedFiles || []).map((uf, ix) => (
+                    <option key={ix} value={uf.id}>
+                      {uf.filename}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {srctype === "URL" && (
+            <tr>
+              <td>
+                <label>URL</label>
+              </td>
+              <td>
+                <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={url}
+                    onChange={setAProp("url")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype === "Upload" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
                 <input
-                  type="text"
+                  type="file"
                   className="form-control"
-                  value={alt}
-                  onChange={setAProp("alt")}
+                  value={filepath}
+                  onChange={handleUpload}
                 />
-              </OrFormula>
-            </td>
-          </tr>
-        )}
-        {srctype !== "Upload" && (
-          <tr>
-            <td colSpan="2">
-              <BlockSetting block={block} setProp={setProp} />
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
+              </td>
+            </tr>
+          )}
+          {srctype === "Field" && (
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control"
+                  onChange={setAProp("field")}
+                >
+                  {options.fields
+                    .filter(
+                      (f) =>
+                        (f.type && f.type.name === "String") ||
+                        f.reftable_name === "_sc_files"
+                    )
+                    .map((f, ix) => (
+                      <option key={ix} value={f.name}>
+                        {f.label}
+                      </option>
+                    ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Alt text</label>
+              </td>
+              <td>
+                <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={alt}
+                    onChange={setAProp("alt")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td colSpan="2">
+                <BlockSetting block={block} setProp={setProp} />
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
+      </div>
+    </Accordion>
   );
 };
 
@@ -261,6 +278,7 @@ Image.craft = {
     block: false,
     isFormula: {},
     srctype: "File",
+    style: {},
   },
   related: {
     settings: ImageSettings,
@@ -272,6 +290,7 @@ Image.craft = {
       { name: "fileid", default: 0 },
       "field",
       "block",
+      { name: "style", default: {} },
     ],
   },
 };

package/src/components/elements/JoinField.js

@@ -11,6 +11,7 @@ import {
   blockProps,
   BlockSetting,
   TextStyleRow,
+  ConfigForm,
   fetchFieldPreview,
 } from "./utils";
 import previewCtx from "../preview_context";
@@ -76,6 +77,7 @@ const JoinFieldSettings = () => {
     name,
     block,
     textStyle,
+    configuration,
     fieldview,
     node_id,
   } = useNode((node) => ({
@@ -83,17 +85,22 @@ const JoinFieldSettings = () => {
     block: node.data.props.block,
     textStyle: node.data.props.textStyle,
     fieldview: node.data.props.fieldview,
+    configuration: node.data.props.configuration,
+
     node_id: node.id,
   }));
   const options = useContext(optionsCtx);
   const { setPreviews } = useContext(previewCtx);
 
   const fvs = options.field_view_options[name];
+  const getCfgFields = (fv) =>
+    ((options.fieldViewConfigForms || {})[name] || {})[fv];
+  const cfgFields = getCfgFields(fieldview);
   const refetchPreview = fetchFieldPreview({
     options,
     name,
     fieldview,
-    configuration: {},
+    configuration,
     setPreviews,
     node_id,
   });
@@ -167,6 +174,14 @@ const JoinFieldSettings = () => {
           <TextStyleRow textStyle={textStyle} setProp={setProp} />
         </tbody>
       </table>
+      {cfgFields ? (
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration || {}}
+          setProp={setProp}
+          onChange={(k, v) => refetchPreview({ configuration: { [k]: v } })}
+        />
+      ) : null}
     </Fragment>
   );
 };
@@ -185,6 +200,7 @@ JoinField.craft = {
       "fieldview",
       "textStyle",
       "block",
+      { name: "configuration", default: {} },
     ],
   },
 };

package/src/components/storage.js

@@ -236,6 +236,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           breakpoints={segment.breakpoints || default_breakpoints(segment)}
           ncols={segment.besides.length}
           widths={getColWidths(segment)}
+          style={segment.style || {}}
           contents={segment.besides.map(toTag)}
         />
       );
@@ -262,6 +263,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
             widths={getColWidths(segment)}
             breakpoints={segment.breakpoints || default_breakpoints(segment)}
             ncols={segment.besides.length}
+            style={segment.style || {}}
             contents={segment.besides.map(toTag)}
           />
         )
@@ -402,6 +404,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       return {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
+        style: node.props.style,
         widths,
       };
     }