@epa-wg/custom-element 0.0.35 → 0.0.36
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/README.md +7 -5
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +3 -0
- package/demo/for-each.html +213 -0
- package/ide/web-types-dce.json +1 -1
- package/ide/web-types-xsl.json +1 -1
- package/index.html +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -268,7 +268,8 @@ i.e. slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
|
|
|
268
268
|
```
|
|
269
269
|
|
|
270
270
|
## loops, variables
|
|
271
|
-
Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each)
|
|
271
|
+
Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each).
|
|
272
|
+
See [for-each table demo][for-each-demo] for examples including nested loops and XHTML namespace usage.
|
|
272
273
|
|
|
273
274
|
[Variables in XSLT](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/variable)
|
|
274
275
|
|
|
@@ -340,17 +341,18 @@ within template
|
|
|
340
341
|
[demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/index.html
|
|
341
342
|
[css-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
|
|
342
343
|
[slice-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
|
|
344
|
+
[for-each-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/for-each.html
|
|
343
345
|
[hex-grid-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
|
|
344
|
-
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.
|
|
346
|
+
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.36/demo/hex-grid-transform.png
|
|
345
347
|
[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
|
|
346
348
|
[http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
|
|
347
349
|
[location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
|
|
348
350
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
349
351
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
350
352
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
351
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
352
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
353
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
353
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.36/coverage/src/custom-element/coverage.svg
|
|
354
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.36/coverage/src/custom-element/index.html
|
|
355
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.36/storybook-static/index.html?path=/story/welcome--introduction
|
|
354
356
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
355
357
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
356
358
|
[webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
|
package/bin/xslDtd2Ide.mjs
CHANGED
|
@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
|
|
|
116
116
|
const intelliJ = {
|
|
117
117
|
"$schema": "http://json.schemastore.org/web-types",
|
|
118
118
|
"name": "@epa-wg/custom-element",
|
|
119
|
-
"version": "0.0.
|
|
119
|
+
"version": "0.0.36",
|
|
120
120
|
"js-types-syntax": "typescript",
|
|
121
121
|
"description-markup": "markdown",
|
|
122
122
|
"contributions": {
|
package/custom-element.js
CHANGED
|
@@ -682,6 +682,9 @@ export const toXsl = (el, defParent) => {
|
|
|
682
682
|
while(el.firstChild)
|
|
683
683
|
x.append(el.firstChild);
|
|
684
684
|
const replacement = 'if,choose,for-each'.includes(el.localName) ? (() => {
|
|
685
|
+
const parent = el.parentElement;
|
|
686
|
+
if( !parent || parent.childNodes.length ===1 )
|
|
687
|
+
return x;
|
|
685
688
|
const span = create('span');
|
|
686
689
|
span.append(x);
|
|
687
690
|
return span;
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
|
+
<title>for-each - Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="./wc-square.svg"/>
|
|
7
|
+
|
|
8
|
+
<script type="module" src="../custom-element.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
@import "./demo.css";
|
|
11
|
+
|
|
12
|
+
table {
|
|
13
|
+
border-collapse: collapse;
|
|
14
|
+
margin: 1rem 0;
|
|
15
|
+
}
|
|
16
|
+
th, td {
|
|
17
|
+
border: 1px solid #ccc;
|
|
18
|
+
padding: 0.5rem;
|
|
19
|
+
}
|
|
20
|
+
th {
|
|
21
|
+
background: #f0f0f0;
|
|
22
|
+
}
|
|
23
|
+
</style>
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
|
|
27
|
+
<nav>
|
|
28
|
+
<a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
|
|
29
|
+
<h3>for-each loop</h3>
|
|
30
|
+
<p>The <code><for-each></code> element iterates over a node-set selected by XPath expression
|
|
31
|
+
and renders its content for each node.</p>
|
|
32
|
+
<p><b>XHTML namespace use</b><br/>
|
|
33
|
+
HTML elements like <code><table></code>, <code><tr></code>, <code><td></code>
|
|
34
|
+
have strict content model rules - only specific child elements are permitted.
|
|
35
|
+
For example, <code><table></code> only allows <code><thead></code>,
|
|
36
|
+
<code><tbody></code>, <code><tr></code> as children; <code><tr></code>
|
|
37
|
+
only allows <code><th></code> or <code><td></code>.<br/>
|
|
38
|
+
When the browser parses HTML, it moves non-permitted elements (like <code><for-each></code>)
|
|
39
|
+
outside the table before JavaScript runs.<br/>
|
|
40
|
+
Using <code>xhtml:</code> namespace prefix (e.g., <code><xhtml:table></code>,
|
|
41
|
+
<code><xhtml:tr></code>) prevents the browser from recognizing these as standard HTML
|
|
42
|
+
elements during initial parsing, preserving the template structure for DCE to process correctly.
|
|
43
|
+
See examples 4 and 6.
|
|
44
|
+
</p>
|
|
45
|
+
</nav>
|
|
46
|
+
|
|
47
|
+
<html-demo-element legend="1. Simple for-each"
|
|
48
|
+
description="Loop over inline XML data and render each item">
|
|
49
|
+
<template>
|
|
50
|
+
<custom-element>
|
|
51
|
+
<template>
|
|
52
|
+
<xsl:variable name="fruits">
|
|
53
|
+
<item>Apple</item>
|
|
54
|
+
<item>Banana</item>
|
|
55
|
+
<item>Cherry</item>
|
|
56
|
+
</xsl:variable>
|
|
57
|
+
<ul>
|
|
58
|
+
<for-each select="exsl:node-set($fruits)/*">
|
|
59
|
+
<li>{.}</li>
|
|
60
|
+
</for-each>
|
|
61
|
+
</ul>
|
|
62
|
+
</template>
|
|
63
|
+
</custom-element>
|
|
64
|
+
</template>
|
|
65
|
+
</html-demo-element>
|
|
66
|
+
|
|
67
|
+
<html-demo-element legend="2. for-each with position()"
|
|
68
|
+
description="Using position() to number items in the loop">
|
|
69
|
+
<template>
|
|
70
|
+
<custom-element>
|
|
71
|
+
<template>
|
|
72
|
+
<xsl:variable name="colors">
|
|
73
|
+
<color hex="#ff0000">Red</color>
|
|
74
|
+
<color hex="#00ff00">Green</color>
|
|
75
|
+
<color hex="#0000ff">Blue</color>
|
|
76
|
+
</xsl:variable>
|
|
77
|
+
<for-each select="exsl:node-set($colors)/*">
|
|
78
|
+
<div style="padding: 0.5rem; background: {@hex}; color: white;">
|
|
79
|
+
{position()}. {.}
|
|
80
|
+
</div>
|
|
81
|
+
</for-each>
|
|
82
|
+
</template>
|
|
83
|
+
</custom-element>
|
|
84
|
+
</template>
|
|
85
|
+
</html-demo-element>
|
|
86
|
+
|
|
87
|
+
<html-demo-element legend="3. Conditional for-each"
|
|
88
|
+
description="Initially empty, items shown when checkbox is checked">
|
|
89
|
+
<template>
|
|
90
|
+
<custom-element>
|
|
91
|
+
<template>
|
|
92
|
+
<xsl:variable name="items">
|
|
93
|
+
<item>First</item>
|
|
94
|
+
<item>Second</item>
|
|
95
|
+
<item>Third</item>
|
|
96
|
+
</xsl:variable>
|
|
97
|
+
<label>
|
|
98
|
+
<input type="checkbox" slice="show-items" value="yes"/>
|
|
99
|
+
Show items
|
|
100
|
+
</label>
|
|
101
|
+
<variable name="show" select="//show-items = 'yes'"></variable>
|
|
102
|
+
<div>
|
|
103
|
+
BEFORE
|
|
104
|
+
<for-each select="exsl:node-set($items)/*[$show]">
|
|
105
|
+
<span style="margin: 0 0.25rem; padding: 0.25rem; background: #e0e0ff;">
|
|
106
|
+
{position()}:{.}
|
|
107
|
+
</span>
|
|
108
|
+
</for-each>
|
|
109
|
+
AFTER
|
|
110
|
+
</div>
|
|
111
|
+
</template>
|
|
112
|
+
</custom-element>
|
|
113
|
+
</template>
|
|
114
|
+
</html-demo-element>
|
|
115
|
+
|
|
116
|
+
<html-demo-element legend="4. Nested for-each (Table)"
|
|
117
|
+
description="Nested loops to render table rows and cells">
|
|
118
|
+
<template>
|
|
119
|
+
<custom-element>
|
|
120
|
+
<template>
|
|
121
|
+
<xsl:variable name="table-data">
|
|
122
|
+
<row><cell>A1</cell><cell>A2</cell><cell>A3</cell></row>
|
|
123
|
+
<row><cell>B1</cell><cell>B2</cell><cell>B3</cell></row>
|
|
124
|
+
<row><cell>C1</cell><cell>C2</cell><cell>C3</cell></row>
|
|
125
|
+
</xsl:variable>
|
|
126
|
+
<variable name="rows" select="exsl:node-set($table-data)/*"></variable>
|
|
127
|
+
<xhtml:table>
|
|
128
|
+
<xhtml:thead>
|
|
129
|
+
<xhtml:tr>
|
|
130
|
+
<xhtml:th>Col 1</xhtml:th>
|
|
131
|
+
<xhtml:th>Col 2</xhtml:th>
|
|
132
|
+
<xhtml:th>Col 3</xhtml:th>
|
|
133
|
+
</xhtml:tr>
|
|
134
|
+
</xhtml:thead>
|
|
135
|
+
<xhtml:tbody>
|
|
136
|
+
<for-each select="$rows">
|
|
137
|
+
<xhtml:tr>
|
|
138
|
+
<for-each select="*">
|
|
139
|
+
<xhtml:td>{.}</xhtml:td>
|
|
140
|
+
</for-each>
|
|
141
|
+
</xhtml:tr>
|
|
142
|
+
</for-each>
|
|
143
|
+
</xhtml:tbody>
|
|
144
|
+
</xhtml:table>
|
|
145
|
+
</template>
|
|
146
|
+
</custom-element>
|
|
147
|
+
</template>
|
|
148
|
+
</html-demo-element>
|
|
149
|
+
|
|
150
|
+
<html-demo-element legend="5. for-each with attributes"
|
|
151
|
+
description="Access element attributes within the loop">
|
|
152
|
+
<template>
|
|
153
|
+
<custom-element>
|
|
154
|
+
<template>
|
|
155
|
+
<xsl:variable name="users">
|
|
156
|
+
<user id="1" role="admin">Alice</user>
|
|
157
|
+
<user id="2" role="editor">Bob</user>
|
|
158
|
+
<user id="3" role="viewer">Charlie</user>
|
|
159
|
+
</xsl:variable>
|
|
160
|
+
<for-each select="exsl:node-set($users)/*">
|
|
161
|
+
<div style="padding: 0.5rem; margin: 0.25rem 0; border-left: 3px solid #007bff;">
|
|
162
|
+
<strong>#{@id}</strong> {.}
|
|
163
|
+
<em>({@role})</em>
|
|
164
|
+
</div>
|
|
165
|
+
</for-each>
|
|
166
|
+
</template>
|
|
167
|
+
</custom-element>
|
|
168
|
+
</template>
|
|
169
|
+
</html-demo-element>
|
|
170
|
+
|
|
171
|
+
<html-demo-element legend="6. Dynamic table with toggle"
|
|
172
|
+
description="Table rows appear/disappear based on checkbox state">
|
|
173
|
+
<template>
|
|
174
|
+
<custom-element>
|
|
175
|
+
<template>
|
|
176
|
+
<xsl:variable name="products">
|
|
177
|
+
<product price="10">Widget</product>
|
|
178
|
+
<product price="25">Gadget</product>
|
|
179
|
+
<product price="15">Gizmo</product>
|
|
180
|
+
</xsl:variable>
|
|
181
|
+
<variable name="items" select="exsl:node-set($products)/*"></variable>
|
|
182
|
+
<label>
|
|
183
|
+
<input type="checkbox" slice="show-products" value="yes"/>
|
|
184
|
+
Show products
|
|
185
|
+
</label>
|
|
186
|
+
<variable name="visible" select="//show-products = 'yes'"></variable>
|
|
187
|
+
<xhtml:table>
|
|
188
|
+
<xhtml:thead>
|
|
189
|
+
<xhtml:tr>
|
|
190
|
+
<xhtml:th>#</xhtml:th>
|
|
191
|
+
<xhtml:th>Product</xhtml:th>
|
|
192
|
+
<xhtml:th>Price</xhtml:th>
|
|
193
|
+
</xhtml:tr>
|
|
194
|
+
</xhtml:thead>
|
|
195
|
+
<xhtml:tbody>
|
|
196
|
+
<for-each select="$items[$visible]">
|
|
197
|
+
<xhtml:tr>
|
|
198
|
+
<xhtml:td>{position()}</xhtml:td>
|
|
199
|
+
<xhtml:td>{.}</xhtml:td>
|
|
200
|
+
<xhtml:td>${@price}</xhtml:td>
|
|
201
|
+
</xhtml:tr>
|
|
202
|
+
</for-each>
|
|
203
|
+
</xhtml:tbody>
|
|
204
|
+
</xhtml:table>
|
|
205
|
+
</template>
|
|
206
|
+
</custom-element>
|
|
207
|
+
</template>
|
|
208
|
+
</html-demo-element>
|
|
209
|
+
|
|
210
|
+
<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
|
|
211
|
+
|
|
212
|
+
</body>
|
|
213
|
+
</html>
|
package/ide/web-types-dce.json
CHANGED
package/ide/web-types-xsl.json
CHANGED
package/index.html
CHANGED
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
<a href="./demo/attributes.html" >attributes </a> |
|
|
55
55
|
<a href="./demo/data-slices.html" >data slices/events </a> |
|
|
56
56
|
<a href="./demo/form.html" >Form validation </a> |
|
|
57
|
-
<a href="./demo/dom-merge.html" >DOM merge on dynamic update </a
|
|
57
|
+
<a href="./demo/dom-merge.html" >DOM merge on dynamic update </a> |
|
|
58
|
+
<a href="./demo/for-each.html" >for-each loop in TABLE </a><br/>
|
|
58
59
|
<a href="./demo/npm-versions-demo.html">npm version </a>
|
|
59
60
|
</section>
|
|
60
61
|
</nav>
|
package/package.json
CHANGED