@saltcorn/builder 0.6.4 → 0.7.0-beta.2

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: {

package/src/components/elements/Text.js

@@ -15,6 +15,8 @@ import {
   TextStyleRow,
   DynamicFontAwesomeIcon,
   isBlock,
+  reactifyStyles,
+  SettingsRow,
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
@@ -74,7 +76,16 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Text = ({ text, block, inline, isFormula, textStyle, icon, font }) => {
+const Text = ({
+  text,
+  block,
+  inline,
+  isFormula,
+  textStyle,
+  icon,
+  font,
+  style,
+}) => {
   const {
     connectors: { connect, drag },
     selected,
@@ -92,14 +103,17 @@ const Text = ({ text, block, inline, isFormula, textStyle, icon, font }) => {
     <div
       className={`${
         isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
-      } ${textStyle} is-text ${isFormula.text ? "text-monospace" : ""} ${
+      } ${textStyle} is-text ${isFormula.text ? "font-monospace" : ""} ${
         selected ? "selected-node" : ""
       }`}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
-      style={font ? { fontFamily: font } : {}}
+      style={{
+        ...(font ? { fontFamily: font } : {}),
+        ...reactifyStyles(style || {}),
+      }}
     >
-      <DynamicFontAwesomeIcon icon={icon} className="mr-1" />
+      <DynamicFontAwesomeIcon icon={icon} className="me-1" />
       {isFormula.text ? (
         <Fragment>
           =
@@ -146,6 +160,7 @@ const TextSettings = () => {
     labelFor: node.data.props.labelFor,
     icon: node.data.props.icon,
     font: node.data.props.font,
+    style: node.data.props.style,
   }));
   const {
     actions: { setProp },
@@ -157,6 +172,7 @@ const TextSettings = () => {
     labelFor,
     icon,
     font,
+    style,
   } = node;
   const { mode, fields } = useContext(optionsCtx);
   const setAProp = (key) => (e) => {
@@ -208,7 +224,11 @@ const TextSettings = () => {
       {mode === "edit" && (
         <Fragment>
           <label>Label for Field</label>
-          <select value={labelFor} onChange={setAProp("labelFor")}>
+          <select
+            value={labelFor}
+            onChange={setAProp("labelFor")}
+            className="form-control form-select"
+          >
             <option value={""}></option>
             {fields.map((f, ix) => (
               <option key={ix} value={f.name}>
@@ -235,19 +255,48 @@ const TextSettings = () => {
               />
             </td>
           </tr>
-          <tr>
-            <td>
-              <label>Font</label>
-            </td>
-            <td>
-              <input
-                type="text"
-                className="form-control"
-                value={font}
-                onChange={setAProp("font")}
-              />
-            </td>
-          </tr>
+          <SettingsRow
+            field={{
+              name: "font",
+              label: "Font family",
+              type: "Font",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "font-size",
+              label: "Font size",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "font-weight",
+              label: "Weight",
+              type: "Integer",
+              min: 100,
+              max: 900,
+              step: 100,
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "line-height",
+              label: "Line height",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
         </tbody>
       </table>
       <BlockOrInlineSetting
@@ -272,6 +321,7 @@ Text.craft = {
     textStyle: "",
     labelFor: "",
     font: "",
+    style: {},
   },
   displayName: "Text",
   related: {

package/src/components/elements/ToggleFilter.js

@@ -94,7 +94,7 @@ const ToggleFilterSettings = () => {
           <td>
             <select
               value={name}
-              className="form-control"
+              className="form-control form-select"
               onChange={(e) => {
                 setProp((prop) => (prop.name = e.target.value));
                 const field = options.fields.find(
@@ -121,7 +121,7 @@ const ToggleFilterSettings = () => {
             {isBool ? (
               <select
                 value={value}
-                className="w-100"
+                className="w-100 form-select"
                 onChange={setAProp("value")}
               >
                 <option value="on">True</option>
@@ -145,7 +145,7 @@ const ToggleFilterSettings = () => {
             <td>
               <select
                 value={preset_value}
-                className="form-control"
+                className="form-control form-select"
                 onChange={setAProp("preset_value")}
               >
                 <option value=""></option>
@@ -176,7 +176,7 @@ const ToggleFilterSettings = () => {
           </td>
           <td>
             <select
-              className="form-control"
+              className="form-control form-select"
               value={size}
               onChange={setAProp("size")}
             >
@@ -195,7 +195,7 @@ const ToggleFilterSettings = () => {
           </td>
           <td>
             <select
-              className="form-control"
+              className="form-control form-select"
               value={style}
               onChange={setAProp("style")}
             >

package/src/components/elements/View.js

@@ -109,7 +109,7 @@ const ViewSettings = () => {
         <label>View to {options.mode === "show" ? "embed" : "show"}</label>
         <select
           value={view}
-          className="form-control"
+          className="form-control form-select"
           onChange={(e) => {
             setProp((prop) => (prop.view = e.target.value));
           }}
@@ -127,7 +127,7 @@ const ViewSettings = () => {
             <label>State</label>
             <select
               value={state}
-              className="form-control"
+              className="form-control form-select"
               onChange={setAProp("state")}
             >
               <option value="shared">Shared</option>

package/src/components/elements/ViewLink.js

@@ -72,7 +72,7 @@ const ViewLink = ({
           : {}
       }
     >
-      {link_icon ? <i className={`${link_icon} mr-1`}></i> : ""}
+      {link_icon ? <i className={`${link_icon} me-1`}></i> : ""}
       {displabel}
     </span>
   );
@@ -120,7 +120,7 @@ const ViewLinkSettings = () => {
               <label>View to link to</label>
               <select
                 value={name}
-                className="form-control"
+                className="form-control form-select"
                 onChange={(e) =>
                   setProp((prop) => (prop.name = e.target.value))
                 }

package/src/components/elements/utils.js

@@ -130,22 +130,21 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
         ) : (
           children
         )}
-        <div className="input-group-append">
-          <button
-            className={`btn activate-formula ${
-              isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
-            }`}
-            title="Calculated formula"
-            type="button"
-            onClick={switchIsFml}
-          >
-            <i className="fas fa-calculator"></i>
-          </button>
-        </div>
+
+        <button
+          className={`btn activate-formula ${
+            isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
+          }`}
+          title="Calculated formula"
+          type="button"
+          onClick={switchIsFml}
+        >
+          <i className="fas fa-calculator"></i>
+        </button>
       </div>
       {isFormula[nodekey] && (
         <div style={{ marginTop: "-5px" }}>
-          <small className="text-muted text-monospace">FORMULA</small>
+          <small className="text-muted font-monospace">FORMULA</small>
         </div>
       )}
     </Fragment>
@@ -167,6 +166,7 @@ const MinRoleSetting = ({ minRole, setProp }) => {
     <div>
       <label>Minimum Role</label>
       <select
+        className="form-control form-select"
         value={minRole}
         onChange={(e) => (e) => {
           if (e.target) {
@@ -204,7 +204,7 @@ const MinRoleSettingRow = ({ minRole, setProp }) => {
       <td>
         <select
           value={minRole}
-          className="form-control"
+          className="form-control form-select"
           onChange={(e) => {
             if (e.target) {
               const target_value = e.target.value;
@@ -236,7 +236,7 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
   return (
     <select
       value={textStyle}
-      className="form-control"
+      className="form-control form-select"
       onChange={(e) => {
         if (e.target) {
           const target_value = e.target.value;
@@ -251,12 +251,12 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
       <option value="h4">Heading 4</option>
       <option value="h5">Heading 5</option>
       <option value="h6">Heading 6</option>
-      <option value="font-weight-bold">Bold</option>
-      <option value="font-italic">Italics</option>
+      <option value="fw-bold">Bold</option>
+      <option value="fst-italic">Italics</option>
       <option value="small">Small</option>
       <option value="text-muted">Muted</option>
       <option value="text-underline">Underline</option>
-      <option value="text-monospace">Monospace</option>
+      <option value="font-monospace">Monospace</option>
     </select>
   );
 };
@@ -321,7 +321,7 @@ const Accordion = ({ titles, children }) => {
             <div
               className={`bg-${
                 isCurrent ? "primary" : "secondary"
-              } pl-1 text-white w-100 mt-1`}
+              } ps-1 text-white w-100 mt-1`}
               onClick={() => setCurrentTab(ix)}
             >
               <span className="w-1em">
@@ -565,12 +565,12 @@ export /**
 const ConfigForm = ({ fields, configuration, setProp, node, onChange }) => (
   <div>
     {fields.map((f, ix) => {
-      if (f.showIf && node && node.configuration) {
+      if (f.showIf && configuration) {
         let noshow = false;
         Object.entries(f.showIf).forEach(([nm, value]) => {
           if (Array.isArray(value))
-            noshow = noshow || value.includes(node.configuration[nm]);
-          else noshow = noshow || value !== node.configuration[nm];
+            noshow = noshow || value.includes(configuration[nm]);
+          else noshow = noshow || value !== configuration[nm];
         });
         if (noshow) return null;
       }
@@ -625,6 +625,8 @@ const ConfigField = ({
    * @param {object} v
    * @returns {void}
    */
+  const options = useContext(optionsCtx);
+
   const myOnChange = (v) => {
     setProp((prop) => {
       if (configuration) {
@@ -660,7 +662,7 @@ const ConfigField = ({
             : field.attributes.options;
         return (
           <select
-            className="form-control"
+            className="form-control form-select"
             value={value || ""}
             onChange={(e) => e.target && myOnChange(e.target.value)}
           >
@@ -684,6 +686,20 @@ const ConfigField = ({
           />
         );
     },
+    Font: () => (
+      <select
+        className="form-control form-select"
+        value={value || ""}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
+      >
+        <option value={""}></option>
+        {Object.entries(options.fonts || {}).map(([nm, ff], ix) => (
+          <option key={ix} value={ff}>
+            {nm}
+          </option>
+        ))}
+      </select>
+    ),
     Integer: () => (
       <input
         type="number"
@@ -736,7 +752,7 @@ const ConfigField = ({
     ),
     select: () => (
       <select
-        className="form-control"
+        className="form-control form-select"
         value={value || ""}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       >
@@ -1031,7 +1047,7 @@ const ButtonOrLinkSettingsRows = ({
       </td>
       <td>
         <select
-          className="form-control"
+          className="form-control form-select"
           value={values[keyPrefix + "style"]}
           onChange={setAProp(keyPrefix + "style")}
         >
@@ -1063,7 +1079,7 @@ const ButtonOrLinkSettingsRows = ({
       </td>
       <td>
         <select
-          className="form-control"
+          className="form-control form-select"
           value={values[keyPrefix + "size"]}
           onChange={setAProp(keyPrefix + "size")}
         >

package/src/components/storage.js

@@ -25,6 +25,7 @@ import { SearchBar } from "./elements/SearchBar";
 import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
+import { DropMenu } from "./elements/DropMenu";
 
 /**
  * @param {object} segment
@@ -69,6 +70,7 @@ const allElements = [
   DropDownFilter,
   Tabs,
   ToggleFilter,
+  DropMenu,
 ];
 
 export /**
@@ -128,6 +130,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           inline={segment.inline || false}
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
+          style={segment.style || {}}
           icon={segment.icon}
           font={segment.font || ""}
         />
@@ -225,6 +228,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           titles={segment.titles}
           ntabs={segment.ntabs}
           independent={segment.independent}
+          deeplink={segment.deeplink}
           tabsStyle={segment.tabsStyle}
           contents={segment.contents.map(toTag)}
         />
@@ -394,6 +398,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         textStyle: node.props.textStyle,
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,
+        style: node.props.style,
         icon: node.props.icon,
         font: node.props.font,
       };
@@ -417,6 +422,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         titles: node.props.titles,
         tabsStyle: node.props.tabsStyle,
         independent: node.props.independent,
+        deeplink: node.props.deeplink,
         ntabs: node.props.ntabs,
       };
     }