tailwind-header-dom 3.4.1

package/bin/header/v3/commands/header/template/v4/buildNav.js

@@ -0,0 +1,29 @@
+// /header/v1/buildWrapper.js
+
+export const buildWrapper = () => {
+
+    const nav = document.createElement("nav");
+
+    nav.className = "bg-gray-800 text-white";
+
+    const outerDiv = document.createElement("div");
+
+    outerDiv.className = `mx-auto px-3 py-3
+    max-w-3xl
+    lg:max-w-5xl
+    xl:max-w-full xl:px-10`;
+
+    const innerDiv = document.createElement("div");
+
+    innerDiv.className =
+        "flex flex-wrap items-center justify-between";
+
+    outerDiv.appendChild(innerDiv);
+
+    nav.appendChild(outerDiv);
+
+    return {
+        nav,
+        innerDiv
+    };
+};

package/bin/header/v3/commands/header/template/v4/createAnchor.js

@@ -0,0 +1,15 @@
+export const createAnchor = ({
+    inHtmlId = "", inHref = "#", cls = "", inTableName = ""
+}) => {
+    const a = document.createElement("a");
+
+    a.id = inHtmlId;
+    a.href = inHref;
+    a.className = cls;
+
+    if (inTableName) {
+        a.dataset.tableName = inTableName
+    };
+
+    return a;
+};

package/bin/header/v3/commands/header/template/v4/createIcon.js

@@ -0,0 +1,19 @@
+import icons from "./icons.js";
+
+export const createIcon = ({
+    inSvgName
+}) => {
+    console.log("inSvgName : ", inSvgName);
+
+    if (inSvgName in icons) {
+        return document
+            .createRange()
+            .createContextualFragment(icons[inSvgName])
+            .firstElementChild;
+    };
+
+    return document
+        .createRange()
+        .createContextualFragment(icons.search)
+        .firstElementChild;
+};

package/bin/header/v3/commands/header/template/v4/createLabel.js

@@ -0,0 +1,9 @@
+export const createLabel = ({
+    inTextToShow = "",
+    inClassName = ""
+}) => {
+    const span = document.createElement("span");
+    span.className = inClassName;
+    span.textContent = inTextToShow;
+    return span;
+};

package/bin/header/v3/commands/header/template/v4/createLi.js

@@ -0,0 +1,5 @@
+export const createLi = (cls = "") => {
+    const li = document.createElement("li");
+    li.className = cls;
+    return li;
+};

package/bin/header/v3/commands/header/template/v4/icons.js

