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/src/_includes/layouts/base.njk CHANGED
@@ -1,31 +1,31 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- {% include "head.njk" %}
4
- <body class="documentation">
5
- <div class="app-layout">
6
- {% include "app-header.njk" %}
7
-
8
- <div class="app-aside">
9
-
10
- {% include "nav.njk" %}
11
-
12
- </div>
13
-
14
- <div class="app-main">
15
- <div class="content">
16
-
17
- <div class="doc-wrapper">
18
- <div class="doc">
19
- {{ content | safe }}
20
- </div>
21
- </div>
22
-
23
- {# <div class="toc">
24
- <ul id="toc" class="toc"></ul>
25
- </div> #}
26
-
27
- </div>
28
- </div>
29
- </body>
30
-
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ {% include "head.njk" %}
4
+ <body class="documentation">
5
+ <div class="app-layout">
6
+ {% include "app-header.njk" %}
7
+
8
+ <div class="app-aside">
9
+
10
+ {% include "nav.njk" %}
11
+
12
+ </div>
13
+
14
+ <div class="app-main">
15
+ <div class="content">
16
+
17
+ <div class="doc-wrapper">
18
+ <div class="doc">
19
+ {{ content | safe }}
20
+ </div>
21
+ </div>
22
+
23
+ {# <div class="toc">
24
+ <ul id="toc" class="toc"></ul>
25
+ </div> #}
26
+
27
+ </div>
28
+ </div>
29
+ </body>
30
+
31
31
  </html>
package/docs/src/_includes/layouts/playground.njk CHANGED
@@ -1,40 +1,40 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- {% include "head.njk" %}
5
- <body class="playground">
6
- <div class="app-layout">
7
- {% include "app-header.njk" %}
8
-
9
- <app-drawer open class="app-aside">
10
- <h2 slot="header" id="ExampleHeader">Examples</h2>
11
- <div slot="content" id="ExampleContent">
12
- <ul>
13
- {%- for item in global.playground -%}
14
- <li>
15
- <a
16
- class="nav-link
17
- {% if item.fullMatch %}
18
- {% if item.path === page.url %} active {% endif %}
19
- {% else %}
20
- {% if item.path in page.url %} active {% endif %}
21
- {% endif %}
22
- "
23
- href="{{global.pathPrefix}}{{ item.path }}"
24
- > {{ item.title }}</a>
25
- </li>
26
- {%- endfor -%}
27
- </ul>
28
- </div>
29
- </app-drawer>
30
-
31
- <div class="app-main">
32
- <div class="content">
33
- {{ content | safe }}
34
- </div>
35
- </div>
36
-
37
- </div>
38
- </body>
39
- <script src="{{global.pathPrefix}}/scripts/playground.js" type="module"></script>
40
- </html>
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ {% include "head.njk" %}
5
+ <body class="playground">
6
+ <div class="app-layout">
7
+ {% include "app-header.njk" %}
8
+
9
+ <app-drawer open class="app-aside">
10
+ <h2 slot="header" id="ExampleHeader">Examples</h2>
11
+ <div slot="content" id="ExampleContent">
12
+ <ul>
13
+ {%- for item in global.playground -%}
14
+ <li>
15
+ <a
16
+ class="nav-link
17
+ {% if item.fullMatch %}
18
+ {% if item.path === page.url %} active {% endif %}
19
+ {% else %}
20
+ {% if item.path in page.url %} active {% endif %}
21
+ {% endif %}
22
+ "
23
+ href="{{global.pathPrefix}}{{ item.path }}"
24
+ > {{ item.title }}</a>
25
+ </li>
26
+ {%- endfor -%}
27
+ </ul>
28
+ </div>
29
+ </app-drawer>
30
+
31
+ <div class="app-main">
32
+ <div class="content">
33
+ {{ content | safe }}
34
+ </div>
35
+ </div>
36
+
37
+ </div>
38
+ </body>
39
+ <script src="{{global.pathPrefix}}/scripts/playground.js" type="module"></script>
40
+ </html>
package/docs/src/_includes/partials/app-header.njk CHANGED
@@ -1,9 +1,9 @@
1
- <header class="app-header">
2
- <a class="site-title" href="{{global.pathPrefix}}/">
3
- <lazy-svg width="195" height="80" href="{{ global.pathPrefix }}/assets/logo.svg#full-logo" label="{{ metadata.title }}" ></lazy-svg>
4
- </a>
5
- <nav class="main-nav">
6
- {% include "top-nav.njk" %}
7
- </nav>
8
-
1
+ <header class="app-header">
2
+ <a class="site-title" href="{{global.pathPrefix}}/">
3
+ <lazy-svg width="195" height="80" href="{{ global.pathPrefix }}/assets/logo.svg#full-logo" label="{{ metadata.title }}" ></lazy-svg>
4
+ </a>
5
+ <nav class="main-nav">
6
+ {% include "top-nav.njk" %}
7
+ </nav>
8
+
9
9
  </header>
package/docs/src/_includes/partials/head.njk CHANGED
@@ -1,15 +1,15 @@
1
- <head>
2
- <meta charset="UTF-8" />
3
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
4
- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, {% if page.url.includes('/playground') %}maximum-scale=1.0, {% endif %}user-scalable={% if page.url.includes('/playground') %}no{% else %}yes{% endif %}">
5
-
6
- <link rel="stylesheet" href="{{global.pathPrefix}}/styles/main.css">
7
- <link rel="icon" type="image/png" sizes="96x96" href="{{ global.pathPrefix }}/assets/favicon.png">
8
-
9
- <meta name="description" content="{{ description }}">
10
-
11
- <title>{{ title }} | {{ global.site }}</title>
12
- <script src="{{global.pathPrefix}}/scripts/p-elements-core-modern.js" type="module"></script>
13
- <script src="{{global.pathPrefix}}/scripts/index.js" type="module"></script>
14
-
1
+ <head>
2
+ <meta charset="UTF-8" />
3
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
4
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, {% if page.url.includes('/playground') %}maximum-scale=1.0, {% endif %}user-scalable={% if page.url.includes('/playground') %}no{% else %}yes{% endif %}">
5
+
6
+ <link rel="stylesheet" href="{{global.pathPrefix}}/styles/main.css">
7
+ <link rel="icon" type="image/png" sizes="96x96" href="{{ global.pathPrefix }}/assets/favicon.png">
8
+
9
+ <meta name="description" content="{{ description }}">
10
+
11
+ <title>{{ title }} | {{ global.site }}</title>
12
+ <script src="{{global.pathPrefix}}/scripts/p-elements-core-modern.js" type="module"></script>
13
+ <script src="{{global.pathPrefix}}/scripts/index.js" type="module"></script>
14
+
15
15
  </head>
package/docs/src/_includes/partials/nav.njk CHANGED
@@ -1,20 +1,20 @@
1
- {% set navPages = collections.all | eleventyNavigation %}
2
- <nav>
3
-
4
- {% set navPages = collections.all | eleventyNavigation %}
5
- {% macro renderNavListItem(entry) -%}
6
- <li{% if entry.url == page.url %} class="active-menu-item"{% endif %}>
7
- <a href="{{ global.pathPrefix }}{{ entry.url }}">{{ entry.title }}</a>
8
- {%- if entry.children.length -%}
9
- <ul>
10
- {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
11
- </ul>
12
- {%- endif -%}
13
- </li>
14
- {%- endmacro %}
15
-
16
- <ul>
17
- {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
18
- </ul>
19
-
1
+ {% set navPages = collections.all | eleventyNavigation %}
2
+ <nav>
3
+
4
+ {% set navPages = collections.all | eleventyNavigation %}
5
+ {% macro renderNavListItem(entry) -%}
6
+ <li{% if entry.url == page.url %} class="active-menu-item"{% endif %}>
7
+ <a href="{{ global.pathPrefix }}{{ entry.url }}">{{ entry.title }}</a>
8
+ {%- if entry.children.length -%}
9
+ <ul>
10
+ {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
11
+ </ul>
12
+ {%- endif -%}
13
+ </li>
14
+ {%- endmacro %}
15
+
16
+ <ul>
17
+ {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
18
+ </ul>
19
+
20
20
  </nav>
package/docs/src/_includes/partials/top-nav.njk CHANGED
@@ -1,52 +1,52 @@
1
- <ul class="top-nav--menu-items">
2
-
3
- {%- for item in global.navigation -%}
4
- <li>
5
- <a
6
- class="nav-link"
7
- {{ helpers.getLinkActiveState( item.url, page.url) }}
8
- href="{{ global.pathPrefix }}{{ item.url }}"
9
- > {{ item.title }}</a>
10
- </li>
11
- {%- endfor -%}
12
- </ul>
13
- <app-mode-switch>
14
- <span class="sr-only" slot="light">Light</span>
15
- <span class="sr-only" slot="dark">Dark</span>
16
- </app-mode-switch>
17
-
18
- <app-mobile-menu>
19
- <span class="sr-only" slot="open">Open menu</span>
20
- <span class="sr-only" slot="close">Close menu</span>
21
- <div>
22
- <ul>
23
- {%- for item in global.navigation -%}
24
- <li>
25
- <a
26
- class="nav-link"
27
- {{ helpers.getLinkActiveState( item.url, page.url) }}
28
- href="{{ global.pathPrefix }}{{ item.url }}"
29
- > {{ item.title }}</a>
30
- </li>
31
- {%- endfor -%}
32
- </ul>
33
-
34
-
35
- {% set navPages = collections.all | eleventyNavigation %}
36
- {% macro renderNavListItem(entry) -%}
37
- <li{% if entry.url == page.url %} class="active-menu-item"{% endif %}>
38
- <a href="{{ global.pathPrefix }}{{ entry.url }}">{{ entry.title }}</a>
39
- {%- if entry.children.length -%}
40
- <ul>
41
- {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
42
- </ul>
43
- {%- endif -%}
44
- </li>
45
- {%- endmacro %}
46
-
47
- <ul>
48
- {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
49
- </ul>
50
-
51
- </div>
1
+ <ul class="top-nav--menu-items">
2
+
3
+ {%- for item in global.navigation -%}
4
+ <li>
5
+ <a
6
+ class="nav-link"
7
+ {{ helpers.getLinkActiveState( item.url, page.url) }}
8
+ href="{{ global.pathPrefix }}{{ item.url }}"
9
+ > {{ item.title }}</a>
10
+ </li>
11
+ {%- endfor -%}
12
+ </ul>
13
+ <app-mode-switch>
14
+ <span class="sr-only" slot="light">Light</span>
15
+ <span class="sr-only" slot="dark">Dark</span>
16
+ </app-mode-switch>
17
+
18
+ <app-mobile-menu>
19
+ <span class="sr-only" slot="open">Open menu</span>
20
+ <span class="sr-only" slot="close">Close menu</span>
21
+ <div>
22
+ <ul>
23
+ {%- for item in global.navigation -%}
24
+ <li>
25
+ <a
26
+ class="nav-link"
27
+ {{ helpers.getLinkActiveState( item.url, page.url) }}
28
+ href="{{ global.pathPrefix }}{{ item.url }}"
29
+ > {{ item.title }}</a>
30
+ </li>
31
+ {%- endfor -%}
32
+ </ul>
33
+
34
+
35
+ {% set navPages = collections.all | eleventyNavigation %}
36
+ {% macro renderNavListItem(entry) -%}
37
+ <li{% if entry.url == page.url %} class="active-menu-item"{% endif %}>
38
+ <a href="{{ global.pathPrefix }}{{ entry.url }}">{{ entry.title }}</a>
39
+ {%- if entry.children.length -%}
40
+ <ul>
41
+ {%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
42
+ </ul>
43
+ {%- endif -%}
44
+ </li>
45
+ {%- endmacro %}
46
+
47
+ <ul>
48
+ {%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
49
+ </ul>
50
+
51
+ </div>
52
52
  </app-mobile-menu>