@saltcorn/markup - npm Package Compare versions

Comparing version 1.1.2-beta.15 to 1.1.2-beta.16

dist/form.js

@@ -23,3 +23,5 @@ "use strict";
 const rmInitialDot = (s) => s && s[0] === "." ? s.replace(".", "") : s;
-const buildActionAttribute = (form) => isNode && !form.req?.smr ? form.action : "javascript:void(0)";
+const buildActionAttribute = (form) => (isNode && !form.req?.smr) || form.isWorkflow
+    ? form.action
+    : "javascript:void(0)";
 /**
@@ -793,4 +795,4 @@ * @param sIf
                 return action_link;
-            if (isNode && !form.req?.smr) {
-                const submitAttr = form.xhrSubmit
+            if ((isNode && !form.req?.smr) || form.isWorkflow) {
+                const submitAttr = form.xhrSubmit || form.isWorkflow
                     ? `onClick="${spinnerStr}${form.onSubmit ? `${form.onSubmit};` : ""}ajaxSubmitForm(this, true)" type="button"`
@@ -866,4 +868,5 @@ : 'type="submit"';
     const isMobile = !isNode || form.req?.smr;
-    const top = `<form data-viewname="${form.viewname}" action="${buildActionAttribute(form)}"${form.onSubmit || form.xhrSubmit
-        ? ` onsubmit="${form.onSubmit || ""}${form.xhrSubmit && !isMobile
+    const mobileWorkflow = isMobile && form.isWorkflow;
+    const top = `<form data-viewname="${form.viewname}" action="${buildActionAttribute(form)}"${form.onSubmit || form.xhrSubmit || mobileWorkflow
+        ? ` onsubmit="${form.onSubmit || ""}${(form.xhrSubmit && !isMobile) || mobileWorkflow
             ? `;ajaxSubmitForm(this, true, event)`
@@ -957,3 +960,3 @@ : ""}" `
     const top = `<form data-viewname="${form.viewname}" ${form.id ? `id="${form.id}" ` : ""}action="${buildActionAttribute(form)}"${form.onSubmit || form.xhrSubmit
-        ? ` onsubmit="${form.onSubmit || ""}${form.xhrSubmit && !isMobile
+        ? ` onsubmit="${form.onSubmit || ""}${(form.xhrSubmit && !isMobile) || form.isWorkflow
             ? `;ajaxSubmitForm(this, true, event)`
@@ -985,3 +988,3 @@ : ""}"`
         ? ""
-        : form.xhrSubmit
+        : form.xhrSubmit || form.isWorkflow
             ? `<button type="button" class="btn ${form.submitButtonClass || "btn-primary"}" onClick="${form.onSubmit ? `${form.onSubmit};` : ""}ajaxSubmitForm(this, true)">${text(form.submitLabel || "Save")}</button>`
@@ -988,0 +991,0 @@ : `<button type="submit" class="btn ${form.submitButtonClass || "btn-primary"}">${text(form.submitLabel || "Save")}</button>`}${form.additionalButtons

dist/index.js

@@ -60,3 +60,5 @@ "use strict";
                     ? `onclick="return confirm('${req.__("Are you sure?")}')"`
-                    : ""} class="${klass} btn ${small ? "btn-sm" : ""} ${btnClass}"${style ? ` style="${style}"` : ""}${title ? ` title=${text_attr(title)}` : ""}>${show_icon_and_label(icon, s)}</button></form>`;
+                    : spinner
+                        ? 'onclick="press_store_button(this);"'
+                        : ""} class="${klass} btn ${small ? "btn-sm" : ""} ${btnClass}"${style ? ` style="${style}"` : ""}${title ? ` title=${text_attr(title)}` : ""}>${show_icon_and_label(icon, s)}</button></form>`;
 /**
@@ -63,0 +65,0 @@ * UI Form for Delete Item confirmation

dist/mjml-layout.js

@@ -199,2 +199,5 @@ "use strict";
                 : null;
+            if ((segment.link_style || "").includes("btn")) {
+                return wrap(segment, isTop, ix, mjml.emailButton({ href: segment.url, btnStyle: segment.link_style, style }, segment.text));
+            }
             return wrap(segment, isTop, ix, a({
@@ -201,0 +204,0 @@ href: segment.url,

dist/mjml-tags.js

@@ -23,7 +23,65 @@ "use strict";
 const mjml = mkTag("mjml");
+//https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
+const emailButton = ({ href, title, btnStyle, style, }, label) => {
+    const rawType = (btnStyle || "").replace("btn ", "");
+    let bgColor = (btnStyle || "").includes("outline")
+        ? "transparent"
+        : `#6c757d`;
+    let color = `#ffffff`;
+    let borderColor = null;
+    switch (rawType) {
+        case "btn-primary":
+            bgColor = `#0d6efd`;
+            break;
+        case "btn-secondary":
+            bgColor = `#6c757d`;
+            break;
+        case "btn-success":
+            bgColor = `#198754`;
+            break;
+        case "btn-danger":
+            bgColor = `#dc3545`;
+            break;
+        case "btn-warning":
+            bgColor = `#ffc107`;
+            break;
+        case "btn-info":
+            bgColor = `#0dcaf0`;
+            break;
+        case "btn-outline-primary":
+            color = borderColor = `#0d6efd`;
+            break;
+        case "btn-outline-secondary":
+            color = borderColor = `#6c757d`;
+            break;
+        case "btn-outline-success":
+            color = borderColor = `#198754`;
+            break;
+        case "btn-outline-danger":
+            color = borderColor = `#dc3545`;
+            break;
+        case "btn-outline-warning":
+            color = borderColor = `#ffc107`;
+            break;
+        case "btn-outline-info":
+            color = borderColor = `#0dcaf0`;
+            break;
+    }
+    //  console.log({ href, btnStyle, rawType, label, style, borderColor, color });
+    return `<a rel="noopener" target="_blank" ${title ? `title="${title}" ` : ""}href="${href}" style="${style && style.includes("color") ? `${style};border-width:1px; border-style: solid;` : `background-color: ${bgColor}; color: ${color};`} ${borderColor ? `border-color: ${borderColor};border-width:1px; border-style: solid;` : ""} font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
+    <!--[if mso]>
+    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
+    <![endif]-->
+    <span style="mso-text-raise: 15pt;">${label}</span>
+    <!--[if mso]>
+    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
+    <![endif]-->
+</a>`;
+};
 const tagsExports = {
     ...allTags,
     mjml,
+    emailButton,
 };
 module.exports = tagsExports;
 //# sourceMappingURL=mjml-tags.js.map

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "1.1.2-beta.15",
+  "version": "1.1.2-beta.16",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -38,3 +38,3 @@ "homepage": "https://saltcorn.com",
   "devDependencies": {
-    "@saltcorn/types": "1.1.2-beta.15",
+    "@saltcorn/types": "1.1.2-beta.16",
     "@types/escape-html": "^1.0.4",
@@ -41,0 +41,0 @@ "@types/jest": "^29.5.14",

No alert changes

Improved metrics

Total package byte prevSize

280009

increased by1.76%

Lines of code

3643

increased by1.87%

No dependency changes