Skip to content

Commit

Permalink
Merge pull request #57 from EPA-WG/develop
Browse files Browse the repository at this point in the history 
0.0.23
  • Loading branch information
@sashafirsov
sashafirsov authored Jun 27, 2024
2 parents 7e1249c + e9a3d8b commit 0abf831
Show file tree
Hide file tree
Showing 7 changed files with 100 additions and 53 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected].22/coverage/src/custom-element/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/[email protected].22/coverage/src/custom-element/index.html
[storybook-url]: https://unpkg.com/@epa-wg/[email protected].22/storybook-static/index.html?path=/story/welcome--introduction
[coverage-image]: https://unpkg.com/@epa-wg/[email protected].23/coverage/src/custom-element/coverage.svg
[coverage-url]: https://unpkg.com/@epa-wg/[email protected].23/coverage/src/custom-element/index.html
[storybook-url]: https://unpkg.com/@epa-wg/[email protected].23/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
Expand Down
2 changes: 1 addition & 1 deletion bin/xslDtd2Ide.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.23",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"contributions": {
Expand Down
135 changes: 91 additions & 44 deletions demo/form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
Expand All @@ -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)">
Expand All @@ -69,20 +116,20 @@ <h3>Forms handling.</h3>
</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 ">
Expand All @@ -96,22 +143,22 @@ <h3>Forms handling.</h3>
</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)">
Expand All @@ -137,7 +184,7 @@ <h3>Forms handling.</h3>
<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> Click Next observe the system warning in dropdown and in string bellow input</li>
</ol>
<template>
<custom-element>
Expand All @@ -160,27 +207,27 @@ <h3>Forms handling.</h3>
<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>
Expand Down
2 changes: 1 addition & 1 deletion ide/web-types-dce.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "http://json.schemastore.org/web-types",
"name": "@epa-wg/custom-element",
"version": "0.0.22",
"version": "0.0.23",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"contributions": {
Expand Down
2 changes: 1 addition & 1 deletion ide/web-types-xsl.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "http://json.schemastore.org/web-types",
"name": "@epa-wg/custom-element",
"version": "0.0.22",
"version": "0.0.23",
"js-types-syntax": "typescript",
"description-markup": "markdown",
"contributions": {
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@epa-wg/custom-element",
"version": "0.0.22",
"version": "0.0.23",
"description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
"browser": "custom-element.js",
"module": "custom-element.js",
Expand Down

0 comments on commit 0abf831

Please sign in to comment.