@saltcorn/builder 0.7.1 → 0.7.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.1",
+  "version": "0.7.2-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Toolbox.js

@@ -279,7 +279,7 @@ const SearchElem = ({ connectors }) => (
     title="Search bar"
     label="Search"
   >
-    <SearchBar />
+    <Element canvas is={SearchBar}></Element>
   </WrapElem>
 );
 /**

package/src/components/elements/Action.js

@@ -165,7 +165,7 @@ const ActionSettings = () => {
           <MinRoleSettingRow minRole={minRole} setProp={setProp} />
         </tbody>
       </table>
-      {options.mode === "show" ? (
+      {options.mode === "show" || name === "Delete" || name === "Reset" ? (
         <div className="form-check">
           <input
             className="form-check-input"

package/src/components/elements/Card.js

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

package/src/components/elements/Container.js

@@ -229,6 +229,7 @@ const ContainerSettings = () => {
     rotate: node.data.props.rotate,
     display: node.data.props.display,
     style: node.data.props.style,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
   }));
   const {
     actions: { setProp },
@@ -257,6 +258,7 @@ const ContainerSettings = () => {
     fullPageWidth,
     overflow,
     htmlElement,
+    imgResponsiveWidths,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -520,6 +522,26 @@ const ContainerSettings = () => {
                   </select>
                 </td>
               </tr>
+              {imageSize !== "repeat" && (
+                <tr>
+                  <td>
+                    <label>Responsive widths</label>
+                  </td>
+
+                  <td>
+                    <input
+                      type="text"
+                      value={imgResponsiveWidths}
+                      className="form-control"
+                      onChange={setAProp("imgResponsiveWidths")}
+                    />
+                    <small>
+                      <i>List of widths to serve resized images,
+                         e.g. 300, 400, 600</i>
+                    </small>
+                  </td>
+                </tr>
+              )}
             </Fragment>
           )}
           {bgType === "Color" && (

package/src/components/elements/Image.js

@@ -71,6 +71,7 @@ const ImageSettings = () => {
     block: node.data.props.block,
     style: node.data.props.style,
     isFormula: node.data.props.isFormula,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
   }));
   const {
     actions: { setProp },
@@ -82,6 +83,7 @@ const ImageSettings = () => {
     block,
     isFormula,
     filepath,
+    imgResponsiveWidths,
     style,
   } = node;
   const options = useContext(optionsCtx);
@@ -252,6 +254,27 @@ const ImageSettings = () => {
               </td>
             </tr>
           )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Responsive widths</label>
+              </td>
+
+              <td>
+                <input
+                  type="text"
+                  value={imgResponsiveWidths}
+                  className="form-control"
+                  onChange={setAProp("imgResponsiveWidths")}
+                />
+                <small>
+                  <i>
+                    List of widths to serve resized images, e.g. 300, 400, 600
+                  </i>
+                </small>
+              </td>
+            </tr>
+          )}
           {srctype !== "Upload" && (
             <tr>
               <td colSpan="2">
@@ -290,6 +313,7 @@ Image.craft = {
       { name: "fileid", default: 0 },
       "field",
       "block",
+      "imgResponsiveWidths",
       { name: "style", default: {} },
     ],
   },

package/src/components/elements/Link.js

@@ -53,7 +53,7 @@ const Link = ({
     <span
       className={`${textStyle} is-builder-link ${
         selected ? "selected-node" : ""
-      } ${isFormula.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
+      } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
       style={
@@ -67,7 +67,7 @@ const Link = ({
       }
     >
       <DynamicFontAwesomeIcon icon={link_icon} className="me-1" />
-      {isFormula.text ? `=${text}` : text}
+      {isFormula?.text ? `=${text}` : text}
     </span>
   );
 };

package/src/components/elements/Tabs.js

@@ -88,35 +88,60 @@ const Tabs = ({ contents, titles, tabsStyle, ntabs, independent, field }) => {
           } builder ${selected ? "selected-node" : ""}`}
           ref={(dom) => connect(drag(dom))}
         >
-          {ntimes(ntabs, (ix) => (
-            <li key={ix} className="nav-item" role="presentation">
-              <a
-                className={`nav-link ${ix === showTab ? `active` : ""}`}
-                onClick={() => setShowTab(ix)}
-              >
-                {titles[ix] &&
-                  (typeof titles[ix].label === "undefined"
-                    ? titles[ix]
-                    : titles[ix].label === ""
-                    ? "(empty)"
-                    : titles[ix].label)}
-              </a>
-            </li>
-          ))}
+          {ntimes(ntabs, (ix) => {
+            if (!titles[ix]) return null;
+            const targetIx =
+              typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
+            return (
+              <li key={ix} className="nav-item" role="presentation">
+                <a
+                  className={`nav-link ${targetIx === showTab ? `active` : ""}`}
+                  onClick={() => setShowTab(targetIx)}
+                >
+                  {titles[ix] &&
+                    (typeof titles[ix].label === "undefined"
+                      ? titles[ix]
+                      : titles[ix].label === ""
+                      ? "(empty)"
+                      : titles[ix].label)}
+                </a>
+              </li>
+            );
+          })}
         </ul>
         <div className="tab-content" id="myTabContent">
-          {ntimes(ntabs, (ix) => (
-            <div
-              key={ix}
-              className={`tab-pane fade ${ix === showTab ? `show active` : ""}`}
-              role="tabpanel"
-              aria-labelledby="home-tab"
-            >
-              <Element canvas id={`Tab${ix}`} is={Column}>
-                {contents[ix]}
-              </Element>
-            </div>
-          ))}
+          {ntimes(ntabs, (ix) => {
+            if (!titles[ix]) return null;
+
+            const useIx =
+              typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
+
+            if (useIx !== showTab)
+              return (
+                <div className="d-none" key={ix}>
+                  <Element canvas id={`Tab${useIx}`} is={Column}>
+                    {contents[useIx]}
+                  </Element>
+                </div>
+              );
+            //d-none display of useIx is bug workaround? needed
+            else
+              return (
+                <div
+                  key={ix}
+                  className={`tab-pane fade ${
+                    useIx === showTab ? `show active` : ""
+                  }`}
+                  role="tabpanel"
+                  aria-labelledby="home-tab"
+                >
+                  <div className="d-none">{useIx}</div>
+                  <Element canvas id={`Tab${useIx}`} is={Column}>
+                    {contents[useIx]}
+                  </Element>
+                </div>
+              );
+          })}
         </div>
       </Fragment>
     );
@@ -163,6 +188,7 @@ const TabsSettings = () => {
         .then(function (data) {
           if (data.success) {
             const len = data.success.length;
+
             setProp((prop) => (prop.ntabs = len));
             setProp((prop) => (prop.titles = data.success));
           }

package/src/components/storage.js

@@ -206,6 +206,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           }
           bgFileId={segment.bgFileId}
           imageSize={segment.imageSize || "contain"}
+          imgResponsiveWidths={segment.imgResponsiveWidths}
           bgType={segment.bgType || "None"}
           style={segment.style || {}}
           bgColor={segment.bgColor || "#ffffff"}
@@ -223,6 +224,14 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
         </Element>
       );
     } else if (segment.type === "tabs") {
+      let contentsArray = segment.contents.map(toTag);
+      let contents;
+      if (segment.tabsStyle === "Value switch") {
+        contents = {};
+        segment.titles.forEach(({ label, value }, ix) => {
+          contents[value] = contentsArray[ix];
+        });
+      } else contents = contentsArray;
       return (
         <Tabs
           key={ix}
@@ -232,7 +241,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           deeplink={segment.deeplink}
           field={segment.field}
           tabsStyle={segment.tabsStyle}
-          contents={segment.contents.map(toTag)}
+          contents={contents}
         />
       );
     } else if (segment.besides) {
@@ -321,6 +330,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
    * @returns {object}
    */
   const go = (node) => {
+    if (!node) return;
     const matchElement = allElements.find(
       (e) =>
         e.craft.related &&
@@ -373,6 +383,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           bgFileId: node.props.bgFileId,
           bgType: node.props.bgType,
           imageSize: node.props.imageSize,
+          imgResponsiveWidths: node.props.imgResponsiveWidths,
           bgColor: node.props.bgColor,
           setTextColor: node.props.setTextColor,
           textColor: node.props.textColor,
@@ -416,11 +427,19 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       };
     }
     if (node.displayName === Tabs.craft.displayName) {
+      let contents;
+      if (node.props.tabsStyle === "Value switch") {
+        contents = node.props.titles.map(({ value }, ix) => {
+          const useIx = typeof value === "undefined" ? ix : value;
+          return go(nodes[node.linkedNodes["Tab" + useIx]]);
+        });
+      } else
+        contents = ntimes(node.props.ntabs, (ix) =>
+          go(nodes[node.linkedNodes["Tab" + ix]])
+        );
       return {
         type: "tabs",
-        contents: ntimes(node.props.ntabs, (ix) =>
-          go(nodes[node.linkedNodes["Tab" + ix]])
-        ),
+        contents,
         titles: node.props.titles,
         tabsStyle: node.props.tabsStyle,
         field: node.props.field,