@saltcorn/markup 0.6.2-beta.2 → 0.6.2

package/layout_utils.js

@@ -1,394 +0,0 @@
-/**
- * @category saltcorn-markup
- * @module layout_utils
- */
-
-const {
-  ul,
-  li,
-  ol,
-  a,
-  span,
-  hr,
-  div,
-  text,
-  img,
-  button,
-  nav,
-  script,
-  domReady,
-  footer,
-  i,
-  small,
-  br,
-} = require("./tags");
-
-/**
- * @param {string} item 
- * @returns {string}
- */
-const labelToId = (item) => text(item.replace(" ", ""));
-
-/**
- * @param {string} currentUrl 
- * @param {object} item 
- * @returns {boolean}
- */
-const active = (currentUrl, item) =>
-  (item.link && currentUrl.startsWith(item.link)) ||
-  (item.subitems &&
-    item.subitems.some((si) => si.link && currentUrl.startsWith(si.link)));
-
-/**
- * @param {object[]} sections 
- * @returns {object[]}
- */
-const innerSections = (sections) => {
-  var items = [];
-  (sections || []).forEach((section) => {
-    (section.items || []).forEach((item) => {
-      items.push(item);
-    });
-  });
-  return items;
-};
-
-/**
- * @param {object} opts
- * @param {string} opts.label
- * @param {object[]} opts.subitems
- * @param {string} [opts.icon]
- * @param {boolean} opts.isUser
- * @returns {li}
- */
-const navSubitems = ({ label, subitems, icon, isUser }) =>
-  li(
-    { class: "nav-item dropdown" },
-    a(
-      {
-        class: "nav-link dropdown-toggle",
-        href: "#",
-        id: `dropdown${labelToId(label)}`,
-        role: "button",
-        "data-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"],
-        "aria-labelledby": `dropdown${labelToId(label)}`,
-      },
-      subitems.map((si) =>
-        a(
-          { class: ["dropdown-item", si.style || ""], href: si.link },
-          si.icon ? i({ class: `fa-fw mr-05 ${si.icon}` }) : "",
-          si.label
-        )
-      )
-    )
-  );
-
-/**
- * @param {string} currentUrl 
- * @param {object[]} sections 
- * @returns {div}
- */
-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"
-          ? ""
-          : s.subitems
-          ? navSubitems(s)
-          : s.link
-          ? li(
-              {
-                class: ["nav-item", active(currentUrl, s) && "active"],
-              },
-              a(
-                {
-                  class: ["nav-link js-scroll-trigger", s.style || ""],
-                  href: text(s.link),
-                },
-                s.icon ? i({ class: `fa-fw mr-05 ${s.icon}` }) : "",
-                text(s.label)
-              )
-            )
-          : ""
-      )
-    )
-  );
-
-  /**
-   * @param {object[]} sections 
-   * @returns {boolean}
-   */
-const hasMobileItems = (sections) =>
-  innerSections(sections).some((s) => s.location === "Mobile Bottom");
-
-/**
- * @param {string} currentUrl 
- * @param {object[]} sections 
- * @param {string} [cls = ""]
- * @param {string} [clsLink = ""]
- * @returns {footer|string}
- */
-const mobileBottomNavBar = (currentUrl, sections, cls = "", clsLink = "") =>
-  hasMobileItems(sections)
-    ? footer(
-        {
-          class:
-            "bs-mobile-nav-footer d-flex justify-content-around d-sm-flex d-md-none " +
-            cls,
-        },
-        innerSections(sections).map((s) =>
-          s.location !== "Mobile Bottom"
-            ? ""
-            : //: s.subitems
-            //? navSubitems(s)
-            s.link
-            ? div(
-                {
-                  class: [
-                    "mt-2 text-center",
-                    active(currentUrl, s) ? "active" : "opacity-50",
-                  ],
-                },
-                a(
-                  {
-                    class: [s.style || "", clsLink],
-                    href: text(s.link),
-                  },
-                  s.icon ? i({ class: `fa-lg ${s.icon}` }) : "",
-                  br(),
-                  small(text(s.label))
-                )
-              )
-            : ""
-        )
-      )
-    : "";
-
-/**
- * @param {object} opts
- * @param {string} opts.name
- * @param {string} opts.logo
- * @returns {string[]}
- */
-const leftNavBar = ({ name, logo }) => [
-  a(
-    { class: "navbar-brand js-scroll-trigger", href: "/" },
-    logo &&
-      img({
-        src: logo,
-        width: "30",
-        height: "30",
-        class: "mx-1 d-inline-block align-top",
-        alt: "Logo",
-        loading: "lazy",
-      }),
-    name
-  ),
-  button(
-    {
-      class: "navbar-toggler navbar-toggler-right",
-      type: "button",
-      "data-toggle": "collapse",
-      "data-target": "#navbarResponsive",
-      "aria-controls": "navbarResponsive",
-      "aria-expanded": "false",
-      "aria-label": "Toggle navigation",
-    },
-    span({ class: "navbar-toggler-icon" })
-  ),
-];
-
-/**
- * @param {object} brand 
- * @param {object[]} sections 
- * @param {string} currentUrl 
- * @param {object} opts
- * @param {boolean} [opts.fixedTop = true]
- * @returns {string}
- */
-const navbar = (brand, sections, currentUrl, opts = { fixedTop: true }) =>
-  nav(
-    {
-      class: `navbar navbar-expand-md ${opts.class || ""} ${
-        opts.colorscheme ? opts.colorscheme.toLowerCase() : "navbar-light"
-      } ${opts.fixedTop ? "fixed-top" : ""}`,
-      id: "mainNav",
-    },
-    div(
-      { class: opts.fluid ? "container-fluid" : "container" },
-      leftNavBar(brand),
-      rightNavBar(currentUrl, sections)
-    )
-  );
-
-/**
- * @param {string} type 
- * @param {string} s 
- * @returns {string}
- */
-const alert = (type, s) => {
-  //console.log("alert", type, s,s.length)
-  const realtype = type === "error" ? "danger" : type;
-  return s && s.length > 0
-    ? `<div class="alert alert-${realtype} alert-dismissible fade show" role="alert">
-        ${text(s)}
-        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>`
-    : "";
-};
-
-/**
- * @returns {string}
- */
-const navbarSolidOnScroll = script(
-  domReady(`$(window).scroll(function () {
-    if ($(window).scrollTop() >= 10) {
-    $('.navbar').css('background','white');
-    } else {
-    $('.navbar').css('background','transparent');
-    }
-    });`)
-);
-
-/**
- * @param {object} x 
- * @param {object} s 
- * @returns {object}
- */
-const logit = (x, s) => {
-  if (s) console.log(s, x);
-  else console.log(x);
-  return x;
-};
-
-/**
- * @param {number} len 
- * @returns {function}
- */
-const standardBreadcrumbItem = (len) => ({ href, text }, ix) =>
-  li(
-    {
-      class: ["breadcrumb-item", ix == len - 1 && "active"],
-      "aria-current": ix == len - 1 && "page",
-    },
-    href ? a({ href }, text) : text
-  );
-
-/**
- * @param {object} opts
- * @param {Workflow} opts.workflow
- * @param {object} opts.step
- * @returns {string}
- */
-const workflowBreadcrumbItem = ({ workflow, step }) =>
-  workflow.steps
-    .map((wfstep, ix) =>
-      li(
-        {
-          class: [
-            "breadcrumb-item breadcrumb-workflow",
-            step.currentStep - 1 === ix && "active-step font-weight-bold",
-          ],
-        },
-        span(wfstep.name)
-      )
-    )
-    .join("");
-
-/**
- * @param {object[]} crumbs 
- * @returns {string}
- */
-const breadcrumbs = (crumbs) =>
-  nav(
-    { "aria-label": "breadcrumb" },
-    ol(
-      { class: "breadcrumb" },
-      crumbs.map((c) =>
-        c.workflow
-          ? workflowBreadcrumbItem(c)
-          : standardBreadcrumbItem(crumbs.length)(c)
-      )
-    )
-  );
-
-/**
- * @param {object[]} headers 
- * @returns {string}
- */
-const headersInHead = (headers) =>
-  headers
-    .filter((h) => h.css)
-    .map((h) => `<link href="${h.css}" rel="stylesheet">`)
-    .join("") +
-  headers
-    .filter((h) => h.style)
-    .map((h) => `<style>${h.style}</style>`)
-    .join("") +
-  headers
-    .filter((h) => h.headerTag)
-    .map((h) => h.headerTag)
-    .join("");
-
-/**
- * @param {object[]} headers 
- * @returns {string}
- */
-const headersInBody = (headers) =>
-  headers
-    .filter((h) => h.script)
-    .map(
-      (h) =>
-        `<script src="${h.script}" ${
-          h.integrity
-            ? `integrity="${h.integrity}" crossorigin="anonymous"`
-            : ""
-        }></script>`
-    )
-    .join("") +
-  headers
-    .filter((h) => h.scriptBody)
-    .map((h) => `<script>${h.scriptBody}</script>`)
-    .join("");
-
-/**
- * @param {object[]} tabList 
- * @returns {ul}
- */
-const cardHeaderTabs = (tabList) =>
-  ul(
-    { class: "nav nav-tabs card-header-tabs" },
-    tabList.map(({ href, label, active }) =>
-      li(
-        { class: "nav-item" },
-        a({ class: ["nav-link", active && "active"], href }, label)
-      )
-    )
-  );
-
-module.exports = {
-  navbar,
-  alert,
-  logit,
-  navbarSolidOnScroll,
-  breadcrumbs,
-  headersInHead,
-  headersInBody,
-  cardHeaderTabs,
-  mobileBottomNavBar,
-};

