@saltcorn/builder 1.0.0-rc.9 → 1.1.0-beta.0

package/package.json

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

@@ -411,7 +411,6 @@ const Builder = ({ options, layout, mode }) => {
 
   const canvasHeight =
     Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
-
   return (
     <ErrorBoundary>
       <Editor onRender={RenderNode}>
@@ -558,6 +557,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";
@@ -272,7 +271,7 @@ const Library = ({ expanded }) => {
           <FontIconPicker
             className="w-100"
             value={icon}
-            icons={faIcons}
+            icons={options.icons}
             onChange={setIcon}
             isMulti={false}
           />

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/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

@@ -253,6 +253,7 @@ const ContainerSettings = () => {
     htmlElement,
     imgResponsiveWidths,
     click_action,
+    style,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -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">

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) => (

package/src/components/elements/Text.js

@@ -23,7 +23,6 @@ import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
 import CKEditor from "ckeditor4-react";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./faicons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import fas from "@fortawesome/free-solid-svg-icons";
 import far from "@fortawesome/free-regular-svg-icons";
@@ -104,9 +103,9 @@ const Text = ({
     <div
       className={`${
         isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
-      } ${textStyle} is-text ${isFormula.text ? "font-monospace" : ""} ${
-        selected ? "selected-node" : ""
-      }`}
+      } ${Array.isArray(textStyle) ? textStyle.join(" ") : textStyle} is-text ${
+        isFormula.text ? "font-monospace" : ""
+      } ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
       style={{
@@ -177,7 +176,7 @@ const TextSettings = () => {
     font,
     style,
   } = node;
-  const { mode, fields } = useContext(optionsCtx);
+  const { mode, fields, icons } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
   const allowFormula = mode === "show" || mode === "list";
 
@@ -251,7 +250,7 @@ const TextSettings = () => {
               <FontIconPicker
                 className="w-100"
                 value={icon}
-                icons={faIcons}
+                icons={icons}
                 onChange={(value) => setProp((prop) => (prop.icon = value))}
                 isMulti={false}
               />

package/src/components/elements/ToggleFilter.js

@@ -90,7 +90,7 @@ const ToggleFilterSettings = () => {
           <td>
             <select
               value={name}
-              className="form-control form-select"
+              className="field form-control form-select"
               onChange={(e) => {
                 if (e?.target) {
                   if (!e.target) return;

package/src/components/elements/ViewLink.js

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