@saltcorn/markup - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

form.js

@@ -10,2 +10,3 @@ const {
   a,
+  h5,
   span
@@ -45,3 +46,6 @@ } = require("./tags");
             label(
-              { for: `input${text_attr(hdr.name)}`, class: "form-check-label" },
+              {
+                for: `input${text_attr(hdr.form_name)}`,
+                class: "form-check-label"
+              },
               text(hdr.label)
@@ -52,6 +56,8 @@ ),
         )
+      : hdr.input_type === "section_header"
+      ? div({ class: `col-sm-12` }, h5(text(hdr.label)))
       : [
           label(
             {
-              for: `input${text_attr(hdr.name)}`,
+              for: `input${text_attr(hdr.form_name)}`,
               class: isHoriz(fStyle) && `col-sm-${labelCols} col-form-label`
@@ -78,4 +84,5 @@ },
 const innerField = (v, errors, nameAdd = "") => hdr => {
-  const name = hdr.name + nameAdd;
+  const name = hdr.form_name + nameAdd;
   const validClass = errors[name] ? "is-invalid" : "";
+  const maybe_disabled = hdr.disabled ? "disabled" : "";
   switch (hdr.input_type) {
@@ -86,31 +93,39 @@ case "fromtype":
         name,
-        v && isdef(v[hdr.name]) ? v[hdr.name] : hdr.default,
+        v && isdef(v[hdr.form_name]) ? v[hdr.form_name] : hdr.default,
         validClass
       );
     case "hidden":
-      return `<input type="hidden" class="form-control ${validClass} ${
-        hdr.class
-      }" name="${text_attr(name)}" ${
-        v ? `value="${text_attr(v[hdr.name])}"` : ""
+      return `<input type="hidden" class="form-control ${validClass} ${hdr.class ||
+        ""}" name="${text_attr(name)}" ${
+        v ? `value="${text_attr(v[hdr.form_name])}"` : ""
       }>`;
     case "select":
       const opts = select_options(v, hdr);
-      return `<select class="form-control ${validClass} ${
-        hdr.class
-      }" name="${text_attr(name)}" id="input${text_attr(
+      return `<select class="form-control ${validClass} ${hdr.class ||
+        ""}" ${maybe_disabled} name="${text_attr(name)}" id="input${text_attr(
         name
       )}">${opts}</select>`;
     case "file":
-      return `${
-        v[hdr.name] ? text(v[hdr.name]) : ""
-      }<input type="file" class="form-control-file ${validClass} ${
-        hdr.class
-      }" name="${text_attr(name)}" id="input${text_attr(name)}">`;
+      if (hdr.attributes && hdr.attributes.select_file_where) {
+        hdr.input_type = "select";
+        return innerField(v, errors, nameAdd)(hdr);
+      } else
+        return `${
+          v[hdr.form_name] ? text(v[hdr.form_name]) : ""
+        }<input type="file" class="form-control-file ${validClass} ${hdr.class ||
+          ""}" ${maybe_disabled} name="${text_attr(name)}" id="input${text_attr(
+          name
+        )}">`;
     case "search":
-      return search_bar(name, v && v[hdr.name]);
+      return search_bar(name, v && v[hdr.form_name]);
+    case "section_header":
+      return "";
     default:
-      const the_input = `<input type="${hdr.input_type}" class="form-control ${
-        hdr.class
-      }" name="${name}" id="input${text_attr(name)}" ${
-        v && isdef(v[hdr.name]) ? `value="${text_attr(v[hdr.name])}"` : ""
+      const the_input = `<input type="${
+        hdr.input_type
+      }" class="form-control ${validClass} ${hdr.class ||
+        ""}" ${maybe_disabled} name="${name}" id="input${text_attr(name)}" ${
+        v && isdef(v[hdr.form_name])
+          ? `value="${text_attr(v[hdr.form_name])}"`
+          : ""
       }>`;
@@ -140,3 +155,6 @@ const inner = hdr.postText
 const mkFormRowForRepeat = (v, errors, formStyle, labelCols, hdr) => {
-  const adder = a({ href: `javascript:add_repeater('${hdr.name}')` }, "Add");
+  const adder = a(
+    { href: `javascript:add_repeater('${hdr.form_name}')` },
+    "Add"
+  );
   const icons = div(
@@ -156,9 +174,9 @@ { class: "float-right" },
   );
-  if (Array.isArray(v[hdr.name]) && v[hdr.name].length > 0) {
+  if (Array.isArray(v[hdr.form_name]) && v[hdr.form_name].length > 0) {
     return (
       div(
-        { class: `repeats-${hdr.name}` },
-        v[hdr.name].map((vi, ix) => {
+        { class: `repeats-${hdr.form_name}` },
+        v[hdr.form_name].map((vi, ix) => {
           return div(
-            { class: `form-repeat form-namespace repeat-${hdr.name}` },
+            { class: `form-repeat form-namespace repeat-${hdr.form_name}` },
             icons,
@@ -181,5 +199,5 @@ hdr.fields.map(f => {
       div(
-        { class: `repeats-${hdr.name}` },
+        { class: `repeats-${hdr.form_name}` },
         div(
-          { class: `form-repeat form-namespace repeat-${hdr.name}` },
+          { class: `form-repeat form-namespace repeat-${hdr.form_name}` },
           icons,
@@ -197,2 +215,4 @@ hdr.fields.map(f => {
   var fieldview;
+  var attributes = hdr.attributes;
+  if (hdr.disabled) attributes.disabled = true;
   if (hdr.fieldview && hdr.type.fieldviews[hdr.fieldview])
@@ -209,3 +229,3 @@ fieldview = hdr.type.fieldviews[hdr.fieldview];
     v,
-    hdr.attributes,
+    attributes,
     extracls + " " + hdr.class,
@@ -223,3 +243,3 @@ hdr.required
 ) => hdr => {
-  const name = hdr.name + nameAdd;
+  const name = hdr.form_name + nameAdd;
   const errorFeedback = errors[name]
@@ -291,7 +311,7 @@ ? `<div class="invalid-feedback">${text(errors[name])}</div>`
   const csrfField = `<input type="hidden" name="_csrf" value="${csrfToken}">`;
-  const top = `<form action="${form.action}" class="form-namespace ${
-    form.class
-  }" method="${form.methodGET ? "get" : "post"}" ${
-    hasFile ? 'encType="multipart/form-data"' : ""
-  }>`;
+  const top = `<form action="${
+    form.action
+  }" class="form-namespace ${form.class || ""}" method="${
+    form.methodGET ? "get" : "post"
+  }" ${hasFile ? 'encType="multipart/form-data"' : ""}>`;
   const blurbp = form.blurb ? p(text(form.blurb)) : "";
