@saltcorn/builder 1.6.0-alpha.8 → 1.6.0-beta.1

package/src/components/elements/utils.js

@@ -748,12 +748,16 @@ export const fetchFieldPreview =
       ...(args.configuration || {}),
       ...(changes.configuration || {}),
     };
+    const body = { configuration };
+    if (options.mode === "show" && options.current_filter_state?.id) {
+      body.row_id = options.current_filter_state.id;
+    }
     fetchPreview({
       options,
       node_id,
       setPreviews,
       url: `/field/preview/${options.tableName}/${name}/${fieldview}`,
-      body: { configuration },
+      body,
     });
   };
 
@@ -932,6 +936,95 @@ const ColorInput = ({ value, onChange }) =>
     </button>
   );
 
+const CodeFieldWithModal = ({ value, onChange, setProp, mode, label, hideLabel }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const { t } = useTranslation();
+  return (
+    <Fragment>
+      {!hideLabel && (
+        <label>
+          {t(label)}{" "}
+          <i
+            className="fas fa-external-link-alt ms-1"
+            style={{ cursor: "pointer" }}
+            onClick={() => setModalOpen(true)}
+            title={t("Open code popup")}
+          ></i>
+        </label>
+      )}
+      {hideLabel && (
+        <i
+          className="fas fa-external-link-alt ms-1"
+          style={{ cursor: "pointer" }}
+          onClick={() => setModalOpen(true)}
+          title={t("Open code popup")}
+        ></i>
+      )}
+      <MultiLineCodeEditor
+        setProp={setProp}
+        value={value}
+        onChange={onChange}
+        mode={mode}
+      />
+      {modalOpen ? (
+        <div
+          className={`modal fade show`}
+          style={{ display: "block", zIndex: 1055 }}
+          tabIndex={-1}
+          role="dialog"
+          aria-labelledby="codeModalLabel"
+          aria-hidden={false}
+        >
+          <div
+            className="modal-backdrop fade show"
+            style={{ zIndex: 1050 }}
+            onClick={() => setModalOpen(false)}
+            aria-hidden="true"
+          />
+          <div
+            className="modal-dialog modal-dialog-centered modal-lg"
+            role="document"
+            style={{ zIndex: 1060 }}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="modal-content code-modal">
+              <div className="modal-header">
+                <h5 className="modal-title" id="codeModalLabel">
+                  {t(label)}
+                </h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  aria-label="Close"
+                  onClick={() => setModalOpen(false)}
+                />
+              </div>
+              <div className="modal-body">
+                <MultiLineCodeEditor
+                  setProp={setProp}
+                  value={value}
+                  onChange={onChange}
+                  isModalEditor
+                  mode={mode}
+                />
+              </div>
+              <div className="modal-footer">
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={() => setModalOpen(false)}
+                >
+                  {t("Close")}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </Fragment>
+  );
+};
+
 export /**
  * @param {object} props
  * @param {object[]} props.fields
@@ -953,7 +1046,6 @@ const ConfigForm = ({
   onChange,
   tableName,
   fieldName,
-  openPopup
 }) => (
   <div className="form-namespace">
     {fields.map((f, ix) => {
@@ -968,7 +1060,7 @@ const ConfigForm = ({
       }
       return (
         <div key={ix} className="builder-config-field" data-field-name={f.name}>
-          {!isCheckbox(f) ? (
+          {!isCheckbox(f) && f.input_type !== "code" ? (
             <label>
               {f.label || f.name}
               {f.help ? (
@@ -978,7 +1070,7 @@ const ConfigForm = ({
                   table_name={tableName}
                 />
               ) : null}
-              {" "}{openPopup && <i class="fas fa-external-link-alt " onClick={openPopup}></i>}
+              {" "}
             </label>
           ) : null}
           <ConfigField
@@ -1045,7 +1137,7 @@ const ConfigField = ({
    */
   const options = React.useContext(optionsCtx);
 
-  const myOnChange = (v0) => {
+  const myOnChange = (v0, throttleRate) => {
     const v = valuePostfix && (v0 || v0 === 0) ? v0 + valuePostfix : v0;
     setProp((prop) => {
       if (setter) setter(prop, field.name, v);
@@ -1059,7 +1151,7 @@ const ConfigField = ({
         if (!prop[subProp]) prop[subProp] = {};
         prop[subProp][field.name] = v;
       } else prop[field.name] = v;
-    });
+    }, throttleRate);
     onChange && onChange(field.name, v, setProp);
     apply_showif();
   };
@@ -1100,7 +1192,7 @@ const ConfigField = ({
     typeof stored_value === "undefined"
   ) {
     useEffect(() => {
-      myOnChange(field.default);
+      myOnChange(field.default, 500);
     }, []);
   } else if (hasSelect && typeof value === "undefined") {
     //pick first value to mimic html form behaviour
@@ -1108,7 +1200,7 @@ const ConfigField = ({
     let o;
     if (options && (o = options[0]))
       useEffect(() => {
-        myOnChange(typeof o === "string" ? o : o.value || o.name || o);
+        myOnChange(typeof o === "string" ? o : o.value || o.name || o, 500);
       }, []);
   }
 
@@ -1233,25 +1325,33 @@ const ConfigField = ({
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
-    code: () =>
-      field?.attributes?.expression_type === "row" ||
-      field?.attributes?.expression_type === "query" ? (
-        <textarea
-          rows="6"
-          type="text"
-          className={`field-${field?.name} form-control`}
-          value={value}
-          name={field?.name}
-          onChange={(e) => e.target && myOnChange(e.target.value)}
-          spellCheck={false}
-        />
-      ) : (
-        <MultiLineCodeEditor
-          setProp={setProp}
+    code: () => {
+      if (
+        field?.attributes?.expression_type === "row" ||
+        field?.attributes?.expression_type === "query"
+      ) {
+        return (
+          <textarea
+            rows="6"
+            type="text"
+            className={`field-${field?.name} form-control`}
+            value={value}
+            name={field?.name}
+            onChange={(e) => e.target && myOnChange(e.target.value)}
+            spellCheck={false}
+          />
+        );
+      }
+      return (
+        <CodeFieldWithModal
           value={value}
           onChange={myOnChange}
+          setProp={setProp}
+          mode={field?.attributes?.mode}
+          label={field?.label || field?.name || "Code"}
         />
-      ),
+      );
+    },
     select: () => {
       if (field.class?.includes?.("selectizable")) {
         const seloptions = field.options.map((o, ix) =>
@@ -1350,7 +1450,9 @@ const ConfigField = ({
                 e?.target &&
                 myOnChange(
                   isStyle || subProp
-                    ? `${e.target.value}${styleDim || "px"}`
+                    ? e.target.value === ""
+                      ? ""
+                      : `${e.target.value}${styleDim || "px"}`
                     : e.target.value
                 )
               }
@@ -1498,7 +1600,7 @@ const SettingsRow = ({
   valuePostfix,
 }) => {
   const { t } = useTranslation();
-  const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
+  const fullWidth = ["String", "Bool", "textarea"].includes(field.type) || field.input_type === "code";
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
     <OrFormula
@@ -1528,7 +1630,7 @@ const SettingsRow = ({
     <tr>
       {fullWidth ? (
         <td colSpan="2">
-          {needLabel && <label>{field.label}</label>}
+          {needLabel && field.input_type !== "code" && <label>{field.label}</label>}
           {inner}
           {field.sublabel ? (
             <i
@@ -1722,9 +1824,10 @@ const ButtonOrLinkSettingsRows = ({
         <td>
           <FontIconPicker
             value={values[keyPrefix + "icon"]}
-            onChange={(value) =>
-              setProp((prop) => (prop[keyPrefix + "icon"] = value))
-            }
+            onChange={(value) => {
+              if ((value || "") !== (values[keyPrefix + "icon"] || ""))
+                setProp((prop) => (prop[keyPrefix + "icon"] = value), 500);
+            }}
             isMulti={false}
             icons={faIcons || []}
           />

package/src/components/storage.js

@@ -30,6 +30,7 @@ import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
 import { Container } from "./elements/Container";
+import { Prompt } from "./elements/Prompt";
 import { rand_ident } from "./elements/utils";
 
 /**
@@ -80,6 +81,7 @@ const allElements = [
   Table,
   ListColumn,
   ListColumns,
+  Prompt,
 ];
 
 export /**
@@ -106,7 +108,7 @@ const layoutToNodes = (
    * @returns {Element|Text|View|Action|Tabs|Columns}
    */
   function toTag(segment, ix) {
-    if (!segment) return <Empty key={ix} />;
+    if (!segment) return null;
 
     if (
       (segment.type === "card" || segment.type === "container") &&
@@ -183,6 +185,8 @@ const layoutToNodes = (
           style={segment.style || {}}
           icon={segment.icon}
           font={segment.font || ""}
+          mobileFontSize={segment.mobileFontSize}
+          tabletFontSize={segment.tabletFontSize}
         />
       );
     } else if (segment.type === "view") {
@@ -318,7 +322,13 @@ const layoutToNodes = (
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
           aligns={segment.aligns}
-          setting_col_n={1}
+          mobileAligns={segment.mobileAligns}
+          tabletAligns={segment.tabletAligns}
+          mobileWidth={segment.mobileWidth}
+          tabletWidth={segment.tabletWidth}
+          mobileHeight={segment.mobileHeight}
+          tabletHeight={segment.tabletHeight}
+          setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
           contents={segment.besides.map(toTag)}
         />
       );
@@ -354,7 +364,13 @@ const layoutToNodes = (
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
             aligns={segment.aligns}
-            setting_col_n={1}
+            mobileAligns={segment.mobileAligns}
+            tabletAligns={segment.tabletAligns}
+            mobileWidth={segment.mobileWidth}
+            tabletWidth={segment.tabletWidth}
+            mobileHeight={segment.mobileHeight}
+            tabletHeight={segment.tabletHeight}
+            setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
             contents={segment.besides.map(toTag)}
           />
         )
@@ -414,8 +430,9 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
   const go = (node) => {
     if (!node) return;
     let customProps = {};
-    if (Object.keys(node?.custom || {}).length)
-      customProps = { _custom: { ...node?.custom } };
+    const mergedCustom = { ...(node?.props?.custom || {}), ...(node?.custom || {}) };
+    if (Object.keys(mergedCustom).length)
+      customProps = { _custom: { ...mergedCustom } };
     const matchElement = allElements.find(
       (e) =>
         e.craft.related &&
@@ -489,6 +506,8 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         style: node.props.style,
         icon: node.props.icon,
         font: node.props.font,
+        mobileFontSize: node.props.mobileFontSize,
+        tabletFontSize: node.props.tabletFontSize,
         ...customProps,
       };
     }
@@ -522,14 +541,21 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
         customClass: node.props.customClass,
-        gx: +node.props.gx,
-        gy: +node.props.gy,
+        gx: node.props.gx != null ? +node.props.gx : undefined,
+        gy: node.props.gy != null ? +node.props.gy : undefined,
         aligns: node.props.aligns,
+        mobileAligns: node.props.mobileAligns,
+        tabletAligns: node.props.tabletAligns,
         vAligns: node.props.vAligns,
         colClasses: node.props.colClasses,
         colStyles: node.props.colStyles,
         style: node.props.style,
+        mobileWidth: node.props.mobileWidth,
+        tabletWidth: node.props.tabletWidth,
+        mobileHeight: node.props.mobileHeight,
+        tabletHeight: node.props.tabletHeight,
         widths,
+        setting_col_n: node.props.setting_col_n,
         ...customProps,
       };
     }

package/src/index.js

@@ -50,8 +50,18 @@
 
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { polyfill } from "mobile-drag-drop";
+import { scrollBehaviourDragImageTranslateOverride } from "mobile-drag-drop/scroll-behaviour";
 import Builder from "./components/Builder";
 
+
+polyfill({
+  forceApply: true,
+  dragImageTranslateOverride: scrollBehaviourDragImageTranslateOverride,
+});
+
+window.addEventListener("touchmove", function () {}, { passive: false });
+
 /**
  * 
  * @param {object} id 

package/src/utils/responsive_utils.js

@@ -0,0 +1,139 @@
+/**
+ * Get the active alignment value for the current preview device.
+ * Used in the builder to show the correct alignment per device.
+ *
+ * @param {string[]} aligns - Desktop alignment array (per column)
+ * @param {string[]} mobileAligns - Mobile alignment array (per column)
+ * @param {string[]} tabletAligns - Tablet alignment array (per column)
+ * @param {number} ix - Column index
+ * @param {string} previewDevice - Current preview device ("desktop"|"tablet"|"mobile")
+ * @returns {string} CSS class like "text-start" or ""
+ */
+export const getAlignClass = (aligns, mobileAligns, tabletAligns, ix, previewDevice) => {
+  const desktop = aligns?.[ix];
+  const tablet = tabletAligns?.[ix];
+  const mobile = mobileAligns?.[ix];
+
+  if (previewDevice === "mobile" && mobile) return `text-${mobile}`;
+  if (previewDevice === "tablet" && tablet) return `text-${tablet}`;
+  if (desktop) return `text-${desktop}`;
+  return "";
+};
+
+/**
+ * Generate Bootstrap responsive text alignment classes for runtime rendering.
+ * Uses mobile-first approach: base class for smallest, then breakpoint overrides.
+ *
+ * @param {string[]} aligns - Desktop alignment array (per column)
+ * @param {string[]} mobileAligns - Mobile alignment array (per column)
+ * @param {string[]} tabletAligns - Tablet alignment array (per column)
+ * @param {number} ix - Column index
+ * @returns {string} Space-separated CSS classes like "text-start text-md-center text-lg-end"
+ */
+export const getAlignClassRuntime = (aligns, mobileAligns, tabletAligns, ix) => {
+  const desktop = aligns?.[ix];
+  const tablet = tabletAligns?.[ix];
+  const mobile = mobileAligns?.[ix];
+
+  if (!mobile && !tablet) {
+    return desktop ? `text-${desktop}` : "";
+  }
+
+  const classes = [];
+
+  const base = mobile || desktop;
+  if (base) classes.push(`text-${base}`);
+  if (tablet && tablet !== base) classes.push(`text-md-${tablet}`);
+  if (desktop && desktop !== (tablet || base))
+    classes.push(`text-lg-${desktop}`);
+  return classes.join(" ");
+};
+
+/**
+ * Get the active value for a per-device setting based on the preview device.
+ * Generic helper for any setting that supports per-device overrides.
+ *
+ * @param {*} desktopValue - Desktop value
+ * @param {*} tabletValue - Tablet override (optional)
+ * @param {*} mobileValue - Mobile override (optional)
+ * @param {string} previewDevice - Current preview device
+ * @returns {*} The active value for the current device
+ */
+export const getDeviceValue = (desktopValue, tabletValue, mobileValue, previewDevice) => {
+  if (previewDevice === "mobile" && mobileValue != null) return mobileValue;
+  if (previewDevice === "tablet" && tabletValue != null) return tabletValue;
+  return desktopValue;
+};
+
+/**
+ * Get the device-specific property name for a given base property.
+ * E.g. getDevicePropName("width", "mobile") => "mobileWidth"
+ *
+ * @param {string} propName - Base property name (e.g. "width", "height")
+ * @param {string} previewDevice - Current preview device ("mobile"|"tablet")
+ * @returns {string} Device-specific property name
+ */
+export const getDevicePropName = (propName, previewDevice) => {
+  const cap = propName.charAt(0).toUpperCase() + propName.slice(1);
+  return previewDevice === "mobile" ? `mobile${cap}` : `tablet${cap}`;
+};
+
+/**
+ * Create a proxied node object that reads width/height from device-specific props
+ * as if they were in the style object. Used by BoxModelEditor for per-device size editing.
+ *
+ * @param {object} node - The Craft.js node props
+ * @param {string} propName - "width" or "height"
+ * @param {string} previewDevice - Current preview device
+ * @returns {object} Proxied node with device value in style[propName]
+ */
+export const getDeviceSizeNode = (node, propName, previewDevice) => {
+  const deviceProp = getDevicePropName(propName, previewDevice);
+  return {
+    ...node,
+    style: { ...(node.style || {}), [propName]: node[deviceProp] || "" },
+  };
+};
+
+/**
+ * Create a proxied setProp function that writes to device-specific props
+ * instead of the style object. Used by BoxModelEditor for per-device size editing.
+ *
+ * @param {function} setProp - The Craft.js setProp function
+ * @param {string} propName - "width" or "height"
+ * @param {string} previewDevice - Current preview device
+ * @returns {function} Proxied setProp that intercepts style writes
+ */
+export const getDeviceSizeSetProp = (setProp, propName, previewDevice) => {
+  const deviceProp = getDevicePropName(propName, previewDevice);
+  return (fn) => {
+    const proxy = { style: {} };
+    fn(proxy);
+    const val = proxy.style[propName];
+    if (val !== undefined) {
+      setProp((prop) => { prop[deviceProp] = val; });
+    }
+  };
+};
+
+/**
+ * Get the display value for width/height in the box model visual,
+ * taking into account the current preview device and sizeWithStyle mode.
+ *
+ * @param {object} node - The Craft.js node props
+ * @param {string} propName - "width" or "height"
+ * @param {string} previewDevice - Current preview device
+ * @param {boolean} sizeWithStyle - Whether size is stored in style object
+ * @returns {string} Display value like "200px" or ""
+ */
+export const getDisplaySize = (node, propName, previewDevice, sizeWithStyle) => {
+  const isDesktop = !previewDevice || previewDevice === "desktop";
+  if (!isDesktop) {
+    const deviceProp = getDevicePropName(propName, previewDevice);
+    if (node[deviceProp]) return node[deviceProp];
+  }
+  if (sizeWithStyle) return (node.style || {})[propName];
+  const val = node[propName];
+  const unit = node[propName + "Unit"];
+  return val ? `${val}${unit || "px"}` : "";
+};