@saltcorn/builder 1.4.0-beta.1 → 1.4.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.11",
   "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.4.0-beta.1",
+    "@saltcorn/common-code": "1.4.0-beta.11",
     "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

@@ -114,6 +114,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,
+    run_async: node.data.props.run_async,
     is_submit_action: node.data.props.is_submit_action,
   }));
   const {
@@ -134,6 +135,7 @@ const ActionSettings = () => {
     step_only_ifs,
     step_action_names,
     spinner,
+    run_async,
     is_submit_action,
   } = node;
   const options = useContext(optionsCtx);
@@ -349,6 +351,16 @@ const ActionSettings = () => {
         />
         <label className="form-check-label">Spinner on click</label>
       </div>
+      <div className="form-check">
+        <input
+          className="form-check-input"
+          name="block"
+          type="checkbox"
+          checked={run_async}
+          onChange={setAProp("run_async", { checked: true })}
+        />
+        <label className="form-check-label">Run async</label>
+      </div>
       {action_style !== "on_page_load" ? (
         <BlockSetting block={block} setProp={setProp} />
       ) : null}

package/src/components/elements/utils.js

@@ -895,6 +895,7 @@ const ConfigField = ({
       } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v, setProp);
+    apply_showif();
   };
   let stored_value = configuration
     ? configuration[field.name]
@@ -945,6 +946,19 @@ const ConfigField = ({
       }, []);
   }
 
+  const intDispFn = () => (
+    <input
+      type="number"
+      className={`field-${field?.name} form-control`}
+      step={field.step || 1}
+      min={field.min}
+      max={field.max}
+      name={field?.name}
+      value={value || ""}
+      onChange={(e) => e.target && myOnChange(e.target.value)}
+    />
+  );
+
   const dispatch = {
     String() {
       if (field.attributes?.options) {
@@ -967,7 +981,26 @@ const ConfigField = ({
             ))}
           </select>
         );
-      } else
+      } 
+      else if (field.attributes?.calcOptions) {        
+        return (
+          <select
+            className={`field-${field?.name} form-control form-select`}
+            name={field?.name}
+            value={value || ""}
+            onChange={(e) => e.target && myOnChange(e.target.value)}
+            onBlur={(e) => e.target && myOnChange(e.target.value)}
+            data-calc-options={encodeURIComponent(
+              JSON.stringify(field.attributes.calcOptions)
+            )}
+            autocomplete= {"off"}
+            data-fieldname={field?.name}
+          >
+            <option value=""></option>
+          </select>
+        );
+      }
+      else
         return (
           <input
             type="text"
@@ -997,18 +1030,8 @@ const ConfigField = ({
           ))}
       </select>
     ),
-    Integer: () => (
-      <input
-        type="number"
-        className={`field-${field?.name} form-control`}
-        step={field.step || 1}
-        min={field.min}
-        max={field.max}
-        name={field?.name}
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
+    Integer: intDispFn,
+    number: intDispFn,
     Float: () => (
       <input
         type="number"
@@ -1093,6 +1116,7 @@ const ConfigField = ({
             name={field?.name}
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
+            data-fieldname={field?.name}
           >
             {(field.options || []).map((o, ix) =>
               o.name && o.label ? (

package/src/components/storage.js

@@ -204,6 +204,7 @@ const layoutToNodes = (
           step_action_names={segment.step_action_names || ""}
           confirm={segment.confirm}
           spinner={segment.spinner}
+          run_async={segment.run_async || false}
           is_submit_action={segment.is_submit_action}
           configuration={segment.configuration || {}}
           block={segment.block || false}
@@ -702,6 +703,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         confirm: node.props.confirm,
         spinner: node.props.spinner,
         is_submit_action: node.props.is_submit_action,
+        run_async: node.props.run_async,
         nsteps: node.props.nsteps,
         step_only_ifs: node.props.step_only_ifs,
         step_action_names: node.props.step_action_names,
@@ -715,6 +717,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         configuration: node.props.configuration,
         confirm: node.props.confirm,
         is_submit_action: node.props.is_submit_action,
+        run_async: node.props.run_async,
         action_name: node.props.name,
         ...(node.props.name !== "Clear" && node.props.action_row_variable
           ? {