Skip to content

Commit 81ee560

Browse files
thewebartisan7thewebartisan7
committedOct 26, 2022
Fix override style and class
·
v2.1.0v1.0.0-RC.1
1 parent c683cea commit 81ee560

13 files changed

+352
-15
lines changed
 

‎docs/demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
7373
<div class="modal-content modal-content-custom">
7474
<div class="modal-header">
7575
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
76-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
76+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7777
</div>
7878
<!-- /.modal-header -->
7979
<div class="modal-body">

‎docs/docs.html

+90-2
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@
193193
</li>
194194
</ul>
195195
</li>
196+
<li class="nav-item">
197+
<a class="nav-link" href="#contributing">Contributing</a>
198+
</li>
199+
<li class="nav-item">
200+
<a class="nav-link" href="#credits">Credits</a>
201+
</li>
196202
</ul>
197203
</nav>
198204
<h2 id="installation" tabindex="-1">
@@ -1110,6 +1116,59 @@ <h3 id="props" tabindex="-1">
11101116
.
11111117
By default, it's used to concat array.
11121118
</p>
1119+
<p>
1120+
By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
1121+
Let's see below example.
1122+
</p>
1123+
<p>Create a component:</p>
1124+
<pre><code class="language-html">&lt;!-- src/child.html --&gt;
1125+
&lt;script props&gt;
1126+
module.exports = {
1127+
prop: 'Default prop value'
1128+
}
1129+
&lt;/script&gt;
1130+
&lt;div&gt;
1131+
Prop in child: {{ prop }}
1132+
&lt;/div&gt;</code></pre>
1133+
<p>Create another component that use the first one:</p>
1134+
<pre><code class="language-html">&lt;!-- src/parent.html --&gt;
1135+
&lt;script props&gt;
1136+
module.exports = {
1137+
prop: 'Default prop value'
1138+
}
1139+
&lt;/script&gt;
1140+
&lt;div&gt;
1141+
Prop in parent: {{ prop }}
1142+
&lt;x-child&gt;&lt;/x-child&gt;
1143+
&lt;/div&gt;</code></pre>
1144+
<p>Use:</p>
1145+
<pre><code class="language-html">&lt;x-parent prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
1146+
<p>The output will be:</p>
1147+
<pre><code class="language-html">&lt;div&gt;
1148+
Prop in parent: My prop
1149+
&lt;div&gt;
1150+
Prop in child: Default prop value
1151+
&lt;/div&gt;
1152+
&lt;/div&gt;</code></pre>
1153+
<p>
1154+
As you can see
1155+
<code>prop</code>
1156+
in
1157+
<code>x-child</code>
1158+
component are default value and not the one set via
1159+
<code>x-parent</code>
1160+
. Prepend
1161+
<code>aware:</code>
1162+
to the attribute name to pass the props to nested components.
1163+
</p>
1164+
<pre><code class="language-html">&lt;x-parent aware:prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
1165+
<p>The output now will be:</p>
1166+
<pre><code class="language-html">&lt;div&gt;
1167+
Prop in parent: My prop
1168+
&lt;div&gt;
1169+
Prop in child: My prop
1170+
&lt;/div&gt;
1171+
&lt;/div&gt;</code></pre>
11131172
<h3 id="attributes" tabindex="-1">
11141173
<a class="header-anchor" href="#attributes">#</a>
11151174
Attributes
@@ -1439,7 +1498,36 @@ <h3 id="posthtml-extends" tabindex="-1">
14391498
<a class="header-anchor" href="#posthtml-extends">#</a>
14401499
PostHTML Extends
14411500
</h3>
1442-
<p>Not yet tested.</p>
1501+
<p>
1502+
So far it works fine together with
1503+
<code>posthtml-components</code>
1504+
plugin.
1505+
</p>
1506+
<h2 id="contributing" tabindex="-1">
1507+
<a class="header-anchor" href="#contributing">#</a>
1508+
Contributing
1509+
</h2>
1510+
<p>
1511+
See
1512+
<a href="https://github.com/posthtml/posthtml/tree/master/docs">PostHTML Guidelines</a>
1513+
and
1514+
<a href="CONTRIBUTING.md">contribution guide</a>
1515+
.
1516+
</p>
1517+
<h2 id="credits" tabindex="-1">
1518+
<a class="header-anchor" href="#credits">#</a>
1519+
Credits
1520+
</h2>
1521+
<p>
1522+
Thanks to all PostHTML contributors and especially to
1523+
<code>posthtml-extend</code>
1524+
and
1525+
<code>posthtml-modules</code>
1526+
contributors, as part of code are
1527+
<s>stolen</s>
1528+
inspired from these plugins.
1529+
Huge thanks also to Laravel Blade template engine.
1530+
</p>
14431531
</div>
14441532
</div>
14451533
</div>
@@ -1466,7 +1554,7 @@ <h3 id="posthtml-extends" tabindex="-1">
14661554
<div class="modal-content modal-content-custom">
14671555
<div class="modal-header">
14681556
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
1469-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1557+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
14701558
</div>
14711559
<!-- /.modal-header -->
14721560
<div class="modal-body">

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
8989
<div class="modal-content modal-content-custom">
9090
<div class="modal-header">
9191
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
92-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
92+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
9393
</div>
9494
<!-- /.modal-header -->
9595
<div class="modal-body">

