@lucsoft/webgen/bin/components/generic/Input.js

Collection of lucsofts Components

import { createElement, span } from "../Components";
import '../../css/input.webgen.static.css';
export const Input = ({ color, value, changeOn, blurOn, placeholder, type, autoFocus }) => {
    let shell = createElement("div");
    shell.classList.add("winput", color ?? "grayscaled" /* Grayscaled */);
    let label = span(placeholder);
    let input = createElement("input");
    if (value || "" != "") {
        shell.classList.add("has-value");
        input.value = value ?? "";
    }
    input.type = type ?? "text";
    input.disabled = color == "disabled" /* Disabled */;
    input.onfocus = () => {
        input.focus();
        shell.classList.add("has-value");
    };
    shell.onclick = () => {
        if (input.value === "") {
            shell.classList.add("has-value");
            input.focus();
        }
    };
    input.onblur = () => {
        if (input.value === "") {
            shell.classList.remove("has-value");
            input.blur();
        }
        blurOn?.(input.value);
    };
    //@ts-ignore
    if (autoFocus)
        input.autofocus = "true";
    input.onchange = () => changeOn?.(input.value);
    shell.append(label, input);
    return shell;
};