@saltcorn/markup 0.6.2-beta.2 → 0.6.2

package/form.test.js

@@ -1,98 +0,0 @@
-const { a, input, div, ul, text, text_attr } = require("./tags");
-const { renderForm } = require(".");
-
-class Form {
-  constructor(o) {
-    Object.entries(o).forEach(([k, v]) => {
-      this[k] = v;
-    });
-  }
-}
-
-const nolines = (s) => s.split("\n").join("");
-
-describe("form render", () => {
-  it("renders a simple form", () => {
-    const form = new Form({
-      action: "/",
-      fields: [
-        {
-          name: "name",
-          label: "Name",
-          input_type: "text",
-          form_name: "name",
-        },
-      ],
-    });
-    const want = `<form action="/" class="form-namespace  " method="post">
-<input type="hidden" name="_csrf" value=""><div class="form-group">
-<div><label for="inputname">Name</label></div>
-<div><input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname">
-</div></div><div class="form-group row">
-  <div class="col-sm-12">
-        <button type="submit" class="btn btn-primary">Save</button>
-  </div>
-</div>
-</form>`;
-    expect(nolines(renderForm(form, ""))).toBe(nolines(want));
-  });
-  it("renders a form with layout", () => {
-    const form = new Form({
-      action: "/",
-      fields: [
-        {
-          name: "name",
-          label: "Name",
-          input_type: "text",
-          form_name: "name",
-        },
-      ],
-      values: {},
-      errors: {},
-      layout: {
-        above: [
-          {
-            type: "field",
-            block: false,
-            fieldview: "edit",
-            textStyle: "h2",
-            field_name: "name",
-          },
-          { type: "line_break" },
-        ],
-      },
-    });
-    const want = `<form action="/" class="form-namespace " method="post">
-<input type="hidden" name="_csrf" value="">
-<h2>
-<input type="text" class="form-control  " data-fieldname="name" name="name" id="inputname">
-</h2><br /></form>`;
-    expect(nolines(renderForm(form, ""))).toBe(nolines(want));
-  });
-  it("renders a simple form with errors", () => {
-    const form = new Form({
-      action: "/",
-      errors: { name: "Not a foo" },
-      values: { name: "Bar" },
-      fields: [
-        {
-          name: "name",
-          label: "Name",
-          input_type: "text",
-          form_name: "name",
-        },
-      ],
-    });
-    const want = `<form action="/" class="form-namespace  " method="post">
-<input type="hidden" name="_csrf" value=""><div class="form-group">
-<div><label for="inputname">Name</label></div>
-<div><input type="text" class="form-control is-invalid " data-fieldname="name" name="name" id="inputname" value="Bar"><div>Not a foo</div>
-</div></div><div class="form-group row">
-  <div class="col-sm-12">
-        <button type="submit" class="btn btn-primary">Save</button>
-  </div>
-</div>
-</form>`;
-    expect(nolines(renderForm(form, ""))).toBe(nolines(want));
-  });
-});

package/helpers.js

@@ -1,268 +0,0 @@
-/**
- * @category saltcorn-markup
- * @module helpers
- */
-
-const {
-  a,
-  text,
-  div,
-  input,
-  text_attr,
-  ul,
-  li,
-  span,
-  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
-    ? options0.filter((o) => (typeof o === "string" ? o : o.value))
-    : options0;
-  const options = options1.map((o) =>
-    o.value === "" ? { ...o, label: neutral_label } : o
-  );
-  const selected = typeof v === "object" ? (v ? v[hdr.name] : undefined) : v;
-  const isSelected = (value) =>
-    !selected
-      ? false
-      : selected.length
-      ? selected.includes(value)
-      : value === selected;
-  return options
-    .map((o) => {
-      const label = typeof o === "string" ? o : o.label;
-      const value = typeof o === "string" ? o : o.value;
-      return `<option value="${text_attr(value)}"${
-        isSelected(value) ? " selected" : ""
-      }>${text(label)}</option>`;
-    })
-    .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,
-  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: "radio",
-            name,
-            onChange,
-            "data-fieldname": form_name,
-            id,
-            value: text_attr(myvalue),
-            checked: myvalue === value,
-          }),
-          label(
-            { class: "form-check-label", for: id },
-            typeof o === "string" ? o : o.label
-          )
-        );
-      })
-      .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
- * @param {number} opts.pages
- * @param {function} opts.get_page_link
- * @param {boolean} opts.trailing_ellipsis
- * @returns {string}
- */
-const pagination = ({
-  current_page,
-  pages,
-  get_page_link,
-  trailing_ellipsis,
-}) => {
-  const from = Math.max(1, current_page - 3);
-  const to = Math.min(pages, current_page + 3);
-  var lis = [];
-  if (from > 1) {
-    lis.push(
-      li(
-        { class: `page-item` },
-        a({ class: "page-link", href: get_page_link(1) }, 1)
-      )
-    );
-    lis.push(li({ class: `page-item` }, span({ class: "page-link" }, "...")));
-  }
-
-  for (let index = from; index <= to; index++) {
-    lis.push(
-      li(
-        { class: ["page-item", index === current_page && "active"] },
-        a({ class: "page-link", href: get_page_link(index) }, index)
-      )
-    );
-  }
-  if (to < pages) {
-    lis.push(li({ class: `page-item` }, span({ class: "page-link" }, "...")));
-    lis.push(
-      li(
-        { class: `page-item` },
-        a({ class: "page-link", href: get_page_link(pages) }, pages)
-      )
-    );
-  }
-  if (trailing_ellipsis)
-    lis.push(li({ class: `page-item` }, span({ class: "page-link" }, "...")));
-  return ul({ class: "pagination" }, lis);
-};
-
-/**
- * @param {string} name
- * @param {object} v
- * @param {object} param2
- * @returns {string}
- */
-const search_bar = (
-  name,
-  v,
-  { placeHolder, has_dropdown, contents, badges, stateField, onClick } = {}
-) => {
-  const rndid = Math.floor(Math.random() * 16777215).toString(16);
-  const clickHandler = stateField
-    ? `(function(v){v ? set_state_field('${stateField}', v):unset_state_field('${stateField}');})($('input.search-bar').val())`
-    : onClick || "";
-  return `<div class="input-group search-bar">
-  <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..."}" 
-}" 
-  }" 
-       id="input${text_attr(name)}" name="${name}" 
-       ${
-         clickHandler
-           ? `onsearch="${clickHandler}" onChange="${clickHandler}"`
-           : ""
-       }
-       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> `
-                  : ""
-              }</span>`
-          )
-          .join("&nbsp;")}
-  </div>`
-      : ""
-  }
-  ${
-    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>`
-      : ""
-  }
-  ${
-    has_dropdown
-      ? `<div class="dropdown-menu search-bar p-2" id="dm${rndid}" aria-labelledby="dd${rndid}">
-      ${contents}
-      </div>`
-      : ""
-  }
-</div>
-</div>`;
-};
-
-module.exports = {
-  isdef,
-  select_options,
-  search_bar,
-  pagination,
-  radio_group,
-  checkbox_group,
-};

