ks-web-comp-nav 1.3.1 → 1.4.1

package/bin/commands/template/v3/index.js

@@ -24,6 +24,10 @@ customElements.define(
     KSNav
 );
 
+window.KSNav = KSNav;
+
+console.log("KSNav v3 loaded to DOM");
+
 // export default KSNav;
 // export {
 //     navDefaults,

package/bin/commands/template/v4/composeNavigationStory.js

@@ -0,0 +1,54 @@
+import createBrandTitle from "./createBrandTitle.js";
+import createMenuList from "./createMenuList.js";
+import createMenuToggleButton from "./createMenuToggleButton.js";
+import createNavigationBar from "./createNavigationBar.js";
+import createNavigationRow from "./createNavigationRow.js";
+import createNavigationWrapper from "./createNavigationWrapper.js";
+import readNavStoryFromElement from "./readNavStoryFromElement.js";
+
+const composeNavigationStory = ({ inElement }) => {
+    const story = readNavStoryFromElement({
+        inElement
+    });
+
+    const nav = createNavigationBar({
+        inClassName: story.navClass
+    });
+
+    const wrapper = createNavigationWrapper({
+        inClassName: story.outerClass
+    });
+
+    const row = createNavigationRow({
+        inClassName: story.innerClass
+    });
+
+    const brand = createBrandTitle({
+        inTitleId: story.titleId,
+        inTitle: story.title,
+        inClassName: story.brandClass
+    });
+
+    const menu = createMenuList({
+        inClassName: story.menuClass,
+        inExtraClass: story.menuExtraClass
+    });
+
+    const toggleButton = createMenuToggleButton({
+        inMenu: menu,
+        inClassName: story.buttonClass
+    });
+
+    row.append(
+        brand,
+        toggleButton,
+        menu
+    );
+
+    wrapper.appendChild(row);
+    nav.appendChild(wrapper);
+
+    return nav;
+};
+
+export default composeNavigationStory;

package/bin/commands/template/v4/createBrandTitle.js

@@ -0,0 +1,11 @@
+const createBrandTitle = ({ inTitleId, inTitle, inClassName }) => {
+    const brand = document.createElement("div");
+
+    brand.className = inClassName;
+    brand.id = inTitleId || "titlehtmlId";
+    brand.innerText = inTitle || "KeshavSoft";
+
+    return brand;
+};
+
+export default createBrandTitle;

package/bin/commands/template/v4/createMenuList.js

@@ -0,0 +1,10 @@
+const createMenuList = ({ inClassName, inExtraClass }) => {
+    const menu = document.createElement("ul");
+
+    menu.id = "menu";
+    menu.className = `${inClassName} ${inExtraClass || ""}`;
+
+    return menu;
+};
+
+export default createMenuList;

package/bin/commands/template/v4/createMenuToggleButton.js

@@ -0,0 +1,14 @@
+const createMenuToggleButton = ({ inMenu, inClassName }) => {
+    const button = document.createElement("button");
+
+    button.className = inClassName;
+    button.innerText = "☰";
+
+    button.addEventListener("click", () => {
+        inMenu.classList.toggle("hidden");
+    });
+
+    return button;
+};
+
+export default createMenuToggleButton;

package/bin/commands/template/v4/createNavigationBar.js

@@ -0,0 +1,9 @@
+const createNavigationBar = ({ inClassName }) => {
+    const nav = document.createElement("nav");
+
+    nav.className = inClassName;
+
+    return nav;
+};
+
+export default createNavigationBar;

package/bin/commands/template/v4/createNavigationRow.js

@@ -0,0 +1,9 @@
+const createNavigationRow = ({ inClassName }) => {
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className = inClassName;
+
+    return innerDiv;
+};
+
+export default createNavigationRow;

package/bin/commands/template/v4/createNavigationWrapper.js

@@ -0,0 +1,9 @@
+const createNavigationWrapper = ({ inClassName }) => {
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = inClassName;
+
+    return outerDiv;
+};
+
+export default createNavigationWrapper;

package/bin/commands/template/v4/index.js

