@saltcorn/markup - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0-beta.0

dist/form.js

@@ -74,3 +74,3 @@ "use strict";
             const opts = select_options(v, hdr);
-            return `<select class="form-control ${validClass} ${hdr.class || ""}"${maybe_disabled} data-fieldname="${text_attr(hdr.form_name)}" name="${text_attr(name)}" id="input${text_attr(name)}"${hdr.attributes && hdr.attributes.explainers
+            return `<select class="form-control form-select ${validClass} ${hdr.class || ""}"${maybe_disabled} data-fieldname="${text_attr(hdr.form_name)}" name="${text_attr(name)}" id="input${text_attr(name)}"${hdr.attributes && hdr.attributes.explainers
                 ? ` data-explainers="${encodeURIComponent(JSON.stringify(hdr.attributes.explainers))}"`
@@ -100,3 +100,3 @@ : ""}>${opts}</select>`;
             const inner = hdr.postText
-                ? div({ class: "input-group" }, the_input, div({ class: "input-group-append" }, span({ class: "input-group-text", id: "basic-addon2" }, hdr.postText)))
+                ? div({ class: "input-group" }, the_input, span({ class: "input-group-text", id: "basic-addon2" }, hdr.postText))
                 : the_input;
@@ -130,3 +130,3 @@ return inner;
     }, i({ class: "fas fa-plus" }));
-    const icons = div({ class: "float-right" }, span({ onclick: "rep_up(this)" }, i({ class: "fa fa-arrow-up pull-right" })), "&nbsp;", span({ onclick: "rep_del(this)" }, i({ class: "fa fa-times pull-right" })), "&nbsp;", span({ onclick: "rep_down(this)" }, i({ class: "fa fa-arrow-down pull-right" })));
+    const icons = div({ class: "float-end" }, span({ onclick: "rep_up(this)" }, i({ class: "fa fa-arrow-up pull-right" })), "&nbsp;", span({ onclick: "rep_del(this)" }, i({ class: "fa fa-times pull-right" })), "&nbsp;", span({ onclick: "rep_down(this)" }, i({ class: "fa fa-arrow-down pull-right" })));
     if (Array.isArray(v[hdr.form_name]) && v[hdr.form_name].length > 0) {
@@ -328,3 +328,3 @@ return (div({
             id: "dropdownMenuButton",
-            "data-toggle": "dropdown",
+            "data-bs-toggle": "dropdown",
             "aria-haspopup": "true",
@@ -331,0 +331,0 @@ "aria-expanded": "false",

dist/helpers.js

@@ -128,7 +128,7 @@ "use strict";
     return `<div class="input-group search-bar" id="search-input-group-${rndid}">
-  <div class="input-group-prepend">
+  
   <button class="btn btn-outline-secondary search-bar" ${clickHandler ? `onClick="${clickHandler}"` : ""} type="submit" id="button-search-submit">
   <i class="fas fa-search"></i>
   </button>
-  </div>
+  
 <input type="search" class="form-control search-bar ${(badges && badges.length > 0) || has_dropdown ? "br-none" : ""}" placeholder="${placeHolder || "Search for..."}" 
@@ -142,7 +142,6 @@ }"
        aria-label="Search" aria-describedby="button-search-submit" ${v ? `value="${text_attr(v)}"` : ""}>
