@saltcorn/builder 1.0.0 → 1.1.0-beta.1

package/dist/builder_bundle.js.LICENSE.txt

@@ -0,0 +1,96 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/*!*
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.1",
   "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.0.0",
+    "@saltcorn/common-code": "1.1.0-beta.1",
     "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/Builder.js

@@ -60,15 +60,13 @@ import {
   faCaretSquareLeft,
   faCaretSquareRight,
 } from "@fortawesome/free-regular-svg-icons";
-import {
-  Accordion,
-  ErrorBoundary,
-  recursivelyCloneToElems,
-} from "./elements/utils";
+import { Accordion, ErrorBoundary } from "./elements/utils";
 import { InitNewElement, Library } from "./Library";
 import { RenderNode } from "./RenderNode";
 import { ListColumn } from "./elements/ListColumn";
 import { ListColumns } from "./elements/ListColumns";
+import { recursivelyCloneToElems } from "./elements/Clone";
+
 const { Provider } = optionsCtx;
 
 /**
@@ -208,6 +206,7 @@ const SettingsPanel = () => {
       sibIx + 1
     );
   };
+  
   return (
     <div className="settings-panel card mt-1">
       <div className="card-header px-2 py-1">
@@ -411,7 +410,6 @@ const Builder = ({ options, layout, mode }) => {
 
   const canvasHeight =
     Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
-
   return (
     <ErrorBoundary>
       <Editor onRender={RenderNode}>
@@ -558,6 +556,17 @@ const Builder = ({ options, layout, mode }) => {
         </Provider>
         <div className="d-none preview-scratchpad"></div>
       </Editor>
+      <style>
+        {options.icons
+          .filter((icon) => icon.startsWith("unicode-"))
+          .map(
+            (icon) =>
+              `i.${icon}:after {content: '${String.fromCharCode(
+                parseInt(icon.substring(8, 12), 16)
+              )}'}`
+          )
+          .join("\n")}
+      </style>
     </ErrorBoundary>
   );
 };

package/src/components/Library.js

@@ -16,7 +16,6 @@ import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./elements/faicons";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
@@ -143,6 +142,11 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
         }
       });
   };
+  useEffect(() => {
+    window.addEventListener("beforeunload", () => doSave(query));
+    window.addEventListener("blur", () => doSave(query));
+    window.addEventListener("pagehide", () => doSave(query));
+  }, []);
   const throttledSave = useThrottle(() => {
     doSave(query);
   });
@@ -272,7 +276,7 @@ const Library = ({ expanded }) => {
           <FontIconPicker
             className="w-100"
             value={icon}
-            icons={faIcons}
+            icons={options.icons}
             onChange={setIcon}
             isMulti={false}
           />

package/src/components/RenderNode.js

@@ -17,7 +17,7 @@ import {
   faArrowUp,
   faArrowsAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import { recursivelyCloneToElems } from "./elements/utils";
+import { recursivelyCloneToElems } from "./elements/Clone";
 /* 
 Contains code copied from craft.js landing page example
 Copyright (c) 2020 Previnash Wong Sze Chuan

package/src/components/elements/Action.js

@@ -284,6 +284,7 @@ const ActionSettings = () => {
             keyPrefix="action_"
             values={node}
             allowRunOnLoad={true}
+            faIcons={options.icons}
           />
           <MinRoleSettingRow minRole={minRole} setProp={setProp} />
         </tbody>

package/src/components/elements/Aggregation.js

@@ -127,7 +127,7 @@ const AggregationSettings = () => {
               </td>
               <td>
                 <select
-                  className="form-control form-select"
+                  className="relation form-control form-select"
                   value={agg_relation}
                   onChange={(e) => {
                     if (!e.target) return;
@@ -156,7 +156,7 @@ const AggregationSettings = () => {
             </td>
             <td>
               <select
-                className="form-control form-select"
+                className="agg_field form-control form-select"
                 value={agg_field}
                 onChange={setAProp("agg_field")}
               >
@@ -175,7 +175,7 @@ const AggregationSettings = () => {
             <td>
               <select
                 value={stat}
-                className="form-control form-select"
+                className="stat form-control form-select"
                 onChange={setAProp("stat")}
                 onBlur={setAProp("stat")}
               >
@@ -245,7 +245,7 @@ const AggregationSettings = () => {
               <td>
                 <select
                   value={agg_fieldview}
-                  className="form-control form-select"
+                  className="agg_fieldview form-control form-select"
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;

package/src/components/elements/Clone.js

@@ -0,0 +1,57 @@
+import React, { Fragment, useState, useEffect } from "react";
+import { ListColumn } from "./ListColumn";
+import { Columns, ntimes } from "./Columns";
+import { rand_ident } from "./utils";
+import { Element } from "@craftjs/core";
+
+export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
+  const { data } = query.node(nodeId).get();
+  const { type, props, nodes } = data;
+  const newProps = { ...props };
+  if (newProps.rndid) {
+    newProps.rndid = rand_ident();
+  }
+
+  // console.log("cloning", data.displayName, data.linkedNodes["listcol"]);
+
+  const children = (nodes || []).map(recursivelyCloneToElems(query));
+  if (data.displayName === "Columns") {
+    const cols = ntimes(data.props.ncols, (ix) =>
+      recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
+    );
+    return React.createElement(Columns, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: cols,
+    });
+  }
+
+  if (data.displayName === "ListColumn") {
+    const col = recursivelyCloneToElems(query)(data.linkedNodes["listcol"]);
+
+    return React.createElement(ListColumn, {
+      ...newProps,
+      contents: col,
+    });
+  }
+
+  if (data.isCanvas)
+    return React.createElement(
+      Element,
+      {
+        ...newProps,
+        canvas: true,
+        is: type,
+        ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      },
+      children
+    );
+  return React.createElement(
+    type,
+    {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+    },
+    children
+  );
+};

package/src/components/elements/Columns.js

@@ -93,7 +93,7 @@ const Columns = ({
   } = useNode((node) => ({ selected: node.events.selected }));
   return (
     <div
-      className={`row ${selected ? "selected-node" : ""} ${
+      className={`row builder-columns ${selected ? "selected-node" : ""} ${
         typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
       } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}

package/src/components/elements/Container.js

@@ -108,6 +108,7 @@ const Container = ({
   rotate,
   style,
   htmlElement,
+  transform,
 }) => {
   const {
     selected,
@@ -125,7 +126,7 @@ const Container = ({
       } ${selected ? "selected-node" : ""}`,
       style: {
         ...parseStyles(customCSS || ""),
-        ...reactifyStyles(style),
+        ...reactifyStyles(style, transform, rotate),
         display,
         //padding: padding.map((p) => p + "px").join(" "),
         //margin: margin.map((p) => p + "px").join(" "),
@@ -166,11 +167,6 @@ const Container = ({
               width: `${width}${widthUnit || "px"}`,
             }
           : {}),
-        ...(rotate
-          ? {
-              transform: `rotate(${rotate}deg)`,
-            }
-          : {}),
       },
     },
     children
@@ -221,6 +217,7 @@ const ContainerSettings = () => {
     rotate: node.data.props.rotate,
     display: node.data.props.display,
     style: node.data.props.style,
+    transform: node.data.props.transform,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
     click_action: node.data.props.click_action,
   }));
@@ -253,6 +250,8 @@ const ContainerSettings = () => {
     htmlElement,
     imgResponsiveWidths,
     click_action,
+    style,
+    transform,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -264,6 +263,8 @@ const ContainerSettings = () => {
    * @returns {function}
    */
   const setAProp = setAPropGen(setProp);
