@saltcorn/markup - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2-beta.0

layout.js

@@ -16,2 +16,5 @@ const { contract, is } = require("contractis");
   label,
+  ul,
+  button,
+  li,
 } = require("./tags");
@@ -61,2 +64,82 @@ const { alert, breadcrumbs } = require("./layout_utils");
 };
+
+const renderTabs = ({ contents, titles, tabsStyle, ntabs }, go) => {
+  const rndid = `tab${Math.floor(Math.random() * 16777215).toString(16)}`;
+  if (tabsStyle === "Accordion")
+    return div(
+      { class: "accordion", id: `${rndid}top` },
+      contents.map((t, ix) =>
+        div(
+          { class: "card" },
+          div(
+            { class: "card-header", id: `${rndid}head${ix}` },
+            h2(
+              { class: "mb-0" },
+              button(
+                {
+                  class: "btn btn-link btn-block text-left",
+                  type: "button",
+                  "data-toggle": "collapse",
+                  "data-target": `#${rndid}tab${ix}`,
+                  "aria-expanded": ix === 0 ? "true" : "false",
+                  "aria-controls": `${rndid}tab${ix}`,
+                },
+                titles[ix]
+              )
+            )
+          ),
+          div(
+            {
+              class: ["collapse", ix === 0 && "show"],
+              id: `${rndid}tab${ix}`,
+              "aria-labelledby": `${rndid}head${ix}`,
+              "data-parent": `#${rndid}top`,
+            },
+            div({ class: "card-body" }, go(t, false, ix))
+          )
+        )
+      )
+    );
+  else
+    return (
+      ul(
+        {
+          role: "tablist",
+          id: `${rndid}`,
+          class: `nav ${tabsStyle === "Tabs" ? "nav-tabs" : "nav-pills"}`,
+        },
+        contents.map((t, ix) =>
+          li(
+            { class: "nav-item", role: "presentation" },
+            a(
+              {
+                class: ["nav-link", ix === 0 && "active"],
+                id: `${rndid}link${ix}`,
+                "data-toggle": "tab",
+                href: `#${rndid}tab${ix}`,
+                role: "tab",
+                "aria-controls": `${rndid}tab${ix}`,
+                "aria-selected": ix === 0 ? "true" : "false",
+              },
+              titles[ix]
+            )
+          )
+        )
+      ) +
+      div(
+        { class: "tab-content", id: `${rndid}content` },
+        contents.map((t, ix) =>
+          div(
+            {
+              class: ["tab-pane fade", ix === 0 && "show active"],
+              role: "tabpanel",
+              id: `${rndid}tab${ix}`,
+              "aria-labelledby": `${rndid}link${ix}`,
+            },
+            go(t, false, ix)
+          )
+        )
+      )
+    );
+};
 const render = ({ blockDispatch, layout, role, alerts }) => {
@@ -158,2 +241,4 @@ //console.log(JSON.stringify(layout, null, 2));
       );
+    if (segment.type === "tabs")
+      return wrap(segment, isTop, ix, renderTabs(segment, go));
     if (segment.type === "container") {
@@ -182,6 +267,6 @@ const {
       );
-      const sizeProp = (segKey, cssNm) =>
+      const sizeProp = (segKey, cssNm, unit = "px") =>
         typeof segment[segKey] === "undefined"
           ? ""
-          : `${cssNm}: ${segment[segKey]}px;`;
+          : `${cssNm}: ${segment[segKey]}${unit};`;
       return wrap(
@@ -205,5 +290,7 @@ segment,
               "height"
-            )}${sizeProp("width", "width")}border: ${
-              borderWidth || 0
-            }px ${borderStyle} black; ${
+            )}${sizeProp("width", "width")}${sizeProp(
+              "widthPct",
+              "width",
+              "%"
+            )}border: ${borderWidth || 0}px ${borderStyle} black; ${
               renderBg && bgType === "Image" && bgFileId && +bgFileId
@@ -210,0 +297,0 @@ ? `background-image: url('/files/serve/${bgFileId}'); background-size: ${

package.json

 {
   "name": "@saltcorn/markup",
-  "version": "0.3.1",
+  "version": "0.3.2-beta.0",
   "description": "Markup for Saltcorn, open-source no-code platform",
@@ -27,3 +27,3 @@ "homepage": "https://saltcorn.com",
   },
-  "gitHead": "fbdc46c8e3bb3faadc93bb784ab90a77c0bbdb37"
+  "gitHead": "91dc90a9afde606b0dcca164a63bba03839729d9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47208

increased by5.72%

Lines of code

1612

increased by5.64%

No dependency changes