@saltcorn/builder 1.1.2-beta.7 → 1.1.2-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.2-beta.7",
+  "version": "1.1.2-beta.9",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.1.2-beta.7",
+    "@saltcorn/common-code": "1.1.2-beta.9",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Library.js

@@ -110,6 +110,7 @@ const InitNewElement = ({ nodekeys, savingState, setSavingState }) => {
 
     fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
       method: "POST", // or 'PUT'
+      keepalive: true,
       headers: {
         "Content-Type": "application/json",
         "CSRF-Token": options.csrfToken,

package/src/components/elements/Action.js

@@ -85,8 +85,7 @@ const Action = ({
 };
 
 export /**
- * @category saltcorn-builder
- * @subcategory components
+ * @category saltcorn-builder * @subcategory components
  * @namespace
  * @returns {div}
  */
@@ -108,11 +107,13 @@ const ActionSettings = () => {
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
     action_textcol: node.data.props.action_textcol,
+    action_class: node.data.props.action_class,
     nsteps: node.data.props.nsteps,
     step_only_ifs: node.data.props.step_only_ifs,
     step_action_names: node.data.props.step_action_names,
     setting_action_n: node.data.props.setting_action_n,
     spinner: node.data.props.spinner,
+    is_submit_action: node.data.props.is_submit_action,
   }));
   const {
     actions: { setProp },
@@ -132,6 +133,8 @@ const ActionSettings = () => {
     step_only_ifs,
     step_action_names,
     spinner,
+    is_submit_action,
+    
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
@@ -313,6 +316,18 @@ const ActionSettings = () => {
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
       ) : null}
+      {options.mode === "edit" && name !== "Save" ? (
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={is_submit_action}
+            onChange={setAProp("is_submit_action", { checked: true })}
+          />
+          <label className="form-check-label">This is the submit action</label>
+        </div>
+      ) : null}
       {name === "Multi-step action" ? (
         <Fragment>
           <label>Steps</label>

package/src/components/elements/ArrayManager.js

@@ -204,7 +204,7 @@ export const ArrayManager = ({
           title="Move left"
           type="button"
           style={{ width: "25%" }}
-          className="btn btn-sm"
+          className="btn btn-outline-secondary btn-sm"
           onClick={() => move(-1)}
           disabled={node[currentProp] === 0}
         >
@@ -214,7 +214,7 @@ export const ArrayManager = ({
           title="Add"
           type="button"
           style={{ width: "25%" }}
-          className="btn btn-sm"
+          className="btn btn-outline-secondary btn-sm"
           onClick={() => add()}
         >
           <FontAwesomeIcon icon={faPlus} />
@@ -223,7 +223,7 @@ export const ArrayManager = ({
           title="Delete"
           type="button"
           style={{ width: "25%" }}
-          className="btn btn-sm"
+          className="btn btn-outline-secondary btn-sm"
           onClick={() => deleteElem()}
         >
           <FontAwesomeIcon icon={faTrashAlt} />
@@ -233,7 +233,7 @@ export const ArrayManager = ({
           type="button"
           disabled={node[currentProp] === node[countProp] - 1}
           style={{ width: "25%" }}
-          className="btn btn-sm"
+          className="btn btn-outline-secondary btn-sm"
           onClick={() => move(1)}
         >
           <FontAwesomeIcon icon={faAngleDoubleRight} />

package/src/components/elements/Container.js

@@ -36,6 +36,7 @@ import {
   AlignBottom,
   SlashCircle,
   Image,
+  Images,
   Rainbow,
   Palette,
   EyeFill,
@@ -194,6 +195,7 @@ const ContainerSettings = () => {
     bgColor: node.data.props.bgColor,
     isFormula: node.data.props.isFormula,
     bgFileId: node.data.props.bgFileId,
+    bgField: node.data.props.bgField,
     imageSize: node.data.props.imageSize,
     htmlElement: node.data.props.htmlElement,
     vAlign: node.data.props.vAlign,
@@ -260,6 +262,7 @@ const ContainerSettings = () => {
     click_action,
     style,
     transform,
+    bgField,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles } = useContext(previewCtx);
@@ -340,6 +343,17 @@ const ContainerSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              name: "opacity",
+              label: "Opacity",
+              type: "Float",
+              attributes: { min: 0, max: 1 },
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
           <SettingsRow
             field={{
               name: "position",
@@ -462,6 +476,9 @@ const ContainerSettings = () => {
               options: [
                 { value: "None", label: <SlashCircle /> },
                 { value: "Image", label: <Image /> },
+                ...(options.mode === "show"
+                  ? [{ value: "Image Field", label: <Images /> }]
+                  : []),
                 { value: "Color", label: <Palette /> },
                 { value: "Gradient", label: <Rainbow /> },
               ],
@@ -532,30 +549,59 @@ const ContainerSettings = () => {
             </Fragment>
           )}
           {bgType === "Image" && (
-            <Fragment>
-              <tr>
-                <td>
-                  <label>File</label>
-                </td>
-                <td>
-                  <select
-                    value={bgFileId}
-                    className="form-control-sm w-100 form-select"
-                    onChange={setAProp("bgFileId")}
-                  >
-                    {options.images.map((f, ix) => (
-                      <option key={ix} value={f.id}>
-                        {f.filename}
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <select
+                  value={bgFileId}
+                  className="form-control-sm w-100 form-select"
+                  onChange={setAProp("bgFileId")}
+                >
+                  {options.images.map((f, ix) => (
+                    <option key={ix} value={f.id}>
+                      {f.filename}
+                    </option>
+                  ))}
+                  {(uploadedFiles || []).map((uf, ix) => (
+                    <option key={ix} value={uf.id}>
+                      {uf.filename}
+                    </option>
+                  ))}{" "}
+                </select>
+              </td>
+            </tr>
+          )}
+          {bgType === "Image Field" && (
+            <tr>
+              <td>
+                <label>File field</label>
+              </td>
+              <td>
+                <select
+                  value={bgField}
+                  className="form-control-sm w-100 form-select"
+                  onChange={setAProp("bgField")}
+                >
+                  {options.fields
+                    .filter(
+                      (f) =>
+                        f.type === "String" ||
+                        (f.type && f.type.name === "String") ||
+                        (f.type && f.type === "File")
+                    )
+                    .map((f, ix) => (
+                      <option key={ix} value={f.name}>
+                        {f.label}
                       </option>
                     ))}
-                    {(uploadedFiles || []).map((uf, ix) => (
-                      <option key={ix} value={uf.id}>
-                        {uf.filename}
-                      </option>
-                    ))}{" "}
-                  </select>
-                </td>
-              </tr>
+                </select>
+              </td>
+            </tr>
+          )}
+          {(bgType === "Image" || bgType === "Image Field") && (
+            <Fragment>
               <tr>
                 <td>
                   <label>Size</label>
@@ -863,7 +909,7 @@ const ContainerSettings = () => {
               name: "animateName",
               label: "Animation",
               type: "select",
-              options: ["None", ...options.keyframes || []],
+              options: ["None", ...(options.keyframes || [])],
             }}
             node={node}
             setProp={setProp}
@@ -882,8 +928,12 @@ const ContainerSettings = () => {
             node={node}
             setProp={setProp}
           />
-           <SettingsRow
-            field={{ name: "animateInitialHide", label: "Initially hidden", type: "Bool" }}
+          <SettingsRow
+            field={{
+              name: "animateInitialHide",
+              label: "Initially hidden",
+              type: "Bool",
+            }}
             node={node}
             setProp={setProp}
           />
@@ -1086,6 +1136,7 @@ Container.craft = {
     vAlign: "top",
     hAlign: "left",
     bgFileId: 0,
+    bgField: "",
     rotate: 0,
     isFormula: {},
     bgType: "None",

package/src/components/elements/DropMenu.js

@@ -99,6 +99,7 @@ const DropMenuSettings = () => {
     action_style: node.data.props.action_style,
     action_size: node.data.props.action_size,
     action_title: node.data.props.action_title,
+    action_class: node.data.props.action_class,
     action_icon: node.data.props.action_icon,
     action_bgcol: node.data.props.action_bgcol,
     action_bordercol: node.data.props.action_bordercol,
@@ -182,6 +183,7 @@ DropMenu.craft = {
       "action_icon",
       "action_bgcol",
       "action_title",
+      "action_class",
       "action_bordercol",
       "action_textcol",
       "menu_direction",

package/src/components/elements/Image.js

@@ -18,6 +18,7 @@ import {
   OrFormula,
   setAPropGen,
   buildOptions,
+  SettingsRow,
 } from "./utils";
 
 export /**
@@ -38,21 +39,19 @@ const Image = ({ fileid, block, srctype, url, alt, style }) => {
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
-  return (
-    <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
-      {fileid === 0 ? (
-        "No images Available"
-      ) : (
-        <img
-          className={`${style && style.width ? "" : "w-100"} image-widget ${
-            selected ? "selected-node" : ""
-          }`}
-          style={reactifyStyles(style || {})}
-          src={theurl}
-          alt={alt}
-        ></img>
-      )}
-    </span>
+  return fileid === 0 ? (
+    <span>No images Available</span>
+  ) : (
+    <img
+      {...blockProps(block)}
+      ref={(dom) => connect(drag(dom))}
+      className={`${style && style.width ? "" : "w-100"} image-widget ${
+        selected ? "selected-node" : ""
+      }`}
+      style={reactifyStyles(style || {})}
+      src={theurl}
+      alt={alt}
+    ></img>
   );
 };
 
@@ -274,6 +273,17 @@ const ImageSettings = () => {
               </td>
             </tr>
           )}
+          <SettingsRow
+            field={{
+              name: "object-fit",
+              label: "Object fit",
+              type: "select",
+              options: ["none", "fill", "contain", "cover", "scale-down"],
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
           {srctype !== "Upload" && (
             <tr>
               <td colSpan="2">

package/src/components/elements/Link.js

@@ -108,6 +108,7 @@ const LinkSettings = () => {
     link_style: node.data.props.link_style,
     link_size: node.data.props.link_size,
     link_title: node.data.props.link_title,
+    link_class: node.data.props.link_class,
     link_icon: node.data.props.link_icon,
     link_bgcol: node.data.props.link_bgcol,
     link_bordercol: node.data.props.link_bordercol,
@@ -392,6 +393,7 @@ Link.craft = {
       "link_icon",
       "link_style",
       "link_title",
+      "link_class",
       "link_bgcol",
       "link_bordercol",
       "link_textcol",

package/src/components/elements/ViewLink.js

@@ -74,7 +74,7 @@ const ViewLink = ({
   const displabel = label || (names.length > 1 ? names[1] : names[0]);
   return (
     <span
-      className={`${textStyle} ${inModal ? "btn btn-secondary btn-sm" : ""} ${
+      className={`${textStyle} ${
         selected ? "selected-node" : "is-builder-link"
       } ${link_style} ${link_size || ""} ${block ? "d-block" : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -114,6 +114,7 @@ const ViewLinkSettings = () => {
     link_size: node.data.props.link_size,
     link_icon: node.data.props.link_icon,
     link_title: node.data.props.link_title,
+    link_class: node.data.props.link_class,
     textStyle: node.data.props.textStyle,
     link_bgcol: node.data.props.link_bgcol,
     link_bordercol: node.data.props.link_bordercol,
@@ -403,6 +404,7 @@ ViewLink.craft = {
       "link_icon",
       "link_size",
       "link_title",
+      "link_class",
       "link_target_blank",
       "link_bgcol",
       "link_bordercol",

package/src/components/elements/utils.js

@@ -879,16 +879,15 @@ const ConfigField = ({
     });
     onChange && onChange(field.name, v, setProp);
   };
-  let value = or_if_undef(
-    configuration
-      ? configuration[field.name]
-      : isStyle
-      ? props.style[field.name]
-      : subProp
-      ? props[subProp]?.[field.name]
-      : props[field.name],
-    field.default
-  );
+  let stored_value = configuration
+    ? configuration[field.name]
+    : isStyle
+    ? props.style[field.name]
+    : subProp
+    ? props[subProp]?.[field.name]
+    : props[field.name];
+
+  let value = or_if_undef(stored_value, field.default);
   if (valuePostfix)
     value = `${value}`.replaceAll(valuePostfix || "__nosuchstring", "");
   if (field.input_type === "fromtype") field.input_type = null;
@@ -912,8 +911,14 @@ const ConfigField = ({
     typeof field?.attributes?.options === "string"
       ? field.attributes?.options.split(",").map((s) => s.trim())
       : field?.attributes?.options || field.options;
-
-  if (hasSelect && typeof value === "undefined") {
+  if (
+    typeof field.default !== "undefined" &&
+    typeof stored_value === "undefined"
+  ) {
+    useEffect(() => {
+      myOnChange(field.default);
+    }, []);
+  } else if (hasSelect && typeof value === "undefined") {
     //pick first value to mimic html form behaviour
     const options = getOptions();
     let o;
@@ -988,6 +993,8 @@ const ConfigField = ({
         className={`field-${field?.name} form-control`}
         value={value || ""}
         step={0.01}
+        max={or_if_undef(field?.attributes?.max, undefined)}
+        min={or_if_undef(field?.attributes?.min, undefined)}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
@@ -1538,18 +1545,32 @@ const ButtonOrLinkSettingsRows = ({
         ]
       : []),
     values[keyPrefix + "style"] !== "on_page_load" ? (
-      <tr key="btntitle">
-        <td>
-          <label>Hover title</label>
-        </td>
-        <td>
-          <input
-            className="form-control"
-            value={values[keyPrefix + "title"]}
-            onChange={setAProp(keyPrefix + "title")}
-          />
-        </td>
-      </tr>
+      <Fragment>
+        <tr key="btntitle">
+          <td>
+            <label>Hover title</label>
+          </td>
+          <td>
+            <input
+              className="form-control linkoractiontitle"
+              value={values[keyPrefix + "title"]}
+              onChange={setAProp(keyPrefix + "title")}
+            />
+          </td>
+        </tr>
+        <tr key="btnclass">
+          <td>
+            <label>Class</label>
+          </td>
+          <td>
+            <input
+              className="form-control linkoractionclass"
+              value={values[keyPrefix + "class"]}
+              onChange={setAProp(keyPrefix + "class")}
+            />
+          </td>
+        </tr>
+      </Fragment>
     ) : null,
   ];
 };

package/src/components/storage.js

@@ -194,6 +194,7 @@ const layoutToNodes = (
           action_size={segment.action_size || ""}
           action_icon={segment.action_icon || ""}
           action_title={segment.action_title || ""}
+          action_class={segment.action_class || ""}
           action_bgcol={segment.action_bgcol || ""}
           action_bordercol={segment.action_bordercol || ""}
           action_textcol={segment.action_textcol || ""}
@@ -202,6 +203,7 @@ const layoutToNodes = (
           step_action_names={segment.step_action_names || ""}
           confirm={segment.confirm}
           spinner={segment.spinner}
+          is_submit_action={segment.is_submit_action}
           configuration={segment.configuration || {}}
           block={segment.block || false}
           minRole={segment.minRole || 10}
@@ -254,6 +256,7 @@ const layoutToNodes = (
               : segment.fullPageWidth
           }
           bgFileId={segment.bgFileId}
+          bgField={segment.bgField}
           imageSize={segment.imageSize || "contain"}
           imgResponsiveWidths={segment.imgResponsiveWidths}
           bgType={segment.bgType || "None"}
@@ -543,6 +546,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
           display: node.props.display,
           fullPageWidth: node.props.fullPageWidth || false,
           bgFileId: node.props.bgFileId,
+          bgField: node.props.bgField,
           bgType: node.props.bgType,
           imageSize: node.props.imageSize,
           imgResponsiveWidths: node.props.imgResponsiveWidths,
@@ -682,12 +686,14 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
         action_title: node.props.action_title,
+        action_class: node.props.action_class,
         action_bgcol: node.props.action_bgcol,
         action_bordercol: node.props.action_bordercol,
         action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
         spinner: node.props.spinner,
+        is_submit_action: node.props.is_submit_action,
         nsteps: node.props.nsteps,
         step_only_ifs: node.props.step_only_ifs,
         step_action_names: node.props.step_action_names,
@@ -700,7 +706,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         block: node.props.block,
         configuration: node.props.configuration,
         confirm: node.props.confirm,
-        spinner: node.props.spinner,
+        is_submit_action: node.props.is_submit_action,
         action_name: node.props.name,
         ...(node.props.name !== "Clear" && node.props.action_row_variable
           ? {
@@ -713,7 +719,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
         action_title: node.props.action_title,
+        action_class: node.props.action_class,
         action_bgcol: node.props.action_bgcol,
+        spinner: node.props.spinner,
         action_bordercol: node.props.action_bordercol,
         action_textcol: node.props.action_textcol,
         nsteps: node.props.nsteps,