Merge pull request #11 from EPA-WG/develop

0.0.32
EPA-WG · Nov 28, 2024 · b49630c · b49630c
2 parents 97379d4 + 124991c
commit b49630c
Show file tree

Hide file tree

Showing 71 changed files with 1,558 additions and 623 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].31/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].31/coverage/src/custom-element/index.html
-[sb-url]:         https://unpkg.com/@epa-wg/[email protected].31/storybook-static/index.html
-[bundle-url]:     https://unpkg.com/@epa-wg/[email protected].31/dist/custom-element-bundle.js
+[coverage-image]: https://unpkg.com/@epa-wg/[email protected].32/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/[email protected].32/coverage/src/custom-element/index.html
+[sb-url]:         https://unpkg.com/@epa-wg/[email protected].32/storybook-static/index.html
+[bundle-url]:     https://unpkg.com/@epa-wg/[email protected].32/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.31",
+  "version": "0.0.32",
   "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.31"
+    "@epa-wg/custom-element": "0.0.32"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",

diff --git a/public/demo/a.html b/public/demo/a.html
@@ -1,60 +1,73 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <title>http-request Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
 
-        label {
-            display: flex;
+        button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            flex: auto;
+            box-shadow: inset silver 0 0 1rem;
+            min-width: 12rem;
+            padding: 1rem;
+            color: coral;
+            text-shadow: 1px 1px silver;
+            font-weight: bolder;
         }
 
-        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
-            flex-direction: column;
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
         }
 
