@saltcorn/markup 0.6.1 → 0.6.2-beta.3

package/builder.js

@@ -22,8 +22,8 @@ const {
 const { contract, is } = require("contractis");
 
 /**
- * @param {object} rec 
- * @param {object} csrf 
+ * @param {object} rec
+ * @param {object} csrf
  * @returns {object}
  */
 const addCsrf = (rec, csrf) => {
@@ -32,64 +32,69 @@ const addCsrf = (rec, csrf) => {
 };
 
 /**
- * @param {object} x 
+ * @param {object} x
  * @returns {string}
  */
 const encode = (x) => encodeURIComponent(JSON.stringify(x));
 
-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
-) =>
-  div(
-    script({
-      src: version_tag
-        ? `/static_assets/${version_tag}/builder_bundle.js`
-        : "/builder_bundle.js",
-    }),
-    link({
-      rel: "stylesheet",
-      type: "text/css",
-      media: "screen",
-      href: version_tag
-        ? `/static_assets/${version_tag}/fonticonpicker.react.css`
-        : "/fonticonpicker.react.css",
-    }),
-    link({
-      rel: "stylesheet",
-      type: "text/css",
-      media: "screen",
-      href: version_tag
-        ? `/static_assets/${version_tag}/saltcorn-builder.css`
-        : "/saltcorn-builder.css",
-    }),
-    div({ id: "saltcorn-builder" }),
-    form(
-      { action, method: "post", id: "scbuildform" },
-      input({
-        type: "hidden",
-        name: "contextEnc",
-        value: encodeURIComponent(JSON.stringify(context)),
+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
+  ) =>
+    div(
+      script({
+        src: version_tag
+          ? `/static_assets/${version_tag}/builder_bundle.js`
+          : "/builder_bundle.js",
+      }),
+      script({
+        src: version_tag
+          ? `/static_assets/${version_tag}/ckeditor/ckeditor.js`
+          : "/ckeditor/ckeditor.js",
       }),
-      input({ type: "hidden", name: "stepName", value: stepName }),
-      input({ type: "hidden", name: "columns", value: "" }),
-      input({ type: "hidden", name: "layout", value: "" }),
-      input({ type: "hidden", name: "_csrf", value: csrfToken })
-    ),
-    script(`builder.renderBuilder(
+      link({
+        rel: "stylesheet",
+        type: "text/css",
+        media: "screen",
+        href: version_tag
+          ? `/static_assets/${version_tag}/fonticonpicker.react.css`
+          : "/fonticonpicker.react.css",
+      }),
+      link({
+        rel: "stylesheet",
+        type: "text/css",
+        media: "screen",
+        href: version_tag
+          ? `/static_assets/${version_tag}/saltcorn-builder.css`
+          : "/saltcorn-builder.css",
+      }),
+      div({ id: "saltcorn-builder" }),
+      form(
+        { action, method: "post", id: "scbuildform" },
+        input({
+          type: "hidden",
+          name: "contextEnc",
+          value: encodeURIComponent(JSON.stringify(context)),
+        }),
+        input({ type: "hidden", name: "stepName", value: stepName }),
+        input({ type: "hidden", name: "columns", value: "" }),
+        input({ type: "hidden", name: "layout", value: "" }),
+        input({ type: "hidden", name: "_csrf", value: csrfToken })
+      ),
+      script(`builder.renderBuilder(
       "saltcorn-builder", 
       "${encode(addCsrf(options, csrfToken))}", 
       "${encode(layout || {})}",
@@ -98,4 +103,4 @@ module.exports =
     document.addEventListener('DOMContentLoaded',
       function(){window.onerror=globalErrorCatcher},false);
     ;`)
-  );
+    );

package/helpers.js

@@ -17,16 +17,16 @@ const {
 
 /**
  * checks if x is defined
- * @param {*} x 
+ * @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 
+ * @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 = "") => {
@@ -56,7 +56,7 @@ const select_options = (v, hdr, force_required, neutral_label = "") => {
 };
 
 /**
- * 
+ *
  * @param {object} opts
  * @param {string} opts.name
  * @param {object} [opts.options]
@@ -66,7 +66,15 @@ const select_options = (v, hdr, force_required, neutral_label = "") => {
  * @param {...*} opts.rest
  * @returns {string}
  */
-const radio_group = ({ name, options, value, inline, form_name, ...rest }) =>
+const radio_group = ({
+  name,
+  options,
+  value,
+  inline,
+  form_name,
+  onChange,
+  ...rest
+}) =>
   div(
     (options || [])
       .filter((o) => (typeof o === "string" ? o : o.value))
@@ -79,6 +87,7 @@ const radio_group = ({ name, options, value, inline, form_name, ...rest }) =>
             class: ["form-check-input", rest.class],
             type: "radio",
             name,
+            onChange,
             "data-fieldname": form_name,
             id,
             value: text_attr(myvalue),
@@ -93,6 +102,44 @@ const radio_group = ({ name, options, value, inline, form_name, ...rest }) =>
       .join("")
   );
 
+const checkbox_group = ({
+  name,
+  options,
+  value,
+  inline,
+  form_name,
+  onChange,
+  ...rest
+}) =>
+  div(
+    (options || [])
+      .filter((o) => (typeof o === "string" ? o : o.value))
+      .map((o, ix) => {
+        const myvalue = typeof o === "string" ? o : o.value;
+        const id = `input${text_attr(name)}${ix}`;
+        return div(
+          { class: ["form-check", inline && "form-check-inline"] },
+          input({
+            class: ["form-check-input", rest.class],
+            type: "checkbox",
+            name,
+            onChange: `check_state_field(this)`,
+            "data-fieldname": form_name,
+            id,
+            value: text_attr(myvalue),
+            checked: Array.isArray(value)
+              ? value.includes(myvalue)
+              : myvalue === value,
+          }),
+          label(
+            { class: "form-check-label", for: id },
+            typeof o === "string" ? o : o.label
+          )
+        );
+      })
+      .join("")
+  );
+
 /**
  * @param {object} opts
  * @param {number} opts.current_page
@@ -143,9 +190,9 @@ const pagination = ({
 };
 
 /**
- * @param {string} name 
- * @param {object} v 
- * @param {object} param2 
+ * @param {string} name
+ * @param {object} v
+ * @param {object} param2
  * @returns {string}
  */
 const search_bar = (
@@ -217,4 +264,5 @@ module.exports = {
   search_bar,
   pagination,
   radio_group,
+  checkbox_group,
 };

package/index.js

@@ -2,6 +2,22 @@
  * @category saltcorn-markup
  * @module saltcorn-markup/index
  */
+
+/**
+ * All files in the saltcorn-markup package.
+ * @namespace saltcorn-markup_overview
+ * @property {module:builder} builder
+ * @property {module:emergency_layout} emergency_layout
+ * @property {module:form} from
+ * @property {module:helpers} helpers
+ * @property {module:layout_utils} layout_utils
+ * @property {module:layout} layout
+ * @property {module:mktag} mktag
+ * @property {module:table} table
+ * @property {module:tabs} tabs
+ * @category saltcorn-markup
+ */
+
 const renderForm = require("./form");
 const renderBuilder = require("./builder");
 const mkTable = require("./table");

package/layout.js

@@ -34,7 +34,7 @@ const { search_bar_form, search_bar } = require("./helpers");
 const couldHaveAlerts = (alerts) => alerts || Array.isArray(alerts);
 
 /**
- * @param {string|object} body 
+ * @param {string|object} body
  * @param {object[]} [alerts]
  * @returns {object}
  */
@@ -62,9 +62,9 @@ const makeSegments = (body, alerts) => {
 };
 
 /**
- * 
- * @param {object} segment 
- * @param {string} inner 
+ *
+ * @param {object} segment
+ * @param {string} inner
  * @returns {div|span|string}
  */
 const applyTextStyle = (segment, inner) => {
@@ -97,10 +97,13 @@ const applyTextStyle = (segment, inner) => {
  * @param {string[]} opts.titles
  * @param {string} opts.tabsStyle
  * @param {*} opts.ntabs
- * @param {function} go 
+ * @param {function} go
  * @returns {ul_div}
  */
-const renderTabs = ({ contents, titles, tabsStyle, ntabs }, go) => {
+const renderTabs = (
+  { contents, titles, tabsStyle, ntabs, independent },
+  go
+) => {
   const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (tabsStyle === "Accordion")
     return div(
@@ -130,7 +133,7 @@ const renderTabs = ({ contents, titles, tabsStyle, ntabs }, go) => {
               class: ["collapse", ix === 0 && "show"],
               id: `${rndid}tab${ix}`,
               "aria-labelledby": `${rndid}head${ix}`,
-              "data-parent": `#${rndid}top`,
+              "data-parent": independent ? undefined : `#${rndid}top`,
             },
             div({ class: "card-body" }, go(t, false, ix))
           )
@@ -227,7 +230,12 @@ const render = ({ blockDispatch, layout, role, alerts, is_owner }) => {
       return wrap(segment, isTop, ix, segment.contents || "");
     }
     if (segment.type === "breadcrumbs") {
-      return wrap(segment, isTop, ix, breadcrumbs(segment.crumbs || []));
+      return wrap(
+        segment,
+        isTop,
+        ix,
+        breadcrumbs(segment.crumbs || [], segment.right)
+      );
     }
     if (segment.type === "view") {
       return wrap(segment, isTop, ix, segment.contents || "");

package/layout_utils.js

@@ -21,17 +21,19 @@ const {
   i,
   small,
   br,
+  form,
+  input,
 } = require("./tags");
 
 /**
- * @param {string} item 
+ * @param {string} item
  * @returns {string}
  */
 const labelToId = (item) => text(item.replace(" ", ""));
 
 /**
- * @param {string} currentUrl 
- * @param {object} item 
+ * @param {string} currentUrl
+ * @param {object} item
  * @returns {boolean}
  */
 const active = (currentUrl, item) =>
@@ -40,7 +42,7 @@ const active = (currentUrl, item) =>
     item.subitems.some((si) => si.link && currentUrl.startsWith(si.link)));
 
 /**
- * @param {object[]} sections 
+ * @param {object[]} sections
  * @returns {object[]}
  */
 const innerSections = (sections) => {
@@ -93,8 +95,8 @@ const navSubitems = ({ label, subitems, icon, isUser }) =>
   );
 
 /**
- * @param {string} currentUrl 
- * @param {object[]} sections 
+ * @param {string} currentUrl
+ * @param {object[]} sections
  * @returns {div}
  */
 const rightNavBar = (currentUrl, sections) =>
@@ -122,21 +124,54 @@ const rightNavBar = (currentUrl, sections) =>
                 text(s.label)
               )
             )
+          : s.type === "Search"
+          ? li(
+              form(
+                {
+                  action: "/search",
+                  class: "menusearch",
+                  method: "get",
+                },
+                div(
+                  { class: "input-group search-bar" },
+
+                  input({
+                    type: "search",
+                    class: "form-control search-bar pl-2 hasbl",
+                    placeholder: s.label,
+                    id: "inputq",
+                    name: "q",
+                    "aria-label": "Search",
+                    "aria-describedby": "button-search-submit",
+                  }),
+                  div(
+                    { class: "input-group-append" },
+                    button(
+                      {
+                        class: "btn btn-outline-secondary search-bar",
+                        type: "submit",
+                      },
+                      i({ class: "fas fa-search" })
+                    )
+                  )
+                )
+              )
+            )
           : ""
       )
     )
   );
 
