@epa-wg/custom-element 0.0.29 → 0.0.31

package/README.md

@@ -341,16 +341,16 @@ within template
 [css-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
 [slice-demo-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
 [hex-grid-url]:   https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
-[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.29/demo/hex-grid-transform.png
+[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.31/demo/hex-grid-transform.png
 [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
 [http-request-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
 [location-demo]:  https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
 [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.29/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/coverage/src/custom-element/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/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.29",
+    "version": "0.0.31",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/custom-element.js

@@ -423,12 +423,13 @@ event2slice( x, sliceNames, ev, dce )
             s.setAttribute('validation-message', el.validationMessage);
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
+        const notChecked = ( 'checkbox' === el.type || 'radio' === el.type ) && !el.checked ;
         if( sel.hasAttribute('slice-value') )
         {   if( el.value === undefined)
                 s.removeAttribute('value')
             else
                 s.setAttribute('value', el.value );
-            const v = xPath( attr( sel, 'slice-value'),s );
+            const v = notChecked? '' : xPath( attr( sel, 'slice-value'),s );
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
@@ -437,7 +438,8 @@ event2slice( x, sliceNames, ev, dce )
                 s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
                 return s
             }
-            const v = el.value ?? attr( el, 'value' ) ;
+
+            const v = notChecked? '' : el.value ?? attr( el, 'value' );
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());

package/demo/data-slices.html

@@ -210,6 +210,43 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="12. checkbox use"
+                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+    <p>Check the box to see the value in slice</p>
+    <template>
+        <custom-element>
+            <template>
+                <input type="checkbox" slice="is-checked" value="V0" checked/>
+                slice: {/datadom/slice/is-checked} <br/>
+                <xsl:variable name="v1">V1</xsl:variable> <br/>
+                $v1={$v1}<br/>
+
+                <!-- slice-variable is XPath. $v1 is available only in template, embedding trick -->
+                <input type="checkbox" slice="s2" slice-value="'{$v1}'"/>
+                slice 2: {//s2} <br/>
+
+                <!-- variable is used in template scope -->
+                <input type="checkbox" slice="s3" value="{$v1}"/>
+                slice 3: {//s3}
+            </template>
+        </custom-element>
+    </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.">
+    <p>Check the radiobutton to see the value in slice</p>
+    <template>
+        <custom-element>
+            <template>
+                V0: <input type="radio" slice="radio-group" value="V0" name="g1"/> <br/>
+                V1: <input type="radio" slice="radio-group" value="V1" name="g1" checked/> <br/>
+                slice: {//radio-group} <br/>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>

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.29",
+    "version": "0.0.31",
     "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.29",
+    "version": "0.0.31",
     "js-types-syntax": "typescript",
     "description-markup": "markdown",
     "contributions": {

package/package.json

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