diff --git a/wc/WComponent.js b/wc/WComponent.js index 6022c60..b429d0a 100644 --- a/wc/WComponent.js +++ b/wc/WComponent.js @@ -19,7 +19,8 @@ class WComponent extends HTMLElement{ this.attachShadow({ mode: 'open' }); this.setStylesheet(this.stylesheet); this.init(); - this.componentDidInit(); + //this.tabIndex = '0'; // Make component focusable + this.key = new Date().getTime() + Math.random(); } /** * Call update method in attribute changed callback if attribute name is acceptable @@ -29,9 +30,6 @@ class WComponent extends HTMLElement{ this.update({name, oldValue, newValue}); } } - componentDidInit() { - //this.tabIndex = '0'; // Make component focusable - } update(){} /** * Dynamically create getters & setters for property-attribute sync @@ -55,6 +53,9 @@ class WComponent extends HTMLElement{ }); }); } + equals(component) { + return this.key === component.key; + } getAttributeParserByName(name) { if(typeof name !== 'string') { return undefined; diff --git a/wc/components/Form.js b/wc/components/Form.js index dff7f48..970b354 100644 --- a/wc/components/Form.js +++ b/wc/components/Form.js @@ -123,11 +123,11 @@ class Form extends WComponent{ if(typeof radio.name !== 'string' || radio.disabled) { return; } const radios = Array.from(this.querySelectorAll(`w-radio[name='${radio.name}']`)); - // radios.forEach(r => { - // if(!r.equals(radio)) { - // r.checked = false; - // } - // }); + radios.forEach(r => { + if(!r.equals(radio)) { + r.checked = false; + } + }); } submitHandler = e => { this.dispatchEvent(this.events.submit); diff --git a/wc/components/checkable/Checkable.js b/wc/components/checkable/Checkable.js index ee983ed..50429ec 100644 --- a/wc/components/checkable/Checkable.js +++ b/wc/components/checkable/Checkable.js @@ -78,23 +78,6 @@ class Checkable extends WComponent{ super(); } - update({ name, oldValue, newValue } = {}) { - if(name === this.constructor.attributes.checked.name - || name === this.constructor.attributes.disabled.name) { - const input = this.shadowRoot.querySelector('input'); - const value = this.getAttributeParserByName(name)(newValue, this.constructor.attributes[name]); - if(value) { - input.setAttribute(name, value); - } else { - input.removeAttribute(name); - } - - // Trigger change event - if(name === this.constructor.attributes.checked.name && oldValue !== newValue) { - this.dispatchEvent(this.events.change); - } - } - } bindEvents() { this.events = { change: new Event('change'), @@ -117,6 +100,19 @@ class Checkable extends WComponent{ DOM.create('slot', {}, ctn); } + update({ name, newValue } = {}) { + const checkedAttr = this.constructor.attributes.checked; + const disabledAttr = this.constructor.attributes.disabled; + if(name === checkedAttr.name || name === disabledAttr.name) { + const input = this.shadowRoot.querySelector('input'); + const value = this.getAttributeParserByName(name)(newValue, this.constructor.attributes[name]); + if(value) { + input.setAttribute(name, value); + } else { + input.removeAttribute(name); + } + } + } } Checkable.prototype.stylesheet=stylesheet; diff --git a/wc/components/checkable/Checkbox.js b/wc/components/checkable/Checkbox.js index 603b6f4..40cc7ad 100644 --- a/wc/components/checkable/Checkbox.js +++ b/wc/components/checkable/Checkbox.js @@ -17,6 +17,20 @@ class Checkbox extends Checkable{ this.bindEvents(); } + update({ name, oldValue, newValue } = {}) { + super.update({ name, oldValue, newValue }); + + const checkedAttr = this.constructor.attributes.checked; + const disabledAttr = this.constructor.attributes.disabled; + if(name === checkedAttr.name || name === disabledAttr.name) { + + // Trigger change event + if(name === checkedAttr.name && oldValue !== newValue) { + this.dispatchEvent(this.events.change); + } + } + } + clickHandler = e => { this.dispatchEvent(this.events.click); if(!this.disabled) { diff --git a/wc/components/checkable/Radio.js b/wc/components/checkable/Radio.js index be86c30..1c7b36d 100644 --- a/wc/components/checkable/Radio.js +++ b/wc/components/checkable/Radio.js @@ -15,6 +15,20 @@ class Radio extends Checkable{ this.bindEvents(); } + update({ name, oldValue, newValue } = {}) { + super.update({ name, oldValue, newValue }); + + const checkedAttr = this.constructor.attributes.checked; + const disabledAttr = this.constructor.attributes.disabled; + if(name === checkedAttr.name || name === disabledAttr.name) { + + // Trigger change event + if(name === checkedAttr.name && checkedAttr.parser(newValue, checkedAttr)) { + this.dispatchEvent(this.events.change); + } + } + } + clickHandler = e => { this.dispatchEvent(this.events.click); if(!this.disabled && !this.checked) {