diff --git a/components/dist/form.js b/components/dist/form.js index 92852e8..6198101 100644 --- a/components/dist/form.js +++ b/components/dist/form.js @@ -23,23 +23,18 @@ smForm.innerHTML = ` customElements.define('sm-form', class extends HTMLElement { constructor() { - super() + super(); this.attachShadow({ mode: 'open' - }).append(smForm.content.cloneNode(true)) + }).append(smForm.content.cloneNode(true)); this.form = this.shadowRoot.querySelector('form'); - this.formElements - this.submitButton - this.resetButton this.invalidFields = false; - this.mutationObserver - - this.debounce = this.debounce.bind(this) - this._checkValidity = this._checkValidity.bind(this) - this.handleKeydown = this.handleKeydown.bind(this) - this.reset = this.reset.bind(this) - this.elementsChanged = this.elementsChanged.bind(this) + this.debounce = this.debounce.bind(this); + this._checkValidity = this._checkValidity.bind(this); + this.handleKeydown = this.handleKeydown.bind(this); + this.reset = this.reset.bind(this); + this.elementsChanged = this.elementsChanged.bind(this); } debounce(callback, wait) { let timeoutId = null; @@ -52,22 +47,22 @@ customElements.define('sm-form', class extends HTMLElement { } _checkValidity() { if (!this.submitButton) return; - this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity()) + this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity()); this.submitButton.disabled = this.invalidFields.length > 0; } handleKeydown(e) { if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) { if (!this.invalidFields.length) { if (this.submitButton) { - this.submitButton.click() + this.submitButton.click(); } this.dispatchEvent(new CustomEvent('submit', { bubbles: true, composed: true, - })) + })); } else { for (const [elem, isWC] of this._requiredElements) { - const invalid = isWC ? !elem.isValid : !elem.checkValidity() + const invalid = isWC ? !elem.isValid : !elem.checkValidity(); if (invalid) { (elem?.shadowRoot?.lastElementChild || elem).animate([ { transform: 'translateX(-1rem)' }, @@ -79,8 +74,8 @@ customElements.define('sm-form', class extends HTMLElement { duration: 300, easing: 'ease' }); - if (isWC) elem.focusIn() - else elem.focus() + if (isWC) elem.focusIn(); + else elem.focus(); break; } } @@ -88,14 +83,14 @@ customElements.define('sm-form', class extends HTMLElement { } } reset() { - this.formElements.forEach(elem => elem.reset()) + this.formElements.forEach(elem => elem.reset()); } elementsChanged() { this._requiredElements = []; - this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')] + this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]; this.formElements.forEach(elem => { if (elem.hasAttribute('required')) { - this._requiredElements.push([elem, elem.tagName.includes('-')]) + this._requiredElements.push([elem, elem.tagName.includes('-')]); } }); this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'); @@ -103,24 +98,24 @@ customElements.define('sm-form', class extends HTMLElement { if (this.resetButton) { this.resetButton.addEventListener('click', this.reset); } - this._checkValidity() + this._checkValidity(); } connectedCallback() { - this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged) + this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged); this.addEventListener('input', this.debounce(this._checkValidity, 100)); this.addEventListener('keydown', this.debounce(this.handleKeydown, 100)); this.mutationObserver = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList') { - this.elementsChanged() + this.elementsChanged(); } - }) - }) - this.mutationObserver.observe(this, { childList: true, subtree: true }) + }); + }); + this.mutationObserver.observe(this, { childList: true, subtree: true }); } disconnectedCallback() { this.removeEventListener('input', this.debounce(this._checkValidity, 100)); this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100)); - this.mutationObserver.disconnect() + this.mutationObserver.disconnect(); } -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/components/dist/form.min.js b/components/dist/form.min.js index 2a92079..0c3a3f9 100644 Binary files a/components/dist/form.min.js and b/components/dist/form.min.js differ