p-elements-core 1.2.32-rc8 → 1.2.32
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/.editorconfig +17 -17
- package/.gitlab-ci.yml +18 -18
- package/CHANGELOG.md +201 -201
- package/demo/sample.js +1 -1
- package/demo/screen.css +16 -16
- package/dist/p-elements-core-modern.js +1 -1
- package/dist/p-elements-core.js +1 -1
- package/docs/package-lock.json +6897 -6897
- package/docs/package.json +27 -27
- package/docs/src/404.md +8 -8
- package/docs/src/_data/demos/hello-world/hello-world.tsx +35 -35
- package/docs/src/_data/demos/hello-world/index.html +10 -10
- package/docs/src/_data/demos/hello-world/project.json +7 -7
- package/docs/src/_data/demos/timer/demo-timer.tsx +120 -120
- package/docs/src/_data/demos/timer/icons.tsx +62 -62
- package/docs/src/_data/demos/timer/index.html +12 -12
- package/docs/src/_data/demos/timer/project.json +8 -8
- package/docs/src/_data/global.js +13 -13
- package/docs/src/_data/helpers.js +19 -19
- package/docs/src/_includes/layouts/base.njk +30 -30
- package/docs/src/_includes/layouts/playground.njk +40 -40
- package/docs/src/_includes/partials/app-header.njk +8 -8
- package/docs/src/_includes/partials/head.njk +14 -14
- package/docs/src/_includes/partials/nav.njk +19 -19
- package/docs/src/_includes/partials/top-nav.njk +51 -51
- package/docs/src/documentation/custom-element.md +221 -221
- package/docs/src/documentation/decorators/bind.md +71 -71
- package/docs/src/documentation/decorators/custom-element-config.md +63 -63
- package/docs/src/documentation/decorators/property.md +83 -83
- package/docs/src/documentation/decorators/query.md +66 -66
- package/docs/src/documentation/decorators/render-property-on-set.md +60 -60
- package/docs/src/documentation/decorators.md +9 -9
- package/docs/src/documentation/reactive-properties.md +53 -53
- package/docs/src/index.d.ts +25 -25
- package/docs/src/index.md +3 -3
- package/docs/src/scripts/components/app-mode-switch/app-mode-switch.css +78 -78
- package/docs/src/scripts/components/app-mode-switch/app-mode-switch.tsx +166 -166
- package/docs/src/scripts/components/app-playground/app-playground.tsx +189 -189
- package/docs/tsconfig.json +22 -22
- package/index.html +10 -2
- package/package.json +1 -1
- package/readme.md +206 -206
- package/src/custom-element-controller.ts +31 -31
- package/src/custom-element.test.ts +906 -906
- package/src/custom-element.ts +3 -8
- package/src/decorators/bind.test.ts +163 -163
- package/src/decorators/bind.ts +46 -46
- package/src/decorators/custom-element-config.ts +17 -17
- package/src/decorators/property.test.ts +279 -279
- package/src/decorators/query.test.ts +146 -146
- package/src/decorators/query.ts +12 -12
- package/src/decorators/render-property-on-set.ts +3 -3
- package/src/helpers/css.ts +71 -71
- package/src/maquette/cache.ts +35 -35
- package/src/maquette/dom.ts +115 -115
- package/src/maquette/h.ts +100 -100
- package/src/maquette/index.ts +12 -12
- package/src/maquette/interfaces.ts +536 -536
- package/src/maquette/jsx.ts +61 -61
- package/src/maquette/mapping.ts +56 -56
- package/src/maquette/projection.ts +666 -666
- package/src/maquette/projector.ts +205 -205
- package/src/sample/mixin/highlight.tsx +33 -33
- package/src/sample/sample.tsx +98 -0
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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>
|