@saltcorn/builder 0.6.4 → 0.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.6.4",
+  "version": "0.7.0-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/Builder.js

@@ -26,6 +26,7 @@ import { Image } from "./elements/Image";
 import { Tabs } from "./elements/Tabs";
 import { Empty } from "./elements/Empty";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import optionsCtx from "./context";
 import PreviewCtx from "./preview_context";
@@ -211,7 +212,7 @@ const SettingsPanel = () => {
           <Fragment>
             {selected.isDeletable && (
               <button className="btn btn-sm btn-danger" onClick={deleteThis}>
-                <FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
+                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                 Delete
               </button>
             )}
@@ -220,16 +221,16 @@ const SettingsPanel = () => {
                 className="btn btn-sm btn-danger"
                 onClick={deleteChildren}
               >
-                <FontAwesomeIcon icon={faTrashAlt} className="mr-1" />
+                <FontAwesomeIcon icon={faTrashAlt} className="me-1" />
                 Delete contents
               </button>
             ) : (
               <button
                 title="Duplicate element with its children"
-                className="btn btn-sm btn-secondary ml-2"
+                className="btn btn-sm btn-secondary ms-2"
                 onClick={duplicate}
               >
-                <FontAwesomeIcon icon={faCopy} className="mr-1" />
+                <FontAwesomeIcon icon={faCopy} className="me-1" />
                 Clone
               </button>
             )}