+  //console.log("transform", transform);
+
   return (
     <Accordion>
       <div accordiontitle="Box" className="w-100">
@@ -331,6 +332,61 @@ const ContainerSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              name: "position",
+              label: "Position",
+              type: "select",
+              options: ["static", "relative", "fixed", "absolute", "sticky"],
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          {style?.position && style?.position !== "static" ? (
+            <Fragment>
+              <SettingsRow
+                field={{
+                  name: "top",
+                  label: "Top",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "right",
+                  label: "Right",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "bottom",
+                  label: "Bottom",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "left",
+                  label: "Left",
+                  type: "DimUnits",
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+            </Fragment>
+          ) : null}
           <tr>
             <td colSpan="2">
               <div className="form-check">
@@ -620,6 +676,65 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
+      <table className="w-100" accordiontitle="Transform">
+        <tbody>
+          <SettingsRow
+            field={{
+              name: "rotate",
+              label: "Rotate°",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ name: "skewX", label: "SkewX°", type: "Integer" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+            valuePostfix="deg"
+          />
+          <SettingsRow
+            field={{ name: "skewY", label: "SkewY°", type: "Integer" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+            valuePostfix="deg"
+          />
+          <SettingsRow
+            field={{ name: "scaleX", label: "ScaleX", type: "Float" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{ name: "scaleY", label: "ScaleY", type: "Float" }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{
+              name: "translateX",
+              label: "TranslateX",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+          <SettingsRow
+            field={{
+              name: "translateY",
+              label: "TranslateY",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            subProp="transform"
+          />
+        </tbody>
+      </table>
       <table className="w-100" accordiontitle="Flex properties">
         <tbody>
           <SettingsSectionHeaderRow title="Flex item" />

package/src/components/elements/DropDownFilter.js

@@ -82,7 +82,7 @@ const DropDownFilterSettings = () => {
           <td>
             <select
               value={name}
-              className="form-control form-select"
+              className="field form-control form-select"
               onChange={setAProp("name")}
             >
               {options.fields.map((f, ix) => (

package/src/components/elements/DropMenu.js

@@ -4,7 +4,8 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useState } from "react";
+import React, { Fragment, useState, useContext } from "react";
+import optionsCtx from "../context";
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -109,6 +110,7 @@ const DropMenuSettings = () => {
     label,
     block,
   } = node;
+  const options = useContext(optionsCtx);
   return (
     <table className="w-100">
       <tbody>
@@ -126,6 +128,7 @@ const DropMenuSettings = () => {
           keyPrefix="action_"
           values={node}
           allowRunOnLoad={false}
+          faIcons={options.icons}
         />
         <tr>
           <td colSpan="2">

package/src/components/elements/Field.js

@@ -160,7 +160,7 @@ const FieldSettings = () => {
             <td>
               <select
                 value={name}
-                className="form-control form-select"
+                className="field form-control form-select"
                 onChange={(e) => {
                   if (!e.target) return;
                   const value = e.target.value;
@@ -200,7 +200,7 @@ const FieldSettings = () => {
               <td>
                 <select
                   value={fieldview}
-                  className="form-control form-select"
+                  className="fieldview form-control form-select"
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;
@@ -225,7 +225,7 @@ const FieldSettings = () => {
               <td>
                 <div className="form-check">
                   <input
-                    className="form-check-input"
+                    className="click-to-edit form-check-input"
                     name="inline"
                     type="checkbox"
                     checked={click_to_edit}
@@ -275,7 +275,7 @@ const FieldSettings = () => {
           <label>On change action</label>
           <select
             value={onchange_action}
-            className="form-control form-select"
+            className="on-change-action form-control form-select"
             onChange={(e) => {
               if (!e.target) return;
               const value = e.target.value;

package/src/components/elements/Image.js

@@ -216,7 +216,7 @@ const ImageSettings = () => {
               <td>
                 <select
                   value={field}
-                  className="form-control form-select"
+                  className="field form-control form-select"
                   onChange={setAProp("field")}
                 >
                   <option value=""></option>

package/src/components/elements/JoinField.js

@@ -477,7 +477,7 @@ const JoinFieldSettings = () => {
               <td>
                 <select
                   value={fieldview}
-                  className="form-control form-select"
+                  className="fieldview form-control form-select"
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;
@@ -500,7 +500,7 @@ const JoinFieldSettings = () => {
               <td>
                 <div className="form-check">
                   <input
-                    className="form-check-input"
+                    className="click-to-edit form-check-input"
                     name="inline"
                     type="checkbox"
                     checked={click_to_edit}

package/src/components/elements/LineBreak.js

@@ -15,12 +15,14 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const LineBreak = () => {
+const LineBreak = ({ hr, page_break_after }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
-  return (
+  return hr || page_break_after ? (
+    <hr></hr>
+  ) : (
     <Fragment>
       <span
         className={selected ? "selected-node" : ""}
@@ -33,14 +35,19 @@ const LineBreak = () => {
   );
 };
 
+const fields = [
+  { label: "Page break", name: "page_break_after", type: "Bool" },
+  { label: "Horizontal rule", name: "hr", type: "Bool" },
+];
+
 /**
  * @type {object}
  */
 LineBreak.craft = {
   displayName: "LineBreak",
   related: {
-    settings: SettingsFromFields([]),
+    settings: SettingsFromFields(fields),
     segment_type: "line_break",
-    fields: [],
+    fields,
   },
 };

package/src/components/elements/Link.js

@@ -283,6 +283,7 @@ const LinkSettings = () => {
             linkFirst={true}
             linkIsBlank={true}
             allowRunOnLoad={false}
+            faIcons={options.icons}
           />
         </tbody>
       </table>

package/src/components/elements/ListColumn.js

@@ -150,7 +150,7 @@ const fields = [
     required: true,
     attributes: {
       inline: true,
-      options: ["px", "%", "vw", "em", "rem"],
+      options: ["px", "%", "vw", "em", "rem", "cm"],
     },
   },
   {

package/src/components/elements/Tabs.js

@@ -258,7 +258,7 @@ const TabsSettings = () => {
               <td>
                 <select
                   value={field}
-                  className="form-control form-select"
+                  className="field form-control form-select"
                   onChange={setAProp("field")}
                 >
                   {options.fields.map((f, ix) => (