@saltcorn/builder 0.7.2-beta.0 → 0.7.2-beta.4

package/package.json

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

@@ -224,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}
@@ -233,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) {
@@ -322,6 +330,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
    * @returns {object}
    */
   const go = (node) => {
+    if (!node) return;
     const matchElement = allElements.find(
       (e) =>
         e.craft.related &&
@@ -418,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,