@@ -315,6 +335,6 @@ const hiddens = form.fields
     form.isStateForm ? "stateForm" : ""
-  } ${form.class}" method="${form.methodGET ? "get" : "post"}" ${
+  } ${form.class || ""}" method="${form.methodGET ? "get" : "post"}" ${
     hasFile ? 'encType="multipart/form-data"' : ""
   }>`;
-  //console.log(hdrs);
+  //console.log(form.fields);
   const flds = form.fields
@@ -321,0 +341,0 @@ .map(

form.test.js

@@ -22,10 +22,11 @@ const { a, input, div, ul, text, text_attr } = require("./tags");
           label: "Name",
-          input_type: "text"
+          input_type: "text",
+          form_name: "name"
         }
       ]
     });
-    const want = `<form action="/" class="form-namespace  undefined" method="post" >
+    const want = `<form action="/" class="form-namespace  " method="post" >
 <input type="hidden" name="_csrf" value=""><div class="form-group">
 <label for="inputname" >Name</label>
-<div><input type="text" class="form-control undefined" name="name" id="inputname" >
+<div><input type="text" class="form-control  "  name="name" id="inputname" >
 </div></div><div class="form-group row">
@@ -46,3 +47,4 @@ <div class="col-sm-12">
           label: "Name",
-          input_type: "text"
+          input_type: "text",
+          form_name: "name"
         }
@@ -65,6 +67,6 @@ ],
     });
-    const want = `<form action="/" class="form-namespace undefined" method="post" >
+    const want = `<form action="/" class="form-namespace " method="post" >
 <input type="hidden" name="_csrf" value="">
 <span class="h2">
-<input type="text" class="form-control undefined" name="name" id="inputname" >
+<input type="text" class="form-control  "  name="name" id="inputname" >
 </span><br /></form>`;
@@ -71,0 +73,0 @@ expect(nolines(renderForm(form, ""))).toBe(nolines(want));

helpers.js

@@ -13,3 +13,3 @@ const { a, text, div, input, text_attr } = require("./tags");
       : value === selected;
-  return (opts = hdr.options
+  return (opts = (hdr.options || [])
     .map(o => {
@@ -16,0 +16,0 @@ const label = typeof o === "string" ? o : o.label;

layout_utils.js

 const {
   ul,
   li,
+  ol,
   a,
@@ -106,6 +107,8 @@ span,
 
-const navbar = (brand, sections, currentUrl) =>
+const navbar = (brand, sections, currentUrl, opts = { fixedTop: true }) =>
   nav(
     {
-      class: "navbar navbar-expand-lg navbar-light fixed-top",
+      class: `navbar navbar-expand-lg ${
+        opts.colorscheme ? opts.colorscheme.toLowerCase() : "navbar-light"
+      } ${opts.fixedTop ? "fixed-top" : ""}`,
       id: "mainNav"
@@ -148,2 +151,19 @@ },
 
-module.exports = { navbar, alert, logit, navbarSolidOnScroll };
+const breadcrumbs = crumbs =>
+  nav(
+    { "aria-label": "breadcrumb" },
+    ol(
+      { class: "breadcrumb" },
+      crumbs.map(({ href, text }, ix) =>
+        li(
+          {
+            class: ["breadcrumb-item", ix == crumbs.length - 1 && "active"],
+            "aria-current": ix == crumbs.length - 1 && "page"
+          },
+          href ? a({ href }, text) : text
+        )
+      )
+    )
+  );
+
+module.exports = { navbar, alert, logit, navbarSolidOnScroll, breadcrumbs };

layout.js

 const { contract, is } = require("contractis");
 const { div, a, span, h6, text, img } = require("./tags");
-const { alert } = require("./layout_utils");
+const { alert, breadcrumbs } = require("./layout_utils");
 const { search_bar_form } = require("./helpers");
@@ -60,2 +60,5 @@
     }
+    if (segment.type === "breadcrumbs") {
+      return wrap(segment, isTop, ix, breadcrumbs(segment.crumbs || []));
+    }
     if (segment.type === "view") {
@@ -62,0 +65,0 @@ return wrap(segment, isTop, ix, segment.contents || "");

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -27,3 +27,3 @@ "homepage": "https://saltcorn.com",
   },
-  "gitHead": "87fc34db5d75ff1d7d2315b345f919983a9e74b7"
+  "gitHead": "f957b5e343a571d00eed364e31067f20cd6f36c0"
 }

No alert changes

Improved metrics

Total package byte prevSize

343157

increased by957.27%

Number of package files

34

increased by142.86%

Lines of code

1952

increased by79.41%

No dependency changes