@knowark/componarkjs 1.10.2 → 1.11.0

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

@@ -201,6 +201,32 @@ describe('Component', () => {
     expect(component.data.value).toEqual('E')
   })
 
+  it('binds multiple handlers to the same event', async () => {
+    container.innerHTML = `
+    <mock-component>
+      <input type="text"
+        listen
+        on-input="{{ data.value = data }}"
+        on-input-1="{{ data.value1 = data }}"
+        on-input-2="{{ data.value2 = data }}"
+        on-input-3="{{ data.value3 = data }}"
+      ></input>
+    </mock-component>
+    `
+
+    const component = container.querySelector('mock-component')
+    const input = component.select('input')
+
+    input.dispatchEvent(
+      new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
+    )
+
+    expect(component.data.value).toEqual('E')
+    expect(component.data.value1).toEqual('E')
+    expect(component.data.value2).toEqual('E')
+    expect(component.data.value3).toEqual('E')
+  })
+
   it('binds to the target.value event property by default', async () => {
     container.innerHTML = `
     <mock-component>

package/lib/base/styles/styles.js

@@ -2,7 +2,9 @@ const userActions = ['-hover', '-active']
 
 const formActions = ['-focus-within', '-valid', '-invalid', '-checked']
 
-const actions = ['', ...userActions, ...formActions]
+const attributes  = ['[disabled]', '[open]', '[required]', '[readonly]']
+
+const actions = ['', ...userActions, ...formActions, ...attributes]
 
 const sides = ['', '-top', '-right', '-bottom', '-left']
 
@@ -13,6 +15,8 @@ const mutableProperties = [
 const effects = [
   'animation', 'filter', 'mix-blend-mode', 'transition', 'transform']
 
+const tie = (action) => action.replace('[', '-').replace(']', '')
+
 const css = String.raw; export default css`
 * {
   margin: 0;
@@ -90,13 +94,13 @@ html {
 /* COLORS */
 
 ${actions.map(action => css`
-[style*='--color${action}:']${action.replace('-', ':')} {
-  color: var(--color${action});
+[style*='--color${tie(action)}:']${action.replace('-', ':')} {
+  color: var(--color${tie(action)});
 }
 `.trim()).join('\n')}
 ${actions.map(action => css`
-[style*='--background${action}:']${action.replace('-', ':')} {
-  background: var(--background${action});
+[style*='--background${tie(action)}:']${action.replace('-', ':')} {
+  background: var(--background${tie(action)});
 }
 `.trim()).join('\n')}
 
@@ -239,34 +243,34 @@ ${sides.filter(Boolean).map(side => css`
 /* BORDERS */
 
 ${actions.map(action => css`
-[style*='--border-style${action}:']${action.replace('-', ':')} {
-  border-style: var(--border-style${action});
+[style*='--border-style${tie(action)}:']${action.replace('-', ':')} {
+  border-style: var(--border-style${tie(action)});
 }
-[style*='--border-width${action}:']${action.replace('-', ':')} {
-  border-width: var(--border-width${action});
+[style*='--border-width${tie(action)}:']${action.replace('-', ':')} {
+  border-width: var(--border-width${tie(action)});
 }
-[style*='--border-color${action}:']${action.replace('-', ':')} {
-  border-color: var(--border-color${action});
+[style*='--border-color${tie(action)}:']${action.replace('-', ':')} {
+  border-color: var(--border-color${tie(action)});
 }
-[style*='--border-radius${action}:']${action.replace('-', ':')} {
-  border-radius: var(--border-radius${action});
+[style*='--border-radius${tie(action)}:']${action.replace('-', ':')} {
+  border-radius: var(--border-radius${tie(action)});
 }
 `.trim()).join('\n')}
 
 ${actions.map(action => css`
-[style*='--outline${action}:']${action.replace('-', ':')} {
-  outline: var(--outline${action});
+[style*='--outline${tie(action)}:']${action.replace('-', ':')} {
+  outline: var(--outline${tie(action)});
 }
 `.trim()).join('\n')}
 
 /* SHADOWS */
 
 ${actions.map(action => css`
-[style*='--box-shadow${action}:']${action.replace('-', ':')} {
+[style*='--box-shadow${tie(action)}:']${action.replace('-', ':')} {
   box-shadow: 0
-    calc(var(--box-shadow-offset-step) * var(--box-shadow${action}))
-    calc(var(--box-shadow-blur-step) * var(--box-shadow${action}))
-    calc(var(--box-shadow-spread-step) * var(--box-shadow${action}))
+    calc(var(--box-shadow-offset-step) * var(--box-shadow${tie(action)}))
+    calc(var(--box-shadow-blur-step) * var(--box-shadow${tie(action)}))
+    calc(var(--box-shadow-spread-step) * var(--box-shadow${tie(action)}))
     var(--box-shadow-color);
 }
 `.trim()).join('\n')}
@@ -274,8 +278,8 @@ ${actions.map(action => css`
 /* EFFECTS */
 
 ${effects.map(effect => actions.map(action => css`
-[style*='--${effect}${action}:']${action.replace('-', ':')} {
-  ${effect}: var(--${effect}${action});
+[style*='--${effect}${tie(action)}:']${action.replace('-', ':')} {
+  ${effect}: var(--${effect}${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
@@ -283,22 +287,22 @@ ${effects.map(effect => actions.map(action => css`
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} > [style*='--${effect}-parent${action}:'] {
-  ${effect}: var(--${effect}-parent${action});
+*${action.replace('-', ':')} > [style*='--${effect}-parent${tie(action)}:'] {
+  ${effect}: var(--${effect}-parent${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} + [style*='--${effect}-sibling${action}:'] {
-  ${effect}: var(--${effect}-sibling${action});
+*${action.replace('-', ':')} + [style*='--${effect}-sibling${tie(action)}:'] {
+  ${effect}: var(--${effect}-sibling${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} ~ [style*='--${effect}-antecessor${action}:'] {
-  ${effect}: var(--${effect}-antecessor${action});
+*${action.replace('-',':')} ~ [style*='--${effect}-antecessor${tie(action)}:'] {
+  ${effect}: var(--${effect}-antecessor${tie(action)});
 }
 `.trim())).flat().join('\n')}
 

package/lib/base/utils/helpers.js

@@ -50,7 +50,8 @@ export function listen (self) {
           }
         }
 
-        const eventName = attribute.name.replace('on-', '').trim()
+        const eventName = (
+          attribute.name.replace('on-', '').replace(/-\d+$/, '').trim())
         element.addEventListener(eventName, catchingHandler.bind(self))
         element.removeAttribute(binding)
       }

package/package.json

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