@saltcorn/markup - npm Package Compare versions

Comparing version 0.5.6-beta.3 to 0.5.6-rc.0

form.js

@@ -46,3 +46,7 @@ const {
     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))
+        )
       : [
@@ -53,3 +57,3 @@ div(
               {
-                for: `input${text_attr(hdr.form_name)}`,                
+                for: `input${text_attr(hdr.form_name)}`,
               },
@@ -114,5 +118,5 @@ text(hdr.label)
         hdr.form_name
-      )}" name="${text_attr(name)}" id="input${text_attr(name)}">${text(
+      )}" name="${text_attr(name)}" id="input${text_attr(name)}">${
         v[hdr.form_name]
-      )}</textarea>`;
+      }</textarea>`;
     case "file":
@@ -143,5 +147,5 @@ if (hdr.attributes && hdr.attributes.select_file_where) {
         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])}"`
           : ""
@@ -301,3 +305,12 @@ }>`;
       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 ")) {
@@ -314,2 +327,3 @@ const method_label = action_name.replace("Login with ", "");
             ],
+            style,
           },
@@ -325,3 +339,5 @@ action_icon ? i({ class: action_icon }) + "&nbsp;" : false,
             : `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"
@@ -393,7 +409,7 @@ )}</button>`;
   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
@@ -447,4 +463,4 @@ ? Array.isArray(form.blurb)
     form.class || ""
-  }" method="${form.methodGET ? "get" : "post"}" ${
-    hasFile ? 'encType="multipart/form-data"' : ""
+  }" method="${form.methodGET ? "get" : "post"}"${
+    hasFile ? ' encType="multipart/form-data"' : ""
   }>`;
@@ -451,0 +467,0 @@ //console.log(form.fields);

form.test.js

@@ -27,6 +27,6 @@ const { a, input, div, ul, text, text_attr } = require("./tags");
     });
-    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">
@@ -66,6 +66,6 @@ <div class="col-sm-12">
     });
-    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>`;
@@ -88,3 +88,3 @@ expect(nolines(renderForm(form, ""))).toBe(nolines(want));
     });
-    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">
@@ -91,0 +91,0 @@ <div><label for="inputname">Name</label></div>

helpers.js

@@ -34,4 +34,4 @@ const {
       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>`;
@@ -38,0 +38,0 @@ })

index.js

@@ -17,2 +17,3 @@ const renderForm = require("./form");
     small,
+    style,
     ajax,
@@ -47,5 +48,5 @@ reload_on_done,
       : ""
-  } 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>`;
 /**
@@ -52,0 +53,0 @@ * UI Form for Delete Item confirmation

layout.js

@@ -48,21 +48,22 @@ const { contract, is } = require("contractis");
 };
-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;
@@ -162,5 +163,5 @@ }
               { 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);
   }
@@ -219,2 +220,10 @@ function go(segment, isTop, ix) {
     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(
@@ -230,2 +239,3 @@ segment,
             rel: segment.nofollow ? "nofollow" : false,
+            style,
           },
@@ -303,2 +313,3 @@ segment.link_icon ? i({ class: segment.link_icon }) + " " : "",
         overflow,
+        rotate,
       } = segment;
@@ -386,3 +397,5 @@ if (hide) return "";
                 : ""
-            } ${setTextColor ? `color: ${textColor};` : ""}`,
+            } ${setTextColor ? `color: ${textColor};` : ""}${
+              rotate ? `transform: rotate(${rotate}deg);` : ""
+            }`,
             ...(showIfFormulaInputs
@@ -389,0 +402,0 @@ ? {

markup.test.js

@@ -64,3 +64,14 @@ const { a, input, div, ul, text, text_attr, i, hr } = require("./tags");
     );
+
+    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>');
   });
@@ -67,0 +78,0 @@

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.5.6-beta.3",
+  "version": "0.5.6-rc.0",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -5,0 +5,0 @@ "homepage": "https://saltcorn.com",

tags.js

@@ -6,2 +6,6 @@ const xss = require("xss");
 
+//https://stackoverflow.com/a/54246501
+const camelToCssCase = (str) =>
+  str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
 const ppClasses = (cs) =>
@@ -22,3 +26,3 @@ typeof cs === "string" ? cs : !cs ? "" : cs.filter((c) => c).join(" ");
     ? Object.entries(cs)
-        .map(([k, v]) => `${k}:${v}`)
+        .map(([k, v]) => `${camelToCssCase(k)}:${v}`)
         .join(";")
@@ -55,3 +59,6 @@ : "";
       } else {
-        attribs += Object.entries(arg).map(ppAttrib).join(" ");
+        attribs += Object.entries(arg)
+          .map(ppAttrib)
+          .filter((s) => s)
+          .join(" ");
       }
@@ -58,0 +65,0 @@ } else body += arg;

No alert changes

Improved metrics

Total package byte prevSize

62297

increased by2.84%

Lines of code

2081

increased by2.26%

No dependency changes