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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.2-beta.7",
+  "version": "1.1.2-beta.8",
   "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.8",
     "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/elements/Action.js

@@ -113,6 +113,7 @@ const ActionSettings = () => {
     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,7 @@ 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 +315,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/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))}

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;

package/src/components/storage.js

@@ -202,6 +202,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}
@@ -688,6 +689,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         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 +702,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
           ? {