diff --git a/components.js b/components.js index 58005ac..6351d6e 100644 --- a/components.js +++ b/components.js @@ -76,6 +76,7 @@ smButton.innerHTML = ` overflow: hidden; border: none; color: inherit; + align-items: center; } :host(:not([disabled])) .button:focus-visible{ -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color); @@ -370,24 +371,32 @@ input{ `; customElements.define('sm-input', class extends HTMLElement { - + constructor() { super() this.attachShadow({ mode: 'open' }).append(smInput.content.cloneNode(true)) + + this.inputParent = this.shadowRoot.querySelector('.input') + this.input = this.shadowRoot.querySelector('input') + this.clearBtn = this.shadowRoot.querySelector('.clear') + this.label = this.shadowRoot.querySelector('.label') + this.feedbackText = this.shadowRoot.querySelector('.feedback-text') + this.validationFunction + this.observeList = ['type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'] } static get observedAttributes() { - return ['placeholder'] + return ['placeholder', 'type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'] } get value() { - return this.shadowRoot.querySelector('input').value + return this.input.value } set value(val) { - this.shadowRoot.querySelector('input').value = val; + this.input.value = val; this.checkInput() this.fireEvent() } @@ -404,29 +413,42 @@ customElements.define('sm-input', return this.getAttribute('type') } + set type(val) { + this.setAttribute('type', val) + } + get isValid() { - return this.shadowRoot.querySelector('input').checkValidity() + if (this.hasAttribute('data-flo-id') || this.hasAttribute('data-private-key')) { + return this.validationFunction(this.input.value) + } + else { + return this.input.checkValidity() + } } get validity() { - return this.shadowRoot.querySelector('input').validity + return this.input.validity } set disabled(value) { if (value) - this.shadowRoot.querySelector('.input').classList.add('disabled') + this.inputParent.classList.add('disabled') else - this.shadowRoot.querySelector('.input').classList.remove('disabled') + this.inputParent.classList.remove('disabled') } set readOnly(value) { if (value) { - this.shadowRoot.querySelector('input').setAttribute('readonly', '') - this.shadowRoot.querySelector('.input').classList.add('readonly') + this.setAttribute('readonly', '') } else { - this.shadowRoot.querySelector('input').removeAttribute('readonly') - this.shadowRoot.querySelector('.input').classList.remove('readonly') + this.removeAttribute('readonly') } } + set customValidation(val) { + this.validationFunction = val + } + reset = () => { + this.value = '' + } setValidity = (message) => { this.feedbackText.textContent = message @@ -435,7 +457,7 @@ customElements.define('sm-input', showValidity = () => { this.feedbackText.classList.remove('hide-completely') } - + hideValidity = () => { this.feedbackText.classList.add('hide-completely') } @@ -458,7 +480,7 @@ customElements.define('sm-input', } checkInput = (e) => { - if (!this.readonly) { + if (!this.hasAttribute('readonly')) { if (this.input.value !== '') { this.clearBtn.classList.remove('hide') } else { @@ -481,83 +503,58 @@ customElements.define('sm-input', connectedCallback() { - this.inputParent = this.shadowRoot.querySelector('.input') - this.clearBtn = this.shadowRoot.querySelector('.clear') - this.label = this.shadowRoot.querySelector('.label') - this.feedbackText = this.shadowRoot.querySelector('.feedback-text') - this.valueChanged = false; - this.readonly = false - this.isNumeric = false - this.min - this.max this.animate = this.hasAttribute('animate') - this.input = this.shadowRoot.querySelector('input') - this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder') if (this.hasAttribute('value')) { this.input.value = this.getAttribute('value') this.checkInput() } - if (this.hasAttribute('required')) { - this.input.setAttribute('required', '') - } - if (this.hasAttribute('min')) { - let minValue = this.getAttribute('min') - this.input.setAttribute('min', minValue) - this.min = parseInt(minValue) - } - if (this.hasAttribute('max')) { - let maxValue = this.getAttribute('max') - this.input.setAttribute('max', maxValue) - this.max = parseInt(maxValue) - } - if (this.hasAttribute('minlength')) { - const minValue = this.getAttribute('minlength') - this.input.setAttribute('minlength', minValue) - } - if (this.hasAttribute('maxlength')) { - const maxValue = this.getAttribute('maxlength') - this.input.setAttribute('maxlength', maxValue) - } - if (this.hasAttribute('step')) { - const steps = this.getAttribute('step') - this.input.setAttribute('step', steps) - } - if (this.hasAttribute('pattern')) { - this.input.setAttribute('pattern', this.getAttribute('pattern')) - } - if (this.hasAttribute('readonly')) { - this.input.setAttribute('readonly', '') - this.readonly = true - } - if (this.hasAttribute('disabled')) { - this.inputParent.classList.add('disabled') - } if (this.hasAttribute('error-text')) { this.feedbackText.textContent = this.getAttribute('error-text') } - if (this.hasAttribute('type')) { - if (this.getAttribute('type') === 'number') { - this.input.setAttribute('inputmode', 'numeric') - this.input.setAttribute('type', 'number') - this.isNumeric = true - } else - this.input.setAttribute('type', this.getAttribute('type')) - } else - this.input.setAttribute('type', 'text') + if (!this.hasAttribute('type')) { + this.setAttribute('type', 'text') + } + this.input.addEventListener('input', e => { this.checkInput(e) }) - this.clearBtn.addEventListener('click', e => { - this.value = '' - }) + this.clearBtn.addEventListener('click', this.reset) } attributeChangedCallback(name, oldValue, newValue) { if (oldValue !== newValue) { + if (this.observeList.includes(name)) { + if (this.hasAttribute(name)) { + this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '') + } + else { + this.input.removeAttribute(name) + } + } if (name === 'placeholder') { - this.shadowRoot.querySelector('.label').textContent = newValue; + this.label.textContent = newValue; this.setAttribute('aria-label', newValue); } + else if (name === 'type') { + if (this.hasAttribute('type') && this.getAttribute('type') === 'number') { + this.input.setAttribute('inputmode', 'numeric') + } + } + else if (name === 'readonly') { + if (this.hasAttribute('readonly')) { + this.inputParent.classList.add('readonly') + } else { + this.inputParent.classList.remove('readonly') + } + } + else if (name === 'disabled') { + if (this.hasAttribute('disabled')) { + this.inputParent.classList.add('disabled') + } + else { + this.inputParent.classList.remove('disabled') + } + } } } }) @@ -582,7 +579,7 @@ smTextarea.innerHTML = ` } :host{ display: grid; - --border-radius: 0.3s; + --border-radius: 0.3rem; --background: rgba(var(--text-color), 0.06); --padding-right: initial; --padding-left: initial; @@ -652,6 +649,20 @@ textarea{ pointer-events: none; user-select: none; } +@media (any-hover: hover){ + ::-webkit-scrollbar{ + width: 0.5rem; + height: 0.5rem; + } + + ::-webkit-scrollbar-thumb{ + background: rgba(var(--text-color), 0.3); + border-radius: 1rem; + &:hover{ + background: rgba(var(--text-color), 0.5); + } + } +}