package/markup.test.js

@@ -1,104 +0,0 @@
-const {
-  a,
-  input,
-  div,
-  ul,
-  text,
-  text_attr,
-  i,
-  hr,
-  genericElement,
-} = require("./tags");
-
-describe("tags", () => {
-  it("renders", () => {
-    expect(a({ href: "/" }, "Home")).toBe('<a href="/">Home</a>');
-    expect(a({ href: "/" }, ["Home", " Sweet", " Home"])).toBe(
-      '<a href="/">Home Sweet Home</a>'
-    );
-    expect(a({ href: "/", class: "centre" }, "Home")).toBe(
-      '<a href="/" class="centre">Home</a>'
-    );
-    expect(input({ type: "text" })).toBe('<input type="text">');
-    expect(div(5)).toBe("<div>5</div>");
-    expect(div()).toBe("<div></div>");
-    expect(i()).toBe("<i></i>");
-    expect(hr()).toBe("<hr>");
-    expect(div(["hello ", "world"])).toBe("<div>hello world</div>");
-    expect(ul({ class: "foo" }, [false, "hello ", "world"])).toBe(
-      `<ul class="foo">hello world</ul>`
-    );
-    expect(ul({ class: "foo" }, [["hello ", "world"]])).toBe(
-      `<ul class="foo">hello world</ul>`
-    );
-    expect(Array.isArray(["hello ", "world"])).toBe(true);
-    expect(Array.isArray({})).toBe(false);
-    expect(i({ class: "fas fa-plus-square" })).toBe(
-      '<i class="fas fa-plus-square"></i>'
-    );
-    expect(genericElement("div", { class: "foo" }, "Hello")).toBe(
-      '<div class="foo">Hello</div>'
-    );
-  });
-
-  it("class", () => {
-    expect(div({ class: "foo" }, 5)).toBe('<div class="foo">5</div>');
-    expect(div({ class: false }, 5)).toBe("<div>5</div>");
-    expect(div({ class: "foo bar" }, 5)).toBe('<div class="foo bar">5</div>');
-    expect(div({ class: ["foo", "bar"] }, 5)).toBe(
-      '<div class="foo bar">5</div>'
-    );
-    expect(div({ class: ["foo", " "] }, 5)).toBe('<div class="foo  ">5</div>');
-    expect(input({ class: ["foo", " "] })).toBe('<input class="foo  ">');
-
-    expect(
-      div({ class: ["foo bar", "", undefined, null, false, "baz"] }, 5)
-    ).toBe('<div class="foo bar baz">5</div>');
-
-    expect(div({ class: [undefined, null, false] }, 5)).toBe("<div>5</div>");
-    expect(hr({ class: "foo" })).toBe('<hr class="foo">');
-  });
-  it("style", () => {
-    expect(div({ style: "color:red;border:1px solid black" }, 5)).toBe(
-      '<div style="color:red;border:1px solid black">5</div>'
-    );
-    expect(div({ style: ["color:red", "border:1px solid black"] }, 5)).toBe(
-      '<div style="color:red;border:1px solid black">5</div>'
-    );
-    expect(
-      div(
-        { style: ["color:red", false, undefined, "border:1px solid black"] },
-        5
-      )
-    ).toBe('<div style="color:red;border:1px solid black">5</div>');
-    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", () => {
-    expect(text("foo")).toBe("foo");
-    expect(text_attr('" onMouseOver="alert(1);')).toBe(
-      "&quot; onMouseOver=&quot;alert(1);"
-    );
-    expect(text(1)).toBe("1");
-    expect(text(0)).toBe("0");
-    expect(text("<script>alert(1);<script>")).toBe(
-      "&lt;script&gt;alert(1);&lt;script&gt;"
-    );
-    expect(text("<p>alert<p>")).toBe("<p>alert<p>");
-    expect(text("<kbd>ctrl<kbd>")).toBe("<kbd>ctrl<kbd>");
-  });
-});

