tailwind-header-dom 3.5.1 → 3.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/BuildMenuItem/buildMenuItem.js +3 -5
  2. package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/BuildNav/buildMenu.js +2 -2
  3. package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildNav.js +2 -2
  4. package/bin/header/v3/commands/header/template/v6/createIcon.js +19 -0
  5. package/bin/header/v3/commands/header/template/v6/icons copy.js +27 -0
  6. package/bin/header/v3/commands/header/template/v6/icons.js +35 -0
  7. package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/initHeader.js +6 -2
  8. package/bin/header/v3/commands/header/template/v6/svg/icons.json +6 -0
  9. package/bin/header/v3/commands/header/template/v6/svg/search.svg +3 -0
  10. package/bin/header/v3/commands/header/template/v6/svg/show.svg +3 -0
  11. package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/BuildMenuItem/buildMenuItem.js +4 -6
  12. package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/BuildNav/buildMenu.js +2 -2
  13. package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildNav.js +2 -2
  14. package/bin/header/v4/commands/header/template/v1/createIcon.js +19 -0
  15. package/bin/header/v4/commands/header/template/v1/icons copy.js +27 -0
  16. package/bin/header/v4/commands/header/template/v1/icons.js +35 -0
  17. package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/initHeader.js +14 -10
  18. package/bin/header/v4/commands/header/template/v1/svg/icons.json +6 -0
  19. package/bin/header/v4/commands/header/template/v1/svg/search.svg +3 -0
  20. package/bin/header/v4/commands/header/template/v1/svg/show.svg +3 -0
  21. package/bin/header/v4/commands/header/template/v2/BuildMenuItem/buildMenuItem.js +47 -0
  22. package/bin/header/v4/commands/header/template/v2/BuildMenuItem/callKSTable.js +7 -0
  23. package/bin/header/v4/commands/header/template/v2/BuildMenuItem/getDefaultKSTableConfig.js +80 -0
  24. package/bin/header/v4/commands/header/template/v2/BuildMenuItem/getKSTableConfig.js +17 -0
  25. package/bin/header/v4/commands/header/template/v2/BuildMenuItem/orchestrateMenuClick.js +34 -0
  26. package/bin/header/v4/commands/header/template/v2/BuildNav/buildBrand.js +14 -0
  27. package/bin/header/v4/commands/header/template/v2/BuildNav/buildHamburger.js +20 -0
  28. package/bin/header/v4/commands/header/template/v2/BuildNav/buildMenu.js +14 -0
  29. package/bin/header/v4/commands/header/template/v2/BuildNav/buildNav.js +31 -0
  30. package/bin/header/v4/commands/header/template/v2/BuildNav/buildWrapper.js +29 -0
  31. package/bin/header/v4/commands/header/template/v2/buildNav.js +29 -0
  32. package/bin/header/v4/commands/header/template/v2/createAnchor.js +15 -0
  33. package/bin/header/v4/commands/header/template/v2/createIcon.js +19 -0
  34. package/bin/header/v4/commands/header/template/v2/createLabel.js +9 -0
  35. package/bin/header/v4/commands/header/template/v2/createLi.js +5 -0
  36. package/bin/header/v4/commands/header/template/v2/icons copy.js +27 -0
  37. package/bin/header/v4/commands/header/template/v2/icons.js +38 -0
  38. package/bin/header/v4/commands/header/template/v2/initHeader.js +53 -0
  39. package/package.json +1 -1
  40. package/bin/header/v2/commands/header/template/v2/createIcon.js +0 -19
  41. package/bin/header/v2/commands/header/template/v3/createIcon.js +0 -19
  42. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/callKSTable.js +0 -0
  43. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/getDefaultKSTableConfig.js +0 -0
  44. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/getKSTableConfig.js +0 -0
  45. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/orchestrateMenuClick.js +0 -0
  46. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildBrand.js +0 -0
  47. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildHamburger.js +0 -0
  48. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildWrapper.js +0 -0
  49. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/buildNav.js +0 -0
  50. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createAnchor.js +0 -0
  51. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLabel.js +0 -0
  52. /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLi.js +0 -0
  53. /package/bin/header/{v2 → v4}/commands/header/steps/announce.js +0 -0
  54. /package/bin/header/{v2 → v4}/commands/header/steps/checks.js +0 -0
  55. /package/bin/header/{v2 → v4}/commands/header/steps/createProject.js +0 -0
  56. /package/bin/header/{v2 → v4}/commands/header/steps/getLatestVersion.js +0 -0
  57. /package/bin/header/{v2 → v4}/commands/header/steps/locateDestination.js +0 -0
  58. /package/bin/header/{v2 → v4}/commands/header/steps/locateSource copy.js +0 -0
  59. /package/bin/header/{v2 → v4}/commands/header/steps/locateSource.js +0 -0
  60. /package/bin/header/{v2 → v4}/commands/header/steps/resolveFolderName.js +0 -0
  61. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/callKSTable.js +0 -0
  62. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/getDefaultKSTableConfig.js +0 -0
  63. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/getKSTableConfig.js +0 -0
  64. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/orchestrateMenuClick.js +0 -0
  65. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildBrand.js +0 -0
  66. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildHamburger.js +0 -0
  67. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildWrapper.js +0 -0
  68. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/buildNav.js +0 -0
  69. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createAnchor.js +0 -0
  70. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLabel.js +0 -0
  71. /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLi.js +0 -0
  72. /package/bin/header/{v2 → v4}/commands/header.js +0 -0
  73. /package/bin/header/{v2 → v4}/core/parseInput.js +0 -0
  74. /package/bin/header/{v2 → v4}/core/resolveCommand.js +0 -0
  75. /package/bin/header/{v2 → v4}/core/showUsage.js +0 -0
  76. /package/bin/header/{v2 → v4}/start.js +0 -0
