mirror of
https://github.com/esiur/iui.git
synced 2026-04-04 06:58:22 +00:00
Support datetime-local
This commit is contained in:
Mohammed Salman
261
src/UI/Input.js
261
src/UI/Input.js
@@ -1,166 +1,164 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Input extends IUIElement {
|
||||
export default IUI.module(
|
||||
class Input extends IUIElement {
|
||||
constructor() {
|
||||
super({ formatter: (x) => x });
|
||||
this._register("input");
|
||||
this._register("change");
|
||||
super({ formatter: x => x });
|
||||
this._register("input");
|
||||
this._register("change");
|
||||
}
|
||||
|
||||
_checkValidity() {
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.log("Validation Error", e);
|
||||
return false;
|
||||
}
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
} else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("Validation Error", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
return true;
|
||||
}
|
||||
|
||||
get caption(){
|
||||
return this.getAttribute("caption");// this._span.innerHTML;
|
||||
get caption() {
|
||||
return this.getAttribute("caption"); // this._span.innerHTML;
|
||||
}
|
||||
|
||||
set caption(value){
|
||||
this.setAttribute("caption", value);
|
||||
this._span.innerHTML = value;
|
||||
set caption(value) {
|
||||
this.setAttribute("caption", value);
|
||||
this._span.innerHTML = value;
|
||||
}
|
||||
|
||||
create() {
|
||||
this.isAuto = this.hasAttribute("auto");
|
||||
this.field = this.getAttribute("field");
|
||||
|
||||
this.isAuto = this.hasAttribute("auto");
|
||||
this.field = this.getAttribute("field");
|
||||
|
||||
|
||||
if (this.field != null)
|
||||
{
|
||||
this.setAttribute(":data", `d['${this.field}']`)
|
||||
this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`);
|
||||
}
|
||||
if (this.field != null) {
|
||||
this.setAttribute(":data", `d['${this.field}']`);
|
||||
this.setAttribute(
|
||||
"async:revert",
|
||||
`d['${this.field}'] = await this.getData()`
|
||||
);
|
||||
}
|
||||
|
||||
this._span = document.createElement("span");
|
||||
this._span.innerHTML = this.getAttribute("caption");
|
||||
this._span = document.createElement("span");
|
||||
this._span.innerHTML = this.getAttribute("caption");
|
||||
|
||||
this._input = document.createElement("input");
|
||||
this._input.placeholder = this.getAttribute("placeholder") || "";
|
||||
this._input = document.createElement("input");
|
||||
this._input.placeholder = this.getAttribute("placeholder") || "";
|
||||
|
||||
let self = this;
|
||||
let self = this;
|
||||
|
||||
this._input.addEventListener("input", () => {
|
||||
if (self._checkValidity() && self.isAuto)
|
||||
this.revert();
|
||||
//self.data[self.field] = self.value;
|
||||
this._input.addEventListener("input", () => {
|
||||
if (self._checkValidity() && self.isAuto) this.revert();
|
||||
//self.data[self.field] = self.value;
|
||||
});
|
||||
|
||||
this._input.addEventListener("change", () => {
|
||||
self._emit("change", { value: self.value });
|
||||
});
|
||||
|
||||
this.type = this.hasAttribute("type")
|
||||
? this.getAttribute("type").toLowerCase()
|
||||
: "text";
|
||||
|
||||
this.accept = this.getAttribute("accept");
|
||||
|
||||
this.appendChild(this._input);
|
||||
this.appendChild(this._span);
|
||||
|
||||
if (this.type == "password") {
|
||||
this._eye = document.createElement("div");
|
||||
this._eye.className = this.cssClass + "-eye";
|
||||
this._eye.addEventListener("mousedown", () => {
|
||||
self._input.type = "text";
|
||||
self._eye.classList.add(self.cssClass + "-eye-active");
|
||||
});
|
||||
this._eye.addEventListener("mouseup", () => {
|
||||
self._input.type = "password";
|
||||
self._eye.classList.remove(self.cssClass + "-eye-active");
|
||||
});
|
||||
|
||||
this._input.addEventListener("change", () => {
|
||||
self._emit("change", { value: self.value });
|
||||
});
|
||||
|
||||
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
|
||||
|
||||
this.accept = this.getAttribute("accept");
|
||||
|
||||
this.appendChild(this._input);
|
||||
this.appendChild(this._span);
|
||||
|
||||
if (this.type == "password")
|
||||
{
|
||||
this._eye = document.createElement("div");
|
||||
this._eye.className = this.cssClass + "-eye";
|
||||
this._eye.addEventListener("mousedown", ()=>{
|
||||
self._input.type = "text";
|
||||
self._eye.classList.add(self.cssClass + "-eye-active");
|
||||
});
|
||||
this._eye.addEventListener("mouseup", ()=>{
|
||||
self._input.type = "password";
|
||||
self._eye.classList.remove(self.cssClass + "-eye-active");
|
||||
});
|
||||
|
||||
this.appendChild(this._eye);
|
||||
|
||||
}
|
||||
|
||||
this.appendChild(this._eye);
|
||||
}
|
||||
}
|
||||
|
||||
async updateAttributes(deep, parentData) {
|
||||
await super.updateAttributes(deep, parentData);
|
||||
//this._input.type = this.type;
|
||||
//this._input.value = this.value;
|
||||
await super.updateAttributes(deep, parentData);
|
||||
//this._input.type = this.type;
|
||||
//this._input.value = this.value;
|
||||
}
|
||||
|
||||
set type(value) {
|
||||
this._input.type = value;
|
||||
this._input.type = value;
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this._input.type;
|
||||
return this._input.type;
|
||||
}
|
||||
|
||||
set accept(value){
|
||||
this._input.accept = value;
|
||||
set accept(value) {
|
||||
this._input.accept = value;
|
||||
}
|
||||
|
||||
get accept() {
|
||||
return this._input.accept;
|
||||
return this._input.accept;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
if (value)
|
||||
this.setAttribute("disabled", "disabled");
|
||||
else
|
||||
this.removeAttribute("disabled");
|
||||
if (value) this.setAttribute("disabled", "disabled");
|
||||
else this.removeAttribute("disabled");
|
||||
|
||||
this._input.disabled = value;
|
||||
this._input.disabled = value;
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this._input.disabled;
|
||||
return this._input.disabled;
|
||||
}
|
||||
|
||||
set enabled(value) {
|
||||
this.disabled = !value;
|
||||
this.disabled = !value;
|
||||
}
|
||||
|
||||
get enabled() {
|
||||
return !this._input.disabled;
|
||||
return !this._input.disabled;
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
await super.setData(value);
|
||||
|
||||
await super.setData(value);
|
||||
if (this.type == "checkbox") this._input.checked = value;
|
||||
else if (this.type == "date") {
|
||||
this._input.value = value ? value.toISOString().slice(0, 10) : value;
|
||||
} else if (this.type == "datetime-local") {
|
||||
this._input.value = value
|
||||
? value.toISOString().substring(0, 19)
|
||||
: value;
|
||||
} else if (
|
||||
this.type == null ||
|
||||
this.type == "text" ||
|
||||
this.type == "search" ||
|
||||
this.type == "password"
|
||||
)
|
||||
this._input.value = value == null ? "" : value;
|
||||
else if (this.type == "file") {
|
||||
// can't set value on file input
|
||||
} else this._input.value = value;
|
||||
|
||||
if (this.type == "checkbox")
|
||||
this._input.checked = value;
|
||||
else if (this.type == "date")
|
||||
this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
|
||||
this._input.value = value == null ? '' : value;
|
||||
else if (this.type == "file") {
|
||||
// can't set value on file input
|
||||
}
|
||||
else
|
||||
this._input.value = value;
|
||||
if (this._checkValidity() && this.isAuto) this.revert();
|
||||
|
||||
if (this._checkValidity() && this.isAuto)
|
||||
this.revert();
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
await super.setData(value);
|
||||
if (value != null && this.field != null)
|
||||
this.value = value[this.field];
|
||||
@@ -169,40 +167,32 @@ export default IUI.module(class Input extends IUIElement {
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
// modified(name, value) {
|
||||
// if (name == this.field) {
|
||||
// this.value = value;
|
||||
// }
|
||||
// }
|
||||
|
||||
async getData(){
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
return new Uint8Array(await this._input.files[0].arrayBuffer());
|
||||
else
|
||||
return this._input.value;
|
||||
async getData() {
|
||||
if (this.type == "checkbox") return this._input.checked;
|
||||
else if (this.type == "date" || this.type == "datetime-local")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
return new Uint8Array(await this._input.files[0].arrayBuffer());
|
||||
else return this._input.value;
|
||||
}
|
||||
|
||||
get data()
|
||||
{
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
{
|
||||
return new Promise((resolve)=>{
|
||||
this._input.files[0].arrayBuffer().then((x)=>{
|
||||
resolve(new Uint8Array(x));
|
||||
});
|
||||
});
|
||||
}
|
||||
else
|
||||
return this._input.value;
|
||||
get data() {
|
||||
if (this.type == "checkbox") return this._input.checked;
|
||||
else if (this.type == "date" || this.type == "datetime-local")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file") {
|
||||
return new Promise(resolve => {
|
||||
this._input.files[0].arrayBuffer().then(x => {
|
||||
resolve(new Uint8Array(x));
|
||||
});
|
||||
});
|
||||
} else return this._input.value;
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -224,7 +214,7 @@ export default IUI.module(class Input extends IUIElement {
|
||||
|
||||
// if (this.type == "checkbox")
|
||||
// this._input.checked = value;
|
||||
// else if (this.type == "date")
|
||||
// else if (this.type == "date")
|
||||
// this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
// else if (this.type == null || this.type == "text")
|
||||
// this._input.value = value == null ? '' : value;
|
||||
@@ -233,4 +223,5 @@ export default IUI.module(class Input extends IUIElement {
|
||||
|
||||
// this._checkValidity();
|
||||
// }
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user