@saltcorn/markup 0.6.1-beta.0 → 0.6.1-beta.1

package/builder.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module builder
+ */
+
 const {
   p,
   div,
@@ -16,14 +21,36 @@ const {
 } = require("./tags");
 const { contract, is } = require("contractis");
 
+/**
+ * @param {object} rec 
+ * @param {object} csrf 
+ * @returns {object}
+ */
 const addCsrf = (rec, csrf) => {
   rec.csrfToken = csrf;
   return rec;
 };
 
+/**
+ * @param {object} x 
+ * @returns {string}
+ */
 const encode = (x) => encodeURIComponent(JSON.stringify(x));
 
-module.exports = (
+module.exports = 
+/**
+ * @param {object} opts
+ * @param {object} opts.options
+ * @param {object} opts.context
+ * @param {object} opts.action
+ * @param {string} opts.stepName
+ * @param {object} opts.layout
+ * @param {string} [opts.mode = "show"]
+ * @param {object} opts
+ * @param {object} csrfToken 
+ * @returns {div}
+ */
+(
   { options, context, action, stepName, layout, mode = "show", version_tag },
   csrfToken
 ) =>

package/emergency_layout.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module emergency_layout
+ */
+
 const {
   ul,
   li,
@@ -18,6 +23,12 @@ const renderLayout = require("./layout");
 const { renderForm, link } = require(".");
 const { navbar, alert } = require("./layout_utils");
 
+/**
+ * @param {string} title 
+ * @param {string|object} body 
+ * @param {object[]} alerts 
+ * @returns {string}
+ */
 const renderBody = (title, body, alerts) =>
   renderLayout({
     blockDispatch: {},
@@ -26,6 +37,17 @@ const renderBody = (title, body, alerts) =>
     alerts,
   });
 
+/**
+ * @param {object} opts
+ * @param {string} opts.title
+ * @param {object} opts.menu
+ * @param {object} opts.brand
+ * @param {object[]} opts.alerts
+ * @param {string} opts.currentUrl
+ * @param {string|object} opts.body
+ * @param {object[]} opts.headers
+ * @returns {string}
+ */
 const wrap = ({ title, menu, brand, alerts, currentUrl, body, headers }) =>
   navbar(brand, menu, currentUrl) + renderBody(title, body, alerts);
 

package/form.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module form
+ */
+
 const {
   p,
   div,
@@ -13,7 +18,17 @@ const {
 const { contract, is } = require("contractis");
 const renderLayout = require("./layout");
 const { isdef, select_options, search_bar } = require("./helpers");
+
+/**
+ * @param {string} s 
+ * @returns {string}
+ */
 const rmInitialDot = (s) => (s && s[0] === "." ? s.replace(".", "") : s);
+
+/**
+ * @param {object} sIf 
+ * @returns {string}
+ */
 const mkShowIf = (sIf) =>
   Object.entries(sIf)
     .map(([target, value]) =>
@@ -33,7 +48,20 @@ const mkShowIf = (sIf) =>
     )
     .join(" && ");
 
+/**
+ * @param {string} formStyle 
+ * @returns {boolean}
+ */
 const isHoriz = (formStyle) => formStyle === "horiz";
+
+/**
+ * @param {object} hdr 
+ * @param {object} inner 
+ * @param {string} [error = ""]
+ * @param {string} fStyle 
+ * @param {string} labelCols 
+ * @returns {div}
+ */
 const formRowWrap = (hdr, inner, error = "", fStyle, labelCols) =>
   div(
     {
@@ -67,6 +95,12 @@ const formRowWrap = (hdr, inner, error = "", fStyle, labelCols) =>
         ]
   );
 
+/**
+ * @param {object[]} v 
+ * @param {object[]} errors 
+ * @param {string} [nameAdd = ""]
+ * @returns {function}
+ */
 const innerField = (v, errors, nameAdd = "") => (hdr) => {
   const name = hdr.form_name + nameAdd;
   const validClass = errors[name] ? "is-invalid" : "";
@@ -163,11 +197,26 @@ const innerField = (v, errors, nameAdd = "") => (hdr) => {
   }
 };
 
+/**
+ * @param {object[]} v 
+ * @param {object[]} errors 
+ * @param {string} formStyle 
+ * @param {object[]} labelCols 
+ * @returns {function}
+ */
 const mkFormRow = (v, errors, formStyle, labelCols) => (hdr) =>
   hdr.isRepeat
     ? mkFormRowForRepeat(v, errors, formStyle, labelCols, hdr)
     : mkFormRowForField(v, errors, formStyle, labelCols)(hdr);
 
+/**
+ * @param {object[]} v 
+ * @param {object[]} errors 
+ * @param {string} formStyle 
+ * @param {object[]} labelCols 
+ * @param {object} hdr 
+ * @returns {div}
+ */
 const mkFormRowForRepeat = (v, errors, formStyle, labelCols, hdr) => {
   const adder = a(
     {
@@ -228,6 +277,13 @@ const mkFormRowForRepeat = (v, errors, formStyle, labelCols, hdr) => {
   }
 };
 
+/** 
+ * @param {object} hdr 
+ * @param {string} name 
+ * @param {object} v 
+ * @param {string} extracls 
+ * @returns {*}
+ */
 const displayEdit = (hdr, name, v, extracls) => {
   var fieldview;
   var attributes = hdr.attributes;
@@ -259,6 +315,14 @@ const displayEdit = (hdr, name, v, extracls) => {
   else return fieldview.run(v, undefined, attributes);
 };
 
+/**
+ * @param {object[]} v 
+ * @param {object[]} errors 
+ * @param {string} formStyle 
+ * @param {string} labelCols 
+ * @param {string} [nameAdd = ""]
+ * @returns {function}
+ */
 const mkFormRowForField = (v, errors, formStyle, labelCols, nameAdd = "") => (
   hdr
 ) => {
@@ -278,6 +342,10 @@ const mkFormRowForField = (v, errors, formStyle, labelCols, nameAdd = "") => (
     );
 };
 
+/**
+ * @param {object} form 
+ * @returns {string}
+ */
 const renderFormLayout = (form) => {
   const blockDispatch = {
     field(segment) {
@@ -358,6 +426,11 @@ const renderFormLayout = (form) => {
   return renderLayout({ blockDispatch, layout: form.layout });
 };
 
+/**
+ * @param {string|object} form 
+ * @param {string|false} csrfToken0 
+ * @returns {string}
+ */
 const renderForm = (form, csrfToken0) => {
   const csrfToken =
     csrfToken0 === false || csrfToken0 === ""
@@ -401,6 +474,11 @@ const renderForm = (form, csrfToken0) => {
   else return mkForm(form, csrfToken, form.errors);
 };
 
+/**
+ * @param {object} form 
+ * @param {string} csrfToken 
+ * @returns {string}
+ */
 const mkFormWithLayout = (form, csrfToken) => {
   const hasFile = form.fields.some((f) => f.input_type === "file");
   const csrfField = `<input type="hidden" name="_csrf" value="${csrfToken}">`;
@@ -436,6 +514,11 @@ const mkFormWithLayout = (form, csrfToken) => {
     "</form>"
   );
 };
+
+/**
+ * @param {object[]} additionalButtons 
+ * @returns {string}
+ */
 const displayAdditionalButtons = (additionalButtons) =>
   additionalButtons
     .map(
@@ -445,6 +528,13 @@ const displayAdditionalButtons = (additionalButtons) =>
         }>${btn.label}</button>&nbsp;`
     )
     .join("");
+
+/**
+ * @param {object} form 
+ * @param {string} csrfToken 
+ * @param {object} [errors = {}]
+ * @returns {string}
+ */
 const mkForm = (form, csrfToken, errors = {}) => {
   const hasFile = form.fields.some((f) => f.input_type === "file");
   const csrfField =
@@ -503,7 +593,8 @@ const mkForm = (form, csrfToken, errors = {}) => {
   return blurbp + top + csrfField + flds + fullFormError + bot + "</form>";
 };
 
-module.exports = contract(
+module.exports = 
+contract(
   is.fun(
     [is.or(is.str, is.class("Form")), is.maybe(is.or(is.str, is.eq(false)))],
     is.str

package/helpers.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module helpers
+ */
+
 const {
   a,
   text,
@@ -10,8 +15,20 @@ const {
   label,
 } = require("./tags");
 
+/**
+ * checks if x is defined
+ * @param {*} x 
+ * @returns {boolean}
+ */
 const isdef = (x) => typeof x !== "undefined";
 
+/**
+ * @param {object|string} v 
+ * @param {object} hdr 
+ * @param {boolean} force_required 
+ * @param {string} neutral_label 
+ * @returns {string}
+ */
 const select_options = (v, hdr, force_required, neutral_label = "") => {
   const options0 = hdr.options || [];
   const options1 = force_required
@@ -38,6 +55,17 @@ const select_options = (v, hdr, force_required, neutral_label = "") => {
     .join("");
 };
 
+/**
+ * 
+ * @param {object} opts
+ * @param {string} opts.name
+ * @param {object} [opts.options]
+ * @param {string} opts.value
+ * @param {object} opts.inline
+ * @param {string} opts.form_name
+ * @param {...*} opts.rest
+ * @returns {string}
+ */
 const radio_group = ({ name, options, value, inline, form_name, ...rest }) =>
   div(
     (options || [])
@@ -65,6 +93,14 @@ const radio_group = ({ name, options, value, inline, form_name, ...rest }) =>
       .join("")
   );
 
+/**
+ * @param {object} opts
+ * @param {number} opts.current_page
+ * @param {number} opts.pages
+ * @param {function} opts.get_page_link
+ * @param {boolean} opts.trailing_ellipsis
+ * @returns {string}
+ */
 const pagination = ({
   current_page,
   pages,
@@ -106,6 +142,12 @@ const pagination = ({
   return ul({ class: "pagination" }, lis);
 };
 
+/**
+ * @param {string} name 
+ * @param {object} v 
+ * @param {object} param2 
+ * @returns {string}
+ */
 const search_bar = (
   name,
   v,

package/index.js

@@ -1,11 +1,40 @@
+/**
+ * @category saltcorn-markup
+ * @module saltcorn-markup/index
+ */
 const renderForm = require("./form");
 const renderBuilder = require("./builder");
 const mkTable = require("./table");
 const tabs = require("./tabs");
 const { a, text, div, button, time } = require("./tags");
 
+/**
+ * @param {string} href 
+ * @param {string} s 
+ * @returns {string}
+ */
 const link = (href, s) => a({ href: text(href) }, text(s));
 
+/**
+ * @param {string} href 
+ * @param {string} s 
+ * @param {string} csrfToken 
+ * @param {object} opts
+ * @param {string} [opts.btnClass = "btn-primary"]
+ * @param {string} [opts.onClick]
+ * @param {string} [opts.small]
+ * @param {string} [opts.style]
+ * @param {*} opts.ajax
+ * @param {string} opts.reload_on_done
+ * @param {string} opts.reload_delay
+ * @param {string} [opts.klass = "btn-primary"]
+ * @param {string} [opts.formClass]
+ * @param {string} opts.spinner
+ * @param {object} opts.req
+ * @param {boolean} opts.confirm
+ * @param {string} opts.icon
+ * @returns {string}
+ */
 const post_btn = (
   href,
   s,
@@ -47,11 +76,12 @@ const post_btn = (
   } 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
- * @param req - Request
- * @param what - Item
+ * @param {string} href - href
+ * @param {string} req - Request
+ * @param {string} what - Item
  * @returns {string} return html form
  */
 const post_delete_btn = (href, req, what) =>
@@ -67,6 +97,14 @@ const post_delete_btn = (href, req, what) =>
     </button>
   </form>`;
 
+/**
+ * @param {string} href 
+ * @param {string} s 
+ * @param {object} req 
+ * @param {boolean} confirm 
+ * @param {string} what 
+ * @returns {string}
+ */
 const post_dropdown_item = (href, s, req, confirm, what) => {
   const id = href.split("/").join("");
   return `<a class="dropdown-item" onclick="${
@@ -83,6 +121,11 @@ const post_dropdown_item = (href, s, req, confirm, what) => {
   </form>`;
 };
 
+/**
+ * @param {string} id 
+ * @param {*} elems 
+ * @returns {div}
+ */
 const settingsDropdown = (id, elems) =>
   div(
     { class: "dropdown" },
@@ -107,6 +150,13 @@ const settingsDropdown = (id, elems) =>
     )
   );
 
+/**
+ * @param {Date} date 
+ * @param {object} opts
+ * @param {string} [opts.hour = "2-digit"]
+ * @param {string} [opts.minute = "2-digit"]
+ * @returns {string}
+ */
 const localeTime = (date, options = { hour: "2-digit", minute: "2-digit" }) =>
   time(
     {
@@ -116,6 +166,11 @@ const localeTime = (date, options = { hour: "2-digit", minute: "2-digit" }) =>
     date.toLocaleTimeString("en", options)
   );
 
+/**
+ * @param {Date} date 
+ * @param {object} [options ={}]
+ * @returns {string}
+ */  
 const localeDateTime = (date, options = {}) =>
   time(
     {
@@ -125,6 +180,11 @@ const localeDateTime = (date, options = {}) =>
     date.toLocaleString("en", options)
   );
 
+/**
+ * @param {Date} date 
+ * @param {object} [options = {}]
+ * @returns {string}
+ */
 const localeDate = (date, options = {}) =>
   time(
     {

package/layout.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module layout
+ */
+
 const { contract, is } = require("contractis");
 const {
   div,
@@ -22,8 +27,17 @@ const {
 const { alert, breadcrumbs } = require("./layout_utils");
 const { search_bar_form, search_bar } = require("./helpers");
 
+/**
+ * @param {object[]} [alerts]
+ * @returns {boolean}
+ */
 const couldHaveAlerts = (alerts) => alerts || Array.isArray(alerts);
 
+/**
+ * @param {string|object} body 
+ * @param {object[]} [alerts]
+ * @returns {object}
+ */
 const makeSegments = (body, alerts) => {
   const alertsSegments = couldHaveAlerts(alerts)
     ? [
@@ -46,6 +60,13 @@ const makeSegments = (body, alerts) => {
     return body;
   } else return { above: [...alertsSegments, body] };
 };
+
+/**
+ * 
+ * @param {object} segment 
+ * @param {string} inner 
+ * @returns {div|span|string}
+ */
 const applyTextStyle = (segment, inner) => {
   let style = segment.font ? { fontFamily: segment.font } : {};
   switch (segment.textStyle) {
@@ -70,6 +91,15 @@ const applyTextStyle = (segment, inner) => {
   }
 };
 
+/**
+ * @param {object} opts
+ * @param {object[]} opts.contents
+ * @param {string[]} opts.titles
+ * @param {string} opts.tabsStyle
+ * @param {*} opts.ntabs
+ * @param {function} go 
+ * @returns {ul_div}
+ */
 const renderTabs = ({ contents, titles, tabsStyle, ntabs }, go) => {
   const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (tabsStyle === "Accordion")
@@ -149,6 +179,16 @@ const renderTabs = ({ contents, titles, tabsStyle, ntabs }, go) => {
       )
     );
 };
+
+/**
+ * @param {object} opts
+ * @param {object} opts.blockDispatch
+ * @param {object|string} opts.layout
+ * @param {object} [opts.role]
+ * @param {object[]} [opts.alerts]
+ * @param {boolean} opts.is_owner missing in contract
+ * @returns {string}
+ */
 const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
   //console.log(JSON.stringify(layout, null, 2));
   function wrap(segment, isTop, ix, inner) {
@@ -157,12 +197,11 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
       return blockDispatch.wrapTop(segment, ix, inner);
     else
       return segment.labelFor
-        ? iconTag +
-            label(
-              { for: `input${text(segment.labelFor)}` },
-              applyTextStyle(segment, inner)
-            )
-        : iconTag + applyTextStyle(segment, inner);
+        ? label(
+            { for: `input${text(segment.labelFor)}` },
+            applyTextStyle(segment, iconTag + inner)
+          )
+        : applyTextStyle(segment, iconTag + inner);
   }
   function go(segment, isTop, ix) {
     if (!segment) return "";
@@ -503,7 +542,7 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
         );
       else
         markup = div(
-          { class: "row" },
+          { class: "row w-100" },
           segment.besides.map((t, ixb) =>
             div(
               {

package/layout.test.js

@@ -33,7 +33,7 @@ describe("layout", () => {
       ],
     };
     expect(render({ blockDispatch, layout: markup })).toBe(
-      '<div class="row"><div class="col-6">hello</div><div class="col-6">world</div></div><div class="row"><div class="col-6">bar</div><div class="col-6">foo</div></div>'
+      '<div class="row w-100"><div class="col-6">hello</div><div class="col-6">world</div></div><div class="row w-100"><div class="col-6">bar</div><div class="col-6">foo</div></div>'
     );
   });
 });

package/layout_utils.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module layout_utils
+ */
+
 const {
   ul,
   li,
@@ -18,13 +23,26 @@ const {
   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) => {
@@ -35,6 +53,14 @@ const innerSections = (sections) => {
   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" },
@@ -65,6 +91,12 @@ const navSubitems = ({ label, subitems, icon, isUser }) =>
       )
     )
   );
+
+/**
+ * @param {string} currentUrl 
+ * @param {object[]} sections 
+ * @returns {div}
+ */
 const rightNavBar = (currentUrl, sections) =>
   div(
     { class: "collapse navbar-collapse", id: "navbarResponsive" },
@@ -95,9 +127,20 @@ const rightNavBar = (currentUrl, sections) =>
     )
   );
 
+  /**
+   * @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(
@@ -134,6 +177,12 @@ const mobileBottomNavBar = (currentUrl, sections, cls = "", clsLink = "") =>
       )
     : "";
 
+/**
+ * @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: "/" },
@@ -162,6 +211,14 @@ const leftNavBar = ({ name, logo }) => [
   ),
 ];
 
+/**
+ * @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(
     {
@@ -177,6 +234,11 @@ const navbar = (brand, sections, currentUrl, opts = { fixedTop: true }) =>
     )
   );
 
+/**
+ * @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;
@@ -189,6 +251,10 @@ const alert = (type, s) => {
       </div>`
     : "";
 };
+
+/**
+ * @returns {string}
+ */
 const navbarSolidOnScroll = script(
   domReady(`$(window).scroll(function () {
     if ($(window).scrollTop() >= 10) {
@@ -199,12 +265,21 @@ const navbarSolidOnScroll = script(
     });`)
 );
 
+/**
+ * @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(
     {
@@ -214,6 +289,12 @@ const standardBreadcrumbItem = (len) => ({ href, text }, ix) =>
     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) =>
@@ -229,6 +310,10 @@ const workflowBreadcrumbItem = ({ workflow, step }) =>
     )
     .join("");
 
+/**
+ * @param {object[]} crumbs 
+ * @returns {string}
+ */
 const breadcrumbs = (crumbs) =>
   nav(
     { "aria-label": "breadcrumb" },
@@ -242,6 +327,10 @@ const breadcrumbs = (crumbs) =>
     )
   );
 
+/**
+ * @param {object[]} headers 
+ * @returns {string}
+ */
 const headersInHead = (headers) =>
   headers
     .filter((h) => h.css)
@@ -256,6 +345,10 @@ const headersInHead = (headers) =>
     .map((h) => h.headerTag)
     .join("");
 
+/**
+ * @param {object[]} headers 
+ * @returns {string}
+ */
 const headersInBody = (headers) =>
   headers
     .filter((h) => h.script)
@@ -273,6 +366,10 @@ const headersInBody = (headers) =>
     .map((h) => `<script>${h.scriptBody}</script>`)
     .join("");
 
+/**
+ * @param {object[]} tabList 
+ * @returns {ul}
+ */
 const cardHeaderTabs = (tabList) =>
   ul(
     { class: "nav nav-tabs card-header-tabs" },

package/mktag.js

@@ -1,13 +1,36 @@
+/**
+ * @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
@@ -20,10 +43,22 @@ const ppStyles = (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
@@ -36,6 +71,12 @@ const ppAttrib = ([k, v]) =>
     : k === "style"
     ? ppStyle(v)
     : `${k}="${v}"`;
+
+/**
+ * @param {string} tnm 
+ * @param {boolean} voidTag 
+ * @returns {function}
+ */
 const mkTag = (tnm, voidTag) => (...args) => {
   var body = "";
   var attribs = " ";

package/package.json

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

package/table.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module table
+ */
+
 const { contract, is } = require("contractis");
 
 const {
@@ -15,6 +20,11 @@ const {
   span,
 } = require("./tags");
 const { pagination } = require("./helpers");
+
+/**
+ * @param {object} hdr 
+ * @returns {th}
+ */
 const headerCell = (hdr) =>
   th(
     (hdr.align || hdr.width) && {
@@ -25,6 +35,13 @@ const headerCell = (hdr) =>
     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(
     [
@@ -79,6 +96,11 @@ const mkTable = contract(
     )
 );
 
+/**
+ * @param {object} opts 
+ * @param {object} v 
+ * @returns {object}
+ */
 const mkClickHandler = (opts, v) => {
   var attrs = {};
   if (opts.onRowSelect)

package/tabs.js

@@ -1,7 +1,20 @@
+/**
+ * @category saltcorn-markup
+ * @module tabs
+ */
+
 const { a, text, div, ul, li } = require("./tags");
 
+/**
+ * @param {string} str 
+ * @returns {string}
+ */
 const mkId = (str) => text(str.split(" ").join("_"));
 
+/**
+ * @param {object} obj 
+ * @returns {object}
+ */
 const tabs = (obj) => {
   const entries = Array.isArray(obj) ? obj : Object.entries(obj);
   const lis = entries.map((e, ix) =>

package/tags.js

@@ -1,3 +1,8 @@
+/**
+ * @category saltcorn-markup
+ * @module tags
+ */
+
 const xss = require("xss");
 const escape = require("escape-html");
 const htmlTags = require("html-tags");
@@ -5,24 +10,47 @@ const voidHtmlTags = new Set(require("html-tags/void"));
 const mkTag = require("./mktag");
 
 //https://stackoverflow.com/a/59220393
+/**
+ * @param {string} js 
+ * @returns {string}
+ */
 const domReady = (js) =>
   `(function(f){if (document.readyState === "complete") f(); else document.addEventListener('DOMContentLoaded',f,false)})(function(){${js}});`;
 
 xss.whiteList.kbd = [];
 
+/**
+ * @param {string|number} t 
+ * @returns {string}
+ */
 const text = (t) => (t === 0 ? "0" : xss(t));
+
+/**
+ * @param {string|number} t 
+ * @returns {string}
+ */
 const text_attr = (t) => (t === 0 ? "0" : escape(t));
 
+/**
+ * @return {string[]}
+ */
 const allTags = Object.fromEntries(
   htmlTags.map((tag) => [tag, mkTag(tag, voidHtmlTags.has(tag))])
 );
 
 module.exports = {
   ...allTags,
+  /**
+   * @param {string} tagName 
+   * @param  {...*} rest 
+   * @returns {string}
+   */
   genericElement: (tagName, ...rest) => mkTag(tagName, false)(...rest),
   domReady,
   text,
   text_attr,
+  /** @type {string} */
   nbsp: " ",
+  /** @type {module:mktag} */
   mkTag,
 };