@@ -11,7 +11,8 @@ export const buildMenuItem = ({
11
11
  inHref,
12
12
  onClick,
13
13
  inTableName,
14
- inClasses
14
+ inClasses,
15
+ inSvgName
15
16
  }) => {
16
17
  const li = createLi(inClasses.liClass);
17
18
 
@@ -27,10 +28,7 @@ export const buildMenuItem = ({
27
28
  inClassName: inClasses.spanClass
28
29
  });
29
30
 
30
- const svg = createIcon({
31
- inClassName: inClasses.svgClass,
32
- inIconPaths
33
- });
31
+ const svg = createIcon({ inSvgName });
34
32
 
35
33
  if (onClick) {
36
34
  a.addEventListener(
@@ -1,6 +1,6 @@
1
1
  // /header/v1/buildMenu.js
2
2
 
3
- export const buildMenu = () => {
3
+ export const buildMenu = ({ inUlClass = "[&_svg]:size-6" }) => {
4
4
 
5
5
  const ul = document.createElement("ul");
6
6
 
@@ -8,7 +8,7 @@ export const buildMenu = () => {
8
8
 
9
9
  ul.className = `w-full hidden flex flex-col space-y-2 mt-4
10
10
  md:flex md:flex-row md:space-y-0 md:gap-4
11
- md:mt-0 md:w-auto md:flex-wrap`;
11
+ md:mt-0 md:w-auto md:flex-wrap ${inUlClass}`;
12
12
 
13
13
  return ul;
14
14
  };
@@ -5,7 +5,7 @@ import { buildHamburger } from "./buildHamburger.js";
5
5
  import { buildMenu } from "./buildMenu.js";
6
6
  import { buildWrapper } from "./buildWrapper.js";
7
7
 
8
- export const buildNav = (inTitle = {}) => {
8
+ export const buildNav = ({ inTitle = {}, inUiClasses = {} }) => {
9
9
 
10
10
  const {
11
11
  nav,
@@ -24,7 +24,7 @@ export const buildNav = (inTitle = {}) => {
24
24
  );
25
25
 
26
26
  innerDiv.appendChild(
27
- buildMenu()
27
+ buildMenu({ inUlClass: inUiClasses?.ulClass })
28
28
  );
29
29
 
30
30
  return nav;
@@ -0,0 +1,19 @@
1
+ import icons from "./icons.js";
2
+
3
+ export const createIcon = ({
4
+ inSvgName
5
+ }) => {
6
+ console.log("inSvgName : ", inSvgName);
7
+
8
+ if (inSvgName in icons) {
9
+ return document
10
+ .createRange()
11
+ .createContextualFragment(icons[inSvgName])
12
+ .firstElementChild;
13
+ };
14
+
15
+ return document
16
+ .createRange()
17
+ .createContextualFragment(icons.search)
18
+ .firstElementChild;
19
+ };
@@ -0,0 +1,27 @@
1
+ // icons.js
2
+ export default {
3
+ search: `
4
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
5
+ <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" />
6
+ </svg>
7
+ `,
8
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
9
+ <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" />
10
+ </svg>
11
+ `,
12
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13
+ <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" />
14
+ </svg>
15
+ `,
16
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
17
+ <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" />
18
+ </svg>
19
+ `,
20
+ search1: `
21
+ <div class="w-10 h-10 flex items-center justify-center">
22
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
23
+ <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" />
24
+ </svg>
25
+ </div>
26
+ `,
27
+ };
@@ -0,0 +1,35 @@
1
+ // icons.js
2
+ export default {
3
+ search: `
4
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
5
+ <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" />
6
+ </svg>
7
+ `,
8
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
9
+ <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" />
10
+ </svg>
11
+ `,
12
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13
+ <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" />
14
+ </svg>
15
+ `,
16
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
17
+ <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" />
18
+ </svg>
19
+ `,
20
+ wifi: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
21
+ <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
22
+ </svg>
23
+ `,
24
+ exclamation: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
25
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
26
+ </svg>
27
+ `,
28
+ search1: `
29
+ <div class="w-10 h-10 flex items-center justify-center">
30
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
31
+ <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" />
32
+ </svg>
33
+ </div>
34
+ `,
35
+ };
@@ -8,7 +8,10 @@ const initHeader = (config = {}) => {
8
8
  if (!header) return;
9
9
 
10
10
  header.appendChild(
11
- buildNav(config.title)
11
+ buildNav({
12
+ inTitle: config.title,
13
+ inUiClasses: config.uiClasses
14
+ })
12
15
  );
13
16
 
14
17
  const menu = document.getElementById("menu");
@@ -39,7 +42,8 @@ const initHeader = (config = {}) => {
39
42
  inHref: item.href,
40
43
  onClick: item.onClick,
41
44
  inTableName: item.tableName,
42
- inClasses: classes
45
+ inClasses: classes,
46
+ inSvgName: item.svgName
43
47
  });
44
48
 
45
49
  menu.appendChild(li);
@@ -0,0 +1,6 @@
1
+ {
2
+ "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">
3
+ <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" />
4
+ </svg>
5
+ `
6
+ }
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
2
+ <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" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
2
+ <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" />
3
+ </svg>
@@ -11,14 +11,15 @@ export const buildMenuItem = ({
11
11
  inHref,
12
12
  onClick,
13
13
  inTableName,
14
- inClasses
14
+ inClasses,
15
+ inSvgName
15
16
  }) => {
16
17
  const li = createLi(inClasses.liClass);
17
18
 
18
19
  const a = createAnchor({
19
20
  inHtmlId,
20
21
  inHref,
21
- cls: inClasses.aClass,
22
+ cls: inClasses?.aClass,
22
23
  inTableName
23
24
  });
24
25
  // debugger;
@@ -27,10 +28,7 @@ export const buildMenuItem = ({
27
28
  inClassName: inClasses.spanClass
28
29
  });
29
30
 
30
- const svg = createIcon({
31
- inClassName: inClasses.svgClass,
32
- inIconPaths
33
- });
31
+ const svg = createIcon({ inSvgName });
34
32
 
35
33
  if (onClick) {
36
34
  a.addEventListener(
@@ -1,6 +1,6 @@
1
1
  // /header/v1/buildMenu.js
2
2
 
3
- export const buildMenu = () => {
3
+ export const buildMenu = ({ inUlClass = "[&_svg]:size-6" }) => {
4
4
 
5
5
  const ul = document.createElement("ul");
6
6
 
@@ -8,7 +8,7 @@ export const buildMenu = () => {
8
8
 
9
9
  ul.className = `w-full hidden flex flex-col space-y-2 mt-4
10
10
  md:flex md:flex-row md:space-y-0 md:gap-4
11
- md:mt-0 md:w-auto md:flex-wrap`;
11
+ md:mt-0 md:w-auto md:flex-wrap ${inUlClass}`;
12
12
 
13
13
  return ul;
14
14
  };
@@ -5,7 +5,7 @@ import { buildHamburger } from "./buildHamburger.js";
5
5
  import { buildMenu } from "./buildMenu.js";
6
6
  import { buildWrapper } from "./buildWrapper.js";
7
7
 
8
- export const buildNav = (inTitle = {}) => {
8
+ export const buildNav = ({ inTitle = {}, inUiClasses = {} }) => {
9
9
 
10
10
  const {
11
11
  nav,
@@ -24,7 +24,7 @@ export const buildNav = (inTitle = {}) => {
24
24
  );
25
25
 
26
26
  innerDiv.appendChild(
27
- buildMenu()
27
+ buildMenu({ inUlClass: inUiClasses?.ulClass })
28
28
  );
29
29
 
30
30
  return nav;
@@ -0,0 +1,19 @@
1
+ import icons from "./icons.js";
2
+
3
+ export const createIcon = ({
4
+ inSvgName
5
+ }) => {
6
+ console.log("inSvgName : ", inSvgName);
7
+
8
+ if (inSvgName in icons) {
9
+ return document
10
+ .createRange()
11
+ .createContextualFragment(icons[inSvgName])
12
+ .firstElementChild;
13
+ };
14
+
15
+ return document
16
+ .createRange()
17
+ .createContextualFragment(icons.search)
18
+ .firstElementChild;
19
+ };
@@ -0,0 +1,27 @@
1
+ // icons.js
2
+ export default {
3
+ search: `
4
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
5
+ <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" />
6
+ </svg>
7
+ `,
8
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
9
+ <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" />
10
+ </svg>
11
+ `,
12
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13
+ <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" />
14
+ </svg>
15
+ `,
16
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
17
+ <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" />
18
+ </svg>
19
+ `,
20
+ search1: `
21
+ <div class="w-10 h-10 flex items-center justify-center">
22
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
23
+ <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" />
24
+ </svg>
25
+ </div>
26
+ `,
27
+ };
@@ -0,0 +1,35 @@
1
+ // icons.js
2
+ export default {
3
+ search: `
4
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
5
+ <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" />
6
+ </svg>
7
+ `,
8
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
9
+ <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" />
10
+ </svg>
11
+ `,
12
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13
+ <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" />
14
+ </svg>
15
+ `,
16
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
17
+ <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" />
18
+ </svg>
19
+ `,
20
+ wifi: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
21
+ <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
22
+ </svg>
23
+ `,
24
+ exclamation: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
25
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
26
+ </svg>
27
+ `,
28
+ search1: `
29
+ <div class="w-10 h-10 flex items-center justify-center">
30
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
31
+ <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" />
32
+ </svg>
33
+ </div>
34
+ `,
35
+ };
@@ -8,15 +8,20 @@ const initHeader = (config = {}) => {
8
8
  if (!header) return;
9
9
 
10
10
  header.appendChild(
11
- buildNav(config.title)
11
+ buildNav({
12
+ inTitle: config.title,
13
+ inUiClasses: config.uiClasses
14
+ })
12
15
  );
13
16
 
14
17
  const menu = document.getElementById("menu");
15
18
 
16
- const classes = {
17
- liClass: "md:text-center",
19
+ (config.items || []).forEach(item => {
20
+
21
+ const classes = {
22
+ liClass: "md:text-center",
18
23
 
19
- aClass: `flex justify-between items-center
24
+ aClass: `${item?.uiClasses?.aClass} flex justify-between items-center
20
25
  bg-gray-700 px-4 py-2 rounded-md
21
26
  hover:bg-gray-600
22
27
  active:bg-gray-500 active:scale-95
@@ -24,13 +29,11 @@ const initHeader = (config = {}) => {
24
29
  md:flex-col md:justify-center md:items-center
25
30
  lg:bg-transparent lg:px-2 lg:py-1`,
26
31
 
27
- spanClass: `ml-3 text-right w-full text-base
32
+ spanClass: `ml-3 text-right w-full text-base
28
33
  md:w-auto md:text-center md:ml-0 lg:text-lg`,
29
34
 
30
- svgClass: "text-gray-300 w-6 h-6 lg:w-7 lg:h-7"
31
- };
32
-
33
- (config.items || []).forEach(item => {
35
+ svgClass: "text-gray-300 w-6 h-6 lg:w-7 lg:h-7"
36
+ };
34
37
 
35
38
  const li = buildMenuItem({
36
39
  inTextToShow: item.text,
@@ -39,7 +42,8 @@ const initHeader = (config = {}) => {
39
42
  inHref: item.href,
40
43
  onClick: item.onClick,
41
44
  inTableName: item.tableName,
42
- inClasses: classes
45
+ inClasses: classes,
46
+ inSvgName: item.svgName
43
47
  });
44
48
 
45
49
  menu.appendChild(li);
@@ -0,0 +1,6 @@
1
+ {
2
+ "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">
3
+ <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" />
4
+ </svg>
5
+ `
6
+ }
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
2
+ <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" />
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
2
+ <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" />
3
+ </svg>
@@ -0,0 +1,47 @@
1
+ import { createLi } from "../createLi.js";
2
+ import { createAnchor } from "../createAnchor.js";
3
+ import { createLabel } from "../createLabel.js";
4
+ import { createIcon } from "../createIcon.js";
5
+ import { orchestrateMenuClick } from "./orchestrateMenuClick.js";
6
+
7
+ export const buildMenuItem = ({
8
+ inTextToShow,
9
+ inHtmlId,
10
+ inIconPaths,
11
+ inHref,
12
+ onClick,
13
+ inTableName,
14
+ inClasses,
15
+ inSvgName
16
+ }) => {
17
+ const li = createLi(inClasses.liClass);
18
+
19
+ const a = createAnchor({
20
+ inHtmlId,
21
+ inHref,
22
+ cls: inClasses?.aClass,
23
+ inTableName
24
+ });
25
+ // debugger;
26
+ const span = createLabel({
27
+ inTextToShow: inTextToShow,
28
+ inClassName: inClasses.spanClass
29
+ });
30
+
31
+ const svg = createIcon({ inSvgName });
32
+
33
+ if (onClick) {
34
+ a.addEventListener(
35
+ "click",
36
+ orchestrateMenuClick({
37
+ onClick
38
+ })
39
+ );
40
+ };
41
+
42
+ a.append(svg, span);
43
+
44
+ li.appendChild(a);
45
+
46
+ return li;
47
+ };
@@ -0,0 +1,7 @@
1
+ export const callKSTable = async (config) => {
2
+ if (window.KSTable?.initTableOnly) {
3
+ return window.KSTable.initTableOnly(config);
4
+ };
5
+
6
+ return initTableOnly(config);
7
+ };
@@ -0,0 +1,80 @@
1
+ export const getDefaultKSTableConfig = () => {
2
+ return {
3
+ containerId: 'kSTableContainer',
4
+
5
+ tableName: "",
6
+
7
+ mode: "create",
8
+
9
+ layout: {
10
+ verticalPosition: "top",
11
+ type: "table",
12
+ },
13
+
14
+ endPoints: {
15
+ create: "",
16
+ update: "",
17
+ delete: "",
18
+ read: "",
19
+ find: ""
20
+ },
21
+
22
+ options: {
23
+ firstRow: {
24
+ showSearch: true
25
+ },
26
+
27
+ vertical: {
28
+ showVertical: true,
29
+ isDisabled: false,
30
+ showSaveButton: true
31
+ },
32
+
33
+ dataList: {
34
+ show: true,
35
+ },
36
+
37
+ table: {
38
+ isDisabled: false,
39
+ showTable: true,
40
+ showRowOptions: false,
41
+ showSerial: true,
42
+ showFooter: false,
43
+
44
+ footer: {
45
+ showDataList: true
46
+ }
47
+ },
48
+
49
+ focus: {
50
+ priority: ["vertical", "footer", "search"]
51
+ }
52
+ },
53
+
54
+ columnsConfig: [],
55
+
56
+ uiClasses: {
57
+ form: {
58
+ formClass: 'grid grid-cols-3 gap-x-8 gap-y-4 p-6 verticalForm',
59
+ buttonClass: 'mt-2 px-4 py-1 bg-green-500 text-white',
60
+ rowClass: 'flex items-center space-x-4',
61
+ labelClass: 'w-24 text-sm font-medium',
62
+ inputClass: 'flex-1 border rounded px-3 py-2'
63
+ }
64
+ },
65
+
66
+ callbacks: {
67
+ table: {
68
+ onDelete: async ({ toDeletePk }) => {
69
+ const fromDelete = await startFetchAsGet({
70
+ inQuery: {
71
+ ParentPk: toDeletePk
72
+ }
73
+ });
74
+
75
+ return await fromDelete;
76
+ }
77
+ }
78
+ }
79
+ };
80
+ };
@@ -0,0 +1,17 @@
1
+ import { getDefaultKSTableConfig } from "./getDefaultKSTableConfig.js";
2
+
3
+ export const getKSTableConfig = async ({ tableName }) => {
4
+ const config = getDefaultKSTableConfig();
5
+
6
+ const fromPromise = await fetch("/columns.json");
7
+ // debugger;
8
+ const columnsConfig = await fromPromise.json();
9
+
10
+ config.columnsConfig = columnsConfig[tableName].columnsConfig;
11
+
12
+ config.tableName = tableName;
13
+
14
+ config.endPoints.read = `/Api/V1/${tableName}/ShowAll`;
15
+
16
+ return config;
17
+ };
@@ -0,0 +1,34 @@
1
+ import { getKSTableConfig } from "./getKSTableConfig.js";
2
+ import { callKSTable } from "./callKSTable.js";
3
+
4
+ export const orchestrateMenuClick1 = async (event) => {
5
+ event.preventDefault();
6
+
7
+ const currentTarget = event.currentTarget;
8
+ // debugger;
9
+ const config = await getKSTableConfig({
10
+ tableName: currentTarget.dataset.tableName
11
+ });
12
+
13
+ await callKSTable(config);
14
+ };
15
+
16
+ export const orchestrateMenuClick =
17
+ ({ onClick }) =>
18
+ async (event) => {
19
+ // debugger;
20
+ event.preventDefault();
21
+
22
+ const currentTarget = event.currentTarget;
23
+ // debugger;
24
+ const config = await getKSTableConfig({
25
+ tableName: currentTarget.dataset.tableName
26
+ });
27
+
28
+ const fromCallKSTable = await callKSTable(config);
29
+ console.log("fromCallKSTable : ", fromCallKSTable);
30
+
31
+ if (onClick) {
32
+ await onClick(event);
33
+ };
34
+ };
@@ -0,0 +1,14 @@
1
+ // /header/v1/buildBrand.js
2
+
3
+ export const buildBrand = ({ inHeading = "KeshavSoft", inHtmlId = "titlehtmlId" }) => {
4
+
5
+ const div = document.createElement("div");
6
+
7
+ div.className = "text-xl font-semibold";
8
+
9
+ div.innerText = inHeading;
10
+
11
+ div.id = inHtmlId;
12
+
13
+ return div;
14
+ };
@@ -0,0 +1,20 @@
1
+ // /header/v1/buildHamburger.js
2
+
3
+ export const buildHamburger = () => {
4
+
5
+ const button = document.createElement("button");
6
+
7
+ button.className = "text-xl px-4 py-1 md:hidden";
8
+
9
+ button.innerText = "☰";
10
+
11
+ button.addEventListener("click", () => {
12
+
13
+ document
14
+ .getElementById("menu")
15
+ .classList.toggle("hidden");
16
+
17
+ });
18
+
19
+ return button;
20
+ };
@@ -0,0 +1,14 @@
1
+ // /header/v1/buildMenu.js
2
+
3
+ export const buildMenu = ({ inUlClass = "[&_svg]:size-6" }) => {
4
+
5
+ const ul = document.createElement("ul");
6
+
7
+ ul.id = "menu";
8
+
9
+ ul.className = `w-full hidden flex flex-col space-y-2 mt-4
10
+ md:flex md:flex-row md:space-y-0 md:gap-4
11
+ md:mt-0 md:w-auto md:flex-wrap ${inUlClass}`;
12
+
13
+ return ul;
14
+ };
@@ -0,0 +1,31 @@
1
+ // /header/v2/buildNav.js
2
+
3
+ import { buildBrand } from "./buildBrand.js";
4
+ import { buildHamburger } from "./buildHamburger.js";
5
+ import { buildMenu } from "./buildMenu.js";
6
+ import { buildWrapper } from "./buildWrapper.js";
7
+
8
+ export const buildNav = ({ inTitle = {}, inUiClasses = {} }) => {
9
+
10
+ const {
11
+ nav,
12
+ innerDiv
13
+ } = buildWrapper();
14
+
15
+ innerDiv.appendChild(
16
+ buildBrand({
17
+ inHeading: inTitle.text,
18
+ inHtmlId: inTitle.htmlId
19
+ })
20
+ );
21
+
22
+ innerDiv.appendChild(
23
+ buildHamburger()
24
+ );
25
+
26
+ innerDiv.appendChild(
27
+ buildMenu({ inUlClass: inUiClasses?.ulClass })
28
+ );
29
+
30
+ return nav;
31
+ };
@@ -0,0 +1,29 @@
1
+ // /header/v1/buildWrapper.js
2
+
3
+ export const buildWrapper = () => {
4
+
5
+ const nav = document.createElement("nav");
6
+
7
+ nav.className = "bg-gray-800 text-white";
8
+
9
+ const outerDiv = document.createElement("div");
10
+
11
+ outerDiv.className = `mx-auto px-3 py-3
12
+ max-w-3xl
13
+ lg:max-w-5xl
14
+ xl:max-w-full xl:px-10`;
15
+
16
+ const innerDiv = document.createElement("div");
17
+
18
+ innerDiv.className =
19
+ "flex flex-wrap items-center justify-between";
20
+
21
+ outerDiv.appendChild(innerDiv);
22
+
23
+ nav.appendChild(outerDiv);
24
+
25
+ return {
26
+ nav,
27
+ innerDiv
28
+ };
29
+ };
@@ -0,0 +1,29 @@
1
+ // /header/v1/buildWrapper.js
2
+
3
+ export const buildWrapper = () => {
4
+
5
+ const nav = document.createElement("nav");
6
+
7
+ nav.className = "bg-gray-800 text-white";
8
+
9
+ const outerDiv = document.createElement("div");
10
+
11
+ outerDiv.className = `mx-auto px-3 py-3
12
+ max-w-3xl
13
+ lg:max-w-5xl
14
+ xl:max-w-full xl:px-10`;
15
+
16
+ const innerDiv = document.createElement("div");
17
+
18
+ innerDiv.className =
19
+ "flex flex-wrap items-center justify-between";
20
+
21
+ outerDiv.appendChild(innerDiv);
22
+
23
+ nav.appendChild(outerDiv);
24
+
25
+ return {
26
+ nav,
27
+ innerDiv
28
+ };
29
+ };
@@ -0,0 +1,15 @@
1
+ export const createAnchor = ({
2
+ inHtmlId = "", inHref = "#", cls = "", inTableName = ""
3
+ }) => {
4
+ const a = document.createElement("a");
5
+
6
+ a.id = inHtmlId;
7
+ a.href = inHref;
8
+ a.className = cls;
9
+
10
+ if (inTableName) {
11
+ a.dataset.tableName = inTableName
12
+ };
13
+
14
+ return a;
15
+ };
@@ -0,0 +1,19 @@
1
+ import icons from "./icons.js";
2
+
3
+ export const createIcon = ({
4
+ inSvgName
5
+ }) => {
6
+ console.log("inSvgName : ", inSvgName);
7
+
8
+ if (inSvgName in icons) {
9
+ return document
10
+ .createRange()
11
+ .createContextualFragment(icons[inSvgName])
12
+ .firstElementChild;
13
+ };
14
+
15
+ return document
16
+ .createRange()
17
+ .createContextualFragment(icons.search)
18
+ .firstElementChild;
19
+ };
@@ -0,0 +1,9 @@
1
+ export const createLabel = ({
2
+ inTextToShow = "",
3
+ inClassName = ""
4
+ }) => {
5
+ const span = document.createElement("span");
6
+ span.className = inClassName;
7
+ span.textContent = inTextToShow;
8
+ return span;
9
+ };
@@ -0,0 +1,5 @@
1
+ export const createLi = (cls = "") => {
2
+ const li = document.createElement("li");
3
+ li.className = cls;
4
+ return li;
5
+ };
@@ -0,0 +1,27 @@
1
+ // icons.js
2
+ export default {
3
+ search: `
4
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
5
+ <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" />
6
+ </svg>
7
+ `,
8
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
9
+ <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" />
10
+ </svg>
11
+ `,
12
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
13
+ <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" />
14
+ </svg>
15
+ `,
16
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
17
+ <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" />
18
+ </svg>
19
+ `,
20
+ search1: `
21
+ <div class="w-10 h-10 flex items-center justify-center">
22
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
23
+ <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" />
24
+ </svg>
25
+ </div>
26
+ `,
27
+ };
@@ -0,0 +1,38 @@
1
+ // icons.js
2
+ export default {
3
+ download: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
4
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15M9 12l3 3m0 0 3-3m-3 3V2.25" />
5
+ </svg>`,
6
+ search: `
7
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
8
+ <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" />
9
+ </svg>
10
+ `,
11
+ home: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
12
+ <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" />
13
+ </svg>
14
+ `,
15
+ serial: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
16
+ <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" />
17
+ </svg>
18
+ `,
19
+ currency: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
20
+ <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" />
21
+ </svg>
22
+ `,
23
+ wifi: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
24
+ <path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 0 1 7.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 0 1 1.06 0Z" />
25
+ </svg>
26
+ `,
27
+ exclamation: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
28
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
29
+ </svg>
30
+ `,
31
+ search1: `
32
+ <div class="w-10 h-10 flex items-center justify-center">
33
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
34
+ <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" />
35
+ </svg>
36
+ </div>
37
+ `,
38
+ };
@@ -0,0 +1,53 @@
1
+ import { buildMenuItem } from "./BuildMenuItem/buildMenuItem.js";
2
+ import { buildNav } from "./BuildNav/buildNav.js";
3
+
4
+ const initHeader = (config = {}) => {
5
+
6
+ const header = document.getElementById("header");
7
+
8
+ if (!header) return;
9
+
10
+ header.appendChild(
11
+ buildNav({
12
+ inTitle: config.title,
13
+ inUiClasses: config.uiClasses
14
+ })
15
+ );
16
+
17
+ const menu = document.getElementById("menu");
18
+
19
+ (config.items || []).forEach(item => {
20
+
21
+ const classes = {
22
+ liClass: "md:text-center",
23
+
24
+ aClass: `${item?.uiClasses?.aClass} flex justify-between items-center
25
+ bg-gray-700 px-4 py-2 rounded-md
26
+ hover:bg-gray-600
27
+ active:bg-gray-500 active:scale-95
28
+ transition-all duration-150
29
+ md:flex-col md:justify-center md:items-center
30
+ lg:bg-transparent lg:px-2 lg:py-1`,
31
+
32
+ spanClass: `ml-3 text-right w-full text-base
33
+ md:w-auto md:text-center md:ml-0 lg:text-lg`,
34
+
35
+ svgClass: "text-gray-300 w-6 h-6 lg:w-7 lg:h-7"
36
+ };
37
+
38
+ const li = buildMenuItem({
39
+ inTextToShow: item.text,
40
+ inHtmlId: item.id,
41
+ inIconPaths: item.icon,
42
+ inHref: item.href,
43
+ onClick: item.onClick,
44
+ inTableName: item.tableName,
45
+ inClasses: classes,
46
+ inSvgName: item.svgName
47
+ });
48
+
49
+ menu.appendChild(li);
50
+ });
51
+ };
52
+
53
+ export default initHeader;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwind-header-dom",
3
- "version": "3.5.1",
3
+ "version": "3.6.2",
4
4
  "description": "CLI to scaffold projects using templates",
5
5
  "keywords": [
6
6
  "tailwind",
@@ -1,19 +0,0 @@
1
- export const createIcon = ({
2
- inIconPaths = [],
3
- inClassName = ""
4
- }) => {
5
- const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
6
-
7
- svg.setAttribute("class", inClassName);
8
- svg.setAttribute("fill", "none");
9
- svg.setAttribute("stroke", "currentColor");
10
- svg.setAttribute("viewBox", "0 0 24 24");
11
-
12
- inIconPaths.forEach(d => {
13
- const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
14
- path.setAttribute("d", d);
15
- svg.appendChild(path);
16
- });
17
-
18
- return svg;
19
- };
@@ -1,19 +0,0 @@
1
- export const createIcon = ({
2
- inIconPaths = [],
3
- inClassName = ""
4
- }) => {
5
- const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
6
-
7
- svg.setAttribute("class", inClassName);
8
- svg.setAttribute("fill", "none");
9
- svg.setAttribute("stroke", "currentColor");
10
- svg.setAttribute("viewBox", "0 0 24 24");
11
-
12
- inIconPaths.forEach(d => {
13
- const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
14
- path.setAttribute("d", d);
15
- svg.appendChild(path);
16
- });
17
-
18
- return svg;
19
- };
File without changes
File without changes
File without changes
File without changes
File without changes