package/index.js

@@ -1,226 +0,0 @@
-/**
- * @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");
-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,
-  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}">
-<button ${ajax ? 'type="button"' : 'type="submit"'} ${
-    onClick
-      ? `onclick="${spinner ? "press_store_button(this);" : ""}${onClick}"`
-      : ajax && confirm
-      ? `onclick="if(confirm('${req.__("Are you sure?")}')) {${
-          spinner ? "press_store_button(this);" : ""
-        }ajax_post_btn(this, ${reload_on_done}, ${reload_delay})}"`
-      : ajax
-      ? `onclick="${
-          spinner ? "press_store_button(this);" : ""
-        }ajax_post_btn(this, ${reload_on_done}, ${reload_delay})"`
-      : confirm
-      ? `onclick="return confirm('${req.__("Are you sure?")}')"`
-      : ""
-  } 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 {string} href - href
- * @param {string} req - Request
- * @param {string} what - Item
- * @returns {string} return html form
- */
-const post_delete_btn = (href, req, what) =>
-  `<form action="${text(href)}" method="post" >
-    <input type="hidden" name="_csrf" value="${req.csrfToken()}">
-    <button type="submit" class="btn btn-danger btn-sm" 
-      onclick="return confirm('${
-        what
-          ? req.__("Are you sure you want to delete %s?", what)
-          : req.__("Are you sure?")
-      }')" />
-      <i class="fas fa-trash-alt"></i>
-    </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="${
-    confirm
-      ? `if(confirm('${
-          what
-            ? req.__("Are you sure you want to delete %s?", what)
-            : req.__("Are you sure?")
-        }')) `
-      : ""
-  }$('#${id}').submit()">${s}</a>
-  <form id="${id}" action="${text(href)}" method="post">
-    <input type="hidden" name="_csrf" value="${req.csrfToken()}">
-  </form>`;
-};
-
-/**
- * @param {string} id 
- * @param {*} elems 
- * @returns {div}
- */
-const settingsDropdown = (id, elems) =>
-  div(
-    { class: "dropdown" },
-    button(
-      {
-        class: "btn btn-sm btn-outline-secondary",
-        "data-boundary": "viewport",
-        type: "button",
-        id,
-        "data-toggle": "dropdown",
-        "aria-haspopup": "true",
-        "aria-expanded": "false",
-      },
-      '<i class="fas fa-ellipsis-h"></i>'
-    ),
-    div(
-      {
-        class: "dropdown-menu dropdown-menu-right",
-        "aria-labelledby": 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(
-    {
-      datetime: date.toISOString(),
-      "locale-time-options": encodeURIComponent(JSON.stringify(options)),
-    },
-    date.toLocaleTimeString("en", options)
-  );
-
-/**
- * @param {Date} date 
- * @param {object} [options ={}]
- * @returns {string}
- */  
-const localeDateTime = (date, options = {}) =>
-  time(
-    {
-      datetime: date.toISOString(),
-      "locale-options": encodeURIComponent(JSON.stringify(options)),
-    },
-    date.toLocaleString("en", options)
-  );
-
-/**
- * @param {Date} date 
- * @param {object} [options = {}]
- * @returns {string}
- */
-const localeDate = (date, options = {}) =>
-  time(
-    {
-      datetime: date.toISOString(),
-      "locale-date-options": encodeURIComponent(JSON.stringify(options)),
-    },
-    date.toLocaleDateString("en", options)
-  );
-
-module.exports = {
-  mkTable,
-  renderForm,
-  settingsDropdown,
-  renderBuilder,
-  link,
-  post_btn,
-  post_delete_btn,
-  post_dropdown_item,
-  tabs,
-  localeTime,
-  localeDate,
-  localeDateTime,
-};