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.
- package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/BuildMenuItem/buildMenuItem.js +3 -5
- package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/BuildNav/buildMenu.js +2 -2
- package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildNav.js +2 -2
- package/bin/header/v3/commands/header/template/v6/createIcon.js +19 -0
- package/bin/header/v3/commands/header/template/v6/icons copy.js +27 -0
- package/bin/header/v3/commands/header/template/v6/icons.js +35 -0
- package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/initHeader.js +6 -2
- package/bin/header/v3/commands/header/template/v6/svg/icons.json +6 -0
- package/bin/header/v3/commands/header/template/v6/svg/search.svg +3 -0
- package/bin/header/v3/commands/header/template/v6/svg/show.svg +3 -0
- package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/BuildMenuItem/buildMenuItem.js +4 -6
- package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/BuildNav/buildMenu.js +2 -2
- package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildNav.js +2 -2
- package/bin/header/v4/commands/header/template/v1/createIcon.js +19 -0
- package/bin/header/v4/commands/header/template/v1/icons copy.js +27 -0
- package/bin/header/v4/commands/header/template/v1/icons.js +35 -0
- package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/initHeader.js +14 -10
- package/bin/header/v4/commands/header/template/v1/svg/icons.json +6 -0
- package/bin/header/v4/commands/header/template/v1/svg/search.svg +3 -0
- package/bin/header/v4/commands/header/template/v1/svg/show.svg +3 -0
- package/bin/header/v4/commands/header/template/v2/BuildMenuItem/buildMenuItem.js +47 -0
- package/bin/header/v4/commands/header/template/v2/BuildMenuItem/callKSTable.js +7 -0
- package/bin/header/v4/commands/header/template/v2/BuildMenuItem/getDefaultKSTableConfig.js +80 -0
- package/bin/header/v4/commands/header/template/v2/BuildMenuItem/getKSTableConfig.js +17 -0
- package/bin/header/v4/commands/header/template/v2/BuildMenuItem/orchestrateMenuClick.js +34 -0
- package/bin/header/v4/commands/header/template/v2/BuildNav/buildBrand.js +14 -0
- package/bin/header/v4/commands/header/template/v2/BuildNav/buildHamburger.js +20 -0
- package/bin/header/v4/commands/header/template/v2/BuildNav/buildMenu.js +14 -0
- package/bin/header/v4/commands/header/template/v2/BuildNav/buildNav.js +31 -0
- package/bin/header/v4/commands/header/template/v2/BuildNav/buildWrapper.js +29 -0
- package/bin/header/v4/commands/header/template/v2/buildNav.js +29 -0
- package/bin/header/v4/commands/header/template/v2/createAnchor.js +15 -0
- package/bin/header/v4/commands/header/template/v2/createIcon.js +19 -0
- package/bin/header/v4/commands/header/template/v2/createLabel.js +9 -0
- package/bin/header/v4/commands/header/template/v2/createLi.js +5 -0
- package/bin/header/v4/commands/header/template/v2/icons copy.js +27 -0
- package/bin/header/v4/commands/header/template/v2/icons.js +38 -0
- package/bin/header/v4/commands/header/template/v2/initHeader.js +53 -0
- package/package.json +1 -1
- package/bin/header/v2/commands/header/template/v2/createIcon.js +0 -19
- package/bin/header/v2/commands/header/template/v3/createIcon.js +0 -19
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/callKSTable.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/getDefaultKSTableConfig.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/getKSTableConfig.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildMenuItem/orchestrateMenuClick.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildBrand.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildHamburger.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/BuildNav/buildWrapper.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/buildNav.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createAnchor.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLabel.js +0 -0
- /package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLi.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/announce.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/checks.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/createProject.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/getLatestVersion.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/locateDestination.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/locateSource copy.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/locateSource.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header/steps/resolveFolderName.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/callKSTable.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/getDefaultKSTableConfig.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/getKSTableConfig.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildMenuItem/orchestrateMenuClick.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildBrand.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildHamburger.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/BuildNav/buildWrapper.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/buildNav.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createAnchor.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLabel.js +0 -0
- /package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLi.js +0 -0
- /package/bin/header/{v2 → v4}/commands/header.js +0 -0
- /package/bin/header/{v2 → v4}/core/parseInput.js +0 -0
- /package/bin/header/{v2 → v4}/core/resolveCommand.js +0 -0
- /package/bin/header/{v2 → v4}/core/showUsage.js +0 -0
- /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
|
+
};
|
package/bin/header/{v2/commands/header/template/v3 → v3/commands/header/template/v6}/initHeader.js
RENAMED
|
@@ -8,7 +8,10 @@ const initHeader = (config = {}) => {
|
|
|
8
8
|
if (!header) return;
|
|
9
9
|
|
|
10
10
|
header.appendChild(
|
|
11
|
-
buildNav(
|
|
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
|
|
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
|
+
};
|
package/bin/header/{v2/commands/header/template/v2 → v4/commands/header/template/v1}/initHeader.js
RENAMED
|
@@ -8,15 +8,20 @@ const initHeader = (config = {}) => {
|
|
|
8
8
|
if (!header) return;
|
|
9
9
|
|
|
10
10
|
header.appendChild(
|
|
11
|
-
buildNav(
|
|
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
|
-
|
|
17
|
-
|
|
19
|
+
(config.items || []).forEach(item => {
|
|
20
|
+
|
|
21
|
+
const classes = {
|
|
22
|
+
liClass: "md:text-center",
|
|
18
23
|
|
|
19
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,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,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,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
|
|
File without changes
|
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/buildNav.js
RENAMED
|
File without changes
|
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLabel.js
RENAMED
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v2 → v3/commands/header/template/v6}/createLi.js
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/buildNav.js
RENAMED
|
File without changes
|
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLabel.js
RENAMED
|
File without changes
|
/package/bin/header/{v2/commands/header/template/v3 → v4/commands/header/template/v1}/createLi.js
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|