include

extra/Pages/alert.js

@@ -1,13 +1,17 @@
 import { SFrame, _ } from "../../main.js";
-import { fadein, fadeout } from "../../utils.js";
+import { fadein, fadeout, subCancel } from "../../utils.js";
 
-const call = async (stear, { find, resolve, render, call, event}, {text,titel=""}) => {
+const call = async (stear, { find, resolve, render, call, event }, { text, titel = "" }) => {
-    event.onloaded = ()=> {
+    event.onloaded = () => {
-        fadein (find.main, 200, true);
+        fadein(find.main, 200, true);
         find.btn._.focus();
     }
     event.onresolve = async () => await fadeout(find.main);
 
+    const cancel = subCancel(() => {
+        resolve(false);
+    });
+
     return _({
         find: "main",
         class: "stear_alert",
@@ -39,7 +43,15 @@ const call = async (stear, { find, resolve, render, call, event}, {text,titel=""
         _({
             type: "button",
             find: "btn",
-            event: { click: ()=>resolve() }, 
+            event: {
+                click: () => {
+                    resolve(true);
+                    cancel();
+                },
+                input: (e) => {
+                    console.log(e);
+                }
+            },
             style: {
                 borderRadius: "0.5rem",
             }
@@ -48,5 +60,5 @@ const call = async (stear, { find, resolve, render, call, event}, {text,titel=""
 }
 
 export default new SFrame({
-    preRender:true, call
+    preRender: true, call
 });

extra/Pages/prompt.js

@@ -0,0 +1,81 @@
+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);
+        console.log(find);
+        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: {
+                borderRadius: "0.5rem",
+                height: "1rem",
+                border: "2px solid",
+                borderRadius: "0.5rem",
+                gridRow: "2",
+            }
+        }, 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
+});

language.js

@@ -0,0 +1,68 @@
+
+export class LanguagePool {
+    #pool = {};
+    constructor() {
+
+    }
+    addFile(elems, lang) {
+        Object.entries(elems).forEach(([k, d]) => {
+            if (typeof this.#pool[k] == "undefined") {
+                this.#pool[k] = new LanguagePoolString();
+            }
+            this.#pool[k].set(d, lang);
+
+        });
+    }
+    set lang(lang) {
+        Object.entries(this.#pool).forEach(([k, d]) => {
+            d.lang = lang;
+        })
+    }
+    get getFile() {
+        var out = {};
+        Object.entries(this.#pool).forEach(([k, d]) => {
+            out[k] = d.get("default");
+        });
+        return out;
+    }
+    add(tag, defaultText = "") {
+        let newS = typeof this.#pool[tag] == "undefined" ? new LanguagePoolString() : this.#pool[tag];
+        this.#pool[tag] = newS;
+        newS.set(defaultText, "default");
+        return newS;
+    }
+    get(tag) {
+        return this.#pool[tag];
+    }
+}
+
+export class LanguagePoolString {
+    #value = {
+
+    };
+    #lang = "en";
+    constructor() { }
+
+    set(v, lang) {
+        this.#value[lang] = v;
+    }
+
+    get(lang) {
+        return this.#value[lang];
+    }
+
+    set lang(lang) {
+        this.#lang = lang;
+    }
+
+    r(...str) {
+        var out = this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
+        for (let i = 0; i < str.length; i++) {
+            out = out.replace("{}", str[i]);
+        }
+        return out;
+    }
+    toString() {
+        return this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
+    }
+}

main.js

@@ -1,3 +1,4 @@
+import { LanguagePool, LanguagePoolString } from "./language.js"
 var counter = 0;
 
 var globalStyle = document.createElement("style");
@@ -7,6 +8,19 @@ String.prototype.map = Array.prototype.map;
 
 function toCssAttr(txt){
     return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join("");
+};
+
+class callPromise extends Promise{
+    #opts = {};
+    constructor(cb){
+        super(cb);
+    };
+    set opts(opts){
+        this.#opts = opts;
+    }
+    get opts(){
+        return this.#opts;
+    }
 }
 
 const pools = {
@@ -46,8 +60,8 @@ export class Stear{
         return await elem.call(this, args, layer);
     }
 
-    async include (elem, args, layer = 1, renderParent){
+    include(elem, args, renderParent, layer = 1){
-        return await elem.call(this, args, layer, renderParent);
+        return elem.call(this, args, layer, renderParent);
     }
 
     static addGlobalStyleText(text){
@@ -104,74 +118,6 @@ ${Object.entries(json).map(d => "    " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
     }
 }
 
-class LanguagePool{
-    #pool = {};
-    constructor(){
-
-    }
-    addFile(elems,lang){
-        Object.entries(elems).forEach(([k,d])=>{
-            if(typeof this.#pool[k] == "undefined"){
-                this.#pool[k] = new LanguagePoolString();
-            }
-            this.#pool[k].set(d,lang);
-            
-        });
-    }
-    set lang (lang){
-        Object.entries(this.#pool).forEach(([k, d]) => {
-            d.lang = lang;
-        })
-    }
-    get getFile(){
-        var out = {};
-        Object.entries(this.#pool).forEach(([k, d])=>{
-            out[k] = d.get("default");
-        });
-        return out;
-    }
-    add(tag, defaultText=""){
-        let newS = typeof this.#pool[tag] == "undefined" ? new LanguagePoolString() : this.#pool[tag];
-        this.#pool[tag] = newS;
-        newS.set(defaultText,"default");
-        return newS;
-    }
-    get(tag){
-        return this.#pool[tag];
-    }
-}
-
-class LanguagePoolString {
-    #value = {
-
-    };
-    #lang = "en";
-    constructor(){}
-
-    set(v,lang){
-        this.#value[lang] = v;
-    }
-
-    get(lang){
-        return this.#value[lang];
-    }
-
-    set lang(lang){
-        this.#lang = lang;
-    }
-
-    r (...str){
-        var out = this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
-        for (let i = 0; i < str.length; i++) {
-            out = out.replace("{}",str[i]);           
-        }
-        return out;
-    }
-    toString(){
-        return this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
-    }
-}
-
 export class SFrame{
     #preRender;
     #call;
@@ -181,11 +127,11 @@ export class SFrame{
         this.#call = call;
     }
 
-    async call(stear, args, layer = 1, renderParent = stear.elem){
+    call(stear, args, layer = 1, renderParent = stear.elem){
         let lastRender;
         let renderElem;
         
-        let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { } };
+        let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender:()=>{} };
         let find = {};
 
         let resolved = false;
@@ -207,41 +153,48 @@ export class SFrame{
             Object.assign(find, now.find);
             return lastRender;
         }
-        return new Promise(async (res,rej)=>{
+
-            let firstRender = false;
+        const ppp =  new callPromise(async (res,rej)=>{
-            renderElem = await this.#call(stear,{
+            const options = {
                 find,
                 render: async (...args) => {
                     await event.onBeforRerender(...args);
-                    if(renderElem)await render(args);
+                    if (renderElem) await render(args);
                     firstRender = true;
                     await event.onAfterRerender(...args);
                     return find;
                 },
-                resolve: async (r,close=true)=>{
+                resolve: async (r, close = true) => {
                     if (resolved) return;
                     resolved = true;
                     await event.onresolve();
                     if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
                     res(r);
                 },
-                call: (elem, args= {})=>{
+                call: (elem, args = {}) => {
-                    return stear.call(elem,args,layer+1);
+                    return stear.call(elem, args, layer + 1);
                 },
-                close: async ()=>{
+                close: async () => {
                     await event.onclose();
                     if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
                 },
-                event
+                include: (frame, args = {}) => {
-            }, args);
+                    let iFrame = new includeFrame(stear, frame, layer + 1, args);
+                    return iFrame;
+                },
+                event,
+            };
+            window.queueMicrotask(() => ppp.opts = options); 
+            let firstRender = false;
+            renderElem = await this.#call(stear, options, args);
             if(!renderElem) {
                 
             }else{
                 if (this.#preRender | firstRender) await render([]);
                 event.onloaded();
             }      
-            
         });
+        return ppp;
     }
 
 }
@@ -290,8 +243,9 @@ export class class_ {
     #childs;
     #build;
     #find;
+    #doBuild;
 
-    constructor(settings,childs){
+    constructor(settings,childs,doBuild = true){
         this.#elem = document.createElement(settings.type ?? "div");
         this.#childs = childs;
         var keys = Object.keys(settings);
@@ -307,13 +261,19 @@ export class class_ {
                 Object.entries(settings[key]).forEach(([k, d]) => {
                     this.#elem.addEventListener(k,d);
                 });
+            } else if (key == "attr"){
+                Object.entries(settings[key]).forEach(([k, d]) => {
+                    this.#elem.setAttribute(k, d);
+                });
             } else {
                 this.#elem.setAttribute(key,settings[key]);
             }
         }
+        this.#doBuild = doBuild;
     }
 
     set childs(childs){
+        if (!this.#doBuild) return; 
         this.#childs = Array.isArray(childs) ? childs : [childs];
     }
 
@@ -334,11 +294,12 @@ export class class_ {
     }
 
     async build (args) {
+        if(!this.#doBuild)return;
         this.#build = [];
         for (let i = 0; i < this.#childs.length; i++) {
             let elem = this.#childs[i];
 
-            if (typeof elem == "function") elem = await elem(...args);
+            if (typeof elem == "function") elem = (await elem(...args))??[];
 
             if(Array.isArray(elem)){
                 for (let j = 0; j < elem.length; j++) {
@@ -353,6 +314,7 @@ export class class_ {
     }
 
     get render (){
+        if (!this.#doBuild) return this.#elem;
         this.#elem.innerHTML = "";
         for (let i = 0; i < this.#build.length; i++) {
             const elem = this.#build[i];
@@ -371,9 +333,11 @@ export class class_ {
 
     get find (){
         var out = {}; 
+        if (this.#doBuild){ 
                 this.#build.forEach(d=>{
                 Object.assign(out,d.find);
             });
+        }
         if (this.#find) out[this.#find]=this;
         return out;
     }
@@ -381,3 +345,34 @@ export class class_ {
 export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]);
 
 
+class includeFrame{
+    #elem;
+    #call;
+    constructor(stear,frame,layer, args = {}){
+        this.#elem = new class_({},[],false);
+        this.#call = stear.include(frame, args, this.#elem._, layer);
+        this.#call.then(()=>{
+
+        })
+        .catch(()=>{
+
+        });
+    }
+    
+    get opts(){
+        return this.#call.opts;
+    }
+
+    close(){
+        if(this.#call){
+            this.#call.opts.close();
+        }
+    }
+
+    render(settings={}){
+        this.#elem.settings = settings;
+        this.#call.opts.event.onParentRender();
+        return this.#elem;
+    }
+    
+};