@saltcorn/builder 0.5.6-rc.0 → 0.6.0-beta.1

package/src/components/elements/Image.js

@@ -29,8 +29,10 @@ export const ImageSettings = () => {
     fileid: node.data.props.fileid,
     field: node.data.props.field,
     url: node.data.props.url,
+    filepath: node.data.props.filepath,
     srctype: node.data.props.srctype,
-    alt: node.data.props.fieldview,
+    alt: node.data.props.alt,
+    uploadedFiles: node.data.props.uploadedFiles,
     block: node.data.props.block,
     isFormula: node.data.props.isFormula,
   }));
@@ -43,8 +45,47 @@ export const ImageSettings = () => {
     alt,
     block,
     isFormula,
+    filepath,
+    uploadedFiles,
   } = node;
   const options = useContext(optionsCtx);
+  const handleUpload = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const formData = new FormData();
+
+      formData.append("file", e.target.files[0]);
+      formData.append("min_role_read", options.min_role || 1);
+
+      fetch("/files/upload", {
+        method: "POST",
+        body: formData,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then((response) => response.json())
+        .then((result) => {
+          setProp((prop) => {
+            prop.fileid = result.success.id;
+            prop.srctype = "File";
+            prop.uploadedFiles = [
+              ...prop.uploadedFiles,
+              { id: result.success.id, filename: result.success.filename },
+            ];
+          });
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    }
+  };
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <table>
       <tbody>
@@ -63,12 +104,11 @@ export const ImageSettings = () => {
             <select
               value={srctype}
               className="form-control"
-              onChange={(e) =>
-                setProp((prop) => (prop.srctype = e.target.value))
-              }
+              onChange={setAProp("srctype")}
             >
               <option>File</option>
               <option>URL</option>
+              <option>Upload</option>
               {options.mode === "show" && <option>Field</option>}
             </select>
           </td>
@@ -82,15 +122,18 @@ export const ImageSettings = () => {
               <select
                 value={fileid}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => (prop.fileid = e.target.value))
-                }
+                onChange={setAProp("fileid")}
               >
                 {options.images.map((f, ix) => (
                   <option key={ix} value={f.id}>
                     {f.filename}
                   </option>
                 ))}
+                {(uploadedFiles || []).map((uf, ix) => (
+                  <option key={ix} value={uf.id}>
+                    {uf.filename}
+                  </option>
+                ))}
               </select>
             </td>
           </tr>
@@ -106,14 +149,27 @@ export const ImageSettings = () => {
                   type="text"
                   className="form-control"
                   value={url}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.url = e.target.value))
-                  }
+                  onChange={setAProp("url")}
                 />
               </OrFormula>
             </td>
           </tr>
         )}
