@saltcorn/builder 0.7.1-beta.3 → 0.7.2-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.1-beta.3",
+  "version": "0.7.2-beta.10",
   "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/Field.js

@@ -46,7 +46,8 @@ const Field = ({
   const { previews, setPreviews } = useContext(previewCtx);
   const myPreview = previews[node_id];
   const options = useContext(optionsCtx);
-
+  const blockDisplays = (options.blockDisplay || {})[name];
+  const blockDisplay = blockDisplays && blockDisplays.includes(fieldview);
   useEffect(() => {
     fetchFieldPreview({
       options,
@@ -60,7 +61,9 @@ const Field = ({
   return (
     <div
       className={`${textStyle} ${selected ? "selected-node" : ""} ${
-        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
+        isBlock(block, inline, textStyle) || blockDisplay
+          ? "d-block"
+          : "d-inline-block"
       }`}
       ref={(dom) => connect(drag(dom))}
     >
@@ -106,6 +109,7 @@ const FieldSettings = () => {
 
   const fvs = options.field_view_options[name];
   const handlesTextStyle = (options.handlesTextStyle || {})[name];
+  const blockDisplay = (options.blockDisplay || {})[name];
   const getCfgFields = (fv) =>
     ((options.fieldViewConfigForms || {})[name] || {})[fv];
   const cfgFields = getCfgFields(fieldview);
@@ -184,17 +188,19 @@ const FieldSettings = () => {
               </td>
             </tr>
           )}
-          <tr>
-            <td></td>
-            <td>
-              <BlockOrInlineSetting
-                block={block}
-                inline={inline}
-                textStyle={textStyle}
-                setProp={setProp}
-              />
-            </td>
-          </tr>
+          {!(blockDisplay && blockDisplay.includes(fieldview)) && (
+            <tr>
+              <td></td>
+              <td>
+                <BlockOrInlineSetting
+                  block={block}
+                  inline={inline}
+                  textStyle={textStyle}
+                  setProp={setProp}
+                />
+              </td>
+            </tr>
+          )}
           {!(handlesTextStyle && handlesTextStyle.includes(fieldview)) && (
             <TextStyleRow textStyle={textStyle} setProp={setProp} />
           )}

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>
   );
 };
@@ -86,6 +86,7 @@ const LinkSettings = () => {
     isFormula: node.data.props.isFormula,
     textStyle: node.data.props.textStyle,
     nofollow: node.data.props.nofollow,
+    in_modal: node.data.props.in_modal,
     link_src: node.data.props.link_src,
     target_blank: node.data.props.target_blank,
     link_style: node.data.props.link_style,
@@ -105,6 +106,7 @@ const LinkSettings = () => {
     nofollow,
     target_blank,
     link_src,
+    in_modal,
   } = node;
   const options = useContext(optionsCtx);
   const setAProp = (key) => (e) => {
@@ -247,6 +249,18 @@ const LinkSettings = () => {
         />
         <label className="form-check-label">Open in new tab</label>
       </div>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          name="block"
+          type="checkbox"
+          checked={in_modal}
+          onChange={(e) =>
+            setProp((prop) => (prop.in_modal = e.target.checked))
+          }
+        />
+        <label className="form-check-label">Open in popup modal?</label>
+      </div>
       <BlockSetting block={block} setProp={setProp} />
       <TextStyleSetting textStyle={textStyle} setProp={setProp} />
     </div>
@@ -285,6 +299,7 @@ Link.craft = {
       "link_bgcol",
       "link_bordercol",
       "link_textcol",
+      "in_modal",
     ],
   },
 };

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/elements/View.js

@@ -79,6 +79,7 @@ const ViewSettings = () => {
     name: node.data.props.name,
     view: node.data.props.view,
     state: node.data.props.state,
+    extra_state_fml: node.data.props.extra_state_fml,
     configuration: node.data.props.configuration, // fixed states
     node_id: node.id,
   }));
@@ -90,6 +91,7 @@ const ViewSettings = () => {
     state,
     node_id,
     configuration,
+    extra_state_fml,
   } = node;
   const options = useContext(optionsCtx);
   const views = options.views;
@@ -149,6 +151,20 @@ const ViewSettings = () => {
             )}
         </Fragment>
       )}
+      {(state === "shared" || options.mode === "page") && (
+        <Fragment>
+          {" "}
+          <label>Extra state Formula</label>
+          <input
+            type="text"
+            className="viewlink-label form-control"
+            value={extra_state_fml}
+            onChange={(e) =>
+              setProp((prop) => (prop.extra_state_fml = e.target.value))
+            }
+          />
+        </Fragment>
+      )}
       {view ? (
         <a
           className="d-block mt-2"

package/src/components/elements/ViewLink.js

@@ -33,7 +33,7 @@ export /**
  * @returns {tr}
  * @category saltcorn-builder
  * @subcategory components
- * @namespace 
+ * @namespace
  */
 const ViewLink = ({
   name,
@@ -99,6 +99,7 @@ const ViewLinkSettings = () => {
     link_bgcol: node.data.props.link_bgcol,
     link_bordercol: node.data.props.link_bordercol,
     link_textcol: node.data.props.link_textcol,
+    extra_state_fml: node.data.props.extra_state_fml,
   }));
   const {
     actions: { setProp },
@@ -109,6 +110,7 @@ const ViewLinkSettings = () => {
     isFormula,
     inModal,
     textStyle,
+    extra_state_fml,
   } = node;
   const options = useContext(optionsCtx);
   return (
@@ -148,6 +150,20 @@ const ViewLinkSettings = () => {
               </OrFormula>
             </td>
           </tr>
+          <tr>
+            <td colSpan="2">
+              <label>Extra state Formula</label>
+              <input
+                type="text"
+                className="viewlink-label form-control"
+                value={extra_state_fml}
+                onChange={(e) =>
+                  setProp((prop) => (prop.extra_state_fml = e.target.value))
+                }
+              />
+            </td>
+          </tr>
+
           <ButtonOrLinkSettingsRows
             setProp={setProp}
             keyPrefix="link_"
@@ -203,6 +219,7 @@ ViewLink.craft = {
       "link_bgcol",
       "link_bordercol",
       "link_textcol",
+      "extra_state_fml",
     ],
   },
 };

package/src/components/elements/utils.js

@@ -387,53 +387,57 @@ const fetchPreview = ({ url, body, options, setPreviews, node_id, isView }) => {
  * @param {object} [args = {}]
  * @return {function}
  */
-export const fetchFieldPreview = (args = {}) => (changes = {}) => {
-  const { node_id, options, name, fieldview, setPreviews } = {
-    ...args,
-    ...changes,
-  };
-  const configuration = {
-    ...(args.configuration || {}),
-    ...(changes.configuration || {}),
+export const fetchFieldPreview =
+  (args = {}) =>
+  (changes = {}) => {
+    const { node_id, options, name, fieldview, setPreviews } = {
+      ...args,
+      ...changes,
+    };
+    const configuration = {
+      ...(args.configuration || {}),
+      ...(changes.configuration || {}),
+    };
+    fetchPreview({
+      options,
+      node_id,
+      setPreviews,
+      url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
+      body: { configuration },
+    });
   };
-  fetchPreview({
-    options,
-    node_id,
-    setPreviews,
-    url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
-    body: { configuration },
-  });
-};
 
 /**
  * @function
  * @param {object} [args = {}]
  * @return {function}
  */
-export const fetchViewPreview = (args = {}) => (changes = {}) => {
-  const { node_id, options, view, setPreviews, configuration } = {
-    ...args,
-    ...changes,
-  };
-  let viewname,
-    body = configuration ? { ...configuration } : {};
-  if (view.includes(":")) {
-    const [reltype, rest] = view.split(":");
-    const [vnm] = rest.split(".");
-    viewname = vnm;
-    body.reltype = reltype;
-    body.path = rest;
-  } else viewname = view;
+export const fetchViewPreview =
+  (args = {}) =>
+  (changes = {}) => {
+    const { node_id, options, view, setPreviews, configuration } = {
+      ...args,
+      ...changes,
+    };
+    let viewname,
+      body = configuration ? { ...configuration } : {};
+    if (view.includes(":")) {
+      const [reltype, rest] = view.split(":");
+      const [vnm] = rest.split(".");
+      viewname = vnm;
+      body.reltype = reltype;
+      body.path = rest;
+    } else viewname = view;
 
-  fetchPreview({
-    options,
-    node_id,
-    setPreviews,
-    url: `/view/${viewname}/preview`,
-    body,
-    isView: true,
-  });
-};
+    fetchPreview({
+      options,
+      node_id,
+      setPreviews,
+      url: `/view/${viewname}/preview`,
+      body,
+      isView: true,
+    });
+  };
 
 export /**
  * @param {object} props
@@ -650,8 +654,11 @@ const ConfigField = ({
   if (field.input_type === "fromtype") field.input_type = null;
   if (field.type && field.type.name === "String" && field.attributes.options) {
     field.input_type = "select";
-    field.options = field.attributes.options;
-    if (!field.required) field.options.unshift("");
+    field.options =
+      typeof field.attributes.options === "string"
+        ? field.attributes.options.split(",").map((s) => s.trim())
+        : field.attributes.options;
+    if (!field.required && field.options) field.options.unshift("");
   }
   const dispatch = {
     String() {

package/src/components/storage.js

@@ -142,6 +142,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           view={segment.view}
           name={segment.name}
           state={segment.state}
+          extra_state_fml={segment.extra_state_fml}
           configuration={segment.configuration || {}}
         />
       );
@@ -205,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"}
@@ -222,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}
@@ -231,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) {
@@ -320,6 +330,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
    * @returns {object}
    */
   const go = (node) => {
+    if (!node) return;
     const matchElement = allElements.find(
       (e) =>
         e.craft.related &&
@@ -372,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,
@@ -415,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,
@@ -437,6 +457,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
           node.props.name === "not_assigned" ? rand_ident() : node.props.name,
         state: node.props.state,
         configuration: node.props.configuration,
+        extra_state_fml: node.props.extra_state_fml,
       };
     }