From 6e0baad15510b5f23d9bce34d1a0c5e85e8d13f3 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 23 Feb 2021 19:48:41 +0530 Subject: [PATCH] v0.32.90 UX-improvement: pin input will replace digits already entered if user re-enters the digit refactor: Components --- scripts/components.js | 121 +++++++++++++++++++++++++++--------------- 1 file changed, 78 insertions(+), 43 deletions(-) diff --git a/scripts/components.js b/scripts/components.js index ea5e87f..086ad03 100644 --- a/scripts/components.js +++ b/scripts/components.js @@ -197,6 +197,7 @@ border: none; display: flex; --border-radius: 0.3rem; --padding: 0.7rem 1rem; + --background: rgba(var(--text-color), 0.06); } .hide{ opacity: 0 !important; @@ -239,7 +240,7 @@ border: none; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; - background: rgba(var(--text-color), 0.06); + background: var(--background); width: 100%; outline: none; } @@ -658,12 +659,13 @@ customElements.define('sm-textarea', this.attachShadow({ mode: 'open' }).append(smTextarea.content.cloneNode(true)) + this.textarea = this.shadowRoot.querySelector('textarea') } get value() { - return this.shadowRoot.querySelector('textarea').value + return this.textarea.value } set value(val) { - this.shadowRoot.querySelector('textarea').value = val; + this.textarea.value = val; this.textareaBox.dataset.value = val this.checkInput() this.fireEvent() @@ -679,7 +681,7 @@ customElements.define('sm-textarea', }); this.dispatchEvent(event); } - checkInput() { + checkInput = () => { if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return; if (this.textarea.value !== '') { @@ -691,7 +693,6 @@ customElements.define('sm-textarea', connectedCallback() { this.textareaBox = this.shadowRoot.querySelector('.textarea') this.placeholder = this.shadowRoot.querySelector('.placeholder') - this.textarea = this.shadowRoot.querySelector('textarea') if(this.hasAttribute('placeholder')) this.placeholder.textContent = this.getAttribute('placeholder') @@ -706,6 +707,9 @@ customElements.define('sm-textarea', if (this.hasAttribute('readonly')) { this.textarea.setAttribute('readonly', '') } + if (this.hasAttribute('rows')) { + this.textarea.setAttribute('rows', this.getAttribute('rows')) + } this.textarea.addEventListener('input', e => { this.textareaBox.dataset.value = this.textarea.value this.checkInput() @@ -793,6 +797,10 @@ smCheckbox.innerHTML = ` display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; + --height: 1.6rem; + --width: 1.6rem; + --border-radius: 0.2rem; + --border-color: rgba(var(--text-color), 0.7); } .checkbox { position: relative; @@ -808,13 +816,9 @@ smCheckbox.innerHTML = ` -webkit-tap-highlight-color: transparent; } - p{ - margin-left: 2rem; - } - .checkbox:active .icon, - .checkbox:focus .icon{ - background: rgba(var(--text-color), 0.2); + .checkbox:focus-within .icon{ + box-shadow: 0 0 0 0.3rem var(--accent-color) inset; } .checkbox input { @@ -833,28 +837,29 @@ smCheckbox.innerHTML = ` stroke-dashoffset: 0; stroke: rgba(var(--foreground-color), 1); } - .checkbox input:checked ~ svg { - stroke: var(--accent-color); - fill: var(--accent-color); + .checkbox input:checked ~ .icon { stroke-width: 8; + stroke: var(--accent-color); + background: var(--accent-color); + } + .checkbox input:not(:checked) ~ .icon { + box-shadow: 0 0 0 0.2rem var(--border-color) inset; } .icon { - position: absolute; fill: none; - height: 2.6rem; - width: 2.6rem; - padding: 0.7rem; + height: var(--height); + width: var(--width); + padding: 0.2rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 6; overflow: visible; stroke-linecap: round; stroke-linejoin: round; - border-radius: 2rem; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; - left: -0.5rem; + border-radius: var(--border-radius); } .disabled { opacity: 0.6; @@ -865,10 +870,9 @@ smCheckbox.innerHTML = ` checkbox - -

+ ` customElements.define('sm-checkbox', class extends HTMLElement { constructor() { @@ -897,11 +901,16 @@ customElements.define('sm-checkbox', class extends HTMLElement { } get checked() { - return this.getAttribute('checked') + return this.isChecked } set checked(value) { - this.setAttribute('checked', value) + if (value) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } } set value(val) { @@ -913,21 +922,37 @@ customElements.define('sm-checkbox', class extends HTMLElement { return getAttribute('value') } - dispatch() { + dispatch = () => { this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true })) } - + handleKeyup = e => { + if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { + if (this.hasAttribute('checked')) { + this.input.checked = false + this.removeAttribute('checked') + } + else { + this.input.checked = true + this.setAttribute('checked', '') + } + } + } + handleChange = e => { + if (this.input.checked) { + this.setAttribute('checked', '') + } + else { + this.removeAttribute('checked') + } + } + connectedCallback() { this.val = '' - this.addEventListener('keyup', e => { - if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) { - this.isChecked = !this.isChecked - this.setAttribute('checked', this.isChecked) - } - }) + this.addEventListener('keyup', this.handleKeyup) + this.input.addEventListener('change', this.handleChange) } attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) { @@ -940,20 +965,23 @@ customElements.define('sm-checkbox', class extends HTMLElement { this.isDisabled = false } } - if (name === 'checked') { - if (newValue == 'true') { + else if (name === 'checked') { + if (this.hasAttribute('checked')) { this.isChecked = true this.input.checked = true - this.dispatch() - } else { - this.isChecked = false - this.input.checked = false - this.dispatch() } + else { + this.input.checked = false + this.isChecked = false + } + this.dispatch() } } } - + disconnectedCallback() { + this.removeEventListener('keyup', this.handleKeyup) + this.removeEventListener('change', this.handleChange) + } }) //switch @@ -3723,6 +3751,10 @@ customElements.define('text-field', class extends HTMLElement{ connectedCallback(){ this.text + if (this.hasAttribute('value')) { + this.text = this.getAttribute('value') + this.textContainer.textContent = this.text + } if(this.hasAttribute('disable')) this.isDisabled = true else @@ -4053,12 +4085,15 @@ customElements.define('pin-input', } handleKeydown = (e) => { - const activeInput = e.target.closest('input') + const activeInput = e.target.closest('input') if (/[0-9]/.test(e.key)) { - if (activeInput.value.trim().length > 2) { - e.preventDefault(); + if (activeInput.value.trim().length > 2) { + e.preventDefault(); } else { + if (activeInput.value.trim().length === 1) { + activeInput.value = e.key + } if (activeInput.nextElementSibling) { setTimeout(() => { activeInput.nextElementSibling.focus();