+        {srctype === "Upload" && (
+          <tr>
+            <td>
+              <label>File</label>
+            </td>
+            <td>
+              <input
+                type="file"
+                className="form-control"
+                value={filepath}
+                onChange={handleUpload}
+              />
+            </td>
+          </tr>
+        )}
         {srctype === "Field" && (
           <tr>
             <td>
@@ -123,9 +179,7 @@ export const ImageSettings = () => {
               <select
                 value={field}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => (prop.field = e.target.value))
-                }
+                onChange={setAProp("field")}
               >
                 {options.fields
                   .filter(
@@ -142,26 +196,30 @@ export const ImageSettings = () => {
             </td>
           </tr>
         )}
-        <tr>
-          <td>
-            <label>Alt text</label>
-          </td>
-          <td>
-            <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
-              <input
-                type="text"
-                className="form-control"
-                value={alt}
-                onChange={(e) => setProp((prop) => (prop.alt = e.target.value))}
-              />
-            </OrFormula>
-          </td>
-        </tr>
-        <tr>
-          <td colSpan="2">
-            <BlockSetting block={block} setProp={setProp} />
-          </td>
-        </tr>
+        {srctype !== "Upload" && (
+          <tr>
+            <td>
+              <label>Alt text</label>
+            </td>
+            <td>
+              <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
+                <input
+                  type="text"
+                  className="form-control"
+                  value={alt}
+                  onChange={setAProp("alt")}
+                />
+              </OrFormula>
+            </td>
+          </tr>
+        )}
+        {srctype !== "Upload" && (
+          <tr>
+            <td colSpan="2">
+              <BlockSetting block={block} setProp={setProp} />
+            </td>
+          </tr>
+        )}
       </tbody>
     </table>
   );
@@ -173,6 +231,7 @@ Image.craft = {
     alt: "",
     block: false,
     isFormula: {},
+    uploadedFiles: [],
     srctype: "File",
   },
   related: {

package/src/components/elements/boxmodel.html

@@ -0,0 +1,253 @@
+<style>
+  .boxmodel-container {
+    display: inline-flex;
+    flex-direction: column;
+    flex-flow: column wrap;
+    font-family: "Consolas", "Monaco", monospace;
+    font-size: 12px;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-info {
+    font-size: 10px;
+    font-family: Verdana;
+    font-style: normal;
+    text-align: left;
+    line-height: 14px;
+    margin: 2px 0 0 0;
+    padding: 0px;
+    margin-top: 2px;
+  }
+  .boxmodel-container div:not(.flex-row) {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: space-between;
+    padding: 0;
+    margin: 0;
+  }
+  .boxmodel-container span.boxmodel-text {
+    font-size: 8.5px;
+    font-family: Verdana, Geneva, sans-serif;
+    display: inline-block;
+    user-select: none;
+  }
+  .boxmodel-container span.boxmodel-text.boxmodel-header {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    color: #777;
+  }
+  .boxmodel-container .boxmodel-margin {
+    background: #ffffff;
+    border: 1px dashed #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-border {
+    background: #ddd;
+    border: 2px solid #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-padding {
+    background: #eee;
+    border: 1px dashed #aaa;
+    position: relative;
+  }
+  .boxmodel-container .boxmodel-content {
+    background: #fff;
+    height: 30px;
+    margin: 0;
+    border: 1px solid #aaa;
+    position: relative;
+    font-family: Verdana, Geneva, sans-serif;
+    font-size: 10px;
+  }
+  .boxmodel-container .flex-row {
+    text-align: center;
+  }
+  .boxmodel-container .boxmodel-input-direction-top,
+  .boxmodel-container .boxmodel-input-direction-bottom {
+    display: block;
+    padding: 0;
+    margin: 0;
+    line-height: 0;
+  }
+  .boxmodel-container .boxmodel-input-direction-right,
+  .boxmodel-container .boxmodel-input-direction-left {
+    position: relative;
+  }
+  .boxmodel-container input,
+  .boxmodel-container input:focus,
+  .boxmodel-container input:active {
+    background: transparent;
+    color: black;
+    font-size: 9px;
+    font-family: Verdana, Geneva, sans-serif;
+    box-shadow: none;
+    border: 1px solid transparent;
+    outline: none;
+    user-select: none;
+    margin: 0px;
+    padding: 1px;
+    text-align: center;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-margin {
+    background: #f9cc9d;
+    border: 1px dashed #222;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-border {
+    background: #ffeebc;
+    border: 1px solid #000;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-padding {
+    background: #c3deb7;
+    border: 1px dashed #808080;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-content {
+    background: #a0c5e8;
+    border: 1px solid #808080;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-text {
+    color: black;
+  }
+  .boxmodel-chrome-skin .boxmodel-container .boxmodel-text.boxmodel-header {
+    color: black;
+  }
+</style>
+
+<div class="boxmodel-container boxmodel-chrome-skin">
+  <div class="boxmodel-container">
+    <div class="boxmodel-margin">
+      <span class="boxmodel-text boxmodel-header">Margin</span
+      ><span class="boxmodel-input-container boxmodel-input-direction-left"
+        ><input
+          disabled
+          type="text"
+          autocomplete="off"
+          name="boxmodel-ex-1_left_margin"
+          size="3"
+      /></span>
+      <div class="flex-row">
+        <span class="boxmodel-input-container boxmodel-input-direction-top"
+          ><input
+            disabled
+            type="text"
+            autocomplete="off"
+            name="boxmodel-ex-1_top_margin"
+            size="3"
+        /></span>
+        <div class="boxmodel-border">
+          <span class="boxmodel-text boxmodel-header">Border</span
+          ><span class="boxmodel-input-container boxmodel-input-direction-left"
+            ><input
+              disabled
+              type="text"
+              autocomplete="off"
+              name="boxmodel-ex-1_left_border"
+              size="3"
+          /></span>
+          <div class="flex-row">
+            <span class="boxmodel-input-container boxmodel-input-direction-top"
+              ><input
+                disabled
+                type="text"
+                autocomplete="off"
+                name="boxmodel-ex-1_top_border"
+                size="3"
+            /></span>
+            <div class="boxmodel-padding">
+              <span class="boxmodel-text boxmodel-header">Padding</span
+              ><span
+                class="boxmodel-input-container boxmodel-input-direction-left"
+                ><input
+                  disabled
+                  type="text"
+                  autocomplete="off"
+                  name="boxmodel-ex-1_left_padding"
+                  size="3"
+                  class=""
+              /></span>
+              <div class="flex-row">
+                <span
+                  class="boxmodel-input-container boxmodel-input-direction-top"
+                  ><input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_top_padding"
+                    size="3"
+                /></span>
+                <div class="boxmodel-content">
+                  <input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_width"
+                    size="3"
+                  />x<input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_height"
+                    size="3"
+                  />
+                </div>
+                <span
+                  class="boxmodel-input-container boxmodel-input-direction-bottom"
+                  ><input
+                    disabled
+                    type="text"
+                    autocomplete="off"
+                    name="boxmodel-ex-1_bottom_padding"
+                    size="3"
+                /></span>
+              </div>
+              <span
+                class="boxmodel-input-container boxmodel-input-direction-right"
+                ><input
+                  disabled
+                  type="text"
+                  autocomplete="off"
+                  name="boxmodel-ex-1_right_padding"
+                  size="3"
+              /></span>
+            </div>
+            <span
+              class="boxmodel-input-container boxmodel-input-direction-bottom"
+              ><input
+                disabled
+                type="text"
+                autocomplete="off"
+                name="boxmodel-ex-1_bottom_border"
+                size="3"
+            /></span>
+          </div>
+          <span class="boxmodel-input-container boxmodel-input-direction-right"
+            ><input
+              disabled
+              type="text"
+              autocomplete="off"
+              name="boxmodel-ex-1_right_border"
+              size="3"
+          /></span>
+        </div>
+        <span class="boxmodel-input-container boxmodel-input-direction-bottom"
+          ><input
+            disabled
+            type="text"
+            autocomplete="off"
+            name="boxmodel-ex-1_bottom_margin"
+            size="3"
+        /></span>
+      </div>
+      <span class="boxmodel-input-container boxmodel-input-direction-right"
+        ><input
+          disabled
+          type="text"
+          autocomplete="off"
+          name="boxmodel-ex-1_right_margin"
+          size="3"
+      /></span>
+    </div>
+  </div>
+</div>

package/src/components/elements/utils.js

@@ -279,13 +279,14 @@ export const fetchViewPreview = (args = {}) => (changes = {}) => {
   });
 };
 
-export const SelectUnits = ({ vert, ...props }) => (
+export const SelectUnits = ({ vert, autoable, ...props }) => (
   <select {...props}>
     <option>px</option>
     <option>%</option>
     <option>{vert ? "vh" : "vw"}</option>
     <option>em</option>
     <option>rem</option>
+    {autoable && <option>auto</option>}
   </select>
 );
 
@@ -309,6 +310,19 @@ export const parseStyles = (styles) =>
       }),
       {}
     );
