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

functional improvements and bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-10-22 02:29:38 +05:30
parent e47bb90750
commit 73f1911761
6 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/dist/input.js vendored
View File

@ -272,6 +272,8 @@ customElements.define('sm-input',
this.handleOptionClick = this.handleOptionClick.bind(this);
this.handleInputNavigation = this.handleInputNavigation.bind(this);
this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this);
this.handleFocus = this.handleFocus.bind(this);
this.handleBlur = this.handleBlur.bind(this);
}
static get observedAttributes() {
@ -504,6 +506,16 @@ customElements.define('sm-input',
this.input.focus();
}
}
handleFocus(e) {
if (this.datalist.length) {
this.searchDatalist(this.input.value.trim());
}
}
handleBlur(e) {
if (this.datalist.length) {
this.optionList.classList.add('hidden');
}
}
connectedCallback() {
this.animate = this.hasAttribute('animate');
@ -515,6 +527,8 @@ customElements.define('sm-input',
this.input.addEventListener('keydown', this.handleInputNavigation);
this.optionList.addEventListener('keydown', this.handleDatalistNavigation);
}
this.input.addEventListener('focusin', this.handleFocus);
this.input.addEventListener('focusout', this.handleBlur);
}
attributeChangedCallback(name, oldValue, newValue) {
@ -579,5 +593,7 @@ customElements.define('sm-input',
this.optionList.removeEventListener('click', this.handleOptionClick);
this.input.removeEventListener('keydown', this.handleInputNavigation);
this.optionList.removeEventListener('keydown', this.handleDatalistNavigation);
this.input.removeEventListener('focusin', this.handleFocus);
this.input.removeEventListener('focusout', this.handleBlur);
}
})

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

File diff suppressed because one or more lines are too long

4
components/dist/select.js vendored
View File

@ -162,6 +162,7 @@ customElements.define('sm-select', class extends HTMLElement {
this.previousOption
this.isOpen = false;
this.label = ''
this.defaultSelected = ''
this.isUnderViewport = false
this.animationOptions = {
duration: 300,
@ -200,7 +201,7 @@ customElements.define('sm-select', class extends HTMLElement {
reset(fire = true) {
if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
const selectedOption = this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0];
const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === this.defaultSelected) || this.availableOptions[0];
this.value = selectedOption.getAttribute('value')
if (fire) {
this.fireEvent()
@ -349,6 +350,7 @@ customElements.define('sm-select', class extends HTMLElement {
slot.addEventListener('slotchange', this.debounce(e => {
this.availableOptions = slot.assignedElements()
this.reset(false)
this.defaultSelected = this.value
}, 100));
new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {

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

File diff suppressed because one or more lines are too long

1
components/dist/textarea.js vendored
View File

@ -57,7 +57,6 @@ smTextarea.innerHTML = `
border: none;
outline: none;
line-height: 1.5;
overflow: hidden;
}
.textarea::after{
content: attr(data-value) ' ';

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

@ -1 +1 @@
const smTextarea=document.createElement("template");smTextarea.innerHTML='\n <style>\n *,\n *::before,\n *::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n ::-moz-focus-inner{\n border: none;\n }\n .hide{\n opacity: 0 !important;\n }\n :host{\n display: grid;\n --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color,(17,17,17)), 0.06);\n --padding: initial;\n --max-height: 8rem;\n }\n :host([variant="outlined"]) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;\n background: rgba(var(--background-color,(255,255,255)), 1);\n }\n .textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding: var(--padding);\n transition: opacity 0.3s, box-shadow 0.2s;\n }\n .textarea::after,\n textarea{\n padding: var(--padding,0.6rem 0.8rem);\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n overflow: hidden;\n }\n .textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n }\n .readonly{\n pointer-events: none;\n }\n .textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n }\n .placeholder{\n position: absolute;\n margin: var(--padding,0.6rem 0.8rem);\n opacity: .7;\n font-weight: inherit;\n font-size: inherit;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n }\n :host([disabled]) .textarea{\n cursor: not-allowed;\n opacity: 0.6;\n }\n @media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color,(17,17,17)), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color,(17,17,17)), 0.5);\n }\n }\n }\n </style>\n <label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n </label>\n ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
const smTextarea=document.createElement("template");smTextarea.innerHTML='\n <style>\n *,\n *::before,\n *::after { \n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n ::-moz-focus-inner{\n border: none;\n }\n .hide{\n opacity: 0 !important;\n }\n :host{\n display: grid;\n --danger-color: red;\n --border-radius: 0.3rem;\n --background: rgba(var(--text-color,(17,17,17)), 0.06);\n --padding: initial;\n --max-height: 8rem;\n }\n :host([variant="outlined"]) .textarea {\n box-shadow: 0 0 0 0.1rem rgba(var(--text-color,(17,17,17)), 0.4) inset;\n background: rgba(var(--background-color,(255,255,255)), 1);\n }\n .textarea{\n display: grid;\n position: relative;\n cursor: text;\n min-width: 0;\n text-align: left;\n overflow: hidden auto;\n grid-template-columns: 1fr;\n align-items: stretch;\n max-height: var(--max-height);\n background: var(--background);\n border-radius: var(--border-radius);\n padding: var(--padding);\n transition: opacity 0.3s, box-shadow 0.2s;\n }\n .textarea::after,\n textarea{\n padding: var(--padding,0.6rem 0.8rem);\n width: 100%;\n min-width: 1em;\n font: inherit;\n color: inherit;\n resize: none;\n grid-area: 2/1;\n justify-self: stretch;\n background: none;\n appearance: none;\n border: none;\n outline: none;\n line-height: 1.5;\n }\n .textarea::after{\n content: attr(data-value) \' \';\n visibility: hidden;\n white-space: pre-wrap;\n overflow-wrap: break-word;\n word-wrap: break-word;\n hyphens: auto;\n }\n .readonly{\n pointer-events: none;\n }\n .textarea:focus-within:not(.readonly){\n box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n }\n .placeholder{\n position: absolute;\n margin: var(--padding,0.6rem 0.8rem);\n opacity: .7;\n font-weight: inherit;\n font-size: inherit;\n line-height: 1.5;\n pointer-events: none;\n user-select: none;\n }\n :host([disabled]) .textarea{\n cursor: not-allowed;\n opacity: 0.6;\n }\n @media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n height: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color,(17,17,17)), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color,(17,17,17)), 0.5);\n }\n }\n }\n </style>\n <label class="textarea" part="textarea">\n <span class="placeholder"></span>\n <textarea rows="1"></textarea>\n </label>\n ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});