-<div class="input-group-append">
   ${badges && badges.length > 0
         ? `<div class="input-group-text">${badges
-            .map((b) => `<span class="badge badge-primary">${b.text}${b.onclick
-            ? `<a href="javascript:${b.onclick}"><i class="ml-1 fas fa-lg fa-times"></i></a> `
+            .map((b) => `<span class="badge bg-primary">${b.text}${b.onclick
+            ? `<a href="javascript:${b.onclick}"><i class="ms-1 fas fa-lg fa-times"></i></a> `
             : ""}</span>`)
@@ -153,3 +152,3 @@ .join("&nbsp;")}
   ${has_dropdown
-        ? `<button class="btn btn-outline-secondary dropdown-toggle search-bar" id="dd${rndid}" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="align_dropdown('${rndid}')"></button>`
+        ? `<button class="btn btn-outline-secondary dropdown-toggle search-bar" id="dd${rndid}" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="align_dropdown('${rndid}')"></button>`
         : ""}
@@ -161,3 +160,2 @@ ${has_dropdown
         : ""}
-</div>
 </div>`;
@@ -164,0 +162,0 @@ };

dist/index.js

@@ -38,3 +38,3 @@ "use strict";
  */
-const post_btn = (href, s, csrfToken, { btnClass = "btn-primary", onClick, small, style, ajax, reload_on_done, reload_delay, klass = "", formClass, spinner, req, confirm, icon, } = {}) => `<form action="${text(href)}" method="post"${formClass ? `class="${formClass}"` : ""}>
+const post_btn = (href, s, csrfToken, { btnClass = "btn-primary", onClick, small, style, ajax, reload_on_done, reload_delay, klass = "", formClass, spinner, req, confirm, icon, } = {}) => `<form action="${text(href)}" method="post"${formClass ? ` class="${formClass}"` : ""}>
   <input type="hidden" name="_csrf" value="${csrfToken}">
@@ -95,7 +95,7 @@ <button ${ajax ? 'type="button"' : 'type="submit"'} ${onClick
     id,
-    "data-toggle": "dropdown",
+    "data-bs-toggle": "dropdown",
     "aria-haspopup": "true",
     "aria-expanded": "false",
 }, '<i class="fas fa-ellipsis-h"></i>'), div({
-    class: "dropdown-menu dropdown-menu-right",
+    class: "dropdown-menu dropdown-menu-end",
     "aria-labelledby": id,
@@ -102,0 +102,0 @@ }, elems));

dist/layout_utils.js

@@ -47,7 +47,7 @@ "use strict";
     role: "button",
-    "data-toggle": "dropdown",
+    "data-bs-toggle": "dropdown",
     "aria-haspopup": "true",
     "aria-expanded": "false",
 }, icon ? i({ class: `fa-fw mr-05 ${icon}` }) : "", label), div({
-    class: ["dropdown-menu", isUser && "dropdown-menu-right"],
+    class: ["dropdown-menu", isUser && "dropdown-menu-end"],
     "aria-labelledby": `dropdown${labelToId(label)}`,
@@ -60,3 +60,3 @@ }, subitems.map((si) => a({ class: ["dropdown-item", si.style || ""], href: si.link }, si.icon ? i({ class: `fa-fw mr-05 ${si.icon}` }) : "", si.label))));
  */
-const rightNavBar = (currentUrl, sections) => div({ class: "collapse navbar-collapse", id: "navbarResponsive" }, ul({ class: "navbar-nav ml-auto my-2 my-lg-0" }, innerSections(sections).map((s) => s.location === "Mobile Bottom"
+const rightNavBar = (currentUrl, sections) => div({ class: "collapse navbar-collapse", id: "navbarResponsive" }, ul({ class: "navbar-nav ms-auto my-2 my-lg-0" }, innerSections(sections).map((s) => s.location === "Mobile Bottom"
     ? ""
@@ -79,3 +79,3 @@ : s.subitems
                     type: "search",
-                    class: "form-control search-bar pl-2 hasbl",
+                    class: "form-control search-bar ps-2 hasbl",
                     placeholder: s.label,
@@ -86,6 +86,6 @@ id: "inputq",
                     "aria-describedby": "button-search-submit",
-                }), div({ class: "input-group-append" }, button({
+                }), button({
                     class: "btn btn-outline-secondary search-bar",
                     type: "submit",
-                }, i({ class: "fas fa-search" }))))))
+                }, i({ class: "fas fa-search" })))))
                 : "")));
@@ -143,4 +143,4 @@ /**
         type: "button",
-        "data-toggle": "collapse",
-        "data-target": "#navbarResponsive",
+        "data-bs-toggle": "collapse",
+        "data-bs-target": "#navbarResponsive",
         "aria-controls": "navbarResponsive",
@@ -174,4 +174,3 @@ "aria-expanded": "false",
         ${text(s)}
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
         </button>
@@ -221,3 +220,3 @@ </div>`
         "breadcrumb-item breadcrumb-workflow",
-        step.currentStep - 1 === ix && "active-step font-weight-bold",
+        step.currentStep - 1 === ix && "active-step fw-bold",
     ],
