@epa-wg/custom-element 0.0.22 → 0.0.24

package/README.md

@@ -348,9 +348,9 @@ within template
 [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.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.22/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.22/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.22/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html?path=/story/welcome--introduction
 [sandbox-url]:    https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
 [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
 [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg

package/bin/xslDtd2Ide.mjs

@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
 const intelliJ = {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.22",
+    "version": "0.0.24",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -434,6 +434,14 @@ export function assureUnique(n, id=0)
         e.childNodes.length && assureUnique(e)
     }
 }
+export function appendByDceId(parent,e,k)
+{
+    k = 1*k;
+    for( let n of parent.childNodes )
+        if( (n.dceId ?? n.getAttribute('data-dce-id')*1) > k )
+            return parent.insertBefore(e,n);
+    parent.append(e)
+}
 export function merge( parent, fromArr )
 {
     if(!fromArr.length)
@@ -461,7 +469,7 @@ export function merge( parent, fromArr )
             }
             delete id2old[ k ]
         }else
-            parent.append( e )
+            appendByDceId(parent,e,k)
     }
     for( let v of Object.values(id2old) )
         v.remove();

package/demo/form.html

@@ -9,9 +9,18 @@
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
-        label{ display: flex;  }
-        label:has(input[type="text"],input[type="password"],input:not([type]) ){flex-direction: column;}
-        nav{ max-width: 32em; }
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
     </style>
     <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
          todo: apply setCustomValidity( warningStr )
@@ -22,36 +31,74 @@
 
 <nav>
     <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
-    <h3>Forms handling.</h3>
-    <ul>
-        <li> The form triggers re-render on <code>change</code> event before submit</li>
-        <li> <code>disabled</code> form attribute is added when validation is not passed </li>
-        <li> Form action triggered on submit changing the hash in URL </li>
-        <li> URL hash hides the <var>signin</var> form from DOM and shown <var>signout</var> form </li>
-        <li> signout action reverse visibility of signin and signout </li>
-        <li> "remember" checkbox triggers <code>local-storage</code> with value set from <var>form-data/remember</var> slice </li>
-        <li> "username" initial value taken from <code>local-storage</code> <var>usernane</var> slice </li>
-        <li> <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation - MDN</a> </li>
-    </ul>
+
+    <p> <b>formData</b><br/>
+        The values of named form fields are populated into the <b>slice</b> as <b>form-data</b> on <var>change</var>
+        or <var>submit</var> event. The field values can be used in form validation via <var>custom-validity</var>
+        attribute
+        and in condition to enabling the form parts
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">formData MDN</a>
+    </p>
+    <details>
+        <summary>slice to form-data mapping</summary>
+        <html-demo-element>
+            <template>
+                <datadom hidden>
+                    <slice>
+                        <signin-form>
+                            <form-data>
+                                <username>QWE</username>
+                                <password>ASD</password>
+                            </form-data>
+                        </signin-form>
+                    </slice>
+                </datadom>
+            </template>
+        </html-demo-element>
+    </details>
+
+
+    <p> <b> custom-validity attribute </b><br/>
+        applied on the form itself or on the form field.<br/>
+        The value is an XPath over DCE <var>datadom</var>. When evaluated as <u>boolean</u>, it would enable(true) or
+        disable(false)
+        the form submission, acting as form validation mechanism.<br>
+        Alternatively, the value can be evaluated as a <u>string</u> which would be treated as an error and can be used
+        as
+        validation error message set as <var>@validation-message</var> attribute on the form slice.
+        Look for <var>email-form/@validation-message</var> example on the page.<br/>
+    </p>
+    <p> When <var>custom-validity</var> attribute is set on the field, its XPath evaluated value is propagated to
+        <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage">
+            validationMessage property</a>. Which would be shown via browser system popup as the field validation error.
+    </p>
+    <p> <var>@validation-message</var> is set either by <var>custom-validity</var> attribute or by browser as system message.
+        By default, it is shown as popup on the field validation. But also is available for template as a string via
+        form field attribute. Like in <var>email-form/@validation-message</var>.
+
+    </p>
+
+    <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation MDN</a>
 </nav>
 
 <html-demo-element legend="1. Simple validation"
                    description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button  ">
     <ol>
-        <li> Click Next, observe the warning </li>
-        <li> Fill input with 10+ characters </li>
-        <li> Click Next, the password and "Sign In" button should appear </li>
+        <li> Click Next, observe the warning</li>
+        <li> Fill input with 10+ characters</li>
+        <li> Click Next, the password and "Sign In" button should appear</li>
     </ol>
     <template>
         <custom-element>
             <template>
