#631 normal select change to se-select web component

This commit is contained in:
agriyadev5
2021-09-24 18:57:48 +05:30
parent 63fe9f2d34
commit 7e8136722e
5 changed files with 61 additions and 29 deletions

View File

@@ -42,7 +42,7 @@ export class SeSelect extends HTMLElement {
* @returns {any} observed
*/
static get observedAttributes () {
return [ 'label', 'width', 'height', 'options', 'values', 'title' ];
return [ 'label', 'width', 'height', 'options', 'values', 'title', 'disabled' ];
}
/**
@@ -62,6 +62,13 @@ export class SeSelect extends HTMLElement {
case 'title':
this.$select.setAttribute("title", t(newValue));
break;
case 'disabled':
if(newValue === null) {
this.$select.removeAttribute("disabled");
} else {
this.$select.setAttribute("disabled", newValue);
}
break;
case 'height':
this.$select.style.height = newValue;
break;
@@ -69,19 +76,29 @@ export class SeSelect extends HTMLElement {
this.$select.style.width = newValue;
break;
case 'options':
options = newValue.split(',');
options.forEach((option) => {
const optionNode = document.createElement("OPTION");
const text = document.createTextNode(t(option));
optionNode.appendChild(text);
this.$select.appendChild(optionNode);
});
if(newValue === "") {
while(this.$select.firstChild)
this.$select.removeChild(this.$select.firstChild);
} else {
options = newValue.split(',');
options.forEach((option) => {
const optionNode = document.createElement("OPTION");
const text = document.createTextNode(t(option));
optionNode.appendChild(text);
this.$select.appendChild(optionNode);
});
}
break;
case 'values':
options = newValue.split(' ');
options.forEach((option, index) => {
this.$select.children[index].setAttribute('value', option);
});
if(newValue === "") {
while(this.$select.firstChild)
this.$select.removeChild(this.$select.firstChild);
} else {
options = newValue.split('::');
options.forEach((option, index) => {
this.$select.children[index].setAttribute('value', option);
});
}
break;
default:
// eslint-disable-next-line no-console
@@ -149,6 +166,21 @@ export class SeSelect extends HTMLElement {
set value (value) {
this.$select.value = value;
}
/**
* @function get
* @returns {any}
*/
get disabled () {
return this.$select.getAttribute('disabled');
}
/**
* @function set
* @returns {void}
*/
set disabled (value) {
this.$select.setAttribute('disabled', value);
}
/**
* @function connectedCallback
* @returns {void}