@@ -232,3 +231,3 @@ }, span(wfstep.name)))
     ? workflowBreadcrumbItem(c)
-    : standardBreadcrumbItem(crumbs.length)(c, ix)), right ? li({ class: "ml-auto" }, right) : ""));
+    : standardBreadcrumbItem(crumbs.length)(c, ix)), right ? li({ class: "ms-auto" }, right) : ""));
 /**
@@ -235,0 +234,0 @@ * @param {object[]} headers

dist/layout.d.ts

@@ -11,2 +11,3 @@ /**
         ntabs?: any;
+        deeplink?: boolean;
         independent: boolean;
@@ -22,7 +23,8 @@ };
         is_owner?: boolean;
+        req?: any;
     };
 }
 declare type RenderOpts = LayoutExports.RenderOpts;
-declare const LayoutExports: ({ blockDispatch, layout, role, alerts, is_owner, }: RenderOpts) => string;
+declare const LayoutExports: ({ blockDispatch, layout, role, alerts, is_owner, req, }: RenderOpts) => string;
 export = LayoutExports;
 //# sourceMappingURL=layout.d.ts.map

dist/layout.js

@@ -6,2 +6,5 @@ "use strict";
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 const tags = require("./tags");
@@ -11,2 +14,3 @@ const { div, a, span, text, img, p, h1, h2, h3, h4, h5, h6, label, ul, button, li, i, genericElement, } = tags;
 const helpers = require("./helpers");
+const mjml_layout_1 = __importDefault(require("./mjml-layout"));
 const { search_bar } = helpers;
@@ -51,3 +55,6 @@ /**
 const applyTextStyle = (segment, inner) => {
-    let style = segment.font ? { fontFamily: segment.font } : {};
+    let style = segment.font
+        ? { fontFamily: segment.font, ...segment.style }
+        : segment.style || {};
+    let hasStyle = Object.keys(style).length > 0;
     if (segment.textStyle && segment.textStyle.startsWith("h") && segment.inline)
@@ -71,3 +78,3 @@ style.display = "inline-block";
                 ? div({ class: segment.textStyle || "", style }, inner)
-                : segment.textStyle || segment.font
+                : segment.textStyle || hasStyle
                     ? span({ class: segment.textStyle || "", style }, inner)
@@ -95,3 +102,3 @@ : inner;
  */
