0.0.15

params implemented
EPA-WG · Feb 16, 2024 · 2203288 · 2203288
1 parent af922ee
commit 2203288
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -196,7 +196,18 @@ In same way as in DCE itself:
         </dce-2>
 ```
 ## Attributes
-curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
+To be served by IDE and to track the attributes changes, they have to be declared via `xsl:param` syntax:
+```html
+    <custom-element tag="dce-with-attrs" hidden>
+        <xsl:param name="p1" >default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+        <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+        p1: {$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+    </custom-element>
+    <dce-with-attrs p1="123" p3="qwe"></dce-with-attrs>
+```
+
+The curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
 
 The names in curly braces are matching the instance attributes. I.e. in XML node `/my-component/attributes/`.
 
@@ -297,9 +308,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-test@0.0.14/coverage/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.14/coverage/lcov-report/index.html
-[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.14/storybook-static/index.html?path=/story/welcome--introduction
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-test@0.0.15/coverage/lcov-report/index.html
+[storybook-url]:  https://unpkg.com/@epa-wg/custom-element-test@0.0.15/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

diff --git a/demo/parameters.html b/demo/parameters.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>parameters - custom-element Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg" />
+    <script type="module" src="../location-element.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        button{ background: forestgreen; }
+        table{ min-width: 16rem; }
+        td{ border-bottom: 1px solid silver; }
+        tfoot td{ border-bottom: none; }
+        td,th{text-align: right; }
+        caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
+    </style>
+</head>
+<body>
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+</nav>
+<html-demo-element legend="param as attributes definition" description="
+params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.
+">
+    <template>
+        <custom-element tag="dce-link" hidden>
+            <xsl:param name="p1" >default_P1</xsl:param>
+            <xsl:param name="p2" select="'always_p2'"  ></xsl:param>
+            <xsl:param name="p3" select="//p3 ?? 'def_P3' "  ></xsl:param>
+            p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
+        </custom-element>
+        <dce-link id="dce1"></dce-link>
+        <section>
+            <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
+            <div><input id="i1" value="p1" />  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+            <div><input id="i2" value="p2" />  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+            <div><input id="i3" value="p3" />  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        </section>
+        <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
+
+    </template>
+</html-demo-element>
+
+
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -26,13 +26,14 @@ <h3><code>custom-element</code> demo</h3>
         The data query is powered by XPath. </p>
     <p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
     <section>
-    <h4>Data layer demo</h4>
+    <h4>Features demo</h4>
         <a href="./demo/local-storage.html"     >local-storage      </a> |
         <a href="./demo/http-request.html"      >http-request       </a> |
         <a href="./demo/location-element.html"  >location-element   </a> |
         <a href="./demo/external-template.html" >external template  </a> <br/>
         <a href="./demo/hex-grid.html"          >hex grid lib       </a> |
         <a href="./demo/scoped-css.html"        >scoped CSS         </a> |
+        <a href="./demo/parameters.html"        >attributes         </a> |
         <a href="./demo/dom-merge.html"         >DOM merge on dynamic update </a>
     </section>
 </nav>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@epa-wg/custom-element",
-    "version": "0.0.14",
+    "version": "0.0.15",
     "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
     "browser": "custom-element.js",
     "module": "custom-element.js",