@saltcorn/builder 0.7.1-beta.2 → 0.7.2-beta.0

package/package.json

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

@@ -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/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"}
@@ -372,6 +374,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,
@@ -437,6 +440,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,
       };
     }