RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stopped firing validation even if validation state remains same

Browse Source
This commit is contained in:
sairaj mote 2023-02-15 22:26:53 +05:30
parent f945caa2bb
commit d2b43d4adf
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/dist/form.js vendored
View File

@ -29,7 +29,7 @@ customElements.define('sm-form', class extends HTMLElement {
}).append(smForm.content.cloneNode(true));
this.form = this.shadowRoot.querySelector('form');
this.invalidFields;
this.invalidFieldsCount;
this.skipSubmit = false;
this.isFormValid = false;
this.supportedElements = 'input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio';
@ -57,22 +57,23 @@ customElements.define('sm-form', class extends HTMLElement {
}
_checkValidity() {
if (!this.submitButton || this._requiredElements.length === 0) return;
this.invalidFields = 0
this.invalidFieldsCount = 0
this._requiredElements.forEach(([elem, isWC]) => {
if (isWC && !elem.isValid || !isWC && !elem.checkValidity())
this.invalidFields++;
this.invalidFieldsCount++;
});
this.isFormValid = this.invalidFields === 0;
if (!this.skipSubmit)
this.submitButton.disabled = !this.isFormValid;
if (this.isFormValid === this.invalidFieldsCount === 0) return;
this.dispatchEvent(new CustomEvent(this.isFormValid ? 'valid' : 'invalid', {
bubbles: true,
composed: true,
}));
this.isFormValid = this.invalidFieldsCount === 0;
if (!this.skipSubmit)
this.submitButton.disabled = !this.isFormValid;
}
handleKeydown(e) {
if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) {
if (this.invalidFields === 0) {
if (this.invalidFieldsCount === 0) {
if (this.submitButton) {
this.submitButton.click();
}

2
components/dist/form.min.js vendored
View File

@ -1 +1 @@
const smForm = document.createElement("template"); smForm.innerHTML = ` <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ display: grid; width: 100%; } form{ display: inherit; gap: var(--gap, 1.5rem); width: 100%; } </style> <form part="form" onsubmit="return false"> <slot></slot> </form> `, customElements.define("sm-form", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smForm.content.cloneNode(!0)), this.form = this.shadowRoot.querySelector("form"), this.invalidFields, this.skipSubmit = !1, this.isFormValid = !1, this.supportedElements = "input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio", this._requiredElements = [], 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) } static get observedAttributes() { return ["skip-submit"] } get validity() { return this.isFormValid } debounce(e, t) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout(() => { e.apply(null, s) }, t) } } _checkValidity() { this.submitButton && 0 !== this._requiredElements.length && (this.invalidFields = 0, this._requiredElements.forEach(([e, t]) => { (t && !e.isValid || !t && !e.checkValidity()) && this.invalidFields++ }), this.isFormValid = 0 === this.invalidFields, this.skipSubmit || (this.submitButton.disabled = !this.isFormValid), this.dispatchEvent(new CustomEvent(this.isFormValid ? "valid" : "invalid", { bubbles: !0, composed: !0 }))) } handleKeydown(e) { if ("Enter" === e.key && e.target.tagName.includes("INPUT")) { if (0 === this.invalidFields) this.submitButton && this.submitButton.click(), this.dispatchEvent(new CustomEvent("submit", { bubbles: !0, composed: !0 })); else for (let [t, i] of this._requiredElements) { let s = i ? !t.isValid : !t.checkValidity(); if (s) { (t?.shadowRoot?.lastElementChild || t).animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" },], { duration: 300, easing: "ease" }), i ? t.focusIn() : t.focus(); break } } } } reset() { this.formElements.forEach(([e, t]) => { t ? e.reset() : e.value = "" }) } elementsChanged() { this.formElements = [...this.querySelectorAll(this.supportedElements)].map(e => [e, e.tagName.includes("-")]), this._requiredElements = this.formElements.filter(([e]) => e.hasAttribute("required")), this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'), this.resetButton = this.querySelector('[type="reset"]'), this.resetButton && this.resetButton.addEventListener("click", this.reset), this._checkValidity() } connectedCallback() { let e = this.debounce(this.elementsChanged, 100); this.addEventListener("input", this.debounce(this._checkValidity, 100)), this.addEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.shadowRoot.querySelector("slot").addEventListener("slotchange", e), this.mutationObserver = new MutationObserver(t => { t.forEach(t => { ("childList" === t.type && [...t.addedNodes].some(e => 1 === e.nodeType && e.querySelector(this.supportedElements)) || [...t.removedNodes].some(e => 1 === e.nodeType && e.querySelector(this.supportedElements))) && e() }) }), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }) } attributeChangedCallback(e, t, i) { "skip-submit" === e && (this.skipSubmit = null !== i) } disconnectedCallback() { this.removeEventListener("input", this.debounce(this._checkValidity, 100)), this.removeEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.mutationObserver.disconnect() } });
const smForm = document.createElement("template"); smForm.innerHTML = ` <style> *{ padding: 0; margin: 0; box-sizing: border-box; } :host{ display: grid; width: 100%; } form{ display: inherit; gap: var(--gap, 1.5rem); width: 100%; } </style> <form part="form" onsubmit="return false"> <slot></slot> </form> `, customElements.define("sm-form", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smForm.content.cloneNode(!0)), this.form = this.shadowRoot.querySelector("form"), this.invalidFieldsCount, this.skipSubmit = !1, this.isFormValid = !1, this.supportedElements = "input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio", this._requiredElements = [], 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) } static get observedAttributes() { return ["skip-submit"] } get validity() { return this.isFormValid } debounce(t, e) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout(() => { t.apply(null, s) }, e) } } _checkValidity() { this.submitButton && 0 !== this._requiredElements.length && (this.invalidFieldsCount = 0, this._requiredElements.forEach(([t, e]) => { (e && !t.isValid || !e && !t.checkValidity()) && this.invalidFieldsCount++ }), this.isFormValid, this.invalidFieldsCount, this.dispatchEvent(new CustomEvent(this.isFormValid ? "valid" : "invalid", { bubbles: !0, composed: !0 })), this.isFormValid = 0 === this.invalidFieldsCount, this.skipSubmit || (this.submitButton.disabled = !this.isFormValid)) } handleKeydown(t) { if ("Enter" === t.key && t.target.tagName.includes("INPUT")) { if (0 === this.invalidFieldsCount) this.submitButton && this.submitButton.click(), this.dispatchEvent(new CustomEvent("submit", { bubbles: !0, composed: !0 })); else for (let [e, i] of this._requiredElements) { let s = i ? !e.isValid : !e.checkValidity(); if (s) { (e?.shadowRoot?.lastElementChild || e).animate([{ transform: "translateX(-1rem)" }, { transform: "translateX(1rem)" }, { transform: "translateX(-0.5rem)" }, { transform: "translateX(0.5rem)" }, { transform: "translateX(0)" },], { duration: 300, easing: "ease" }), i ? e.focusIn() : e.focus(); break } } } } reset() { this.formElements.forEach(([t, e]) => { e ? t.reset() : t.value = "" }) } elementsChanged() { this.formElements = [...this.querySelectorAll(this.supportedElements)].map(t => [t, t.tagName.includes("-")]), this._requiredElements = this.formElements.filter(([t]) => t.hasAttribute("required")), this.submitButton = this.querySelector('[variant="primary"], [type="submit"]'), this.resetButton = this.querySelector('[type="reset"]'), this.resetButton && this.resetButton.addEventListener("click", this.reset), this._checkValidity() } connectedCallback() { let t = this.debounce(this.elementsChanged, 100); this.addEventListener("input", this.debounce(this._checkValidity, 100)), this.addEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.shadowRoot.querySelector("slot").addEventListener("slotchange", t), this.mutationObserver = new MutationObserver(e => { e.forEach(e => { ("childList" === e.type && [...e.addedNodes].some(t => 1 === t.nodeType && t.querySelector(this.supportedElements)) || [...e.removedNodes].some(t => 1 === t.nodeType && t.querySelector(this.supportedElements))) && t() }) }), this.mutationObserver.observe(this, { childList: !0, subtree: !0 }) } attributeChangedCallback(t, e, i) { "skip-submit" === t && (this.skipSubmit = null !== i) } disconnectedCallback() { this.removeEventListener("input", this.debounce(this._checkValidity, 100)), this.removeEventListener("keydown", this.debounce(this.handleKeydown, 100)), this.mutationObserver.disconnect() } });

8
main_UI.js
View File

@ -129,15 +129,17 @@ const uiUtils = {
}
};
//Checks for internet connection status
uiGlobals.connectionErrorNotification = []
if (!navigator.onLine)
uiGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
uiGlobals.connectionErrorNotification.push(notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error'))
window.addEventListener('offline', () => {
uiGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
uiGlobals.connectionErrorNotification.push(notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error'))
})
window.addEventListener('online', () => {
getRef('notification_drawer').remove(uiGlobals.connectionErrorNotification)
uiGlobals.connectionErrorNotification.forEach(notification => notification.remove())
notify('We are back online.', 'success')
location.reload()
uiGlobals.connectionErrorNotification = []
})
let zIndex = 50
// function required for popups or modals to appear