@@ -0,0 +1,20 @@
+// icons.js
+export default {
+  search: `
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+    `,
+  home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>
+`,
+  serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99" />
+</svg>
+`,
+  currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 8.25H9m6 3H9m3 6-3-3h1.5a3 3 0 1 0 0-6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+`
+};

package/bin/header/v3/commands/header/template/v4/initHeader.js

@@ -0,0 +1,50 @@
+import { buildMenuItem } from "./BuildMenuItem/buildMenuItem.js";
+import { buildNav } from "./BuildNav/buildNav.js";
+
+const initHeader = (config = {}) => {
+
+    const header = document.getElementById("header");
+
+    if (!header) return;
+
+    header.appendChild(
+        buildNav(config.title)
+    );
+
+    const menu = document.getElementById("menu");
+
+    (config.items || []).forEach(item => {
+
+        const classes = {
+            liClass: "md:text-center",
+
+            aClass: `${item?.uiClasses?.aClass} flex justify-between items-center
+        bg-gray-700 px-4 py-2 rounded-md
+        hover:bg-gray-600
+        active:bg-gray-500 active:scale-95
+        transition-all duration-150
+        md:flex-col md:justify-center md:items-center
+        lg:bg-transparent lg:px-2 lg:py-1`,
+
+            spanClass: `ml-3 text-right w-full text-base
+        md:w-auto md:text-center md:ml-0 lg:text-lg`,
+
+            svgClass: "text-gray-300 w-6 h-6 lg:w-7 lg:h-7"
+        };
+
+        const li = buildMenuItem({
+            inTextToShow: item.text,
+            inHtmlId: item.id,
+            inIconPaths: item.icon,
+            inHref: item.href,
+            onClick: item.onClick,
+            inTableName: item.tableName,
+            inClasses: classes,
+            inSvgName: item.svgName
+        });
+
+        menu.appendChild(li);
+    });
+};
+
+export default initHeader;

package/bin/header/v3/commands/header/template/v4/svg/icons.json

@@ -0,0 +1,6 @@
+{
+    "search":`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>
+`
+}

package/bin/header/v3/commands/header/template/v4/svg/search.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+</svg>

package/bin/header/v3/commands/header/template/v4/svg/show.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>

package/bin/header/v3/commands/header.js

@@ -0,0 +1,74 @@
+import { locateSource } from "./header/steps/locateSource.js";
+import { locateDestination } from "./header/steps/locateDestination.js";
+
+import { createProject } from "./header/steps/createProject.js";
+import { announce } from "./header/steps/announce.js";
+
+import resolveFolderName from "./header/steps/resolveFolderName.js";
+import checks from "./header/steps/checks.js";
+
+export default ({
+    folderName = "",
+    toPath = process.cwd(),
+    inAnnounce = true,
+    showLog = false
+}) => {
+    if (showLog) {
+        console.log(`Resolving folder name..., folderName : ${folderName}`);
+    };
+
+    const resolvedFolderName = resolveFolderName({
+        name: folderName
+    });
+
+    if (showLog) {
+        console.log(`\n[1] Running checks..., resolvedFolderName : ${resolvedFolderName}`);
+    };
+
+    const fromChecks = checks({
+        inFolderName: resolvedFolderName,
+        toPath,
+        inShowLog: showLog
+    });
+
+    if (fromChecks) return false;
+
+    if (showLog) {
+        console.log("Locating source...");
+    }
+
+    const source = locateSource({
+        showLog
+    });
+
+    if (showLog) {
+        console.log("Locating destination...");
+    }
+
+    const destination = locateDestination({
+        inResolvedFolderName: resolvedFolderName,
+        showLog
+    });
+
+    if (showLog) {
+        console.log("Creating project...");
+    }
+
+    createProject({
+        source,
+        destination,
+        showLog
+    });
+
+    if (inAnnounce) {
+
+        if (showLog) {
+            console.log("Announcing...");
+        }
+
+        announce({
+            inResolvedFolderName: resolvedFolderName,
+            showLog
+        });
+    }
+};

package/bin/header/v3/core/parseInput.js

@@ -0,0 +1,9 @@
+export default function parseInput() {
+    const [cmd, folderName] = process.argv.slice(2);
+
+    return {
+        cmd: cmd || null,
+        folderName: folderName || null,
+        toPath: process.cwd()
+    };
+};

package/bin/header/v3/core/resolveCommand.js

@@ -0,0 +1,16 @@
+import fs from "fs";
+
+const files = fs.readdirSync(new URL("../commands/", import.meta.url));
+
+const entries = await Promise.all(
+    files.filter(f => f.endsWith(".js"))
+        .map(async f => [f.replace(".js", ""), (await import(`../commands/${f}`)).default])
+);
+
+const map = Object.fromEntries(entries);
+
+const resolveCommand = (cmd) => {
+    return map[cmd] || null;
+};
+
+export default resolveCommand;

package/bin/header/v3/core/showUsage.js

@@ -0,0 +1,49 @@
+/*
+JSON CRUD UI CLI – Entry Flow
+
+1. Read user input from terminal (parseInput)
+2. If no command → show usage
+3. If help flags → show usage
+4. Resolve command dynamically
+5. If command not found → show usage
+6. Validate command requirements
+7. Execute command
+
+Goal:
+- Zero confusion for user
+- Single source of truth (showUsage)
+- Self-validating commands
+- Easy to extend (drop-in command architecture)
+*/
+
+export default function showUsage(version) {
+    const g = "\x1b[32m";
+    const y = "\x1b[33m";
+    const c = "\x1b[36m";
+    const gray = "\x1b[90m";
+    const r = "\x1b[0m";
+
+    console.log(`
+${c}🚀 json-crud-ui-components v${version}${r}
+
+${y}Usage:${r}
+  ${g}npx json-crud-ui-components${r} <command>
+
+${y}Commands:${r}
+  ${g}init${r}             Creates initial boilerplate structure
+  ${g}addListeners${r}     Adds listeners boilerplate
+  ${g}buildHeader${r}      Builds header structure
+  ${g}htmlIdClick${r}      Adds htmlIdClick handler
+
+${y}Examples:${r}
+  ${gray}npx json-crud-ui-components init${r}
+  ${gray}npx json-crud-ui-components addListeners${r}
+
+${y}Architecture:${r}
+  ${gray}commands are auto-loaded dynamically${r}
+  ${gray}each command validates required files${r}
+
+${y}Tip:${r}
+  ${gray}Run init first before feature commands${r}
+`);
+}

package/bin/header/v3/start.js

@@ -0,0 +1,24 @@
+import parseInput from "./core/parseInput.js";
+import showUsage from './core/showUsage.js';
+
+import resolveCommand from "./core/resolveCommand.js";
+
+import pkg from '../../package.json' with { type: 'json' };
+
+const version = pkg.version;
+
+const run = async () => {
+  const input = parseInput();
+
+  if (input.action === "--help" || input.action === "-h" || input.action === "help") return showUsage(version);
+
+  const command = resolveCommand(input.cmd);
+
+  if (!command) return (console.log(`Unknown command: ${input.cmd}\n`), showUsage(version));
+
+  await command({
+    folderName: input.folderName
+  });
+};
+
+export default run;

package/bin/v5/commands/header/steps/announce.js

@@ -0,0 +1,3 @@
+export const announce = ({ inResolvedFolderName }) => {
+    console.log(`[keshavsoft] Project created: ${inResolvedFolderName}`);
+};

package/bin/v5/commands/header/steps/checks.js

@@ -0,0 +1,21 @@
+import fs from "fs";
+import path from "path";
+
+const validate = ({ toPath, inFolderName, inShowLog }) => {
+    const fullPath = path.join(toPath, inFolderName);
+
+    if (!fs.existsSync(fullPath)) {
+        return false;
+    }
+
+    const files = fs.readdirSync(fullPath);
+
+    if (files.length > 0) {
+        console.log("Folder should be empty");
+        return true;
+    };
+
+    return false;
+};
+
+export default validate;

package/bin/v5/commands/header/steps/createProject.js

@@ -0,0 +1,7 @@
+import fs from "fs";
+
+export const createProject = ({ source, destination }) => {
+    fs.mkdirSync(destination, { recursive: true });
+    
+    fs.cpSync(source, destination, { recursive: true });
+};

package/bin/v5/commands/header/steps/getLatestVersion.js

@@ -0,0 +1,25 @@
+import fs from "fs";
+
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templatePath = path.join(
+    __dirname,
+    "..",
+    "template"
+);
+
+const versions = fs
+    .readdirSync(templatePath)
+    .filter(item => item.startsWith("v"));
+
+const highestVersion =
+    versions.sort().at(-1);
+
+const sourceVersion =
+    highestVersion;
+
+export default sourceVersion;

package/bin/v5/commands/header/steps/locateDestination.js

@@ -0,0 +1,5 @@
+import path from "path";
+
+export const locateDestination = ({ inResolvedFolderName }) => {
+    return path.join(process.cwd(), inResolvedFolderName);
+};

package/bin/v5/commands/header/steps/locateSource copy.js

@@ -0,0 +1,32 @@
+import fs from "fs";
+
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const templatePath = path.join(
+    __dirname,
+    "..",
+    "template"
+);
+
+const versions = fs
+    .readdirSync(templatePath)
+    .filter(item => item.startsWith("v"));
+
+const highestVersion =
+    versions.sort().at(-1);
+
+const sourceVersion =
+    highestVersion;
+
+export const locateSource = () => {
+    return path.join(
+        __dirname,
+        "..",
+        "template",
+        sourceVersion
+    );
+};

package/bin/v5/commands/header/steps/locateSource.js

@@ -0,0 +1,19 @@
+import path from "path";
+
+import sourceVersion from "./getLatestVersion.js";
+
+import fs from "fs";
+
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const locateSource = () => {
+    return path.join(
+        __dirname,
+        "..",
+        "template",
+        sourceVersion
+    );
+};

package/bin/v5/commands/header/steps/resolveFolderName.js

@@ -0,0 +1,15 @@
+import fs from "fs";
+
+export default function resolveFolderName({ name, defaultFolerName = "headerV1" }) {
+    // case 1: force new → timestamp
+    if (name === null) {
+        name = defaultFolerName;
+    };
+
+    // case 2: user provided → strict
+    if (fs.existsSync(name)) {
+        throw new Error(`Folder already exists: ${name}`);
+    };
+
+    return name;
+};

package/bin/v5/commands/header/template/v4/BuildMenuItem/buildMenuItem.js

@@ -0,0 +1,49 @@
+import { createLi } from "../createLi.js";
+import { createAnchor } from "../createAnchor.js";
+import { createLabel } from "../createLabel.js";
+import { createIcon } from "../createIcon.js";
+import { orchestrateMenuClick } from "./orchestrateMenuClick.js";
+
+export const buildMenuItem = ({
+    inTextToShow,
+    inHtmlId,
+    inIconPaths,
+    inHref,
+    onClick,
+    inTableName,
+    inClasses
+}) => {
+    const li = createLi(inClasses.liClass);
+
+    const a = createAnchor({
+        inHtmlId,
+        inHref,
+        cls: inClasses.aClass,
+        inTableName
+    });
+    // debugger;
+    const span = createLabel({
+        inTextToShow: inTextToShow,
+        inClassName: inClasses.spanClass
+    });
+
+    const svg = createIcon({
+        inClassName: inClasses.svgClass,
+        inIconPaths
+    });
+
+    a.addEventListener(
+        "click",
+        orchestrateMenuClick({
+            onClick
+        })
+    );
+
+    a.addEventListener("click1", orchestrateMenuClick);
+
+    a.append(svg, span);
+
+    li.appendChild(a);
+
+    return li;
+};

package/bin/v5/commands/header/template/v4/BuildMenuItem/callKSTable.js

@@ -0,0 +1,7 @@
+export const callKSTable = async (config) => {
+    if (window.KSTable?.initTableOnly) {
+        return window.KSTable.initTableOnly(config);
+    };
+
+    return initTableOnly(config);
+};

package/bin/v5/commands/header/template/v4/BuildMenuItem/getDefaultKSTableConfig.js

@@ -0,0 +1,80 @@
+export const getDefaultKSTableConfig = () => {
+    return {
+        containerId: 'kSTableContainer',
+
+        tableName: "",
+
+        mode: "create",
+
+        layout: {
+            verticalPosition: "top",
+            type: "table",
+        },
+
+        endPoints: {
+            create: "",
+            update: "",
+            delete: "",
+            read: "",
+            find: ""
+        },
+
+        options: {
+            firstRow: {
+                showSearch: true
+            },
+
+            vertical: {
+                showVertical: true,
+                isDisabled: false,
+                showSaveButton: true
+            },
+
+            dataList: {
+                show: true,
+            },
+
+            table: {
+                isDisabled: false,
+                showTable: true,
+                showRowOptions: false,
+                showSerial: true,
+                showFooter: false,
+
+                footer: {
+                    showDataList: true
+                }
+            },
+
+            focus: {
+                priority: ["vertical", "footer", "search"]
+            }
+        },
+
+        columnsConfig: [],
+
+        uiClasses: {
+            form: {
+                formClass: 'grid grid-cols-3 gap-x-8 gap-y-4 p-6 verticalForm',
+                buttonClass: 'mt-2 px-4 py-1 bg-green-500 text-white',
+                rowClass: 'flex items-center space-x-4',
+                labelClass: 'w-24 text-sm font-medium',
+                inputClass: 'flex-1 border rounded px-3 py-2'
+            }
+        },
+
+        callbacks: {
+            table: {
+                onDelete: async ({ toDeletePk }) => {
+                    const fromDelete = await startFetchAsGet({
+                        inQuery: {
+                            ParentPk: toDeletePk
+                        }
+                    });
+
+                    return await fromDelete;
+                }
+            }
+        }
+    };
+};

package/bin/v5/commands/header/template/v4/BuildMenuItem/getKSTableConfig.js

@@ -0,0 +1,17 @@
+import { getDefaultKSTableConfig } from "./getDefaultKSTableConfig.js";
+
+export const getKSTableConfig = async ({ tableName }) => {
+    const config = getDefaultKSTableConfig();
+
+    const fromPromise = await fetch("/columns.json");
+    // debugger;
+    const columnsConfig = await fromPromise.json();
+
+    config.columnsConfig = columnsConfig[tableName].columnsConfig;
+
+    config.tableName = tableName;
+
+    config.endPoints.read = `/Api/V1/${tableName}/ShowAll`;
+
+    return config;
+};