Namespace custom events with komp: prefix

docs/demo/pages/select.html

@@ -73,7 +73,7 @@
         attribute: 'position',
         options: ['C', '1B', '2B', '3B', 'SS', 'LF', 'CF', 'RF', 'DH']
     });
-    positionSelect.addEventListener('change', renderOutput);
+    positionSelect.addEventListener('komp:change', renderOutput);
     document.getElementById('position-select').append(positionSelect);
 
     const teamSelect = new Select({
@@ -96,7 +96,7 @@
             return team
         })
     });
-    teamSelect.addEventListener('change', renderOutput);
+    teamSelect.addEventListener('komp:change', renderOutput);
     document.getElementById('team-select').append(teamSelect);
 
     renderOutput();

lib/komps/content-area.js

@@ -69,7 +69,7 @@ export default class ContentArea extends KompElement {
             if (this.onchange) {
                 this.onchange(v, this.valueWas)
             }
-            this.trigger('change', v, this.valueWas)
+            this.trigger('komp:change', v, this.valueWas)
             this.valueWas = v
         }
     }

lib/komps/dropzone.js

@@ -124,7 +124,7 @@ export default class Dropzone extends KompElement {
             e.preventDefault();
             ([...e.dataTransfer.files]).forEach(file => {
                 if (this.onFileDrop) { this.onFileDrop(file) }
-                this.trigger('filedrop', file)
+                this.trigger('komp:filedrop', file)
             });
         }
 

lib/komps/element.js

@@ -134,7 +134,8 @@ export default class KompElement extends HTMLElement {
      * @type {Array}
      * @static
      */
-    static events = ['afterRemove', 'beforeRemove', 'beforeConnect', 'afterConnect', 'beforeDisconnect', 'afterDisconnect']
+    static lifecycleEvents = ['afterRemove', 'beforeRemove', 'beforeConnect', 'afterConnect', 'beforeDisconnect', 'afterDisconnect']
+    static events = []
 
     static get observedAttributes() { return this.watch }
 
@@ -275,7 +276,8 @@ export default class KompElement extends HTMLElement {
         })
 
         /* events */