package/mktag.js

@@ -1,105 +0,0 @@
-/**
- * @category saltcorn-markup
- * @module mktag
- */
-
-//https://stackoverflow.com/a/54246501
-/**
- * @param {string} str 
- * @returns {string}
- */
-const camelToCssCase = (str) =>
-  str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-
-/**
- * @param {string|object} cs 
- * @returns {string}
- */
-const ppClasses = (cs) =>
-  typeof cs === "string" ? cs : !cs ? "" : cs.filter((c) => c).join(" ");
-
-/**
- * @param {string|object} c 
- * @returns {string}
- */
-const ppClass = (c) => {
-  const clss = ppClasses(c);
-  return clss ? `class="${clss}"` : "";
-};
-
-/**
- * @param {string|string[]|object} [cs]
- * @returns {string}
- */
-const ppStyles = (cs) =>
-  typeof cs === "string"
-    ? cs
-    : !cs
-    ? ""
-    : Array.isArray(cs)
-    ? cs.filter((c) => c).join(";")
-    : typeof cs === "object"
-    ? Object.entries(cs)
-        .map(([k, v]) => `${camelToCssCase(k)}:${v}`)
-        .join(";")
-    : "";
-
-/**
- * @param {string|string[]|object} [cs]
- * @returns {string}
- */
-const ppStyle = (c) => {
-  const clss = ppStyles(c);
-  return clss ? `style="${clss}"` : "";
-};
-
-/**
- * @param {object[]} opts
- * @param {string} opts.k
- * @param {boolean} [opts.v]
- * @returns {string}
- */
-const ppAttrib = ([k, v]) =>
-  typeof v === "boolean"
-    ? v
-      ? k
-      : ""
-    : typeof v === "undefined"
-    ? ""
-    : k === "class"
-    ? ppClass(v)
-    : k === "style"
-    ? ppStyle(v)
-    : `${k}="${v}"`;
-
-/**
- * @param {string} tnm 
- * @param {boolean} voidTag 
- * @returns {function}
- */
-const mkTag = (tnm, voidTag) => (...args) => {
-  var body = "";
-  var attribs = " ";
-
-  const argIter = (arg) => {
-    if (typeof arg === "undefined" || arg === null || arg === false) {
-      //do nothing
-    } else if (typeof arg === "string") {
-      body += arg;
-    } else if (typeof arg === "object") {
-      if (Array.isArray(arg)) {
-        arg.forEach(argIter);
-      } else {
-        attribs += Object.entries(arg)
-          .map(ppAttrib)
-          .filter((s) => s)
-          .join(" ");
-      }
-    } else body += arg;
-  };
-  args.forEach(argIter);
-  if (attribs === " ") attribs = "";
-  return voidTag ? `<${tnm}${attribs}>` : `<${tnm}${attribs}>${body}</${tnm}>`;
-};
-
-module.exports = mkTag;

