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

Added support for centralized component config

Browse Source
This commit is contained in:
sairaj mote 2023-10-01 22:50:19 +05:30
parent 66f01ad170
commit cae493d224
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/dist/input.js vendored
View File

@ -251,7 +251,8 @@ customElements.define('sm-input',
class extends HTMLElement { class extends HTMLElement {
#validationState = { #validationState = {
validatedFor: undefined, validatedFor: undefined,
isValid: false isValid: false,
errorMessage: 'Please fill out this field.'
} }
constructor() { constructor() {
super(); super();
@ -267,7 +268,6 @@ 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 = 'Please fill out this field.';
this.isRequired = false; this.isRequired = false;
this.datalist = []; this.datalist = [];
this.validationFunction = undefined; this.validationFunction = undefined;
@ -335,9 +335,9 @@ customElements.define('sm-input',
this.validationFunction = val; this.validationFunction = val;
} }
set errorText(val) { set errorText(val) {
this._errorText = val; this.#validationState.errorText = val;
} }
showError = (errorText = this._errorText) => { showError = (errorText = this.#validationState.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,9 +348,8 @@ customElements.define('sm-input',
this._helperText = val; this._helperText = val;
} }
get isValid() { get isValid() {
if (this.input.value === '') return;
if (this.#validationState.validatedFor === this.input.value) if (this.#validationState.validatedFor === this.input.value)
return this.#validationState.isValid; // if the input is empty or the value is not changed, return the previous validity return this.#validationState.isValid; // if the input value has not changed, return the previous validity
const _isValid = this.input.checkValidity(); const _isValid = this.input.checkValidity();
let _validity = { isValid: true, errorText: '' } let _validity = { isValid: true, errorText: '' }
if (this.validationFunction) { if (this.validationFunction) {
@ -360,12 +359,13 @@ customElements.define('sm-input',
this.feedbackText.className = 'feedback-text success'; this.feedbackText.className = 'feedback-text success';
this.feedbackText.textContent = ''; this.feedbackText.textContent = '';
} else { } else {
if (_validity.errorText || this._errorText) { if (this.value.trim() !== '' && (_validity.errorText || this.#validationState.errorText)) {
this.showError(_validity.errorText || this._errorText); this.showError(_validity.errorText || this.#validationState.errorText);
} }
} }
this.#validationState.validatedFor = this.input.value; this.#validationState.validatedFor = this.input.value;
this.#validationState.isValid = _isValid && _validity.isValid; this.#validationState.isValid = _isValid && _validity.isValid;
this.#validationState.errorText = _validity.errorText || this.#validationState.errorText;
return this.#validationState.isValid; return this.#validationState.isValid;
} }
reset = () => { reset = () => {
@ -524,6 +524,10 @@ customElements.define('sm-input',
this.label.classList.remove('hidden'); this.label.classList.remove('hidden');
} }
this.setAttribute('role', 'textbox'); this.setAttribute('role', 'textbox');
if (smCompConfig && smCompConfig['sm-input']) {
const config = smCompConfig['sm-input'].find(config => this.matches(config.selector))
this.customValidation = config?.customValidation;
}
this.input.addEventListener('input', this.checkInput); this.input.addEventListener('input', this.checkInput);
this.clearBtn.addEventListener('click', this.clear); this.clearBtn.addEventListener('click', this.clear);
if (this.datalist.length) { if (this.datalist.length) {
@ -564,7 +568,7 @@ customElements.define('sm-input',
this._helperText = newValue; this._helperText = newValue;
break; break;
case 'error-text': case 'error-text':
this._errorText = newValue; this.#validationState.errorText = newValue;
break; break;
case 'required': case 'required':
this.isRequired = this.hasAttribute('required'); this.isRequired = this.hasAttribute('required');

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

File diff suppressed because one or more lines are too long