‎docs/test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ <h1>Child yield</h1>
243243
<div class="modal-content modal-content-custom">
244244
<div class="modal-header">
245245
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
246-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
246+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
247247
</div>
248248
<!-- /.modal-header -->
249249
<div class="modal-body">

‎examples/dist/demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
7373
<div class="modal-content modal-content-custom">
7474
<div class="modal-header">
7575
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
76-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
76+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
7777
</div>
7878
<!-- /.modal-header -->
7979
<div class="modal-body">

‎examples/dist/docs.html

+90-2
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,12 @@
193193
</li>
194194
</ul>
195195
</li>
196+
<li class="nav-item">
197+
<a class="nav-link" href="#contributing">Contributing</a>
198+
</li>
199+
<li class="nav-item">
200+
<a class="nav-link" href="#credits">Credits</a>
201+
</li>
196202
</ul>
197203
</nav>
198204
<h2 id="installation" tabindex="-1">
@@ -1110,6 +1116,59 @@ <h3 id="props" tabindex="-1">
11101116
.
11111117
By default, it's used to concat array.
11121118
</p>
1119+
<p>
1120+
By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
1121+
Let's see below example.
1122+
</p>
1123+
<p>Create a component:</p>
1124+
<pre><code class="language-html">&lt;!-- src/child.html --&gt;
1125+
&lt;script props&gt;
1126+
module.exports = {
1127+
prop: 'Default prop value'
1128+
}
1129+
&lt;/script&gt;
1130+
&lt;div&gt;
1131+
Prop in child: {{ prop }}
1132+
&lt;/div&gt;</code></pre>
1133+
<p>Create another component that use the first one:</p>
1134+
<pre><code class="language-html">&lt;!-- src/parent.html --&gt;
1135+
&lt;script props&gt;
1136+
module.exports = {
1137+
prop: 'Default prop value'
1138+
}
1139+
&lt;/script&gt;
1140+
&lt;div&gt;
1141+
Prop in parent: {{ prop }}
1142+
&lt;x-child&gt;&lt;/x-child&gt;
1143+
&lt;/div&gt;</code></pre>
1144+
<p>Use:</p>
1145+
<pre><code class="language-html">&lt;x-parent prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
1146+
<p>The output will be:</p>
1147+
<pre><code class="language-html">&lt;div&gt;
1148+
Prop in parent: My prop
1149+
&lt;div&gt;
1150+
Prop in child: Default prop value
1151+
&lt;/div&gt;
1152+
&lt;/div&gt;</code></pre>
1153+
<p>
1154+
As you can see
1155+
<code>prop</code>
1156+
in
1157+
<code>x-child</code>
1158+
component are default value and not the one set via
1159+
<code>x-parent</code>
1160+
. Prepend
1161+
<code>aware:</code>
1162+
to the attribute name to pass the props to nested components.
1163+
</p>
1164+
<pre><code class="language-html">&lt;x-parent aware:prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
1165+
<p>The output now will be:</p>
1166+
<pre><code class="language-html">&lt;div&gt;
1167+
Prop in parent: My prop
1168+
&lt;div&gt;
1169+
Prop in child: My prop
1170+
&lt;/div&gt;
1171+
&lt;/div&gt;</code></pre>
11131172
<h3 id="attributes" tabindex="-1">
11141173
<a class="header-anchor" href="#attributes">#</a>
11151174
Attributes
@@ -1439,7 +1498,36 @@ <h3 id="posthtml-extends" tabindex="-1">
14391498
<a class="header-anchor" href="#posthtml-extends">#</a>
14401499
PostHTML Extends
14411500
</h3>
1442-
<p>Not yet tested.</p>
1501+
<p>
1502+
So far it works fine together with
1503+
<code>posthtml-components</code>
1504+
plugin.
1505+
</p>
1506+
<h2 id="contributing" tabindex="-1">
1507+
<a class="header-anchor" href="#contributing">#</a>
1508+
Contributing
1509+
</h2>
1510+
<p>
1511+
See
1512+
<a href="https://github.com/posthtml/posthtml/tree/master/docs">PostHTML Guidelines</a>
1513+
and
1514+
<a href="CONTRIBUTING.md">contribution guide</a>
1515+
.
1516+
</p>
1517+
<h2 id="credits" tabindex="-1">
1518+
<a class="header-anchor" href="#credits">#</a>
1519+
Credits
1520+
</h2>
1521+
<p>
1522+
Thanks to all PostHTML contributors and especially to
1523+
<code>posthtml-extend</code>
1524+
and
1525+
<code>posthtml-modules</code>
1526+
contributors, as part of code are
1527+
<s>stolen</s>
1528+
inspired from these plugins.
1529+
Huge thanks also to Laravel Blade template engine.
1530+
</p>
14431531
</div>
14441532
</div>
14451533
</div>
@@ -1466,7 +1554,7 @@ <h3 id="posthtml-extends" tabindex="-1">
14661554
<div class="modal-content modal-content-custom">
14671555
<div class="modal-header">
14681556
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
1469-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1557+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
14701558
</div>
14711559
<!-- /.modal-header -->
14721560
<div class="modal-body">

