@saltcorn/markup 0.5.6-beta.3 → 0.6.0-beta.0

package/builder.js

@@ -41,6 +41,14 @@ module.exports = (
         ? `/static_assets/${version_tag}/fonticonpicker.react.css`
         : "/fonticonpicker.react.css",
     }),
+    link({
+      rel: "stylesheet",
+      type: "text/css",
+      media: "screen",
+      href: version_tag
+        ? `/static_assets/${version_tag}/saltcorn-builder.css`
+        : "/saltcorn-builder.css",
+    }),
     div({ id: "saltcorn-builder" }),
     form(
       { action, method: "post", id: "scbuildform" },

package/form.js

@@ -43,13 +43,17 @@ const formRowWrap = (hdr, inner, error = "", fStyle, labelCols) =>
       }),
     },
     hdr.input_type === "section_header"
-      ? div({ class: `col-sm-12` }, h5(text(hdr.label)), hdr.sublabel && p(i(hdr.sublabel)) )
+      ? div(
+          { class: `col-sm-12` },
+          h5(text(hdr.label)),
+          hdr.sublabel && p(i(hdr.sublabel))
+        )
       : [
           div(
             { class: isHoriz(fStyle) && `col-sm-${labelCols}` },
             label(
               {
-                for: `input${text_attr(hdr.form_name)}`,                
+                for: `input${text_attr(hdr.form_name)}`,
               },
               text(hdr.label)
             )
@@ -100,7 +104,7 @@ const innerField = (v, errors, nameAdd = "") => (hdr) => {
       }"${maybe_disabled} data-fieldname="${text_attr(
         hdr.form_name
       )}" name="${text_attr(name)}" id="input${text_attr(name)}">${text(
-        v[hdr.form_name]
+        v[hdr.form_name] || ""
       )}</textarea>`;
     case "code":
       return `<textarea mode="${
@@ -109,9 +113,9 @@ const innerField = (v, errors, nameAdd = "") => (hdr) => {
         hdr.class || ""
       }"${maybe_disabled} data-fieldname="${text_attr(
         hdr.form_name
-      )}" name="${text_attr(name)}" id="input${text_attr(name)}">${text(
-        v[hdr.form_name]
-      )}</textarea>`;
+      )}" name="${text_attr(name)}" id="input${text_attr(name)}">${
+        v[hdr.form_name] || ""
+      }</textarea>`;
     case "file":
       if (hdr.attributes && hdr.attributes.select_file_where) {
         hdr.input_type = "select";
@@ -137,9 +141,9 @@ const innerField = (v, errors, nameAdd = "") => (hdr) => {
         hdr.class || ""
       }"${maybe_disabled} data-fieldname="${text_attr(
         hdr.form_name
-      )}" name="${name}" id="input${text_attr(name)}" ${
+      )}" name="${name}" id="input${text_attr(name)}"${
         v && isdef(v[hdr.form_name])
-          ? `value="${text_attr(v[hdr.form_name])}"`
+          ? ` value="${text_attr(v[hdr.form_name])}"`
           : ""
       }>`;
       const inner = hdr.postText
@@ -294,7 +298,16 @@ const renderFormLayout = (form) => {
       action_size,
       action_icon,
       configuration,
+      action_bgcol,
+      action_bordercol,
+      action_textcol,
     }) {
+      let style =
+        action_style === "btn-custom-color"
+          ? `background-color: ${action_bgcol || "#000000"};border-color: ${
+              action_bordercol || "#000000"
+            }; color: ${action_textcol || "#000000"}`
+          : null;
       if (action_name && action_name.startsWith("Login with ")) {
         const method_label = action_name.replace("Login with ", "");
 
@@ -306,6 +319,7 @@ const renderFormLayout = (form) => {
               action_style !== "btn-link" &&
                 `btn ${action_style || "btn-primary"} ${action_size || ""}`,
             ],
+            style,
           },
           action_icon ? i({ class: action_icon }) + "&nbsp;" : false,
           action_label || action_name
@@ -316,7 +330,9 @@ const renderFormLayout = (form) => {
           action_style === "btn-link"
             ? ""
             : `btn ${action_style || "btn-primary"} ${action_size || ""}`
-        }">${action_icon ? `<i class="${action_icon}"></i>&nbsp;` : ""}${text(
+        }"${style ? ` style="${style}"` : ""}>${
+          action_icon ? `<i class="${action_icon}"></i>&nbsp;` : ""
+        }${text(
           action_label || form.submitLabel || action_name || "Save"
         )}</button>`;
 
