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

Bug fixes, style and performance improvements

Browse Source
This commit is contained in:
sairaj mote 2023-10-01 05:15:34 +05:30
parent f1f1c137f1
commit 7068afd2b7
2 changed files with 87 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
components/dist/input.js vendored
View File

@ -1,4 +1,3 @@
//Input
const smInput = document.createElement('template') const smInput = document.createElement('template')
smInput.innerHTML = ` smInput.innerHTML = `
<style> <style>
@ -28,8 +27,7 @@ smInput.innerHTML = `
} }
input:invalid{ input:invalid{
outline: none; outline: none;
-webkit-box-shadow: none; box-shadow: none;
box-shadow: none;
} }
::-moz-focus-inner{ ::-moz-focus-inner{
border: none; border: none;
@ -68,12 +66,16 @@ smInput.innerHTML = `
:host(.round) .input{ :host(.round) .input{
border-radius: 10rem; border-radius: 10rem;
} }
.outer-container{
position: relative;
width: var(--width);
}
.input { .input {
display: flex; display: flex;
cursor: text; cursor: text;
min-width: 0; min-width: 0;
text-align: left; text-align: left;
align-items: center; align-items: center;
position: relative; position: relative;
gap: var(--icon-gap); gap: var(--icon-gap);
padding: var(--padding, 0.6rem 0.8rem); padding: var(--padding, 0.6rem 0.8rem);
@ -104,10 +106,8 @@ smInput.innerHTML = `
font-size: inherit; font-size: inherit;
opacity: .7; opacity: .7;
font-weight: 400; font-weight: 400;
transition: -webkit-transform 0.3s;
transition: transform 0.3s; transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s, color .03; transform-origin: left;
transform-origin: left;
pointer-events: none; pointer-events: none;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -116,10 +116,6 @@ smInput.innerHTML = `
user-select: none; user-select: none;
will-change: transform; will-change: transform;
} }
.outer-container{
position: relative;
width: var(--width);
}
.container{ .container{
width: 100%; width: 100%;
display: grid; display: grid;
@ -135,22 +131,17 @@ smInput.innerHTML = `
outline: none; outline: none;
color: inherit; color: inherit;
font-family: inherit; font-family: inherit;
height: 100%;
width: 100%; width: 100%;
caret-color: var(--accent-color, teal); caret-color: var(--accent-color, teal);
font-weight: inherit; font-weight: inherit;
} }
:host([animate]) .input:focus-within .container input,
.animate-placeholder .container input { .animate-placeholder .container input {
-webkit-transform: translateY(0.6rem); transform: translateY(0.6rem);
-ms-transform: translateY(0.6rem); }
transform: translateY(0.6rem);
}
:host([animate]) .input:focus-within .label,
.animate-placeholder .label { .animate-placeholder .label {
-webkit-transform: translateY(-0.7em) scale(0.8); transform: translateY(-0.7em) scale(0.8);
-ms-transform: translateY(-0.7em) scale(0.8);
transform: translateY(-0.7em) scale(0.8);
opacity: 1; opacity: 1;
color: var(--accent-color,teal) color: var(--accent-color,teal)
} }
@ -162,13 +153,28 @@ smInput.innerHTML = `
color: var(--accent-color,teal) color: var(--accent-color,teal)
} }
.feedback-text:not(:empty){ .feedback-text:not(:empty){
position: absolute;
display: flex; display: flex;
width: 100%; width: fit-content;
text-align: left; text-align: left;
font-size: 0.9rem; font-size: 0.9rem;
align-items: center; align-items: center;
padding: 0.8rem 0; padding: 0.8rem;
border-radius: var(--border-radius,0.5rem);
color: rgba(var(--text-color, (17,17,17)), 0.8); color: rgba(var(--text-color, (17,17,17)), 0.8);
background: rgba(var(--foreground-color, (255,255,255)), 1);
margin-top: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.feedback-text:not(:empty)::before{
content: '';
height: 0;
width: 0;
position: absolute;
border: 0.5rem solid transparent;
border-bottom-color: rgba(var(--foreground-color, (255,255,255)), 1);
top: -1rem;
left: 1rem;
} }
.success{ .success{
color: var(--success-color); color: var(--success-color);
@ -223,24 +229,27 @@ smInput.innerHTML = `
} }
</style> </style>
<div class="outer-container"> <div class="outer-container">
<label part="input-wrapper" class="input"> <div part="input-wrapper" class="input">
<slot name="icon"></slot> <slot name="icon"></slot>
<div class="container"> <div class="container">
<label part="placeholder" class="label"></label>
<input part="input" type="text"/> <input part="input" type="text"/>
<div part="placeholder" class="label"></div>
<button class="clear hidden" title="Clear" tabindex="-1">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</button>
</div> </div>
<button class="clear hidden" title="Clear" tabindex="-1">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</button>
<slot name="right"></slot> <slot name="right"></slot>
</label> </div>
<ul class="datalist hidden"></ul> <ul class="datalist hidden"></ul>
<p class="feedback-text"></p> <p class="feedback-text"></p>
</div> </div>
`; `;
customElements.define('sm-input', customElements.define('sm-input',
class extends HTMLElement { class extends HTMLElement {
#validationState = {
validatedFor: undefined,
isValid: false
}
constructor() { constructor() {
super(); super();
this.attachShadow({ this.attachShadow({
@ -255,25 +264,11 @@ customElements.define('sm-input',
this.outerContainer = this.shadowRoot.querySelector('.outer-container'); this.outerContainer = this.shadowRoot.querySelector('.outer-container');
this.optionList = this.shadowRoot.querySelector('.datalist'); this.optionList = this.shadowRoot.querySelector('.datalist');
this._helperText = ''; this._helperText = '';
this._errorText = 'Invalid'; this._errorText = 'Please fill out this field.';
this.isRequired = false; this.isRequired = false;
this.datalist = []; this.datalist = [];
this.validationFunction = undefined; this.validationFunction = undefined;
this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'list', 'autocomplete']; this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'list', 'autocomplete'];
this.reset = this.reset.bind(this);
this.clear = this.clear.bind(this);
this.focusIn = this.focusIn.bind(this);
this.focusOut = this.focusOut.bind(this);
this.fireEvent = this.fireEvent.bind(this);
this.checkInput = this.checkInput.bind(this);
this.showError = this.showError.bind(this);
this.allowOnlyNum = this.allowOnlyNum.bind(this);
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() { static get observedAttributes() {
@ -287,6 +282,7 @@ customElements.define('sm-input',
set value(val) { set value(val) {
if (val === this.input.value) return; if (val === this.input.value) return;
this.input.value = val; this.input.value = val;
this._value = val;
this.checkInput(); this.checkInput();
} }
@ -332,12 +328,13 @@ customElements.define('sm-input',
} }
} }
set customValidation(val) { set customValidation(val) {
this.validationFunction = val; if (val)
this.validationFunction = val;
} }
set errorText(val) { set errorText(val) {
this._errorText = val; this._errorText = val;
} }
showError(errorText) { showError = (errorText = this._errorText) => {
this.feedbackText.className = 'feedback-text error'; this.feedbackText.className = 'feedback-text error';
this.feedbackText.innerHTML = ` this.feedbackText.innerHTML = `
<svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg> <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
@ -348,44 +345,44 @@ customElements.define('sm-input',
this._helperText = val; this._helperText = val;
} }
get isValid() { get isValid() {
if (this.input.value !== '') { if (this.input.value === '') return;
const _isValid = this.input.checkValidity(); if (this.#validationState.validatedFor === this.input.value)
let _validity = { return this.#validationState.isValid; // if the input is empty or the value is not changed, return the previous validity
isValid: _isValid, const _isValid = this.input.checkValidity();
errorText: '' let _validity = { isValid: true, errorText: '' }
} if (this.validationFunction) {
if (this.validationFunction) { _validity = this.validationFunction(this.input.value);
_validity = this.validationFunction(this.input.value);
}
if (_isValid && _validity.isValid) {
this.feedbackText.className = 'feedback-text success';
this.feedbackText.textContent = '';
} else {
if (_validity.errorText || this._errorText) {
this.showError(_validity.errorText || this._errorText);
}
}
return (_isValid && _validity.isValid);
} }
if (_isValid && _validity.isValid) {
this.feedbackText.className = 'feedback-text success';
this.feedbackText.textContent = '';
} else {
if (_validity.errorText || this._errorText) {
this.showError(_validity.errorText || this._errorText);
}
}
this.#validationState.validatedFor = this.input.value;
this.#validationState.isValid = _isValid && _validity.isValid;
return this.#validationState.isValid;
} }
reset() { reset = () => {
this.value = ''; this.value = '';
} }
clear() { clear = () => {
this.value = ''; this.value = '';
this.input.focus(); this.input.focus();
this.fireEvent(); this.fireEvent();
} }
focusIn() { focusIn = () => {
this.input.focus(); this.input.focus();
} }
focusOut() { focusOut = () => {
this.input.blur(); this.input.blur();
} }
fireEvent() { fireEvent = () => {
let event = new Event('input', { let event = new Event('input', {
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
@ -394,7 +391,7 @@ customElements.define('sm-input',
this.dispatchEvent(event); this.dispatchEvent(event);
} }
searchDatalist(searchKey) { searchDatalist = (searchKey) => {
const filteredData = this.datalist.filter(item => item.toLowerCase().includes(searchKey.toLowerCase())); const filteredData = this.datalist.filter(item => item.toLowerCase().includes(searchKey.toLowerCase()));
// sort the filtered data based on the input value // sort the filtered data based on the input value
filteredData.sort((a, b) => { filteredData.sort((a, b) => {
@ -427,7 +424,7 @@ customElements.define('sm-input',
} }
} }
checkInput(e) { checkInput = (e) => {
if (!this.hasAttribute('readonly')) { if (!this.hasAttribute('readonly')) {
if (this.input.value !== '') { if (this.input.value !== '') {
this.clearBtn.classList.remove('hidden'); this.clearBtn.classList.remove('hidden');
@ -437,10 +434,9 @@ customElements.define('sm-input',
} }
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return; if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
if (this.input.value !== '') { if (this.input.value !== '') {
if (this.animate) if (this.shouldAnimateLabel)
this.inputParent.classList.add('animate-placeholder'); this.inputParent.classList.add('animate-placeholder');
else this.label.classList.toggle('hidden', !this.shouldAnimateLabel);
this.label.classList.add('hidden');
if (this.datalist.length) { if (this.datalist.length) {
// debounce the search // debounce the search
if (this.searchTimeout) { if (this.searchTimeout) {
@ -451,10 +447,9 @@ customElements.define('sm-input',
}, 100); }, 100);
} }
} else { } else {
if (this.animate) if (this.shouldAnimateLabel)
this.inputParent.classList.remove('animate-placeholder'); this.inputParent.classList.remove('animate-placeholder');
else this.label.classList.remove('hidden');
this.label.classList.remove('hidden');
this.feedbackText.textContent = ''; this.feedbackText.textContent = '';
if (this.datalist.length) { if (this.datalist.length) {
this.optionList.innerHTML = ''; this.optionList.innerHTML = '';
@ -462,7 +457,7 @@ customElements.define('sm-input',
} }
} }
} }
allowOnlyNum(e) { allowOnlyNum = (e) => {
if (e.key.length === 1) { if (e.key.length === 1) {
if (e.key === '.' && (e.target.value.includes('.') || e.target.value.length === 0)) { if (e.key === '.' && (e.target.value.includes('.') || e.target.value.length === 0)) {
e.preventDefault(); e.preventDefault();
@ -471,13 +466,13 @@ customElements.define('sm-input',
} }
} }
} }
handleOptionClick(e) { handleOptionClick = (e) => {
this.input.value = e.target.textContent; this.input.value = e.target.textContent;
this.optionList.classList.add('hidden'); this.optionList.classList.add('hidden');
this.input.focus(); this.input.focus();
} }
// handle arrow key navigation on input // handle arrow key navigation on input
handleInputNavigation(e) { handleInputNavigation = (e) => {
if (e.key === 'ArrowDown') { if (e.key === 'ArrowDown') {
e.preventDefault(); e.preventDefault();
if (this.optionList.children.length) { if (this.optionList.children.length) {
@ -491,7 +486,7 @@ customElements.define('sm-input',
} }
} }
// handle arrow key navigation on datalist // handle arrow key navigation on datalist
handleDatalistNavigation(e) { handleDatalistNavigation = (e) => {
if (e.key === 'ArrowUp') { if (e.key === 'ArrowUp') {
e.preventDefault(); e.preventDefault();
this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus(); this.shadowRoot.activeElement.previousElementSibling ? this.shadowRoot.activeElement.previousElementSibling.focus() : this.input.focus();
@ -505,19 +500,26 @@ customElements.define('sm-input',
this.input.focus(); this.input.focus();
} }
} }
handleFocus(e) { handleFocus = (e) => {
if (this.datalist.length) { if (this.datalist.length) {
this.searchDatalist(this.input.value.trim()); this.searchDatalist(this.input.value.trim());
} }
} }
handleBlur(e) { handleBlur = (e) => {
if (this.datalist.length) { if (this.datalist.length) {
this.optionList.classList.add('hidden'); this.optionList.classList.add('hidden');
} }
} }
connectedCallback() { connectedCallback() {
this.animate = this.hasAttribute('animate'); const uuid = crypto.randomUUID()
this.input.id = uuid;
this.label.htmlFor = uuid
this.shouldAnimateLabel = this.hasAttribute('animate');
if (this.shouldAnimateLabel && this.placeholder !== '' && this.value) {
this.inputParent.classList.add('animate-placeholder');
this.label.classList.remove('hidden');
}
this.setAttribute('role', 'textbox'); this.setAttribute('role', 'textbox');
this.input.addEventListener('input', this.checkInput); this.input.addEventListener('input', this.checkInput);
this.clearBtn.addEventListener('click', this.clear); this.clearBtn.addEventListener('click', this.clear);

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

File diff suppressed because one or more lines are too long