@saltcorn/builder 1.1.3-beta.9 → 1.1.3-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.3-beta.9",
+  "version": "1.1.3-rc.0",
   "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.3-beta.9",
+    "@saltcorn/common-code": "1.1.3-rc.0",
     "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

@@ -72,10 +72,10 @@ const Action = ({
               color: action_textcol || "#000000",
             }
           : action_style === "on_page_load"
-          ? {
-              border: "1px red dashed",
-            }
-          : {}
+            ? {
+                border: "1px red dashed",
+              }
+            : {}
       }
     >
       <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
@@ -134,7 +134,6 @@ const ActionSettings = () => {
     step_action_names,
     spinner,
     is_submit_action,
-    
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
@@ -149,13 +148,13 @@ const ActionSettings = () => {
   const cfg_link = (options.triggerActions || []).includes(name)
     ? `/actions/configure/${encodeURIComponent(name)}`
     : name === "Multi-step action" &&
-      (options.triggerActions || []).includes(
-        step_action_names?.[use_setting_action_n]
-      )
-    ? `/actions/configure/${encodeURIComponent(
-        step_action_names?.[use_setting_action_n]
-      )}`
-    : "";
+        (options.triggerActions || []).includes(
+          step_action_names?.[use_setting_action_n]
+        )
+      ? `/actions/configure/${encodeURIComponent(
+          step_action_names?.[use_setting_action_n]
+        )}`
+      : "";
   return (
     <div>
       <table className="w-100">
@@ -393,6 +392,7 @@ const ActionSettings = () => {
                 type="text"
                 className="form-control text-to-display"
                 value={step_only_ifs?.[use_setting_action_n] || ""}
+                spellCheck={false}
                 onChange={(e) => {
                   if (!e.target) return;
                   const value = e.target.value;

package/src/components/elements/Aggregation.js

@@ -83,10 +83,10 @@ const AggregationSettings = () => {
     stat === "Percent true" || stat === "Percent false"
       ? "Float"
       : stat === "Count" || stat === "CountUnique"
-      ? "Integer"
-      : stat === "Array_Agg"
-      ? "Array"
-      : targetFieldType;
+        ? "Integer"
+        : stat === "Array_Agg"
+          ? "Array"
+          : targetFieldType;
   const fvs = options.agg_fieldview_options[outcomeType];
 
   const [fetchedCfgFields, setFetchedCfgFields] = useState([]);
@@ -107,7 +107,7 @@ const AggregationSettings = () => {
           agg_outcome_type: outcomeType,
           agg_fieldview,
           agg_field: targetField?.name,
-          mode: options?.mode
+          mode: options?.mode,
         }),
       }
     )
@@ -233,7 +233,9 @@ const AggregationSettings = () => {
                 type="text"
                 className="form-control"
                 value={aggwhere}
+                spellCheck={false}
                 onChange={setAProp("aggwhere")}
+                onInput={(e) => validate_expression_elem($(e.target))}
               />
             </td>
           </tr>

package/src/components/elements/Container.js

@@ -629,6 +629,7 @@ const ContainerSettings = () => {
                       value={imgResponsiveWidths}
                       className="form-control"
                       onChange={setAProp("imgResponsiveWidths")}
+                      spellCheck={false}
                     />
                     <small>
                       <i>
@@ -951,7 +952,9 @@ const ContainerSettings = () => {
                   type="text"
                   className="form-control text-to-display"
                   value={showIfFormula}
+                  spellCheck={false}
                   onChange={setAProp("showIfFormula")}
+                  onInput={(e) => validate_expression_elem($(e.target))}
                 />
                 <div style={{ marginTop: "-5px" }}>
                   <small className="text-muted font-monospace">
@@ -1048,6 +1051,7 @@ const ContainerSettings = () => {
           <input
             type="text"
             className="form-control"
+            spellCheck={false}
             value={url}
             onChange={setAProp("url")}
           />
@@ -1097,6 +1101,7 @@ const ContainerSettings = () => {
             type="text"
             className="form-control text-to-display"
             value={customId}
+            spellCheck={false}
             onChange={setAProp("customId")}
           />
         </OrFormula>
@@ -1108,6 +1113,7 @@ const ContainerSettings = () => {
             type="text"
             className="form-control text-to-display"
             value={customClass}
+            spellCheck={false}
             onChange={setAProp("customClass")}
           />
         </OrFormula>
@@ -1120,6 +1126,7 @@ const ContainerSettings = () => {
           className="text-to-display form-control"
           value={customCSS}
           onChange={setAProp("customCSS")}
+          spellCheck={false}
         ></textarea>
       </div>
     </Accordion>

package/src/components/elements/Image.js

@@ -33,19 +33,28 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Image = ({ fileid, block, srctype, url, alt, style }) => {
+const Image = ({ fileid, block, srctype, url, alt, style, customClass }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
   return fileid === 0 ? (
-    <span>No images Available</span>
+    <span
+      {...blockProps(block)}
+      className={`${style && style.width ? "" : "w-100"} ${customClass || ""} image-widget ${
+        selected ? "selected-node" : ""
+      }`}
+      ref={(dom) => connect(drag(dom))}
+      style={reactifyStyles(style || {})}
+    >
+      No images Available
+    </span>
   ) : (
     <img
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
-      className={`${style && style.width ? "" : "w-100"} image-widget ${
+      className={`${style && style.width ? "" : "w-100"} ${customClass || ""} image-widget ${
         selected ? "selected-node" : ""
       }`}
       style={reactifyStyles(style || {})}
@@ -72,6 +81,7 @@ const ImageSettings = () => {
     block: node.data.props.block,
     style: node.data.props.style,
     isFormula: node.data.props.isFormula,
+    customClass: node.data.props.customClass,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
   }));
   const {
@@ -85,6 +95,7 @@ const ImageSettings = () => {
     isFormula,
     filepath,
     imgResponsiveWidths,
+    customClass,
     style,
   } = node;
   const options = useContext(optionsCtx);
@@ -185,6 +196,7 @@ const ImageSettings = () => {
                   <input
                     type="text"
                     className="form-control"
+                    spellCheck={false}
                     value={url}
                     onChange={setAProp("url")}
                   />
@@ -262,6 +274,7 @@ const ImageSettings = () => {
                 <input
                   type="text"
                   value={imgResponsiveWidths}
+                  spellCheck={false}
                   className="form-control"
                   onChange={setAProp("imgResponsiveWidths")}
                 />
@@ -284,6 +297,18 @@ const ImageSettings = () => {
             setProp={setProp}
             isStyle={true}
           />
+          <tr>
+            <td>Class</td>
+            <td>
+              <input
+                type="text"
+                value={customClass}
+                className="form-control"
+                onChange={setAProp("customClass")}
+                spellCheck={false}
+              />
+            </td>
+          </tr>
           {srctype !== "Upload" && (
             <tr>
               <td colSpan="2">
@@ -321,6 +346,7 @@ Image.craft = {
       { name: "srctype", default: "File" },
       { name: "fileid", default: 0 },
       "field",
+      "customClass",
       "block",
       "imgResponsiveWidths",
       { name: "style", default: {} },

package/src/components/elements/JoinField.js

@@ -449,6 +449,7 @@ const JoinFieldSettings = () => {
                 name="join_field"
                 data-fieldname="join_field"
                 readOnly="readonly"
+                spellCheck={false}
                 value={name}
               />
             </td>

package/src/components/elements/Link.js

@@ -190,6 +190,7 @@ const LinkSettings = () => {
                 <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
                   <input
                     type="text"
+                    spellCheck={false}
                     className="form-control "
                     value={url}
                     onChange={setAProp("url")}
@@ -269,6 +270,7 @@ const LinkSettings = () => {
               <td>
                 <input
                   type="text"
+                  spellCheck={false}
                   className="form-control"
                   value={view_state_fml}
                   onChange={setAProp("view_state_fml")}
@@ -348,8 +350,8 @@ const LinkSettings = () => {
                     link_src === "Page"
                       ? url.replace("/page/", `/pageedit/edit/`)
                       : link_src === "View"
-                      ? url.replace("/view/", `/viewedit/config/`)
-                      : ""
+                        ? url.replace("/view/", `/viewedit/config/`)
+                        : ""
                   }
                 >
                   Configure this {link_src}

package/src/components/elements/Tabs.js

@@ -121,8 +121,8 @@ const Tabs = ({
                     (typeof titles[ix].label === "undefined"
                       ? titles[ix]
                       : titles[ix].label === ""
-                      ? "(empty)"
-                      : titles[ix].label)}
+                        ? "(empty)"
+                        : titles[ix].label)}
                 </a>
               </li>
             );
@@ -331,6 +331,7 @@ const TabsSettings = () => {
                     <td>
                       <input
                         type="text"
+                        spellCheck={false}
                         className="form-control"
                         value={tabId}
                         onChange={setAProp("tabId")}
@@ -398,6 +399,7 @@ const TabsSettings = () => {
                   type="text"
                   className="form-control text-to-display"
                   value={titles[use_setting_tab_n] || ""}
+                  spellCheck={false}
                   onChange={(e) => {
                     if (!e.target) return;
                     const value = e.target.value;
@@ -417,6 +419,7 @@ const TabsSettings = () => {
                   <td colSpan={2}>
                     <input
                       type="text"
+                      spellCheck={false}
                       className="form-control text-to-display"
                       value={showif?.[use_setting_tab_n] || ""}
                       onChange={(e) => {

package/src/components/elements/Text.js

@@ -85,6 +85,7 @@ const Text = ({
   icon,
   font,
   style,
+  customClass,
 }) => {
   const {
     connectors: { connect, drag },
@@ -103,7 +104,7 @@ const Text = ({
     <div
       className={`${
         isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
-      } ${Array.isArray(textStyle) ? textStyle.join(" ") : textStyle} is-text ${
+      } ${customClass || ""} ${Array.isArray(textStyle) ? textStyle.join(" ") : textStyle} is-text ${
         isFormula.text ? "font-monospace" : ""
       } ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -160,6 +161,7 @@ const TextSettings = () => {
     isFormula: node.data.props.isFormula,
     textStyle: node.data.props.textStyle,
     labelFor: node.data.props.labelFor,
+    customClass: node.data.props.customClass,
     icon: node.data.props.icon,
     font: node.data.props.font,
     style: node.data.props.style,
@@ -175,6 +177,7 @@ const TextSettings = () => {
     icon,
     font,
     style,
+    customClass,
   } = node;
   const { mode, fields, icons } = useContext(optionsCtx);
   const setAProp = setAPropGen(setProp);
@@ -204,6 +207,7 @@ const TextSettings = () => {
           className="text-to-display form-control"
           value={text}
           onChange={setAProp("text")}
+          spellCheck={false}
         />
       ) : (
         <ErrorBoundary>
@@ -298,6 +302,18 @@ const TextSettings = () => {
             setProp={setProp}
             isStyle={true}
           />
+          <tr>
+            <td>Class</td>
+            <td>
+              <input
+                type="text"
+                value={customClass}
+                className="form-control"
+                onChange={setAProp("customClass")}
+                spellCheck={false}
+              />
+            </td>
+          </tr>
           <SettingsRow
             field={{
               name: "color",

package/src/components/elements/View.js

@@ -384,6 +384,7 @@ const ViewSettings = () => {
             className="viewlink-label form-control"
             value={extra_state_fml}
             onChange={setAProp("extra_state_fml")}
+            spellCheck={false}
           />
           {errorString ? (
             <small className="text-danger font-monospace d-block">

package/src/components/elements/ViewLink.js

@@ -184,7 +184,7 @@ const ViewLinkSettings = () => {
     relationsCache[options.tableName][safeViewName]
   );
   let safeRelation = null;
-  if (relation) {
+  if (relation && subView) {
     const subView = views.find((view) => view.name === safeViewName);
     const subTbl = tables.find((tbl) => tbl.id === subView.table_id);
     safeRelation = new Relation(
@@ -315,6 +315,7 @@ const ViewLinkSettings = () => {
                 className="viewlink-label form-control"
                 value={extra_state_fml}
                 onChange={setAProp("extra_state_fml")}
+                spellCheck={false}
               />
               {errorString ? (
                 <small className="text-danger font-monospace d-block">

package/src/components/elements/utils.js

@@ -195,6 +195,7 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
             type="text"
             className="form-control text-to-display"
             value={node[nodekey] || ""}
+            spellCheck={false}
             onChange={(e) => {
               if (e.target) {
                 const target_value = e.target.value;
@@ -882,10 +883,10 @@ const ConfigField = ({
   let stored_value = configuration
     ? configuration[field.name]
     : isStyle
-    ? props.style[field.name]
-    : subProp
-    ? props[subProp]?.[field.name]
-    : props[field.name];
+      ? props.style[field.name]
+      : subProp
+        ? props[subProp]?.[field.name]
+        : props[field.name];
 
   let value = or_if_undef(stored_value, field.default);
   if (valuePostfix)
@@ -955,6 +956,7 @@ const ConfigField = ({
             type="text"
             className={`field-${field?.name} form-control`}
             value={value || ""}
+            spellCheck={false}
             onChange={(e) => e.target && myOnChange(e.target.value)}
           />
         );
@@ -1016,6 +1018,7 @@ const ConfigField = ({
         type="text"
         className={`field-${field?.name} form-control`}
         value={value}
+        spellCheck={false}
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
@@ -1035,8 +1038,8 @@ const ConfigField = ({
           o.name && o.label
             ? { value: o.name, label: o.label }
             : o.value && o.label
-            ? { value: o.value, label: o.label }
-            : { value: o, label: o }
+              ? { value: o.value, label: o.label }
+              : { value: o, label: o }
         );
         return (
           <Select
@@ -1133,8 +1136,8 @@ const ConfigField = ({
               configuration
                 ? configuration[field.name + "Unit"]
                 : isStyle || subProp
-                ? styleDim
-                : props[field.name + "Unit"],
+                  ? styleDim
+                  : props[field.name + "Unit"],
               "px"
             )}
             autoable={field.autoable}

package/src/components/storage.js

@@ -160,6 +160,7 @@ const layoutToNodes = (
           inline={segment.inline || false}
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
+          customClass={segment.customClass || ""}
           style={segment.style || {}}
           icon={segment.icon}
           font={segment.font || ""}
@@ -580,6 +581,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         textStyle: node.props.textStyle,
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,
+        customClass: node.props.customClass,
         style: node.props.style,
         icon: node.props.icon,
         font: node.props.font,