code refactoring

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.debounce = this.debounce.bind(this)
+		this.handleKeydown = this.handleKeydown.bind(this);
-		this._checkValidity = this._checkValidity.bind(this)
+		this.reset = this.reset.bind(this);
-		this.handleKeydown = this.handleKeydown.bind(this)
+		this.elementsChanged = this.elementsChanged.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()
+						if (isWC) elem.focusIn();
-						else elem.focus()
+						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();
 	}
-})
+});