@@ -383,11 +399,11 @@ const renderForm = (form, csrfToken0) => {
 const mkFormWithLayout = (form, csrfToken) => {
   const hasFile = form.fields.some((f) => f.input_type === "file");
   const csrfField = `<input type="hidden" name="_csrf" value="${csrfToken}">`;
-  const top = `<form action="${form.action}" ${
+  const top = `<form action="${form.action}"${
     form.onChange ? ` onchange="${form.onChange}"` : ""
-  }class="form-namespace ${form.class || ""}" method="${
+  } class="form-namespace ${form.class || ""}" method="${
     form.methodGET ? "get" : "post"
-  }" ${hasFile ? 'encType="multipart/form-data"' : ""}>`;
+  }"${hasFile ? ' encType="multipart/form-data"' : ""}>`;
   const blurbp = form.blurb
     ? Array.isArray(form.blurb)
       ? form.blurb.join("")
@@ -436,8 +452,8 @@ const mkForm = (form, csrfToken, errors = {}) => {
     form.onChange ? ` onchange="${form.onChange}"` : ""
   }class="form-namespace ${form.isStateForm ? "stateForm" : ""} ${
     form.class || ""
-  }" method="${form.methodGET ? "get" : "post"}" ${
-    hasFile ? 'encType="multipart/form-data"' : ""
+  }" method="${form.methodGET ? "get" : "post"}"${
+    hasFile ? ' encType="multipart/form-data"' : ""
   }>`;
   //console.log(form.fields);
   const flds = form.fields

package/form.test.js

@@ -24,10 +24,10 @@ describe("form render", () => {
         },
       ],
     });
-    const want = `<form action="/" class="form-namespace  " method="post" >
+    const want = `<form action="/" class="form-namespace  " method="post">
 <input type="hidden" name="_csrf" value=""><div class="form-group">
 <div><label for="inputname">Name</label></div>
-<div><input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname" >
+<div><input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname">
 </div></div><div class="form-group row">
   <div class="col-sm-12">
         <button type="submit" class="btn btn-primary">Save</button>
@@ -62,10 +62,10 @@ describe("form render", () => {
         ],
       },
     });
-    const want = `<form action="/" class="form-namespace " method="post" >
+    const want = `<form action="/" class="form-namespace " method="post">
 <input type="hidden" name="_csrf" value="">
 <h2>
-<input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname" >
+<input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname">
 </h2><br /></form>`;
     expect(nolines(renderForm(form, ""))).toBe(nolines(want));
   });
@@ -83,7 +83,7 @@ describe("form render", () => {
         },
       ],
     });
-    const want = `<form action="/" class="form-namespace  " method="post" >
+    const want = `<form action="/" class="form-namespace  " method="post">
 <input type="hidden" name="_csrf" value=""><div class="form-group">
 <div><label for="inputname">Name</label></div>
 <div><input type="text" class="form-control is-invalid " data-fieldname="name" name="name" id="inputname" value="Bar"><div>Not a foo</div>

package/helpers.js