@@ -271,7 +272,7 @@ const SaveButton = () => {
   };
   return options.page_id || options.view_id ? (
     <button
-      className="btn btn-sm btn-outline-secondary mr-2 builder-save-ajax"
+      className="btn btn-sm btn-outline-secondary me-2 builder-save-ajax"
       onClick={onClick}
     >
       Save
@@ -315,7 +316,7 @@ const HistoryPanel = () => {
     <Fragment>
       {canUndo && (
         <button
-          className="btn btn-sm btn-secondary ml-2 mr-2"
+          className="btn btn-sm btn-secondary ms-2 me-2"
           title="Undo"
           onClick={() => actions.history.undo()}
         >
@@ -412,7 +413,7 @@ const Builder = ({ options, layout, mode }) => {
                     </div>
                   </Accordion>
                 </div>
-                <div className="card toolbox-card pr-0">
+                <div className="card toolbox-card pe-0">
                   <div className="card-header">Layers</div>
                   {showLayers && (
                     <div className="card-body p-0 builder-layers">
@@ -446,6 +447,7 @@ const Builder = ({ options, layout, mode }) => {
                       Container,
                       Column,
                       DropDownFilter,
+                      DropMenu,
                       Tabs,
                       ToggleFilter,
                     }}

package/src/components/Library.js

@@ -168,7 +168,7 @@ const Library = () => {
           disabled={!selected}
           onClick={() => setAdding(!adding)}
         >
-          <FontAwesomeIcon icon={faPlus} className="mr-1" />
+          <FontAwesomeIcon icon={faPlus} className="me-1" />
           Add
         </button>
         <div
@@ -192,11 +192,11 @@ const Library = () => {
             isMulti={false}
           />
           <button className={`btn btn-primary mt-3`} onClick={addSelected}>
-            <FontAwesomeIcon icon={faPlus} className="mr-1" />
+            <FontAwesomeIcon icon={faPlus} className="me-1" />
             Add
           </button>
           <button
-            className={`btn btn-outline-secondary ml-2 mt-3`}
+            className={`btn btn-outline-secondary ms-2 mt-3`}
             onClick={() => setAdding(false)}
           >
             <FontAwesomeIcon icon={faTimes} />

package/src/components/RenderNode.js

@@ -127,19 +127,19 @@ const RenderNode = ({ render }) => {
                 zIndex: 9999,
               }}
             >
-              <div className="dispname mr-3">{name}</div>{" "}
+              <div className="dispname me-3">{name}</div>{" "}
               {moveable && isActive && (
                 <button
                   className="btn btn-link btn-builder-move p-0"
                   ref={drag}
                 >
-                  <FontAwesomeIcon icon={faArrowsAlt} className="mr-2" />
+                  <FontAwesomeIcon icon={faArrowsAlt} className="me-2" />
                 </button>
               )}
               {isActive && parent && parent !== "ROOT" ? (
                 <FontAwesomeIcon
                   icon={faArrowUp}
-                  className="mr-2"
+                  className="me-2"
                   onClick={() => {
                     actions.selectNode(parent);
                   }}
@@ -151,12 +151,12 @@ const RenderNode = ({ render }) => {
                       key={1}
                       icon={faCopy}
                       onClick={duplicate}
-                      className="mr-2"
+                      className="me-2"
                     />,
                     <FontAwesomeIcon
                       key={2}
                       icon={faTrashAlt}
-                      className="mr-2"
+                      className="me-2"
                       onMouseDown={(e) => {
                         e.stopPropagation();
                         actions.delete(id);
@@ -175,13 +175,13 @@ const RenderNode = ({ render }) => {
 };
 /*
    {moveable ? (
-                <Btn className="mr-2 cursor-move" ref={drag}>
+                <Btn className="me-2 cursor-move" ref={drag}>
                   <Move />
                 </Btn>
               ) : null}
               {id !== ROOT_NODE && (
                 <Btn
-                  className="mr-2 cursor-pointer"
+                  className="me-2 cursor-pointer"
                   onClick={() => {
                     actions.selectNode(parent);
                   }}

package/src/components/Toolbox.js

@@ -16,6 +16,7 @@ import { ViewLink } from "./elements/ViewLink";
 import { Columns } from "./elements/Columns";
 import { Action } from "./elements/Action";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { Empty } from "./elements/Empty";
 import { Card } from "./elements/Card";
@@ -336,7 +337,7 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     connectors={connectors}
     icon="far fa-caret-square-down"
     title="Dropdown filter"
-    label="Dropdown"
+    label="Select"
   >
     <DropDownFilter
       name={fields[0].name}
@@ -346,6 +347,18 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     />
   </WrapElem>
 );
+
+const DropMenuElem = ({ connectors }) => (
+  <WrapElem
+    connectors={connectors}
+    icon="far fa-caret-square-down"
+    title="Dropdown menu"
+    label="DropMenu"
+  >
+    <DropMenu />
+  </WrapElem>
+);
+
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -456,7 +469,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
     connectors={connectors}
     text="∑"
     title="Aggregation"
-    label="Calc"
+    label="Aggreg8"
     bold
     fontSize="16px"
     disable={child_field_list.length === 0}
@@ -529,6 +542,7 @@ const ToolboxShow = () => {
       </div>
       <div className="toolbar-row">
         <HTMLElem connectors={connectors} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );

package/src/components/elements/Action.js

@@ -19,8 +19,8 @@ import {
 } from "./utils";
 
 export /**
- * 
- * @param {object} props 
+ *
+ * @param {object} props
  * @param {string} props.name
  * @param {string} props.block
  * @param {string} props.action_label
@@ -35,8 +35,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Action = 
-({
+const Action = ({
   name,
   block,
   action_label,
@@ -51,14 +50,14 @@ const Action =
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
-
   /**
    * @type {object}
    */
-  const btn = (
+  return (
     <button
-      className={`btn ${action_style || "btn-primary"} ${action_size || ""}`}
-      {...blockProps(block)}
+      className={`btn ${action_style || "btn-primary"} ${action_size || ""} ${
+        selected ? "selected-node" : ""
+      } ${block ? "d-block" : ""}`}
       ref={(dom) => connect(drag(dom))}
       style={
         action_style === "btn-custom-color"
@@ -70,20 +69,19 @@ const Action =
           : {}
       }
     >
-      <DynamicFontAwesomeIcon icon={action_icon} className="mr-1" />
+      <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
       {action_label || name}
     </button>
   );
-  return selected ? <span className={"selected-node"}>{btn}</span> : btn;
 };
 
-export /** 
+export /**
  * @category saltcorn-builder
  * @subcategory components
  * @namespace
  * @returns {div}
  */
- const ActionSettings = () => {
+const ActionSettings = () => {
   const node = useNode((node) => ({
     name: node.data.props.name,
     block: node.data.props.block,
@@ -123,7 +121,7 @@ export /**
             <td>
               <select
                 value={name}
-                className="form-control"
+                className="form-control form-select"
                 onChange={(e) => {
                   setProp((prop) => (prop.name = e.target.value));
                   setInitialConfig(
@@ -195,8 +193,8 @@ export /**
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Action.craft = {
   displayName: "Action",

package/src/components/elements/Aggregation.js

@@ -10,7 +10,7 @@ import optionsCtx from "../context";
 import { blockProps, BlockSetting, TextStyleRow } from "./utils";
 
 export /**
- * @param {object} props 
+ * @param {object} props
  * @param {string} props.agg_relation
  * @param {string} props.agg_field
  * @param {string} props.stat
@@ -21,13 +21,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Aggregation = ({
-  agg_relation,
-  agg_field,
-  stat,
-  block,
-  textStyle,
-}) => {
+const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -76,7 +70,7 @@ const AggregationSettings = () => {
           </td>
           <td>
             <select
-              className="form-control"
+              className="form-control form-select"
               value={agg_relation}
               onChange={(e) =>
                 setProp((prop) => {
@@ -100,7 +94,7 @@ const AggregationSettings = () => {
           </td>
           <td>
             <select
-              className="form-control"
+              className="form-control form-select"
               value={agg_field}
               onChange={(e) =>
                 setProp((prop) => (prop.agg_field = e.target.value))
@@ -121,7 +115,7 @@ const AggregationSettings = () => {
           <td>
             <select
               value={stat}
-              className="form-control"
+              className="form-control form-select"
               onChange={(e) => setProp((prop) => (prop.stat = e.target.value))}
             >
               <option value={"Count"}>Count</option>
@@ -129,6 +123,7 @@ const AggregationSettings = () => {
               <option value={"Sum"}>Sum</option>
               <option value={"Max"}>Max</option>
               <option value={"Min"}>Min</option>
+              <option value={"Array_Agg"}>Array_Agg</option>
               {options.fields
                 .filter((f) => f.type.name === "Date")
                 .map((f) => (
@@ -163,8 +158,8 @@ const AggregationSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Aggregation.craft = {
   displayName: "Aggregation",

package/src/components/elements/Card.js

@@ -42,7 +42,7 @@ const Card = ({ children, isFormula, title, shadow, noPadding, style }) => {
       {title && title.length > 0 && (
         <div className="card-header">
           {isFormula.title ? (
-            <span className="text-monospace">={title}</span>
+            <span className="font-monospace">={title}</span>
           ) : (
             title
           )}

package/src/components/elements/Columns.js

@@ -159,7 +159,7 @@ const ColumnsSettings = () => {
                 <td>/12</td>
                 <td>
                   <select
-                    className="form-control"
+                    className="form-control form-select"
                     value={breakpoints[ix]}
                     onChange={(e) =>
                       setProp((prop) => (prop.breakpoints[ix] = e.target.value))

package/src/components/elements/Container.js

@@ -395,7 +395,6 @@ const ContainerSettings = () => {
                 { value: "left", title: "Left", label: <AlignStart /> },
                 { value: "center", title: "Center", label: <AlignCenter /> },
                 { value: "right", title: "Right", label: <AlignEnd /> },
-                { value: "justify", title: "Justify", label: <Justify /> },
               ],
             }}
             node={node}
@@ -488,7 +487,7 @@ const ContainerSettings = () => {
                 <td>
                   <select
                     value={bgFileId}
-                    className="form-control-sm w-100"
+                    className="form-control-sm w-100 form-select"
                     onChange={setAProp("bgFileId")}
                   >
                     {options.images.map((f, ix) => (
@@ -512,7 +511,7 @@ const ContainerSettings = () => {
                 <td>
                   <select
                     value={imageSize}
-                    className="form-control-sm"
+                    className="form-control-sm  form-select"
                     onChange={setAProp("imageSize")}
                   >
                     <option>contain</option>
@@ -543,7 +542,7 @@ const ContainerSettings = () => {
             field={{
               name: "font-family",
               label: "Font family",
-              type: "String",
+              type: "Font",
             }}
             node={node}
             setProp={setProp}
@@ -742,7 +741,7 @@ const ContainerSettings = () => {
                   onChange={setAProp("showIfFormula")}
                 />
                 <div style={{ marginTop: "-5px" }}>
-                  <small className="text-muted text-monospace">FORMULA</small>
+                  <small className="text-muted font-monospace">FORMULA</small>
                 </div>
               </td>
             </tr>
@@ -803,7 +802,7 @@ const ContainerSettings = () => {
             <td>
               <select
                 value={minScreenWidth}
-                className="form-control"
+                className="form-control form-select"
                 onChange={setAProp("minScreenWidth")}
               >
                 <option value="">all</option>
@@ -821,7 +820,7 @@ const ContainerSettings = () => {
             <td>
               <select
                 value={maxScreenWidth}
-                className="form-control"
+                className="form-control form-select"
                 onChange={setAProp("maxScreenWidth")}
               >
                 <option value="">all</option>
@@ -847,7 +846,7 @@ const ContainerSettings = () => {
         <label>Hover color</label>
         <select
           value={hoverColor}
-          className="form-control"
+          className="form-control form-select"
           onChange={setAProp("hoverColor")}
         >
           <option value="">None</option>

package/src/components/elements/DropDownFilter.js

@@ -69,7 +69,7 @@ const DropDownFilterSettings = () => {
           <td>
             <select
               value={name}
-              className="form-control"
+              className="form-control form-select"
               onChange={(e) => setProp((prop) => (prop.name = e.target.value))}
             >
               {options.fields.map((f, ix) => (

package/src/components/elements/DropMenu.js

@@ -0,0 +1,156 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/DropMenu
+ * @subcategory components / elements
+ */
+
+import React, { Fragment, useState } from "react";
+import { Element, useNode } from "@craftjs/core";
+import { Column } from "./Column";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  SettingsRow,
+  BlockSetting,
+  ButtonOrLinkSettingsRows,
+  DynamicFontAwesomeIcon,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {boolean} props.has_dropdown
+ * @param {string} props.children
+ * @param {boolean} props.show_badges
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenu = ({
+  children,
+  action_style,
+  action_size,
+  action_icon,
+  action_bgcol,
+  action_bordercol,
+  action_textcol,
+  block,
+  label,
+}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const [showDropdown, setDropdown] = useState(false);
+  //const [dropWidth, setDropWidth] = useState(200);
+  return (
+    <div
+      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <button
+        className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
+        style={
+          action_style === "btn-custom-color"
+            ? {
+                backgroundColor: action_bgcol || "#000000",
+                borderColor: action_bordercol || "#000000",
+                color: action_textcol || "#000000",
+              }
+            : {}
+        }
+      >
+        <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
+
+        {label}
+        <FontAwesomeIcon
+          icon={faCaretDown}
+          className="ms-1"
+          onClick={() => setDropdown(!showDropdown)}
+        />
+      </button>
+      <div
+        className={`dropdown-menu dropmenu-dropdown ${
+          showDropdown ? "show" : ""
+        }`}
+      >
+        <div className="canvas d-flex flex-column">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenuSettings = () => {
+  const node = useNode((node) => ({
+    label: node.data.props.label,
+    block: node.data.props.block,
+    action_style: node.data.props.action_style,
+    action_size: node.data.props.action_size,
+    action_icon: node.data.props.action_icon,
+    action_bgcol: node.data.props.action_bgcol,
+    action_bordercol: node.data.props.action_bordercol,
+    action_textcol: node.data.props.action_textcol,
+  }));
+  const {
+    actions: { setProp },
+    label,
+    block,
+  } = node;
+  return (
+    <table className="w-100">
+      <tbody>
+        <SettingsRow
+          field={{
+            label: "Label",
+            name: "label",
+            type: "String",
+          }}
+          node={node}
+          setProp={setProp}
+        />
+        <ButtonOrLinkSettingsRows
+          setProp={setProp}
+          keyPrefix="action_"
+          values={node}
+        />
+        <tr>
+          <td colSpan="2">
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * @type {object}
+ */
+DropMenu.craft = {
+  displayName: "DropMenu",
+  props: {
+    label: "",
+    show_badges: false,
+  },
+  related: {
+    settings: DropMenuSettings,
+    segment_type: "dropdown_menu",
+    hasContents: true,
+    fields: [
+      "label",
+      "block",
+      "action_style",
+      "action_size",
+      "action_icon",
+      "action_bgcol",
+      "action_bordercol",
+      "action_textcol",
+    ],
+  },
+};

package/src/components/elements/Field.js

@@ -134,7 +134,7 @@ const FieldSettings = () => {
             <td>
               <select
                 value={name}
-                className="form-control"
+                className="form-control form-select"
                 onChange={(e) => {
                   setProp((prop) => (prop.name = e.target.value));
                   const newfvs = options.field_view_options[e.target.value];
@@ -164,7 +164,7 @@ const FieldSettings = () => {
               <td>
                 <select
                   value={fieldview}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={(e) => {
                     setProp((prop) => (prop.fieldview = e.target.value));
                     setInitialConfig(

package/src/components/elements/Image.js

@@ -142,7 +142,7 @@ const ImageSettings = () => {
             <td>
               <select
                 value={srctype}
-                className="form-control"
+                className="form-control form-select"
                 onChange={setAProp("srctype")}
               >
                 <option>File</option>
@@ -160,7 +160,7 @@ const ImageSettings = () => {
               <td>
                 <select
                   value={fileid}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={setAProp("fileid")}
                 >
                   {options.images.map((f, ix) => (
@@ -217,7 +217,7 @@ const ImageSettings = () => {
               <td>
                 <select
                   value={field}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={setAProp("field")}
                 >
                   {options.fields

package/src/components/elements/JoinField.js

@@ -120,7 +120,7 @@ const JoinFieldSettings = () => {
             <td>
               <select
                 value={name}
-                className="form-control"
+                className="form-control form-select"
                 onChange={(e) => {
                   setProp((prop) => (prop.name = e.target.value));
                   const newfvs = options.field_view_options[e.target.value];
@@ -150,7 +150,7 @@ const JoinFieldSettings = () => {
               <td>
                 <select
                   value={fieldview}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={(e) => {
                     setProp((prop) => (prop.fieldview = e.target.value));
                     refetchPreview({ fieldview: e.target.value });