@saltcorn/builder 0.6.4-beta.5 → 0.7.0-beta.0

package/package.json

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

@@ -211,7 +211,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 +220,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 +271,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 +315,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 +412,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">

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

@@ -76,7 +76,7 @@ const AggregationSettings = () => {
           </td>
           <td>
             <select
-              className="form-control"
+              className="form-control form-select"
               value={agg_relation}
               onChange={(e) =>
                 setProp((prop) => {
@@ -100,7 +100,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 +121,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>

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/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 });

package/src/components/elements/Link.js

@@ -53,7 +53,7 @@ const Link = ({
     <span
       className={`${textStyle} is-builder-link ${
         selected ? "selected-node" : ""
-      } ${isFormula.text ? "text-monospace" : ""} ${link_style} ${link_size}`}
+      } ${isFormula.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
       style={
@@ -66,7 +66,7 @@ const Link = ({
           : {}
       }
     >
-      <DynamicFontAwesomeIcon icon={link_icon} className="mr-1" />
+      <DynamicFontAwesomeIcon icon={link_icon} className="me-1" />
       {isFormula.text ? `=${text}` : text}
     </span>
   );
@@ -139,7 +139,7 @@ const LinkSettings = () => {
             <td>
               <select
                 value={link_src}
-                className="form-control"
+                className="form-control form-select"
                 onChange={(e) =>
                   setProp((prop) => {
                     prop.link_src = e.target.value;
@@ -181,7 +181,7 @@ const LinkSettings = () => {
               <td>
                 <select
                   value={url}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={setAProp("url")}
                 >
                   <option></option>
@@ -200,7 +200,7 @@ const LinkSettings = () => {
               <td>
                 <select
                   value={url}
-                  className="form-control"
+                  className="form-control form-select"
                   onChange={setAProp("url")}
                 >
                   <option></option>

package/src/components/elements/SearchBar.js

@@ -39,11 +39,10 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
         connect(drag(dom));
       }}
     >
-      <div className="input-group-prepend">
-        <button className="btn btn-outline-secondary" disabled>
-          <i className="fas fa-search"></i>
-        </button>
-      </div>
+      <button className="btn btn-outline-secondary" disabled>
+        <i className="fas fa-search"></i>
+      </button>
+
       <input
         type="text"
         className="form-control bg-light"
@@ -51,31 +50,29 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
         disabled
       />
 
-      <div className="input-group-append">
-        {show_badges && (
-          <div className="input-group-text">
-            <span className="badge badge-primary">X:Y</span>
+      {show_badges && (
+        <div className="input-group-text">
+          <span className="badge bg-primary">X:Y</span>
+        </div>
+      )}
+      {has_dropdown && (
+        <Fragment>
+          <button
+            className="btn btn-outline-secondary"
+            onClick={() => setDropdown(!showDropdown)}
+          >
+            <FontAwesomeIcon icon={faCaretDown} />
+          </button>
+          <div
+            className={`dropdown-menu searchbar-dropdown ${
+              showDropdown ? "show" : ""
+            }`}
+            style={{ width: dropWidth, left: 0 }}
+          >
+            <div className="canvas">{children}</div>
           </div>
-        )}
-        {has_dropdown && (
-          <Fragment>
-            <button
-              className="btn btn-outline-secondary"
-              onClick={() => setDropdown(!showDropdown)}
-            >
-              <FontAwesomeIcon icon={faCaretDown} />
-            </button>
-            <div
-              className={`dropdown-menu searchbar-dropdown ${
-                showDropdown ? "show" : ""
-              }`}
-              style={{ width: dropWidth, left: 0 }}
-            >
-              <div className="canvas">{children}</div>
-            </div>
-          </Fragment>
-        )}
-      </div>
+        </Fragment>
+      )}
     </div>
   );
 };

package/src/components/elements/Tabs.js

@@ -128,12 +128,14 @@ const TabsSettings = () => {
     tabsStyle: node.data.props.tabsStyle,
     ntabs: node.data.props.ntabs,
     independent: node.data.props.independent,
+    deeplink: node.data.props.deeplink,
     titles: node.data.props.titles,
   }));
   const {
     actions: { setProp },
     titles,
     tabsStyle,
+    deeplink,
     independent,
     ntabs,
   } = node;
@@ -147,7 +149,7 @@ const TabsSettings = () => {
           <td>
             <select
               value={tabsStyle}
-              className="form-control"
+              className="form-control form-select"
               onChange={(e) =>
                 setProp((prop) => {
                   prop.tabsStyle = e.target.value;
@@ -194,7 +196,7 @@ const TabsSettings = () => {
             </td>
           </tr>
         ))}
-        {tabsStyle === "Accordion" && (
+        {tabsStyle === "Accordion" ? (
           <tr>
             <td colSpan="2">
               <div className="form-check">
@@ -213,6 +215,25 @@ const TabsSettings = () => {
               </div>
             </td>
           </tr>
+        ) : (
+          <tr>
+            <td colSpan="2">
+              <div className="form-check">
+                <input
+                  className="form-check-input"
+                  name="block"
+                  type="checkbox"
+                  checked={deeplink}
+                  onChange={(e) => {
+                    if (e.target) {
+                      setProp((prop) => (prop.deeplink = e.target.checked));
+                    }
+                  }}
+                />
+                <label className="form-check-label">Deep link</label>
+              </div>
+            </td>
+          </tr>
         )}
       </tbody>
     </table>
@@ -228,6 +249,7 @@ Tabs.craft = {
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,
+    deeplink: true,
   },
   displayName: "Tabs",
   related: {