-const renderTabs = ({ contents, titles, tabsStyle, ntabs, independent }, go) => {
+const renderTabs = ({ contents, titles, tabsStyle, ntabs, independent, deeplink }, go) => {
     const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
@@ -102,4 +109,4 @@ if (tabsStyle === "Accordion")
             type: "button",
-            "data-toggle": "collapse",
-            "data-target": `#${rndid}tab${ix}`,
+            "data-bs-toggle": "collapse",
+            "data-bs-target": `#${rndid}tab${ix}`,
             "aria-expanded": ix === 0 ? "true" : "false",
@@ -119,5 +126,9 @@ "aria-controls": `${rndid}tab${ix}`,
         }, contents.map((t, ix) => li({ class: "nav-item", role: "presentation" }, a({
-            class: ["nav-link", ix === 0 && "active"],
+            class: [
+                "nav-link",
+                ix === 0 && "active",
+                deeplink && "deeplink",
+            ],
             id: `${rndid}link${ix}`,
-            "data-toggle": "tab",
+            "data-bs-toggle": "tab",
             href: `#${validID(titles[ix])}`,
@@ -144,3 +155,3 @@ role: "tab",
  */
-const render = ({ blockDispatch, layout, role, alerts, is_owner, }) => {
+const render = ({ blockDispatch, layout, role, alerts, is_owner, req, }) => {
     //console.log(JSON.stringify(layout, null, 2));
@@ -217,3 +228,3 @@ function wrap(segment, isTop, ix, inner) {
                 div({ class: "card-header" }, typeof segment.title === "string"
-                    ? h6({ class: "m-0 font-weight-bold text-primary" }, segment.title)
+                    ? h6({ class: "m-0 fw-bold text-primary" }, segment.title)
                     : segment.title), segment.tabContents &&
@@ -223,3 +234,3 @@ div({ class: "card-header" }, ul({ class: "nav nav-tabs card-header-tabs" }, Object.keys(segment.tabContents).map((title, ix) => li({ class: "nav-item" }, a({
                     href: `#tab-${title}`,
-                    "data-toggle": "tab",
+                    "data-bs-toggle": "tab",
                     role: "tab",
@@ -275,6 +286,13 @@ }, title))))) +
             });
+            const to_bs5 = (s) => {
+                if (s === "left")
+                    return "start";
+                if (s === "right")
+                    return "end";
+                return s;
+            };
             return wrap(segment, isTop, ix, genericElement(htmlElement || "div", {
                 class: [
                     customClass || false,
-                    hAlign && `text-${hAlign}`,
+                    hAlign && `text-${to_bs5(hAlign)}`,
                     vAlign === "middle" && "d-flex align-items-center",
@@ -336,3 +354,14 @@ vAlign === "bottom" && "d-flex align-items-end",
             if (cardDeck)
-                markup = div({ class: "card-deck", style: segment.style }, segment.besides.map((t, ixb) => go(t, false, ixb)));
+                markup = div({
+                    class: `row row-cols-1 row-cols-md-${segment.besides.length} g-4 mb-3`,
+                    style: segment.style,
+                }, segment.besides.map((t, ixb) => {
+                    const newt = { ...t };
+                    newt.class = t.class
+                        ? Array.isArray(t.class)
+                            ? ["h-100", ...t.class]
+                            : t.class + " h-100"
+                        : "h-100";
+                    return div({ class: "col" }, go(newt, false, ixb));
+                }));
             else
@@ -359,3 +388,13 @@ markup = div({
     }
-    return go(makeSegments(layout, alerts), true, 0);
+    if (req && req.generate_email)
+        return (0, mjml_layout_1.default)({
+            blockDispatch,
+            layout,
+            role,
+            alerts,
+            is_owner,
+            req,
+        });
+    else
+        return go(makeSegments(layout, alerts), true, 0);
 };
@@ -362,0 +401,0 @@ // declaration merging

dist/tabs.js

@@ -21,3 +21,3 @@ "use strict";
         class: ["nav-link", ix == 0 && "active"],
-        "data-toggle": "tab",
+        "data-bs-toggle": "tab",
         href: `#${mkId(e[0])}`,
@@ -24,0 +24,0 @@ id: `${mkId(e[0])}-tab`,

dist/tags.js

@@ -39,3 +39,3 @@ "use strict";
  */
-const domReady = (js) => `(function(f){if (document.readyState === "complete") f(); else document.addEventListener('DOMContentLoaded',f,false)})(function(){${js}});`;
+const domReady = (js) => `(function(f){if (document.readyState === "complete") f(); else document.addEventListener('DOMContentLoaded',()=>setTimeout(f),false)})(function(){${js}});`;
 xss_1.whiteList.kbd = [];
@@ -42,0 +42,0 @@ /**

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.6.4",
+  "version": "0.7.0-beta.0",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -35,3 +35,3 @@ "homepage": "https://saltcorn.com",
   "devDependencies": {
-    "@saltcorn/types": "0.6.4",
+    "@saltcorn/types": "0.7.0-beta.0",
     "@types/escape-html": "^1.0.1",
@@ -38,0 +38,0 @@ "@types/jest": "^27.0.3",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

204126

increased by17.05%

Number of package files

63

increased by14.55%

Lines of code

2422

increased by17%

No dependency changes