p-elements-core 1.2.30 → 1.2.32-rc-10

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 (82) hide show
  1. package/.editorconfig +17 -17
  2. package/.gitlab-ci.yml +18 -18
  3. package/CHANGELOG.md +201 -0
  4. package/demo/sample.js +1 -1
  5. package/demo/screen.css +16 -16
  6. package/demo/theme.css +1 -0
  7. package/dist/p-elements-core-modern.js +1 -1
  8. package/dist/p-elements-core.js +1 -1
  9. package/docs/package-lock.json +6897 -6897
  10. package/docs/package.json +27 -27
  11. package/docs/src/404.md +8 -8
  12. package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
  13. package/docs/src/_data/demos/hello-world/index.html +10 -10
  14. package/docs/src/_data/demos/hello-world/project.json +7 -7
  15. package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
  16. package/docs/src/_data/demos/timer/icons.tsx +62 -62
  17. package/docs/src/_data/demos/timer/index.html +12 -12
  18. package/docs/src/_data/demos/timer/project.json +8 -8
  19. package/docs/src/_data/global.js +13 -13
  20. package/docs/src/_data/helpers.js +19 -19
  21. package/docs/src/_includes/layouts/base.njk +30 -30
  22. package/docs/src/_includes/layouts/playground.njk +40 -40
  23. package/docs/src/_includes/partials/app-header.njk +8 -8
  24. package/docs/src/_includes/partials/head.njk +14 -14
  25. package/docs/src/_includes/partials/nav.njk +19 -19
  26. package/docs/src/_includes/partials/top-nav.njk +51 -51
  27. package/docs/src/documentation/custom-element.md +221 -221
  28. package/docs/src/documentation/decorators/bind.md +71 -71
  29. package/docs/src/documentation/decorators/custom-element-config.md +63 -63
  30. package/docs/src/documentation/decorators/property.md +83 -83
  31. package/docs/src/documentation/decorators/query.md +66 -66
  32. package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
  33. package/docs/src/documentation/decorators.md +9 -9
  34. package/docs/src/documentation/reactive-properties.md +53 -53
  35. package/docs/src/index.d.ts +25 -25
  36. package/docs/src/index.md +3 -3
  37. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
  38. package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
  39. package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
  40. package/docs/tsconfig.json +22 -22
  41. package/index.html +15 -2
  42. package/p-elements-core.d.ts +12 -3
  43. package/package.json +11 -4
  44. package/readme.md +206 -206
  45. package/src/custom-element-controller.test.ts +226 -0
  46. package/src/custom-element-controller.ts +31 -31
  47. package/src/custom-element.test.ts +906 -0
  48. package/src/custom-element.ts +471 -188
  49. package/src/custom-style-element.ts +4 -1
  50. package/src/decorators/bind.test.ts +163 -0
  51. package/src/decorators/bind.ts +46 -46
  52. package/src/decorators/custom-element-config.ts +17 -17
  53. package/src/decorators/property.test.ts +279 -0
  54. package/src/decorators/property.ts +822 -150
  55. package/src/decorators/query.test.ts +146 -0
  56. package/src/decorators/query.ts +12 -12
  57. package/src/decorators/render-property-on-set.ts +3 -3
  58. package/src/helpers/css.test.ts +150 -0
  59. package/src/helpers/css.ts +71 -71
  60. package/src/maquette/cache.test.ts +150 -0
  61. package/src/maquette/cache.ts +35 -35
  62. package/src/maquette/dom.test.ts +263 -0
  63. package/src/maquette/dom.ts +115 -115
  64. package/src/maquette/h.test.ts +165 -0
  65. package/src/maquette/h.ts +100 -100
  66. package/src/maquette/index.ts +12 -12
  67. package/src/maquette/interfaces.ts +536 -536
  68. package/src/maquette/jsx.ts +61 -61
  69. package/src/maquette/mapping.test.ts +294 -0
  70. package/src/maquette/mapping.ts +56 -56
  71. package/src/maquette/maquette.test.ts +493 -0
  72. package/src/maquette/projection.test.ts +366 -0
  73. package/src/maquette/projection.ts +666 -666
  74. package/src/maquette/projector.test.ts +351 -0
  75. package/src/maquette/projector.ts +200 -200
  76. package/src/sample/mixin/highlight.tsx +33 -32
  77. package/src/sample/sample.tsx +167 -7
  78. package/src/test-setup.ts +85 -0
  79. package/src/test-utils.ts +223 -0
  80. package/tsconfig.json +1 -0
  81. package/vitest.config.ts +41 -0
  82. package/webpack.config.js +1 -1