-                <form   slice="signin-form"
-                        custom-validity="
+                <form slice="signin-form"
+                      custom-validity="
                             string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
                             and string-length(//form-data/password) &gt; 3 "
-                    >
+                >
                     <label> Email
-                        <input name="username" autocomplete="username" placeholder="Email, phone, or username" required="">
+                        <input name="username" autocomplete="username" placeholder="Email, phone, or username"
+                               required="">
                     </label>
                     <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
                     <if test="not($showpassword)">
@@ -69,20 +116,20 @@
 </html-demo-element>
 
 <html-demo-element legend="2. Form life cycle demo"
-                   description="form-data in the form slice is the source of truth" >
+                   description="form-data in the form slice is the source of truth">
 
     <template>
         <custom-element>
             <template>
-                <form   slice="signin-form"
-                        custom-validity="
+                <form slice="signin-form"
+                      custom-validity="
                             string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
                             and (   ( //confirm-by = 'sms' )
                                     or ( //confirm-by = 'email' )
                                     or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
                                 )
                         "
-                    >
+                >
                     <!-- form validity should be based on form-data -->
                     <variable name="warn">
                         <if test="string-length(//username-slice) &lt; 9 ">
@@ -96,22 +143,22 @@
                     </variable>
                     <label> Enter your email, phone, or user name
                         <input name="username" autocomplete="username"
-                            placeholder="Email, phone, or username"
-                            custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
-                            slice-event="input"
-                            slice="username-slice"
-                            required
+                               placeholder="Email, phone, or username"
+                               custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
+                               slice-event="input"
+                               slice="username-slice"
+                               required
                         />
                     </label>
                     <var> {$warn} </var>
                     <fieldset>
                         <legend>Confirm by</legend>
-                        <label><input type="radio" name="confirm-by" value="email"      /> email         </label>
-                        <label><input type="radio" name="confirm-by" value="sms"        /> text to phone </label>
-                        <label><input type="radio" name="confirm-by" value="password"   /> password      </label>
+                        <label><input type="radio" name="confirm-by" value="email"/> email </label>
+                        <label><input type="radio" name="confirm-by" value="sms"/> text to phone </label>
+                        <label><input type="radio" name="confirm-by" value="password"/> password </label>
                         <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
                             <label>Enter password: <input type="password" NAME="password"
-                                   custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
+                                                          custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
                             /></label>
                         </if>
                         <if test="not(//confirm-by)">
@@ -136,8 +183,8 @@
     <ol>
         <li> type in input field</li>
         <li> delete input field content</li>
-        <li> observe the warning in string bellow input</li>
-        <li> Click Next observe the system warning in  dropdown and in string bellow input</li>
+        <li> observe the warning in string after input</li>
+        <li> Click Next observe the system warning in dropdown over input</li>
     </ol>
     <template>
         <custom-element>
@@ -150,7 +197,6 @@
                         <var>{//username/@validation-message}</var>
                     </if>
                     <button>Next</button>
-                    <p>{//email-form/@validation-message}</p>
                 </form>
             </template>
         </custom-element>
@@ -160,27 +206,27 @@
 <html-demo-element legend="4. form validity message"
                    description="@validation-message propagated into form slice and  ">
     <ol>
-        <li> type up to 3 chars in input field          </li>
-        <li> observe the slice value change             </li>
-        <li> click next                                 </li>
-        <li> observe the warning bellow the button      </li>
+        <li> type up to 3 chars in input field</li>
+        <li> observe the slice value change</li>
+        <li> click next</li>
+        <li> observe the warning bellow the button</li>
     </ol>
     <template>
         <custom-element>
             <template>
                 <form slice="email-form"
-                    custom-validity=" string-length(//slice/username) &gt; 3 ??
+                      custom-validity=" string-length(//slice/username) &gt; 3 ??
                         concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
-                    >
+                >
                     <label> Email
-                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required />
+                        <input name="email" slice="username" slice-event="input" placeholder="non-empty" required/>
                     </label>
                     <if test="//username/@validation-message">
                         <var>{//username/@validation-message}</var>
                     </if>
                     <button>Next</button>
-                    <p>//email-form/@validation-message:    {//email-form/@validation-message}  </p>
-                    <p>//slice/username:                    {//slice/username}                  </p>
+                    <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
+                    <p>//slice/username: {//slice/username} </p>
                 </form>
             </template>
         </custom-element>

package/demo/s.xml

@@ -1,19 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<datadom xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-         xmlns:dce="urn:schemas-epa-wg:dce">
-    <payload>
-        <xhtml:span slot=""></xhtml:span>
-        <xhtml:style slot="" title="ABC">dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }</xhtml:style>
-        <xhtml:span slot=""></xhtml:span>
-        <xhtml:u slot="">red</xhtml:u>
-        <xhtml:span slot=""></xhtml:span>
-    </payload>
-    <attributes>
-        <id>dce32</id>
-        <data-dce-style>54f96d52-ce70-435d-83c4-b421357d9a17</data-dce-style>
-    </attributes>
-    <dataset>
-        <dceStyle>54f96d52-ce70-435d-83c4-b421357d9a17</dceStyle>
-    </dataset>
-    <slice/>
+<datadom>
+    <slice>
+        <signin-form>
+            <form-data>
+                <username>QWE</username>
+                <password>ASD</password>
+            </form-data>
+        </signin-form>
+    </slice>
 </datadom>

package/ide/web-types-dce.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/web-types",
   "name": "@epa-wg/custom-element",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {

package/ide/web-types-xsl.json

@@ -1,7 +1,7 @@
 {
     "$schema": "http://json.schemastore.org/web-types",
     "name": "@epa-wg/custom-element",
-    "version": "0.0.22",
+    "version": "0.0.24",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.22",
+    "version": "0.0.24",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",