0.0.29

README.md

@@ -112,18 +112,20 @@ BTW, the canonical name for this enhancement is the name of this package, *be-ca
 
 Anything that requires subscribing to alternative or mixed event names, and/or that requires referencing nearby elements using something other than id's, needs to use an alternative to the *for* attribute.  We do so by adopting [DSS](https://github.com/bahrus/trans-render/wiki/VIII.--Directed-Scoped-Specifiers-(DSS)) to describe what to observe, and optionally when to act.
 
-## Example 1e
+## Example 1f
 
 ```html
 <form>
     <input type="range" name=a value="50">
     +<input type="number" name=b value="25">
-    =<output 🧮-for="@a @b" 🧮=+></output>
+    =<output 🧮-for="@a and @b" 🧮=+></output>
 </form>
 ```
 
 This still happens to assume, by default, that the "input" event is what we should listen for, but having adopted DSS syntax, we can specify any other event name we may want.   Id's and the *for* attribute are generated automatically by *be-calculating* in order to optimize our accessibility experience (if the for attribute/htmlFor property is found to null/undefined).
 
+[TODO] eliminate need for and, check why seems to parse 3 times.
+
 # Part II Applied to non output elements
 
 This enhancement also supports other elements.  The script will need to be a bit more verbose though:

be-calculating.js

@@ -19,6 +19,9 @@ class BeCalculating extends BE {
      * @type {BEConfig<AP & BEAllProps, Actions & IEnhancement, any>}
      */
     static config = {
+        propDefaults: {
+            eventArg: 'input',
+        },
         propInfo:{
             ...propInfo,
             categorized: {},
@@ -90,10 +93,10 @@ class BeCalculating extends BE {
      * @param {BAP} self 
      */
     getDefltEvtType(self){
-        const {enhElLocalName, enhancedElement} = self;
+        const {enhElLocalName, enhancedElement, eventArg} = self;
         const deflt = /** @type {PAP} */({
             //publishEventType: 'load',
-            defaultEventType: 'input'
+            defaultEventType: eventArg
         });
 
         // switch(enhElLocalName){

behivior.js

@@ -17,8 +17,8 @@ export const emc = {
             mapsTo: 'handler'
         },
         '1.0': {
-            instanceOf: 'String',
-            mapsTo: 'forAttr'
+            instanceOf: 'DSSArray',
+            arrValMapsTo: 'remoteSpecifiers'
         },
         '2.0': {
             instanceOf: 'String',

demo/Example1e.html → demo/Example1f.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Example 1e</title>
+    <title>Example 1f</title>
     <script type=importmap >
         {
             "imports": {
@@ -24,9 +24,9 @@
         Registry.register(emc, '+', e => e.r = e.args.reduce((acc, arg) => acc + arg));
     </script>
     <form>
-        <input type="range" id="a" value="50">
-        +<input type="number" id="b" value="25">
-        =<output for="a b" 🧮=+ ></output>
+        <input type="range" name="a" value="50">
+        +<input type="number" name="b" value="25">
+        =<output 🧮-for="@a and @b" 🧮=+ ></output>
     </form>
 
     <script type=module>