@knowark/componarkjs 1.7.7 → 1.7.9

package/lib/base/component/component.test.js

@@ -13,7 +13,7 @@ class MockComponent extends Component {
   reflectedProperties () { return ['code'] }
 
   customHandler (/** @type {CustomEvent} */ event) {
-    event.detail.code = this.code
+    event.detail.code.push(this.code)
   }
 
   erroringHandler (_event) {
@@ -235,10 +235,10 @@ describe('Component', () => {
     const input = component.select('input')
 
     const event = new globalThis.CustomEvent(
-      'alter', { bubbles: true, detail: { code: '' } })
+      'alter', { bubbles: true, detail: { code: [] } })
     input.dispatchEvent(event)
 
-    expect(event.detail.code).toEqual('ABC123')
+    expect(event.detail.code).toEqual(['ABC123'])
   })
 
   it('listens to events and redirects them to target components', async () => {
@@ -253,10 +253,30 @@ describe('Component', () => {
     const input = component.select('input')
 
     const event = new globalThis.CustomEvent(
-      'alter', { bubbles: true, detail: { code: '' } })
+      'alter', { bubbles: true, detail: { code: [] } })
     input.dispatchEvent(event)
 
-    expect(event.detail.code).toEqual('XYZ890')
+    expect(event.detail.code).toEqual(['XYZ890'])
+  })
+
+  it('listens to clicks and redirects them to target components', async () => {
+    container.innerHTML = `
+      <mock-component code="ABC123">
+        <div type="text" listen on-click="customHandler@#child">
+          <button id="action">Action</button>
+        </div>
+        <mock-component id="child" code="XYZ890"></mock-component>
+      </mock-component>
+    `
+
+    const component = container.querySelector('mock-component')
+    const button = component.select('#action')
+
+    const event = new globalThis.CustomEvent(
+      'click', { bubbles: true, detail: { code: [] } })
+    button.dispatchEvent(event)
+
+    expect(event.detail.code).toEqual(['XYZ890'])
   })
 
   it('emits an error event on declared listeners', async () => {

package/lib/base/utils/helpers.js

@@ -21,13 +21,16 @@ export function listen (self) {
           }
         }
 
-        if (!handler) continue
+        if (!handler && !at) continue
 
         // const at = element.getAttribute('at')
         const catchingHandler = async function (event) {
           try {
             let receiver = this
-            if (at) receiver = this.querySelector(at)
+            if (at) {
+              receiver = this.querySelector(at)
+              handler = receiver[value]
+            }
             return await Promise.resolve(handler.bind(receiver)(event))
           } catch (error) {
             this.dispatchEvent(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",