+
+export const reactifyStyles = (styles) => {
+  const toCamel = (s) => {
+    return s.replace(/([-][a-z])/gi, ($1) => {
+      return $1.toUpperCase().replace("-", "");
+    });
+  };
+  const reactified = {};
+  Object.keys(styles).forEach((k) => {
+    reactified[toCamel(k)] = styles[k];
+  });
+  return reactified;
+};
 const isCheckbox = (f) =>
   f && f.type && (f.type === "Bool" || f.type.name === "Bool");
 export const setInitialConfig = (setProp, fieldview, fields) => {
@@ -320,6 +334,24 @@ export const setInitialConfig = (setProp, fieldview, fields) => {
       });
   });
 };
+
+const ColorInput = ({ value, onChange }) =>
+  value ? (
+    <input
+      type="color"
+      value={value}
+      className="form-control"
+      onChange={(e) => e.target && onChange(e.target.value)}
+    />
+  ) : (
+    <button
+      className="btn btn-sm btn-outline-secondary"
+      onClick={() => onChange("#000000")}
+    >
+      <small>Set color</small>
+    </button>
+  );
+
 export const ConfigForm = ({
   fields,
   configuration,
@@ -365,18 +397,26 @@ export const ConfigField = ({
   setProp,
   onChange,
   props,
+  isStyle,
 }) => {
   const myOnChange = (v) => {
     setProp((prop) => {
       if (configuration) {
         if (!prop.configuration) prop.configuration = {};
         prop.configuration[field.name] = v;
+      } else if (isStyle) {
+        if (!prop.style) prop.style = {};
+        prop.style[field.name] = v;
       } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v);
   };
   const value = or_if_undef(
-    configuration ? configuration[field.name] : props[field.name],
+    configuration
+      ? configuration[field.name]
+      : isStyle
+      ? props.style[field.name]
+      : props[field.name],
     field.default
   );
   if (field.input_type === "fromtype") field.input_type = null;
@@ -412,14 +452,7 @@ export const ConfigField = ({
         onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
-    Color: () => (
-      <input
-        type="color"
-        value={value}
-        className="form-control"
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-      />
-    ),
+    Color: () => <ColorInput value={value} onChange={(c) => myOnChange(c)} />,
     Bool: () => (
       <div className="form-check">
         <input
@@ -478,38 +511,74 @@ export const ConfigField = ({
         ))}
       </div>
     ),
-    DimUnits: () => (
-      <Fragment>
-        <input
-          type="number"
-          value={value}
-          step="1"
-          min="0"
-          max="9999"
-          className="w-50 form-control-sm d-inline dimunit"
-          onChange={(e) => myOnChange(e.target.value)}
-        />
-        <SelectUnits
-          value={or_if_undef(
-            configuration
-              ? configuration[field.name + "Unit"]
-              : props[field.name + "Unit"],
-            "px"
+    DimUnits: () => {
+      let styleVal, styleDim;
+      if (isStyle && value === "auto") {
+        styleVal = "";
+        styleDim = "auto";
+      } else if (isStyle && value && typeof value === "string") {
+        const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
+        if (matches) {
+          styleVal = matches[1];
+          styleDim = matches[2];
+        }
+      }
+      return (
+        <Fragment>
+          {styleDim !== "auto" && (
+            <input
+              type="number"
+              value={(isStyle ? styleVal : value) || ""}
+              step="1"
+              min="0"
+              max="9999"
+              className="w-50 form-control-sm d-inline dimunit"
+              disabled={field.autoable && styleDim === "auto"}
+              onChange={(e) =>
+                myOnChange(
+                  isStyle
+                    ? `${e.target.value}${styleDim || "px"}`
+                    : e.target.value
+                )
+              }
+            />
           )}
-          className="w-50 form-control-sm d-inline dimunit"
-          vert={true}
-          onChange={(e) => {
-            if (!e.target) return;
-            const target_value = e.target.value;
-            setProp((prop) => {
-              if (configuration)
-                prop.configuration[field.name + "Unit"] = target_value;
-              else prop[field.name + "Unit"] = target_value;
-            });
-          }}
-        />
-      </Fragment>
-    ),
+          <SelectUnits
+            value={or_if_undef(
+              configuration
+                ? configuration[field.name + "Unit"]
+                : isStyle
+                ? styleDim
+                : props[field.name + "Unit"],
+              "px"
+            )}
+            autoable={field.autoable}
+            className={`w-${
+              styleDim === "auto" ? 100 : 50
+            } form-control-sm d-inline dimunit`}
+            vert={true}
+            onChange={(e) => {
+              if (!e.target) return;
+              const target_value = e.target.value;
+              setProp((prop) => {
+                const myStyleVal =
+                  target_value === "auto" && field.autoable && isStyle
+                    ? ""
+                    : styleVal;
+                if (configuration)
+                  prop.configuration[field.name + "Unit"] = target_value;
+                else if (isStyle) {
+                  prop.style[field.name] = `${or_if_undef(
+                    myStyleVal,
+                    0
+                  )}${target_value}`;
+                } else prop[field.name + "Unit"] = target_value;
+              });
+            }}
+          />
+        </Fragment>
+      );
+    },
   };
   const f = dispatch[field.input_type || field.type.name || field.type];
   return f ? f() : null;
@@ -546,7 +615,7 @@ export const SettingsSectionHeaderRow = ({ title }) => (
   </tr>
 );
 
-export const SettingsRow = ({ field, node, setProp, onChange }) => {
+export const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -568,6 +637,7 @@ export const SettingsRow = ({ field, node, setProp, onChange }) => {
       props={node}
       setProp={setProp}
       onChange={onChange}
+      isStyle={isStyle}
     />
   );
   return (
@@ -737,3 +807,17 @@ export const ButtonOrLinkSettingsRows = ({
       : []),
   ];
 };
+export const bstyleopt = (style) => ({
+  value: style,
+  title: style,
+  label: (
+    <div
+      style={{
+        borderLeftStyle: style,
+        borderTopStyle: style,
+        height: "15px",
+        width: "6px",
+      }}
+    ></div>
+  ),
+});