-        scanPrototypesFor(this.constructor, 'events').filter(x => x).reverse().forEach(events => {
+        // Lifecycle events are unprefixed; component events are prefixed with komp:
+        scanPrototypesFor(this.constructor, 'lifecycleEvents').filter(x => x).reverse().forEach(events => {
             events.forEach(event => {
                 const eventKey = "on" + event[0].toUpperCase() + event.slice(1)
                 if (attrs.hasOwnProperty(eventKey)) {
@@ -284,6 +286,16 @@ export default class KompElement extends HTMLElement {
                 }
             })
         })
+        scanPrototypesFor(this.constructor, 'events').filter(x => x).reverse().forEach(events => {
+            events.forEach(event => {
+                const prefixed = 'komp:' + event
+                const eventKey = "on" + event[0].toUpperCase() + event.slice(1)
+                if (attrs.hasOwnProperty(eventKey)) {
+                    this.addEventListener(prefixed, attrs[eventKey])
+                    delete htmlAttrs[eventKey]
+                }
+            })
+        })
 
         Object.keys(htmlAttrs).forEach(key => {
             if (htmlAttrs[key] == undefined) delete htmlAttrs[key]
@@ -370,7 +382,7 @@ export default class KompElement extends HTMLElement {
     changed(attribute, was, now){}
     attributeChangedCallback(attribute, ...args) {
         if (this[attribute+"Changed"]) { this[attribute+"Changed"](...args) }
-        this.trigger(attribute+"Changed", {
+        this.trigger('komp:' + attribute+"Changed", {
             detail: args
         })
         return this.changed(attribute, ...args)

lib/komps/floater.js

@@ -273,7 +273,7 @@ export default class Floater extends KompElement {
                 window.activeTooltips[this.scope] = this
             }
             this.container.append(this)
-            this.trigger('shown')
+            this.trigger('komp:shown')
         }
         return this;
     }
@@ -298,7 +298,7 @@ export default class Floater extends KompElement {
         if (this.parentElement) {
             return this._removing = this.remove().then(() => {
                 this.showing = false
-                this.trigger('hidden')
+                this.trigger('komp:hidden')
                 if (this.onHide) this.onHide()
                 delete this._hideTimeout;
                 delete this._removing;

lib/komps/resizer.js

@@ -209,7 +209,7 @@ export default class Resizer extends KompElement {
         window.addEventListener('mousemove', mousemove)
         window.addEventListener('mouseup', () => {
             this.onResize(this)
-            this.trigger('resize')
+            this.trigger('komp:resize')
             window.removeEventListener('mousemove', mousemove)
             // Resume observing target
             Resizer.observe(this)

lib/komps/search-field.js

@@ -118,14 +118,14 @@ export default class SearchField extends KompElement {
     }
 
     buttonResult (button, e) {
-        this.trigger('select', { detail: [button?.result, this.query, e] });
+        this.trigger('komp:select', { detail: [button?.result, this.query, e] });
         return button.result
     }
 
     /* ACTIONS */
     async _search (query) {
         if (query.length === 0) return;
-        this.trigger('search', { detail: [query] });
+        this.trigger('komp:search', { detail: [query] });
         if (this.loader) {
             content(this.resultsList, result(this, 'loader', query))
             this.showResults();

lib/komps/select.js

@@ -53,7 +53,7 @@ export default class Select extends KompElement {
         this.dropdown.querySelector('.-active')?.classList?.remove('-active')
         const current = Array.from(this.dropdown.querySelectorAll('button')).find(b => b.value == v)
         current?.classList?.add('-active')
-        this.trigger('change')
+        this.trigger('komp:change')
     }
 
     connected () {
@@ -69,11 +69,11 @@ export default class Select extends KompElement {
             placement: 'bottom-start',
             content: this.renderOptions()
         })
-        this.dropdown.addEventListener('shown', () => {
+        this.dropdown.addEventListener('komp:shown', () => {
             this.toggleAttribute('open', this.dropdown.showing)
             this.dropdown.style.minWidth = this.offsetWidth + "px"
         })
-        this.dropdown.addEventListener('hidden', () => {
+        this.dropdown.addEventListener('komp:hidden', () => {
             this.toggleAttribute('open', this.dropdown.showing)
         })
 

lib/komps/spreadsheet.js

@@ -415,7 +415,7 @@ export default class Spreadsheet extends Table {
                         if (cell.column.constructor.pasteAccepts.some(x => "text/plain".match(new RegExp(x)))) {
                             await cell.paste(data)
                         } else {
-                            this.trigger('invalidPaste', {
+                            this.trigger('komp:invalidPaste', {
                                 detail: data
                             })
                         }
@@ -425,7 +425,7 @@ export default class Spreadsheet extends Table {
                             if (cell.column.constructor.pasteAccepts.some(x => file.type.match(new RegExp(x)))) {
                                 files.push(file)
                             } else {
-                                this.trigger('invalidPaste', {
+                                this.trigger('komp:invalidPaste', {
                                     detail: data
                                 })
                             }

lib/komps/spreadsheet/cell.js

@@ -130,7 +130,7 @@ export default class SpreadsheetCell extends TableCell {
         if (inputFloater === undefined || inputFloater === null || inputFloater === false) { return }
 
         this.tabIndex = -1
-        inputFloater.addEventListener('hidden', () => {
+        inputFloater.addEventListener('komp:hidden', () => {
             this.tabIndex = 0
             this.render()
         })

lib/komps/spreadsheet/columns/select-column.js

@@ -24,7 +24,7 @@ export default class SelectColumn extends Column {
             select.dropdown.show()
             select.button.focus()
         })
-        select.addEventListener('change', () => {
+        select.addEventListener('komp:change', () => {
             select.dropdown.hide()
         })
         return select

lib/komps/table.js

@@ -172,7 +172,7 @@ export default class Table extends KompElement {
         await append(this, await this.renderRows())
         this.renderFrozenDivider()
         this.setTemplateRows()
-        this.trigger('afterRender')
+        this.trigger('komp:afterRender')
     }
 
     renderFrozenDivider () {

lib/komps/table/column.js

@@ -177,7 +177,7 @@ export default class TableColumn {
 
     headerChanged (was, now) {
         if (this._is_initialized) {
-            this.table.trigger('headerChanged', {
+            this.table.trigger('komp:headerChanged', {
                 detail: this
             })
         }
@@ -242,7 +242,7 @@ export default class TableColumn {
         this.cells.forEach(cell => cell.remove())
         this.cells.clear()
         if (options.silent != true) {
-            this.table.trigger('columnRemoved', {
+            this.table.trigger('komp:columnRemoved', {
                 detail: this
             })
         }

lib/komps/table/plugins/reorderable.js

@@ -252,7 +252,7 @@ export default function (proto) {
                     await this.appendRow(indexNew, ...slices)
                 }
 
-                this.trigger(`${direction.toLowerCase()}Reorder`, {
+                this.trigger(`komp:${direction.toLowerCase()}Reorder`, {
                     detail: {
                         fromIndex: indexStart - 1,
                         toIndex: indexNew - 1

lib/komps/table/plugins/resizable.js

@@ -203,7 +203,7 @@ export default function (proto) {
                 slice[inlineDimension.toLowerCase()] = delta + "px"
             })
 
-            this.trigger(`${direction.toLowerCase()}Resize`, {
+            this.trigger(`komp:${direction.toLowerCase()}Resize`, {
                 detail: {[sliceType]: slices}
             })