‎examples/dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
8989
<div class="modal-content modal-content-custom">
9090
<div class="modal-header">
9191
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
92-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
92+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
9393
</div>
9494
<!-- /.modal-header -->
9595
<div class="modal-body">

‎examples/dist/test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -243,7 +243,7 @@ <h1>Child yield</h1>
243243
<div class="modal-content modal-content-custom">
244244
<div class="modal-header">
245245
<h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
246-
<button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
246+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
247247
</div>
248248
<!-- /.modal-header -->
249249
<div class="modal-body">

‎examples/src/md/introduction.md

+87-1
Original file line numberDiff line numberDiff line change
@@ -601,6 +601,74 @@ You can also notice how the `class` attribute is merged with `class` attribute o
601601
You can change how attributes are merged by passing via options a callback function used by lodash method [mergeWith](https://lodash.com/docs/4.17.15#mergeWith).
602602
By default, it's used to concat array.
603603

604+
By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
605+
Let's see below example.
606+
607+
Create a component:
608+
609+
```html
610+
<!-- src/child.html -->
611+
<script props>
612+
module.exports = {
613+
prop: 'Default prop value'
614+
}
615+
</script>
616+
<div>
617+
Prop in child: {{ prop }}
618+
</div>
619+
```
620+
621+
Create another component that use the first one:
622+
623+
624+
```html
625+
<!-- src/parent.html -->
626+
<script props>
627+
module.exports = {
628+
prop: 'Default prop value'
629+
}
630+
</script>
631+
<div>
632+
Prop in parent: {{ prop }}
633+
<x-child></x-child>
634+
</div>
635+
```
636+
637+
Use:
638+
639+
```html
640+
<x-parent prop="My prop"></x-parent>
641+
```
642+
643+
The output will be:
644+
645+
```html
646+
<div>
647+
Prop in parent: My prop
648+
<div>
649+
Prop in child: Default prop value
650+
</div>
651+
</div>
652+
```
653+
654+
As you can see `prop` in `x-child` component are default value and not the one set via `x-parent`. Prepend `aware:` to the attribute name to pass the props to nested components.
655+
656+
657+
```html
658+
<x-parent aware:prop="My prop"></x-parent>
659+
```
660+
661+
The output now will be:
662+
663+
```html
664+
<div>
665+
Prop in parent: My prop
666+
<div>
667+
Prop in child: My prop
668+
</div>
669+
</div>
670+
```
671+
604672
### Attributes
605673

606674
Your can pass any attributes to your components and this will be added to the first node of your component, or to the node with an attribute named `attributes`.
@@ -908,4 +976,22 @@ NOTE: If you change `<yield>` tag to `<content>` to support your existing code,
908976

909977
### PostHTML Extends
910978

911-
Not yet tested.
979+
So far it works fine together with `posthtml-components` plugin.
980+
981+
## Contributing
982+
983+
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
984+
985+
[npm]: https://img.shields.io/npm/v/posthtml-component.svg
986+
[npm-url]: https://www.npmjs.com/package/posthtml-component
987+
988+
[style]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg
989+
[style-url]: https://github.com/sindresorhus/xo
990+
991+
[cover]: https://coveralls.io/repos/thewebartisan7/posthtml-components/badge.svg?branch=main
992+
[cover-badge]: https://coveralls.io/r/thewebartisan7/posthtml-components?branch=main
993+
994+
## Credits
995+
996+
Thanks to all PostHTML contributors and especially to `posthtml-extend` and `posthtml-modules` contributors, as part of code are ~~stolen~~ inspired from these plugins.
997+
Huge thanks also to Laravel Blade template engine.

0 commit comments

Comments
 (0)
Please sign in to comment.