Merge pull request #9 from EPA-WG/develop

0.0.29
EPA-WG · Nov 7, 2024 · 06b9e05 · 06b9e05
2 parents 4192859 + 74f4f54
commit 06b9e05
Show file tree

Hide file tree

Showing 112 changed files with 44,037 additions and 43,906 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@ CDN version of StoryBook.
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist
-[coverage-image]: https://unpkg.com/@epa-wg/[email protected].28/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].28/coverage/src/custom-element/index.html
-[sb-url]:         https://unpkg.com/@epa-wg/[email protected].28/storybook-static/index.html
-[bundle-url]:     https://unpkg.com/@epa-wg/[email protected].28/dist/custom-element-bundle.js
+[coverage-image]: https://unpkg.com/@epa-wg/[email protected].29/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].29/coverage/src/custom-element/index.html
+[sb-url]:         https://unpkg.com/@epa-wg/[email protected].29/storybook-static/index.html
+[bundle-url]:     https://unpkg.com/@epa-wg/[email protected].29/dist/custom-element-bundle.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     "tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false  src/stories/module-url.test.stories.ts"
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.28"
+    "@epa-wg/custom-element": "0.0.29"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "2.0.2",

diff --git a/public/demo/demo.css b/public/demo/demo.css
@@ -14,9 +14,6 @@ script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}
 code{ font-weight: bold; color: green; text-wrap: nowrap; }
-*{
-    gap: 1rem;
-}
 
 html-demo-element h3
 {   text-shadow: 0 0 0.25em white;

diff --git a/public/demo/s.xml b/public/demo/s.xml
@@ -1,3 +1,18 @@
-<body xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><h4>embed-1.html</h4>
-<custom-element><template>🖖</template></custom-element>
-</body>
+<?xml version="1.0" encoding="UTF-8"?>
+<datadom>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
+    </payload>
+    <attributes>
+        <xmlns/>
+        <justify>end</justify>
+        <data-dce-id>2</data-dce-id>
+        <direction>row</direction>
+    </attributes>
+    <dataset>
+        <dceId>2</dceId>
+    </dataset>
+    <slice/>
+</datadom>
diff --git a/public/demo/s.xslt b/public/demo/s.xslt
@@ -1,56 +1,39 @@
-<?xml version='1.0' encoding='UTF-8'?>
-<xsl:stylesheet version="1.0"
-	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-	xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                >
-    <xsl:output method="xml"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."/></xsl:template>
+    <xsl:template mode="payload" match="attributes"><xsl:param name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template></dce-root></xsl:template>
     <xsl:template match="/">
-        <dce-root >
-            <xsl:apply-templates select="*"/>
-        </dce-root>
-    </xsl:template>
-    <xsl:template match="*[name()='template']">
-        <xsl:apply-templates mode="sanitize" select="*|text()"/>
-    </xsl:template>
-    <xsl:template match="*">
-        <xsl:apply-templates mode="sanitize" select="*|text()"/>
-    </xsl:template>
-    <xsl:template match="*[name()='svg']|*[name()='math']">
-        <xsl:apply-templates mode="sanitize" select="."/>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
-        <xsl:copy>
-            <xsl:apply-templates mode="sanitize" select="@*"/>
-            <xsl:value-of select="text()"></xsl:value-of>
-        </xsl:copy>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
-        <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="@*"/>
-            <xsl:value-of select="text()"></xsl:value-of>
-        </xsl:element>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="*|@*">
-        <xsl:copy>
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-        </xsl:copy>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
-    <xsl:template mode="sanitize" match="text()">
-        <dce-text>
-            <xsl:copy/>
-        </dce-text>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
-        <dce-text>
-            <xsl:copy>
-                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-            </xsl:copy>
-        </dce-text>
-    </xsl:template>
-    <xsl:template mode="sanitize" match="xhtml:*">
-        <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
-        </xsl:element>
-    </xsl:template>
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template name="slot">
+        <xsl:param name="slotname"/>
+        <xsl:param name="defaultvalue"/>
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:copy-of select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
 </xsl:stylesheet>
diff --git a/public/demo/s1.xslt b/public/demo/s1.xslt
diff --git a/public/demo/ss.html b/public/demo/ss.html
@@ -1,57 +1,24 @@
-<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
-<ul xmlns="" data-dce-id="6">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
-</div>
-</ul>
-<ul xmlns="" data-dce-id="6-1">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@status</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
-</div>
-<div data-dce-id="9-2">
-<var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
-</div>
-<div data-dce-id="9-3">
-<var data-dce-id="10">@type</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
-</div>
-<div data-dce-id="9-4">
-<var data-dce-id="10">@url</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
-</div>
-<div data-dce-id="9-5">
-<var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
-</div>
-</ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
-<ul xmlns="" data-dce-id="6-2">
-<var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
-<var data-dce-id="10">@count</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
-</div>
-<div data-dce-id="9-1">
-<var data-dce-id="10">@next</var><dce-text data-dce-id="11">
-                    =
-                    </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
-</div>
-</ul></dce-root>
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
+                //suggest
+                //selected
+                $selected-value </pre>
+    <label data-dce-id="3">
+        <dce-text data-dce-id="4">Number</dce-text>
+        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
+        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
+        <slice data-dce-id="7" name="selected" slice-event="input"/>
+        </input></label>
+    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
+            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
+        <dce-text data-dce-id="11">One</dce-text>
+    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
+                                                      type="radio" value="two"/>
+        <dce-text data-dce-id="11">Two</dce-text>
+    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
+                                                        slice-event="input" type="radio" value="three"/>
+        <dce-text data-dce-id="11">Three</dce-text>
+    </label></fieldset>
+</dce-root>
diff --git a/public/demo/z.html b/public/demo/z.html
diff --git a/public/demo/z.js b/public/demo/z.js