package/table.js

@@ -1,115 +0,0 @@
-/**
- * @category saltcorn-markup
- * @module table
- */
-
-const { contract, is } = require("contractis");
-
-const {
-  a,
-  td,
-  tr,
-  th,
-  text,
-  div,
-  table,
-  thead,
-  tbody,
-  ul,
-  li,
-  span,
-} = require("./tags");
-const { pagination } = require("./helpers");
-
-/**
- * @param {object} hdr 
- * @returns {th}
- */
-const headerCell = (hdr) =>
-  th(
-    (hdr.align || hdr.width) && {
-      style:
-        (hdr.align ? `text-align: ` + hdr.align : "") +
-        (hdr.width ? `width: ` + hdr.width : ""),
-    },
-    hdr.sortlink ? a({ href: hdr.sortlink }, hdr.label) : hdr.label
-  );
-
-/**
- * @function
- * @param {object[]} hdrs
- * @param {object[]} vs
- * @param {object} [opts]
- * @returns {string}
- */
-const mkTable = contract(
-  is.fun(
-    [
-      is.array(is.obj({ label: is.str, key: is.or(is.str, is.fun()) })),
-      is.array(is.obj()),
-      is.maybe(
-        is.obj({
-          pagination: is.maybe(
-            is.obj({
-              current_page: is.posint,
-              pages: is.posint,
-              get_page_link: is.fun(),
-            })
-          ),
-          noHeader: is.maybe(is.bool),
-          hover: is.maybe(is.bool),
-        })
-      ),
-    ],
-    is.str
-  ),
-  (hdrs, vs, opts = {}) =>
-    div(
-      { class: "table-responsive" },
-      table(
-        {
-          class: [
-            "table table-sm",
-            opts.class,
-            hdrs.some((h) => h.width) && "table-layout-fixed",
-            (opts.onRowSelect || (opts.hover && vs && vs.length > 1)) &&
-              "table-hover",
-          ],
-          style: opts.style,
-        },
-        !opts.noHeader && thead(tr(hdrs.map((hdr) => headerCell(hdr)))),
-        tbody(
-          (vs || []).map((v) =>
-            tr(
-              mkClickHandler(opts, v),
-              hdrs.map((hdr) =>
-                td(
-                  !!hdr.align && { style: "text-align:" + hdr.align },
-                  typeof hdr.key === "string" ? text(v[hdr.key]) : hdr.key(v)
-                )
-              )
-            )
-          )
-        )
-      ),
-      opts.pagination && pagination(opts.pagination)
-    )
-);
-
-/**
- * @param {object} opts 
- * @param {object} v 
- * @returns {object}
- */
-const mkClickHandler = (opts, v) => {
-  var attrs = {};
-  if (opts.onRowSelect)
-    attrs.onclick =
-      typeof opts.onRowSelect === "function"
-        ? opts.onRowSelect(v)
-        : opts.onRowSelect;
-  if (opts.selectedId && v.id && +v.id === +opts.selectedId)
-    attrs.class = "table-active";
-  return attrs;
-};
-module.exports = mkTable;