@saltcorn/builder 0.8.5-beta.8 → 0.8.5-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.8.5-beta.8",
+  "version": "0.8.5-rc.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/elements/Action.js

@@ -67,6 +67,10 @@ const Action = ({
               borderColor: action_bordercol || "#000000",
               color: action_textcol || "#000000",
             }
+          : action_style === "on_page_load"
+          ? {
+              border: "1px red dashed",
+            }
           : {}
       }
     >
@@ -107,6 +111,7 @@ const ActionSettings = () => {
     confirm,
     configuration,
     action_label,
+    action_style,
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
@@ -140,26 +145,29 @@ const ActionSettings = () => {
               </select>
             </td>
           </tr>
-          <tr>
-            <td colSpan="2">
-              <label>Label (leave blank for default)</label>
-              <OrFormula
-                nodekey="action_label"
-                {...{ setProp, isFormula, node }}
-              >
-                <input
-                  type="text"
-                  className="form-control"
-                  value={action_label}
-                  onChange={setAProp("action_label")}
-                />
-              </OrFormula>
-            </td>
-          </tr>
+          {action_style !== "on_page_load" ? (
+            <tr>
+              <td colSpan="2">
+                <label>Label (leave blank for default)</label>
+                <OrFormula
+                  nodekey="action_label"
+                  {...{ setProp, isFormula, node }}
+                >
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={action_label}
+                    onChange={setAProp("action_label")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+          ) : null}
           <ButtonOrLinkSettingsRows
             setProp={setProp}
             keyPrefix="action_"
             values={node}
+            allowRunOnLoad={true}
           />
           <MinRoleSettingRow minRole={minRole} setProp={setProp} />
         </tbody>
@@ -176,8 +184,9 @@ const ActionSettings = () => {
           <label className="form-check-label">User confirmation?</label>
         </div>
       ) : null}
-      <BlockSetting block={block} setProp={setProp} />
-
+      {action_style !== "on_page_load" ? (
+        <BlockSetting block={block} setProp={setProp} />
+      ) : null}
       {cfgFields ? (
         <ConfigForm
           fields={cfgFields}

package/src/components/elements/utils.js

@@ -861,7 +861,7 @@ const ConfigField = ({
         styleVal = "";
         styleDim = "auto";
       } else if (isStyle && value && typeof value === "string") {
-        const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
+        const matches = value.match(/^([-]?[0-9]+\.?[0-9]*)(.*)/);
         if (matches) {
           styleVal = matches[1];
           styleDim = matches[2];
@@ -1110,6 +1110,7 @@ const ButtonOrLinkSettingsRows = ({
   values,
   linkFirst = false,
   linkIsBlank = false,
+  allowRunOnLoad = false,
 }) => {
   const setAProp = setAPropGen(setProp);
   const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
@@ -1145,42 +1146,49 @@ const ButtonOrLinkSettingsRows = ({
           {!linkFirst ? (
             <option value={addBtnClass("btn-link")}>Link</option>
           ) : null}
+          {!linkFirst ? (
+            <option value="on_page_load">Run on Page Load</option>
+          ) : null}
         </select>
       </td>
     </tr>,
-    <tr key="btnsz">
-      <td>
-        <label>Size</label>
-      </td>
-      <td>
-        <select
-          className="form-control form-select"
-          value={values[keyPrefix + "size"]}
-          onChange={setAProp(keyPrefix + "size")}
-        >
-          <option value="">Standard</option>
-          <option value="btn-lg">Large</option>
-          <option value="btn-sm">Small</option>
-          <option value="btn-block">Block</option>
-          <option value="btn-block btn-lg">Large block</option>
-        </select>
-      </td>
-    </tr>,
-    <tr key="btnicon">
-      <td>
-        <label>Icon</label>
-      </td>
-      <td>
-        <FontIconPicker
-          value={values[keyPrefix + "icon"]}
-          onChange={(value) =>
-            setProp((prop) => (prop[keyPrefix + "icon"] = value))
-          }
-          isMulti={false}
-          icons={faIcons}
-        />
-      </td>
-    </tr>,
+    values[keyPrefix + "style"] !== "on_page_load" ? (
+      <tr key="btnsz">
+        <td>
+          <label>Size</label>
+        </td>
+        <td>
+          <select
+            className="form-control form-select"
+            value={values[keyPrefix + "size"]}
+            onChange={setAProp(keyPrefix + "size")}
+          >
+            <option value="">Standard</option>
+            <option value="btn-lg">Large</option>
+            <option value="btn-sm">Small</option>
+            <option value="btn-block">Block</option>
+            <option value="btn-block btn-lg">Large block</option>
+          </select>
+        </td>
+      </tr>
+    ) : null,
+    values[keyPrefix + "style"] !== "on_page_load" ? (
+      <tr key="btnicon">
+        <td>
+          <label>Icon</label>
+        </td>
+        <td>
+          <FontIconPicker
+            value={values[keyPrefix + "icon"]}
+            onChange={(value) =>
+              setProp((prop) => (prop[keyPrefix + "icon"] = value))
+            }
+            isMulti={false}
+            icons={faIcons}
+          />
+        </td>
+      </tr>
+    ) : null,
     ...(values[keyPrefix + "style"] === addBtnClass("btn-custom-color")
       ? [
           <tr key="btnbgcol">