@saltcorn/builder 0.9.1-beta.16 → 0.9.1-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.1-beta.16",
+  "version": "0.9.1-beta.18",
   "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

@@ -283,21 +283,31 @@ const ActionSettings = () => {
       ) : null}
       {name === "Multi-step action" ? (
         <Fragment>
-          <label>#Steps</label>{" "}
-          <input
-            type="number"
-            value={nsteps}
-            className="form-control w-50 d-inline"
-            step="1"
-            min="1"
-            onChange={(e) => {
-              if (!e.target) return;
-              const value = e.target.value;
-              setProp((prop) => {
-                prop.nsteps = value;
-              });
-            }}
-          />
+          <table className="mb-2">
+            <tbody>
+              <tr>
+                <td className="w-50">
+                  <label>#Steps</label>
+                </td>
+                <td>
+                  <input
+                    type="number"
+                    value={nsteps}
+                    className="form-control d-inline"
+                    step="1"
+                    min="1"
+                    onChange={(e) => {
+                      if (!e.target) return;
+                      const value = e.target.value;
+                      setProp((prop) => {
+                        prop.nsteps = value;
+                      });
+                    }}
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
           <ConfigField
             field={{
               name: "setting_action_n",
@@ -326,11 +336,13 @@ const ActionSettings = () => {
               });
             }}
           >
-            {options.actions.map((f, ix) => (
-              <option key={ix} value={f}>
-                {f}
-              </option>
-            ))}
+            {options.actions
+              .filter((f) => !(options.builtInActions || []).includes(f))
+              .map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
           </select>
           <label>Only if... (formula)</label>
           <input

package/src/components/elements/BoxModelEditor.js

@@ -272,7 +272,12 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
           {selectedCategory === "size" && (
             <Fragment>
               <SettingsRow
-                field={{ name: "width", label: "width", type: "DimUnits" }}
+                field={{
+                  name: "width",
+                  label: "width",
+                  type: "DimUnits",
+                  horiz: true,
+                }}
                 node={node}
                 setProp={setProp}
                 isStyle={!!sizeWithStyle}
@@ -282,6 +287,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   name: "min-width",
                   label: "min width",
                   type: "DimUnits",
+                  horiz: true,
                 }}
                 node={node}
                 setProp={setProp}
@@ -292,6 +298,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                   name: "max-width",
                   label: "max width",
                   type: "DimUnits",
+                  horiz: true,
                 }}
                 node={node}
                 setProp={setProp}

package/src/components/elements/Card.js

@@ -99,6 +99,16 @@ const CardSettings = () => {
             node={node}
             setProp={setProp}
           />
+          <SettingsRow
+            field={{
+              label: "Class",
+              name: "class",
+              type: "String",
+              canBeFormula: true,
+            }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsRow
             field={{ label: "Shadow", name: "shadow", type: "Bool" }}
             node={node}
@@ -135,6 +145,7 @@ const fields = [
     canBeFormula: true,
   },
   { label: "URL", name: "url", type: "String", canBeFormula: true },
+  { label: "Class", name: "class", type: "String", canBeFormula: true },
   { label: "Shadow", name: "shadow", type: "Bool" },
   { label: "Save indicator", name: "titleAjaxIndicator", type: "Bool" },
   { label: "No padding", name: "noPadding", type: "Bool" },
@@ -148,6 +159,7 @@ Card.craft = {
   props: {
     title: "",
     url: "",
+    class: "",
     shadow: true,
     isFormula: {},
     style: {},

package/src/components/elements/utils.js

@@ -949,7 +949,7 @@ const ConfigField = ({
             className={`w-${
               styleDim === "auto" ? 100 : 50
             } form-control-sm d-inline dimunit`}
-            vert={true}
+            vert={!field.horiz}
             onChange={(e) => {
               if (!e.target) return;
               const target_value = e.target.value;
@@ -1338,16 +1338,24 @@ export const bstyleopt = (style) => ({
     ></div>
   ),
 });
+
+export const rand_ident = () =>
+  Math.floor(Math.random() * 16777215).toString(16);
+
 export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   const { data } = query.node(nodeId).get();
   const { type, props, nodes } = data;
+  const newProps = { ...props };
+  if (newProps.rndid) {
+    newProps.rndid = rand_ident();
+  }
   const children = (nodes || []).map(recursivelyCloneToElems(query));
   if (data.displayName === "Columns") {
     const cols = ntimes(data.props.ncols, (ix) =>
       recursivelyCloneToElems(query)(data.linkedNodes["Col" + ix])
     );
     return React.createElement(Columns, {
-      ...props,
+      ...newProps,
       ...(typeof ix !== "undefined" ? { key: ix } : {}),
       contents: cols,
     });
@@ -1356,7 +1364,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     return React.createElement(
       Element,
       {
-        ...props,
+        ...newProps,
         canvas: true,
         is: type,
         ...(typeof ix !== "undefined" ? { key: ix } : {}),
@@ -1366,7 +1374,7 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   return React.createElement(
     type,
     {
-      ...props,
+      ...newProps,
       ...(typeof ix !== "undefined" ? { key: ix } : {}),
     },
     children

package/src/components/storage.js

@@ -28,6 +28,7 @@ import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
+import { rand_ident } from "./elements/utils";
 
 /**
  * @param {object} segment
@@ -347,7 +348,6 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
 /**
  * @returns {number}
  */
-const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
 export /**
  * @param {object[]} nodes