package/docs/package.json CHANGED
@@ -1,27 +1,27 @@
1
- {
2
- "name": "docs",
3
- "version": "1.0.0",
4
- "main": "index.js",
5
- "scripts": {
6
- "test": "echo \"Error: no test specified\" && exit 1",
7
- "dev": "eleventy --serve",
8
- "build": "eleventy"
9
- },
10
- "keywords": [],
11
- "author": "",
12
- "license": "ISC",
13
- "description": "",
14
- "type": "module",
15
- "dependencies": {
16
- "@11ty/eleventy": "^3.0.0",
17
- "@11ty/eleventy-navigation": "^1.0.4",
18
- "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
- "cssnano": "^7.0.6",
20
- "esbuild": "^0.25.3",
21
- "p-elements-core": "^1.2.27",
22
- "playground-elements": "^0.20.0",
23
- "postcss": "^8.5.3",
24
- "postcss-import": "^16.1.0",
25
- "postcss-preset-env": "^10.1.6"
26
- }
27
- }
1
+ {
2
+ "name": "docs",
3
+ "version": "1.0.0",
4
+ "main": "index.js",
5
+ "scripts": {
6
+ "test": "echo \"Error: no test specified\" && exit 1",
7
+ "dev": "eleventy --serve",
8
+ "build": "eleventy"
9
+ },
10
+ "keywords": [],
11
+ "author": "",
12
+ "license": "ISC",
13
+ "description": "",
14
+ "type": "module",
15
+ "dependencies": {
16
+ "@11ty/eleventy": "^3.0.0",
17
+ "@11ty/eleventy-navigation": "^1.0.4",
18
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
19
+ "cssnano": "^7.0.6",
20
+ "esbuild": "^0.25.3",
21
+ "p-elements-core": "^1.2.27",
22
+ "playground-elements": "^0.20.0",
23
+ "postcss": "^8.5.3",
24
+ "postcss-import": "^16.1.0",
25
+ "postcss-preset-env": "^10.1.6"
26
+ }
27
+ }
package/docs/src/404.md CHANGED
@@ -1,8 +1,8 @@
1
- ---
2
- title: "Page Not Found"
3
- layout: "base.njk"
4
- description: "Requested page does not exist."
5
- permalink: "404.html"
6
- ---
7
-
8
- # Page Not Found
1
+ ---
2
+ title: "Page Not Found"
3
+ layout: "base.njk"
4
+ description: "Requested page does not exist."
5
+ permalink: "404.html"
6
+ ---
7
+
8
+ # Page Not Found
package/docs/src/_data/demos/hello-world/hello-world.tsx CHANGED
@@ -1,35 +1,35 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
-
13
- @CustomElementConfig({
14
- tagName: "p-hello",
15
- })
16
- export class HelloWorldElement extends CustomElement {
17
- static style = `
18
- .hello-world{
19
- color: red;
20
- }`;
21
-
22
- onNameClick = () => {
23
- const newName = prompt("Enter a new name:", this.name);
24
- if (newName) {
25
- this.name = newName;
26
- }
27
- }
28
-
29
- @Property({ type: "string", attribute: "name", reflect: true })
30
- name: string = "World";
31
-
32
- render= () : VNode => {
33
- return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
- }
35
- }
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+
13
+ @CustomElementConfig({
14
+ tagName: "p-hello",
15
+ })
16
+ export class HelloWorldElement extends CustomElement {
17
+ static style = `
18
+ .hello-world{
19
+ color: red;
20
+ }`;
21
+
22
+ onNameClick = () => {
23
+ const newName = prompt("Enter a new name:", this.name);
24
+ if (newName) {
25
+ this.name = newName;
26
+ }
27
+ }
28
+
29
+ @Property({ type: "string", attribute: "name", reflect: true })
30
+ name: string = "World";
31
+
32
+ render= () : VNode => {
33
+ return <div class="hello-world">Hello <strong onclick={this.onNameClick}>{this.name}</strong></div>;
34
+ }
35
+ }
package/docs/src/_data/demos/hello-world/index.html CHANGED
@@ -1,10 +1,10 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Hello World</title>
5
- </head>
6
- <body>
7
- <p-hello name="World"></p-hello>
8
- <script type="module" src="./hello-world.js"></script>
9
- </body>
10
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Hello World</title>
5
+ </head>
6
+ <body>
7
+ <p-hello name="World"></p-hello>
8
+ <script type="module" src="./hello-world.js"></script>
9
+ </body>
10
+ </html>
package/docs/src/_data/demos/hello-world/project.json CHANGED
@@ -1,7 +1,7 @@
1
- {
2
- "files": {
3
- "hello-world.tsx": {},
4
- "index.html": {}
5
- },
6
- "previewHeight": "125px"
7
- }
1
+ {
2
+ "files": {
3
+ "hello-world.tsx": {},
4
+ "index.html": {}
5
+ },
6
+ "previewHeight": "125px"
7
+ }
package/docs/src/_data/demos/timer/demo-timer.tsx CHANGED
@@ -1,120 +1,120 @@
1
- import { pause, play, replay } from "./icons.js";
2
-
3
- /* playground-hide */
4
-
5
- import "p-elements-core";
6
-
7
- // Can not configure tsxFactory in the playground,
8
- // so we assign Maquette.h to React.createElement
9
- const React = {
10
- createElement: Maquette.h,
11
- };
12
-
13
- /* playground-hide-end */
14
- /* playground-fold */
15
- function pad(pad: unknown, val: number) {
16
- return pad ? String(val).padStart(2, "0") : val;
17
- }
18
- /* playground-fold-end */
19
-
20
- const css = /* playground-fold */ `
21
- :host {
22
- margin: 1rem;
23
- font-family: monospace;
24
- font-size: 2rem;
25
- display: inline-flex;
26
- flex-direction: column;
27
- align-items: center;
28
- justify-content: center;
29
- }
30
- .timer {
31
- display: flex;
32
- justify-content: center;
33
- align-items: center;
34
- }
35
- .buttons {
36
- user-select: none;
37
- display: flex;
38
- gap: .5rem;
39
- }
40
- button {
41
- line-height: 0;
42
- padding: 0;
43
- }
44
- ` /* playground-fold-end */;
45
-
46
- @CustomElementConfig({
47
- tagName: "demo-timer",
48
- })
49
- export class DemoTimerElement extends CustomElement {
50
- static style = css
51
-
52
- @Property({ type: "number", attribute: "duration" })
53
- duration: number = 0;
54
-
55
- @PropertyRenderOnSet
56
- private end: number = null;
57
-
58
- @PropertyRenderOnSet
59
- private remaining: number = 0;
60
-
61
- render(): VNode {
62
- const { remaining, running } = this;
63
- const min = Math.floor(remaining / 60000);
64
- const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
- const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
-
67
- return (
68
- <div>
69
- <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
- <div class="buttons">
71
- {remaining === 0 ? (
72
- ""
73
- ) : running ? (
74
- <button onclick={this.pause} key="pause-button">
75
- {pause("pause-icon")}
76
- </button>
77
- ) : (
78
- <button onclick={this.start} key="play-button">
79
- {play("play-icon")}
80
- </button>
81
- )}
82
- <button onclick={this.reset} key="replay-button">
83
- {replay("replay-icon")}
84
- </button>
85
- </div>
86
- </div>
87
- );
88
- }
89
-
90
- start = () => {
91
- this.end = Date.now() + this.remaining;
92
- this.tick();
93
- };
94
-
95
- pause = () => {
96
- this.end = null;
97
- };
98
-
99
- reset = () => {
100
- const running = this.running;
101
- this.remaining = this.duration * 1000;
102
- this.end = running ? Date.now() + this.remaining : null;
103
- };
104
-
105
- tick() {
106
- if (this.running) {
107
- this.remaining = Math.max(0, this.end! - Date.now());
108
- requestAnimationFrame(() => this.tick());
109
- }
110
- }
111
-
112
- get running() {
113
- return this.end && this.remaining;
114
- }
115
-
116
- connectedCallback() {
117
- super.connectedCallback();
118
- this.reset();
119
- }
120
- }
1
+ import { pause, play, replay } from "./icons.js";
2
+
3
+ /* playground-hide */
4
+
5
+ import "p-elements-core";
6
+
7
+ // Can not configure tsxFactory in the playground,
8
+ // so we assign Maquette.h to React.createElement
9
+ const React = {
10
+ createElement: Maquette.h,
11
+ };
12
+
13
+ /* playground-hide-end */
14
+ /* playground-fold */
15
+ function pad(pad: unknown, val: number) {
16
+ return pad ? String(val).padStart(2, "0") : val;
17
+ }
18
+ /* playground-fold-end */
19
+
20
+ const css = /* playground-fold */ `
21
+ :host {
22
+ margin: 1rem;
23
+ font-family: monospace;
24
+ font-size: 2rem;
25
+ display: inline-flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .timer {
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+ .buttons {
36
+ user-select: none;
37
+ display: flex;
38
+ gap: .5rem;
39
+ }
40
+ button {
41
+ line-height: 0;
42
+ padding: 0;
43
+ }
44
+ ` /* playground-fold-end */;
45
+
46
+ @CustomElementConfig({
47
+ tagName: "demo-timer",
48
+ })
49
+ export class DemoTimerElement extends CustomElement {
50
+ static style = css
51
+
52
+ @Property({ type: "number", attribute: "duration" })
53
+ duration: number = 0;
54
+
55
+ @PropertyRenderOnSet
56
+ private end: number = null;
57
+
58
+ @PropertyRenderOnSet
59
+ private remaining: number = 0;
60
+
61
+ render(): VNode {
62
+ const { remaining, running } = this;
63
+ const min = Math.floor(remaining / 60000);
64
+ const sec = pad(min, Math.floor((remaining / 1000) % 60));
65
+ const hun = pad(true, Math.floor((remaining % 1000) / 10));
66
+
67
+ return (
68
+ <div>
69
+ <div class="timer">{`${min ? `${min}:${sec}` : `${sec}.${hun}`}`}</div>
70
+ <div class="buttons">
71
+ {remaining === 0 ? (
72
+ ""
73
+ ) : running ? (
74
+ <button onclick={this.pause} key="pause-button">
75
+ {pause("pause-icon")}
76
+ </button>
77
+ ) : (
78
+ <button onclick={this.start} key="play-button">
79
+ {play("play-icon")}
80
+ </button>
81
+ )}
82
+ <button onclick={this.reset} key="replay-button">
83
+ {replay("replay-icon")}
84
+ </button>
85
+ </div>
86
+ </div>
87
+ );
88
+ }
89
+
90
+ start = () => {
91
+ this.end = Date.now() + this.remaining;
92
+ this.tick();
93
+ };
94
+
95
+ pause = () => {
96
+ this.end = null;
97
+ };
98
+
99
+ reset = () => {
100
+ const running = this.running;
101
+ this.remaining = this.duration * 1000;
102
+ this.end = running ? Date.now() + this.remaining : null;
103
+ };
104
+
105
+ tick() {
106
+ if (this.running) {
107
+ this.remaining = Math.max(0, this.end! - Date.now());
108
+ requestAnimationFrame(() => this.tick());
109
+ }
110
+ }
111
+
112
+ get running() {
113
+ return this.end && this.remaining;
114
+ }
115
+
116
+ connectedCallback() {
117
+ super.connectedCallback();
118
+ this.reset();
119
+ }
120
+ }
package/docs/src/_data/demos/timer/icons.tsx CHANGED
@@ -1,62 +1,62 @@
1
- /* playground-hide */
2
-
3
- import "p-elements-core";
4
-
5
- // Can not configure tsxFactory in the playground,
6
- // so we assign Maquette.h to React.createElement
7
- const React = {
8
- createElement: Maquette.h,
9
- };
10
-
11
- /* playground-hide-end */
12
- export const replay = (key: string) => (
13
- <svg
14
- key={key}
15
- xmlns="http://www.w3.org/2000/svg"
16
- enable-background="new 0 0 24 24"
17
- height="24px"
18
- viewBox="0 0 24 24"
19
- width="24px"
20
- fill="#000000"
21
- >
22
- <title>Replay</title>
23
- <g>
24
- <rect fill="none" height="24" width="24" />
25
- <rect fill="none" height="24" width="24" />
26
- <rect fill="none" height="24" width="24" />
27
- </g>
28
- <g>
29
- <g />
30
- <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
- </g>
32
- </svg>
33
- );
34
-
35
- export const pause = (key: string) => (
36
- <svg
37
- key={key}
38
- xmlns="http://www.w3.org/2000/svg"
39
- height="24px"
40
- viewBox="0 0 24 24"
41
- width="24px"
42
- fill="#000000"
43
- >
44
- <title>Pause</title>
45
- <path d="M0 0h24v24H0V0z" fill="none" />
46
- <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
- </svg>
48
- );
49
- export const play = (key: string) => (
50
- <svg
51
- key={key}
52
- xmlns="http://www.w3.org/2000/svg"
53
- height="24px"
54
- viewBox="0 0 24 24"
55
- width="24px"
56
- fill="#000000"
57
- >
58
- <title>Play</title>
59
- <path d="M0 0h24v24H0V0z" fill="none" />
60
- <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
- </svg>
62
- );
1
+ /* playground-hide */
2
+
3
+ import "p-elements-core";
4
+
5
+ // Can not configure tsxFactory in the playground,
6
+ // so we assign Maquette.h to React.createElement
7
+ const React = {
8
+ createElement: Maquette.h,
9
+ };
10
+
11
+ /* playground-hide-end */
12
+ export const replay = (key: string) => (
13
+ <svg
14
+ key={key}
15
+ xmlns="http://www.w3.org/2000/svg"
16
+ enable-background="new 0 0 24 24"
17
+ height="24px"
18
+ viewBox="0 0 24 24"
19
+ width="24px"
20
+ fill="#000000"
21
+ >
22
+ <title>Replay</title>
23
+ <g>
24
+ <rect fill="none" height="24" width="24" />
25
+ <rect fill="none" height="24" width="24" />
26
+ <rect fill="none" height="24" width="24" />
27
+ </g>
28
+ <g>
29
+ <g />
30
+ <path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z" />
31
+ </g>
32
+ </svg>
33
+ );
34
+
35
+ export const pause = (key: string) => (
36
+ <svg
37
+ key={key}
38
+ xmlns="http://www.w3.org/2000/svg"
39
+ height="24px"
40
+ viewBox="0 0 24 24"
41
+ width="24px"
42
+ fill="#000000"
43
+ >
44
+ <title>Pause</title>
45
+ <path d="M0 0h24v24H0V0z" fill="none" />
46
+ <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
47
+ </svg>
48
+ );
49
+ export const play = (key: string) => (
50
+ <svg
51
+ key={key}
52
+ xmlns="http://www.w3.org/2000/svg"
53
+ height="24px"
54
+ viewBox="0 0 24 24"
55
+ width="24px"
56
+ fill="#000000"
57
+ >
58
+ <title>Play</title>
59
+ <path d="M0 0h24v24H0V0z" fill="none" />
60
+ <path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z" />
61
+ </svg>
62
+ );
package/docs/src/_data/demos/timer/index.html CHANGED
@@ -1,12 +1,12 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <title>Demo timer</title>
5
- </head>
6
- <body>
7
- <demo-timer duration="7"></demo-timer>
8
- <demo-timer duration="60"></demo-timer>
9
- <demo-timer duration="300"></demo-timer>
10
- <script type="module" src="./demo-timer.js"></script>
11
- </body>
12
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Demo timer</title>
5
+ </head>
6
+ <body>
7
+ <demo-timer duration="7"></demo-timer>
8
+ <demo-timer duration="60"></demo-timer>
9
+ <demo-timer duration="300"></demo-timer>
10
+ <script type="module" src="./demo-timer.js"></script>
11
+ </body>
12
+ </html>
package/docs/src/_data/demos/timer/project.json CHANGED
@@ -1,8 +1,8 @@
1
- {
2
- "files": {
3
- "demo-timer.tsx": {},
4
- "icons.tsx": {},
5
- "index.html": {}
6
- },
7
- "previewHeight": "125px"
8
- }
1
+ {
2
+ "files": {
3
+ "demo-timer.tsx": {},
4
+ "icons.tsx": {},
5
+ "index.html": {}
6
+ },
7
+ "previewHeight": "125px"
8
+ }
package/docs/src/_data/global.js CHANGED
@@ -1,13 +1,13 @@
1
-
2
-
3
- export default global = {
4
- site:"P Elements",
5
- pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
- navigation: [
7
- { title: "Documentation", url: "/documentation/index.html" },
8
- { title: "Playground", url: "/playground/index.html"},
9
- ],
10
- playground: [
11
- { title: "Hello world", path: "/playground" }
12
- ]
13
- };
1
+
2
+
3
+ export default global = {
4
+ site:"P Elements",
5
+ pathPrefix: process.argv.indexOf("--serve") !== -1 ? "" : "/p-elements-core",
6
+ navigation: [
7
+ { title: "Documentation", url: "/documentation/index.html" },
8
+ { title: "Playground", url: "/playground/index.html"},
9
+ ],
10
+ playground: [
11
+ { title: "Hello world", path: "/playground" }
12
+ ]
13
+ };
package/docs/src/_data/helpers.js CHANGED
@@ -1,19 +1,19 @@
1
- export function getLinkActiveState(itemUrl, pageUrl) {
2
- let response = '';
3
-
4
- // Ensure pageUrl is a string before proceeding
5
- if (typeof pageUrl === 'string') {
6
- if (itemUrl === pageUrl) {
7
- response = ' aria-current=page';
8
- }
9
-
10
- // Need to check if the pageUrl is a subpath of the itemUrl
11
- const itemPath = itemUrl.split('/')[1];
12
- const pagePath = pageUrl.split('/')[1];
13
- if (itemPath === pagePath) {
14
- response += ' data-state=active';
15
- }
16
- }
17
-
18
- return response;
19
- }
1
+ export function getLinkActiveState(itemUrl, pageUrl) {
2
+ let response = '';
3
+
4
+ // Ensure pageUrl is a string before proceeding
5
+ if (typeof pageUrl === 'string') {
6
+ if (itemUrl === pageUrl) {
7
+ response = ' aria-current=page';
8
+ }
9
+
10
+ // Need to check if the pageUrl is a subpath of the itemUrl
11
+ const itemPath = itemUrl.split('/')[1];
12
+ const pagePath = pageUrl.split('/')[1];
13
+ if (itemPath === pagePath) {
14
+ response += ' data-state=active';
15
+ }
16
+ }
17
+
18
+ return response;
19
+ }