bug fixes
This commit is contained in:
sairaj mote
parent
29ded53d52
commit
b931f42137
7
components/dist/form.js
vendored
7
components/dist/form.js
vendored
@ -34,6 +34,7 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
this.submitButton
|
||||
this.resetButton
|
||||
this.invalidFields = false;
|
||||
this.mutationObserver
|
||||
|
||||
this.debounce = this.debounce.bind(this)
|
||||
this._checkValidity = this._checkValidity.bind(this)
|
||||
@ -87,18 +88,18 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
this.shadowRoot.querySelector('slot').addEventListener('slotchange', this.elementsChanged)
|
||||
this.addEventListener('input', this.debounce(this._checkValidity, 100));
|
||||
this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
|
||||
const mutationObserver = new MutationObserver(mutations => {
|
||||
this.mutationObserver = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.type === 'childList') {
|
||||
this.elementsChanged()
|
||||
}
|
||||
})
|
||||
})
|
||||
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));
|
||||
mutationObserver.disconnect()
|
||||
this.mutationObserver.disconnect()
|
||||
}
|
||||
})
|
||||
2
components/dist/form.min.js
vendored
2
components/dist/form.min.js
vendored
@ -1 +1 @@
|
||||
const smForm=document.createElement("template");smForm.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n display: grid;\n width: 100%;\n }\n form{\n display: inherit;\n gap: var(--gap, 1.5rem);\n width: 100%;\n }\n </style>\n <form part="form" onsubmit="return false">\n <slot></slot>\n </form>\n ',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.formElements,this.requiredElements,this.submitButton,this.resetButton,this.invalidFields=!1,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(e,t){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{e.apply(null,s)},t)}}_checkValidity(){this.submitButton&&(this.invalidFields=this.requiredElements.filter(e=>!e.isValid),this.submitButton.disabled=this.invalidFields.length)}handleKeydown(e){"Enter"===e.key&&e.target.tagName.includes("SM-INPUT")&&(this.invalidFields.length?this.requiredElements.forEach(e=>{e.isValid||e.vibrate()}):(this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))))}reset(){this.formElements.forEach(e=>e.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],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(){this.shadowRoot.querySelector("slot").addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100));const e=new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&this.elementsChanged()})});e.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),mutationObserver.disconnect()}});
|
||||
const smForm=document.createElement("template");smForm.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n display: grid;\n width: 100%;\n }\n form{\n display: inherit;\n gap: var(--gap, 1.5rem);\n width: 100%;\n }\n </style>\n <form part="form" onsubmit="return false">\n <slot></slot>\n </form>\n ',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.formElements,this.requiredElements,this.submitButton,this.resetButton,this.invalidFields=!1,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)}debounce(t,e){let i=null;return(...s)=>{window.clearTimeout(i),i=window.setTimeout(()=>{t.apply(null,s)},e)}}_checkValidity(){this.submitButton&&(this.invalidFields=this.requiredElements.filter(t=>!t.isValid),this.submitButton.disabled=this.invalidFields.length)}handleKeydown(t){"Enter"===t.key&&t.target.tagName.includes("SM-INPUT")&&(this.invalidFields.length?this.requiredElements.forEach(t=>{t.isValid||t.vibrate()}):(this.submitButton&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))))}reset(){this.formElements.forEach(t=>t.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],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(){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(t=>{t.forEach(t=>{"childList"===t.type&&this.elementsChanged()})}),this.mutationObserver.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100)),this.mutationObserver.disconnect()}});
|
||||
19
components/dist/select.js
vendored
19
components/dist/select.js
vendored
@ -144,7 +144,6 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
|
||||
this.availableOptions
|
||||
this.previousOption
|
||||
this._value = undefined;
|
||||
this.isOpen = false;
|
||||
this.label = ''
|
||||
this.slideDown = [{
|
||||
@ -182,7 +181,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
return this.getAttribute('value')
|
||||
}
|
||||
set value(val) {
|
||||
const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
|
||||
const selectedOption = this.shadowRoot.querySelector('slot').assignedElements().find(option => option.getAttribute('value') === val)
|
||||
if (selectedOption) {
|
||||
this.setAttribute('value', val)
|
||||
this.selectOption(selectedOption)
|
||||
@ -201,12 +200,8 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
}
|
||||
selectOption(selectedOption) {
|
||||
if (this.previousOption) {
|
||||
this.previousOption.classList.remove('check-selected')
|
||||
this.previousOption.removeAttribute('selected')
|
||||
}
|
||||
if (this.previousOption !== selectedOption) {
|
||||
selectedOption.classList.add('check-selected')
|
||||
this.querySelectorAll('[selected]').forEach(option => option.removeAttribute('selected'))
|
||||
selectedOption.setAttribute('selected', '')
|
||||
this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
|
||||
this.previousOption = selectedOption
|
||||
@ -316,11 +311,6 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
let slot = this.shadowRoot.querySelector('slot')
|
||||
slot.addEventListener('slotchange', e => {
|
||||
this.availableOptions = slot.assignedElements()
|
||||
this.availableOptions.forEach(elem => {
|
||||
if (elem.hasAttribute('selected')) {
|
||||
this._value = elem.value;
|
||||
}
|
||||
});
|
||||
this.reset(false)
|
||||
});
|
||||
this.addEventListener('click', this.handleClick)
|
||||
@ -328,6 +318,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
document.addEventListener('mousedown', this.handleClickOutside)
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('click', this.handleClick)
|
||||
this.removeEventListener('click', this.toggle)
|
||||
this.removeEventListener('keydown', this.handleKeydown)
|
||||
document.removeEventListener('mousedown', this.handleClickOutside)
|
||||
@ -387,14 +378,14 @@ smOption.innerHTML = `
|
||||
:host(:focus) .option .icon{
|
||||
opacity: 0.4
|
||||
}
|
||||
:host(.check-selected) .icon{
|
||||
:host([selected]) .icon{
|
||||
opacity: 1
|
||||
}
|
||||
@media (hover: hover){
|
||||
.option:hover{
|
||||
background: rgba(var(--text-color,(17,17,17)), 0.1);
|
||||
}
|
||||
:host(:not(.check-selected):hover) .icon{
|
||||
:host(:not([selected]):hover) .icon{
|
||||
opacity: 0.4
|
||||
}
|
||||
}
|
||||
|
||||
2
components/dist/select.min.js
vendored
2
components/dist/select.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user