-  /**
-   * @param {object[]} sections 
-   * @returns {boolean}
-   */
+/**
+ * @param {object[]} sections
+ * @returns {boolean}
+ */
 const hasMobileItems = (sections) =>
   innerSections(sections).some((s) => s.location === "Mobile Bottom");
 
 /**
- * @param {string} currentUrl 
- * @param {object[]} sections 
+ * @param {string} currentUrl
+ * @param {object[]} sections
  * @param {string} [cls = ""]
  * @param {string} [clsLink = ""]
  * @returns {footer|string}
@@ -212,9 +247,9 @@ const leftNavBar = ({ name, logo }) => [
 ];
 
 /**
- * @param {object} brand 
- * @param {object[]} sections 
- * @param {string} currentUrl 
+ * @param {object} brand
+ * @param {object[]} sections
+ * @param {string} currentUrl
  * @param {object} opts
  * @param {boolean} [opts.fixedTop = true]
  * @returns {string}
@@ -235,8 +270,8 @@ const navbar = (brand, sections, currentUrl, opts = { fixedTop: true }) =>
   );
 
 /**
- * @param {string} type 
- * @param {string} s 
+ * @param {string} type
+ * @param {string} s
  * @returns {string}
  */
 const alert = (type, s) => {
@@ -266,8 +301,8 @@ const navbarSolidOnScroll = script(
 );
 
 /**
- * @param {object} x 
- * @param {object} s 
+ * @param {object} x
+ * @param {object} s
  * @returns {object}
  */
 const logit = (x, s) => {
@@ -277,7 +312,7 @@ const logit = (x, s) => {
 };
 
 /**
- * @param {number} len 
+ * @param {number} len
  * @returns {function}
  */
 const standardBreadcrumbItem = (len) => ({ href, text }, ix) =>
@@ -311,10 +346,10 @@ const workflowBreadcrumbItem = ({ workflow, step }) =>
     .join("");
 
 /**
- * @param {object[]} crumbs 
+ * @param {object[]} crumbs
  * @returns {string}
  */
-const breadcrumbs = (crumbs) =>
+const breadcrumbs = (crumbs, right) =>
   nav(
     { "aria-label": "breadcrumb" },
     ol(
@@ -323,12 +358,13 @@ const breadcrumbs = (crumbs) =>
         c.workflow
           ? workflowBreadcrumbItem(c)
           : standardBreadcrumbItem(crumbs.length)(c)
-      )
+      ),
+      right ? li({ class: "ml-auto" }, right) : ""
     )
   );
 
 /**
- * @param {object[]} headers 
+ * @param {object[]} headers
  * @returns {string}
  */
 const headersInHead = (headers) =>
@@ -346,7 +382,7 @@ const headersInHead = (headers) =>
     .join("");
 
 /**
- * @param {object[]} headers 
+ * @param {object[]} headers
  * @returns {string}
  */
 const headersInBody = (headers) =>
@@ -367,7 +403,7 @@ const headersInBody = (headers) =>
     .join("");
 
 /**
- * @param {object[]} tabList 
+ * @param {object[]} tabList
  * @returns {ul}
  */
 const cardHeaderTabs = (tabList) =>

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@saltcorn/markup",
-  "version": "0.6.1",
+  "version": "0.6.2-beta.3",
   "description": "Markup for Saltcorn, open-source no-code platform",
   "homepage": "https://saltcorn.com",
   "main": "index.js",
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "tsc": "echo \"Error: no TypeScript support yet\"",
+    "clean": "echo \"Error: no TypeScript support yet\""
   },
   "author": "Tom Nielsen",
   "license": "MIT",