@@ -0,0 +1,37 @@
+import composeNavigationStory from "./composeNavigationStory.js";
+import navDefaults from "./navDefaults.js";
+import navUsage from "./navUsage.js";
+
+class KSNav extends HTMLElement {
+    connectedCallback() {
+        if (this.dataset.rendered === "true") return;
+
+        this.dataset.rendered = "true";
+
+        this.appendChild(
+            composeNavigationStory({
+                inElement: this
+            })
+        );
+    }
+}
+
+KSNav.defaults = navDefaults;
+KSNav.usage = navUsage;
+
+customElements.define(
+    "ks-nav",
+    KSNav
+);
+
+window.KSNav = KSNav;
+
+console.log("KSNav v3 loaded to DOM");
+
+// export default KSNav;
+// export {
+//     navDefaults,
+//     navUsage
+// };
+
+export default {};

package/bin/commands/template/v4/navDefaults.js

@@ -0,0 +1,15 @@
+const navDefaults = {
+    navClass: "bg-gray-800 text-white",
+    outerClass: `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`,
+    innerClass: "flex flex-wrap items-center justify-between",
+    brandClass: "text-xl font-semibold",
+    menuClass: `w-full hidden flex flex-col space-y-2 mt-4
+    md:flex md:flex-row md:space-y-0 md:gap-4
+    md:mt-0 md:w-auto md:flex-wrap`,
+    buttonClass: "text-xl px-4 py-1 md:hidden"
+};
+
+export default navDefaults;

package/bin/commands/template/v4/navUsage.js

@@ -0,0 +1,45 @@
+import navDefaults from "./navDefaults.js";
+
+const navUsage = {
+    tagName: "ks-nav",
+    attributes: {
+        title: {
+            name: "ks-title",
+            defaultValue: "KeshavSoft"
+        },
+        titleId: {
+            name: "ks-title-id",
+            defaultValue: "titlehtmlId"
+        },
+        navClass: {
+            name: "ks-nav-class",
+            defaultValue: navDefaults.navClass
+        },
+        outerClass: {
+            name: "ks-outer-class",
+            defaultValue: navDefaults.outerClass
+        },
+        innerClass: {
+            name: "ks-inner-class",
+            defaultValue: navDefaults.innerClass
+        },
+        brandClass: {
+            name: "ks-brand-class",
+            defaultValue: navDefaults.brandClass
+        },
+        menuClass: {
+            name: "ks-menu-class",
+            defaultValue: navDefaults.menuClass
+        },
+        menuExtraClass: {
+            name: "ks-ul-class",
+            defaultValue: ""
+        },
+        buttonClass: {
+            name: "ks-button-class",
+            defaultValue: navDefaults.buttonClass
+        }
+    }
+};
+
+export default navUsage;

package/bin/commands/template/v4/readAttributeOrDefault.js

@@ -0,0 +1,9 @@
+const readAttributeOrDefault = ({ inElement, inName, inDefaultValue }) => {
+    const value = inElement.getAttribute(inName);
+
+    if (value === null) return inDefaultValue;
+
+    return value;
+};
+
+export default readAttributeOrDefault;

package/bin/commands/template/v4/readNavStoryFromElement.js

@@ -0,0 +1,42 @@
+import navDefaults from "./navDefaults.js";
+import readAttributeOrDefault from "./readAttributeOrDefault.js";
+
+const readNavStoryFromElement = ({ inElement }) => {
+    return {
+        navClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-nav-class",
+            inDefaultValue: navDefaults.navClass
+        }),
+        outerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-outer-class",
+            inDefaultValue: navDefaults.outerClass
+        }),
+        innerClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-inner-class",
+            inDefaultValue: navDefaults.innerClass
+        }),
+        titleId: inElement.getAttribute("ks-title-id"),
+        title: inElement.getAttribute("ks-title"),
+        brandClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-brand-class",
+            inDefaultValue: navDefaults.brandClass
+        }),
+        menuClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-menu-class",
+            inDefaultValue: navDefaults.menuClass
+        }),
+        menuExtraClass: inElement.getAttribute("ks-ul-class"),
+        buttonClass: readAttributeOrDefault({
+            inElement,
+            inName: "ks-button-class",
+            inDefaultValue: navDefaults.buttonClass
+        })
+    };
+};
+
+export default readNavStoryFromElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-web-comp-nav",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "CLI to scaffold projects using templates",
   "keywords": [
     "tailwind",