stear/extra/Pages/prompt.js

import { SFrame, _ } from "../../main.js";
import { fadein, fadeout, subCancel } from "../../utils.js";

const call = async (stear, { find, resolve, render, call, event }, { text, autoFill = "" }) => {
    event.onloaded = () => {
        fadein(find.main, 200, true);
        find.input._.focus();
    }
    event.onresolve = async () => await fadeout(find.main);

    const cancel = subCancel(() => {
        resolve(false);
    });

    return _({
        find: "main",
        class: "stear_prompt",
        style: {
            position: "fixed",
            left: "0",
            top: "0",
            height: "100%",
            width: "100%",
            backgroundColor: "rgba(0,0,0,0.5)"
        }
    }, _({
        style: {
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            padding: "1rem",
            paddingTop: "0",
            position: "absolute",
            backgroundColor: "#eee",
            minHeight: "4rem",
            minWidth: "8rem",
            borderRadius: "1rem",
            textAlign: "center",
            display: "grid",
            gridGap: "0.5rem"
        }
    }, [
        _({ type: "p", style: { gridRow: "1", gridColumn: "1/3", marginBottom: "0" } }, text),
        _({
            type: "input",
            find: "input",
            attr: { type: "text" },
            event: {
                keydown: (e) => {
                    if(e.code=="Enter")find.btn._.click();
                }
            },
            style: {
                height: "1rem",
                border: "2px solid",
                borderRadius: "0.5rem",
                gridRow: "2",
                padding:"0.5rem"
            }
        }, autoFill),
        _({
            type: "button",
            find: "btn",
            event: {
                click: () => {
                    resolve(find.input._.value);
                    cancel();
                }
            },
            style: {
                borderRadius: "0.5rem",
                gridRow: "2",
            }
        }, "OK"),
    ]));
};

export default new SFrame({
    preRender: true, call
});