-        nav {
-            max-width: 32em;
+        table {
+            min-width: 16rem;
+        }
+
+        td {
+            border-bottom: 1px solid silver;
+        }
+
+        tfoot td {
+            border-bottom: none;
+        }
+
+        td, th {
+            text-align: right;
         }
-    </style>
-    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
-         todo: apply setCustomValidity( warningStr )
-    -->
 
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+        svg {
+            max-height: 3rem;
+        }
+    </style>
 </head>
 <body>
 
-<fieldset>
-    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
-            style="color:red">red</i> in 1st instance
-    </legend>
-    <custom-element tag="dce-3">
-        <template>
-            <u>
-                <slot>is green</slot>
-            </u>
-        </template>
-        <style>dce-3 {
-            color: green
-        }</style>
-    </custom-element>
-   <u>should be</u> <i style="color:red">red</i>:
-    <dce-3 id="dce32">
-        <template>
-            <style> color:red; </style>
-            <u>red</u>
-        </template>
-    </dce-3> <br/>
-    should be GREEN:
-    <dce-3 id="dce31">green</dce-3>
-</fieldset>
-
-<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+
+        <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
 
 </body>
 </html>
diff --git a/public/demo/data-slices.html b/public/demo/data-slices.html
@@ -233,8 +233,8 @@ <h3>Data slices propagation by events.</h3>
     </template>
 </html-demo-element>
 
-<html-demo-element legend="13. Radio buttons use"
-                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+<html-demo-element legend="13. Radio group"
+                   description="The value propagated into slice from the last checked radiobutton.">
     <p>Check the radiobutton to see the value in slice</p>
     <template>
         <custom-element>

diff --git a/public/demo/external-template.html b/public/demo/external-template.html
@@ -57,6 +57,7 @@
 
         svg {
             max-height: 3rem;
+            min-height: 2rem;
         }
     </style>
 </head>

diff --git a/public/demo/form.html b/public/demo/form.html
@@ -233,6 +233,48 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="5. using custom-element as form input"
+                   description="bypass value to container form "
+                   id="sample-5"
+    >
+    <ol>
+        <li> select radio in top group</li>
+        <li> observe the fruit selected on the left</li>
+        <li> observe the warning message bellow button</li>
+        <li> next button does not submit the form</li>
+        <li> select radio in bottom group</li>
+        <li> observe the fruit selected on the right</li>
+        <li> same fruit selection would eliminate the warning and
+            allow the form submission</li>
+        <li> after submit, observe the URL parameters 'inp-1=🍏&inp-2=🍏'  </li>
+    </ol>
+    <template>
+        <custom-element tag="sample-input">
+            <template>
+                <attribute name="name" ></attribute>
+                <attribute name="value" select="//val"></attribute>
+                {$name}
+                <label><input type="radio" name="{$name}" slice="val" value="🍏">Apple</label>
+                <label><input type="radio" name="{$name}" slice="val" value="🍌">Banana</label>
+            </template>
+        </custom-element>
+        <custom-element>
+            <template>
+                <form slice="cart-form" action="#sample-5"
+                    custom-validity="(//inp1 = //inp2) ?? 'pick same fruit'"
+                    >
+                    <sample-input slice="inp1" name="inp-1"></sample-input>
+                    <sample-input slice="inp2" name="inp-2"></sample-input>
+                    <button>Next</button>
+                    Picked :{//inp1} and {//inp2}
+
+                    <p>{//cart-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>

diff --git a/public/demo/hex-grid-dce.html b/public/demo/hex-grid-dce.html
@@ -107,7 +107,7 @@
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
     <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
     <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
-    <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
+    <img src="https://threejs.org/files/favicon.ico" alt="ThreeJS" href="https://threejs.org/"/>
     <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>

diff --git a/public/demo/hex-grid.html b/public/demo/hex-grid.html
@@ -52,7 +52,7 @@ <h3>Example of DCE HTML as a library.</h3>
         <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
         <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
         <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-        <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
+        <img src="https://refine.dev/img/favicon.ico" alt="Refine" href="https://refine.dev/"/>
         <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
         <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
         <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>

diff --git a/public/demo/parameters.html b/public/demo/parameters.html
@@ -44,7 +44,7 @@
     </template>
 </html-demo-element>
 
-<html-demo-element legend="slice propagates attribute" description="
+<html-demo-element legend="attribute from slice" description="
 when slice value points to attribute, it would be populated on slice change
 ">
     Type in the input field to see the variable $title change. <br/>
@@ -62,6 +62,25 @@
     </template>
 </html-demo-element>
 
+<details>
+    <summary>Attributes processing</summary>
+    To be available in template, <code>custom-element</code> attributes should be
+    defined by <code>attribute</code> markup as shown above.
+    The value is taken from attribute text content or from <code>select</code> XPath expression<br/>
+
+    Declared in such way, attributes are exposed via <code><a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"
+        >observedAttributes</a></code>. <br/>
+    The template exposes those attributes as <code>xsl:param</code> which makes the attribute value available as
+    xsl variable (as attribute name prefixed with $). <br/>
+    After transformation the attributes values are read from CE root and copied into DCE component. <br/>
+    The DCE attribute change from outside invokes <code>attributeChangedCallback</code> which triggers DCE re-render.
+    <p>
+        The <code>value</code> attribute is usual case to be propagated from within of <code>custom-element</code>.
+        See the <a href="./form.html#sample-5">using custom-element as form input</a> example.
+    </p>
+    &bull; <a href="https://github.com/EPA-WG/custom-element/blob/main/docs/attributes.md">Design docs</a>
+</details>
 
 
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>

diff --git a/public/demo/s.xml b/public/demo/s.xml
@@ -1,18 +1,12 @@
 <?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>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/>
     <attributes>
-        <xmlns/>
-        <justify>end</justify>
-        <data-dce-id>2</data-dce-id>
-        <direction>row</direction>
+        <id>dce1</id>
+        <p1>default_P1</p1>
+        <p2>always_p2</p2>
+        <p3></p3>
     </attributes>
-    <dataset>
-        <dceId>2</dceId>
-    </dataset>
+    <dataset/>
     <slice/>
 </datadom>
diff --git a/public/demo/s.xslt b/public/demo/s.xslt
@@ -1,20 +1,69 @@
 <?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: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: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="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"/>
+        <xsl:param name="p3">
+            <xsl:choose>
+                <xsl:when test="string-length(//p3)>0 ">RRRR
+                    <xsl:value-of select="count(//p3)"/>
+                    +<xsl:value-of select="//p3 "/>=
+                </xsl:when>
+                <xsl:otherwise>OOO
+                    <xsl:value-of select=" 'def_P3' "/>
+                </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="p1">default_P1</xsl:attribute>
+            <xsl:attribute name="p2">
+                <xsl:value-of select="'always_p2'"/>
+            </xsl:attribute>
+            <xsl:attribute name="p3">
+                <xsl:choose>
+                    <xsl:when test="//p3 ">
+                        <xsl:value-of select="//p3 "/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select=" 'def_P3' "/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <dce-text xmlns="" data-dce-id="2">
+                p1:
+            </dce-text>
+            <code xmlns="" data-testid="p1" data-dce-id="3">
+                <xsl:value-of select="$p1"/>
+            </code>
+            <br xmlns="" data-dce-id="4"/>
+            <dce-text xmlns="" data-dce-id="5">
+                p2:
+            </dce-text>
+            <code xmlns="" data-testid="p2" data-dce-id="6">
+                <xsl:value-of select="$p2"/>
+            </code>
+            <br xmlns="" data-dce-id="7"/>
+            <dce-text xmlns="" data-dce-id="8">
+                p3:
+            </dce-text>
+            <code xmlns="" data-testid="p3" data-dce-id="9">
+                <xsl:value-of select="$p3"/>
+            </code>
+        </dce-root>
+    </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -23,7 +72,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,7 @@ @@
             svg {
                 max-height: 3rem;
+                min-height: 2rem;
             }
         </style>
     </head>
@@ Expand Down @@