@saltcorn/builder 0.6.3-beta.3 → 0.6.4-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.6.3-beta.3",
+  "version": "0.6.4-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -15,32 +15,33 @@
   "author": "Tom Nielsen",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/core": "7.9.6",
+    "@babel/preset-env": "7.9.6",
+    "@babel/preset-react": "7.9.4",
     "@craftjs/core": "0.1.0-beta.20",
+    "@craftjs/utils": "0.1.0-beta.20",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
-    "@fonticonpicker/react-fonticonpicker": "^1.2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.34",
-    "@fortawesome/free-regular-svg-icons": "^5.15.2",
-    "@fortawesome/free-solid-svg-icons": "^5.15.2",
-    "@fortawesome/react-fontawesome": "^0.1.14",
-    "babel-loader": "^8.1.0",
-    "ckeditor4-react": "^1.4.0",
-    "classnames": "^2.2.6",
-    "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-bootstrap-icons": "^1.5.0",
-    "react-contenteditable": "^3.3.5",
-    "react-dom": "^16.13.1",
-    "react-transition-group": "^4.4.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "@fonticonpicker/react-fonticonpicker": "1.2.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.34",
+    "@fortawesome/free-regular-svg-icons": "5.15.2",
+    "@fortawesome/free-solid-svg-icons": "5.15.2",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "babel-loader": "8.1.0",
+    "ckeditor4-react": "1.4.2",
+    "classnames": "2.2.6",
+    "prop-types": "15.7.2",
+    "react": "16.13.1",
+    "react-bootstrap-icons": "1.5.0",
+    "react-contenteditable": "3.3.5",
+    "react-dom": "16.13.1",
+    "react-transition-group": "4.4.1",
+    "webpack": "4.43.0",
+    "webpack-cli": "3.3.11"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "styled-components": "^4.4.1"
+    "styled-components": "4.4.1"
   }
 }

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/Field.js

@@ -10,10 +10,11 @@ import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 import {
   blockProps,
-  BlockSetting,
+  BlockOrInlineSetting,
   TextStyleRow,
   ConfigForm,
   setInitialConfig,
+  isBlock,
   fetchFieldPreview,
 } from "./utils";
 
@@ -27,9 +28,16 @@ export /**
  * @returns {div}
  * @category saltcorn-builder
  * @subcategory components
- * @namespace 
+ * @namespace
  */
-const Field = ({ name, fieldview, block, textStyle, configuration }) => {
+const Field = ({
+  name,
+  fieldview,
+  block,
+  inline,
+  textStyle,
+  configuration,
+}) => {
   const {
     selected,
     node_id,
@@ -52,7 +60,7 @@ const Field = ({ name, fieldview, block, textStyle, configuration }) => {
   return (
     <div
       className={`${textStyle} ${selected ? "selected-node" : ""} ${
-        block ? "" : "d-inline-block"
+        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
       }`}
       ref={(dom) => connect(drag(dom))}
     >
@@ -80,6 +88,7 @@ const FieldSettings = () => {
     name,
     fieldview,
     block,
+    inline,
     configuration,
     node_id,
     textStyle,
@@ -87,6 +96,7 @@ const FieldSettings = () => {
     name: node.data.props.name,
     fieldview: node.data.props.fieldview,
     block: node.data.props.block,
+    inline: node.data.props.inline,
     textStyle: node.data.props.textStyle,
     configuration: node.data.props.configuration,
     node_id: node.id,
@@ -177,7 +187,12 @@ const FieldSettings = () => {
           <tr>
             <td></td>
             <td>
-              <BlockSetting block={block} setProp={setProp} />
+              <BlockOrInlineSetting
+                block={block}
+                inline={inline}
+                textStyle={textStyle}
+                setProp={setProp}
+              />
             </td>
           </tr>
           {!(handlesTextStyle && handlesTextStyle.includes(fieldview)) && (
@@ -197,8 +212,8 @@ const FieldSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Field.craft = {
   displayName: "Field",
@@ -211,6 +226,7 @@ Field.craft = {
       "fieldview",
       "textStyle",
       "block",
+      "inline",
       { name: "configuration", default: {} },
     ],
   },