@@ -31,8 +31,8 @@ const select_options = (v, hdr, force_required, neutral_label = "") => {
     .map((o) => {
       const label = typeof o === "string" ? o : o.label;
       const value = typeof o === "string" ? o : o.value;
-      return `<option value="${text_attr(value)}" ${
-        isSelected(value) ? "selected" : ""
+      return `<option value="${text_attr(value)}"${
+        isSelected(value) ? " selected" : ""
       }>${text(label)}</option>`;
     })
     .join("");

package/index.js

@@ -14,6 +14,7 @@ const post_btn = (
     btnClass = "btn-primary",
     onClick,
     small,
+    style,
     ajax,
     reload_on_done,
     reload_delay,
@@ -43,9 +44,9 @@ const post_btn = (
       : confirm
       ? `onclick="return confirm('${req.__("Are you sure?")}')"`
       : ""
-  } class="${klass} btn ${small ? "btn-sm" : ""} ${btnClass}">${
-    icon ? `<i class="${icon}"></i>&nbsp;` : ""
-  }${s}</button></form>`;
+  } class="${klass} btn ${small ? "btn-sm" : ""} ${btnClass}"${
+    style ? ` style="${style}"` : ""
+  }>${icon ? `<i class="${icon}"></i>&nbsp;` : ""}${s}</button></form>`;
 /**
  * UI Form for Delete Item confirmation
  * @param href - href

package/layout.js

@@ -45,25 +45,26 @@ const makeSegments = (body, alerts) => {
     return body;
   } else return { above: [...alertsSegments, body] };
 };
-const applyTextStyle = (textStyle, inner, isBlock) => {
-  switch (textStyle) {
+const applyTextStyle = (segment, inner) => {
+  let style = segment.font ? { fontFamily: segment.font } : {};
+  switch (segment.textStyle) {
     case "h1":
-      return h1(inner);
+      return h1(style, inner);
     case "h2":
-      return h2(inner);
+      return h2(style, inner);
     case "h3":
-      return h3(inner);
+      return h3(style, inner);
     case "h4":
-      return h4(inner);
+      return h4(style, inner);
     case "h5":
-      return h5(inner);
+      return h5(style, inner);
     case "h6":
-      return h6(inner);
+      return h6(style, inner);
     default:
-      return isBlock
-        ? div({ class: textStyle || "" }, inner)
-        : textStyle
-        ? span({ class: textStyle || "" }, inner)
+      return segment.block
+        ? div({ class: segment.textStyle || "", style }, inner)
+        : segment.textStyle || segment.font
+        ? span({ class: segment.textStyle || "", style }, inner)
         : inner;
   }
 };
@@ -158,9 +159,9 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
         ? iconTag +
             label(
               { for: `input${text(segment.labelFor)}` },
-              applyTextStyle(segment.textStyle, inner, segment.block)
+              applyTextStyle(segment, inner)
             )
-        : iconTag + applyTextStyle(segment.textStyle, inner, segment.block);
+        : iconTag + applyTextStyle(segment, inner);
   }
   function go(segment, isTop, ix) {
     if (!segment) return "";
@@ -214,6 +215,14 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
       );
     }
     if (segment.type === "link") {
+      let style =
+        segment.link_style === "btn btn-custom-color"
+          ? `background-color: ${
+              segment.link_bgcol || "#000000"
+            };border-color: ${segment.link_bordercol || "#000000"}; color: ${
+              segment.link_textcol || "#000000"
+            }`
+          : null;
       return wrap(
         segment,
         isTop,
@@ -224,6 +233,7 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
             class: [segment.link_style || "", segment.link_size || ""],
             target: segment.target_blank ? "_blank" : false,
             rel: segment.nofollow ? "nofollow" : false,
+            style,
           },
           segment.link_icon ? i({ class: segment.link_icon }) + " " : "",
           segment.text
@@ -272,6 +282,7 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
         vAlign,
         hAlign,
         block,
+        display,
         imageSize,
         borderWidth,
         borderStyle,
@@ -296,6 +307,8 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
         gradDirection,
         fullPageWidth,
         overflow,
+        rotate,
+        style,
       } = segment;
       if (hide) return "";
       if (
@@ -312,7 +325,8 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
               unit || segment[segKey + "Unit"] || "px"
             };`;
       const ppCustomCSS = (s) => (s ? s.split("\n").join("") + ";" : "");
-      const baseDisplayClass = block === false ? "inline-block" : "block";
+      const baseDisplayClass =
+        block === false ? "inline-block" : display ? display : "block";
       let displayClass = minScreenWidth
         ? `d-none d-${minScreenWidth}-${baseDisplayClass}`
         : baseDisplayClass === "block"
@@ -325,6 +339,10 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
         !segment[what] || allZero(segment[what])
           ? ""
           : `${what}: ${segment[what].map((p) => p + "px").join(" ")};`;
+      let flexStyles = "";
+      Object.keys(style || {}).forEach((k) => {
+        flexStyles += `${k}:${style[k]};`;
+      });
       return wrap(
         segment,
         isTop,
@@ -346,7 +364,7 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
             ],
             onclick: segment.url ? `location.href='${segment.url}'` : false,
 
-            style: `${ppCustomCSS(customCSS || "")}${sizeProp(
+            style: `${flexStyles}${ppCustomCSS(customCSS || "")}${sizeProp(
               "minHeight",
               "min-height"
             )}${sizeProp("height", "height")}${sizeProp(
@@ -378,7 +396,9 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
                     gradDirection || 0
                   }deg, ${gradStartColor}, ${gradEndColor});`
                 : ""
-            } ${setTextColor ? `color: ${textColor};` : ""}`,
+            } ${setTextColor ? `color: ${textColor};` : ""}${
+              rotate ? `transform: rotate(${rotate}deg);` : ""
+            }`,
             ...(showIfFormulaInputs
               ? {
                   "data-show-if": `showIfFormulaInputs(e, '${showIfFormulaInputs}')`,

package/markup.test.js

@@ -61,7 +61,18 @@ describe("tags", () => {
     expect(div({ style: { color: "red", border: "1px solid black" } }, 5)).toBe(
       '<div style="color:red;border:1px solid black">5</div>'
     );
+
+    expect(
+      div({ style: { marginRight: "1px", border: "1px solid black" } }, 5)
+    ).toBe('<div style="margin-right:1px;border:1px solid black">5</div>');
+    //border-top-left-radius
+    expect(
+      div({ style: { marginRight: "1px", borderTopLeftRadius: "3px" } }, 5)
+    ).toBe('<div style="margin-right:1px;border-top-left-radius:3px">5</div>');
     expect(hr({ style: { color: "red" } }, 5)).toBe('<hr style="color:red">');
+    expect(hr({ style: {} })).toBe("<hr>");
+    expect(hr({ style: null })).toBe("<hr>");
+    expect(div({ class: "foo", style: null })).toBe('<div class="foo"></div>');
   });
 
   it("escaping", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/markup",
-  "version": "0.5.6-beta.3",
+  "version": "0.6.0-beta.0",
   "description": "Markup for Saltcorn, open-source no-code platform",
   "homepage": "https://saltcorn.com",
   "main": "index.js",

package/tags.js

@@ -3,6 +3,10 @@ const escape = require("escape-html");
 const htmlTags = require("html-tags");
 const voidHtmlTags = new Set(require("html-tags/void"));
 
+//https://stackoverflow.com/a/54246501
+const camelToCssCase = (str) =>
+  str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
 const ppClasses = (cs) =>
   typeof cs === "string" ? cs : !cs ? "" : cs.filter((c) => c).join(" ");
 const ppClass = (c) => {
@@ -18,7 +22,7 @@ const ppStyles = (cs) =>
     ? cs.filter((c) => c).join(";")
     : typeof cs === "object"
     ? Object.entries(cs)
-        .map(([k, v]) => `${k}:${v}`)
+        .map(([k, v]) => `${camelToCssCase(k)}:${v}`)
         .join(";")
     : "";
 const ppStyle = (c) => {
@@ -50,7 +54,10 @@ const mkTag = (tnm, voidTag) => (...args) => {
       if (Array.isArray(arg)) {
         arg.forEach(argIter);
       } else {
-        attribs += Object.entries(arg).map(ppAttrib).join(" ");
+        attribs += Object.entries(arg)
+          .map(ppAttrib)
+          .filter((s) => s)
+          .join(" ");
       }
     } else body += arg;
   };