ziko 0.65.0 → 0.67.0

package/src/--use-deprecated/use-thread.js

@@ -1,44 +0,0 @@
-class UseThreed {
-    #workerContent;
-    constructor() {
-        this.#workerContent = (
-            function (msg) {
-                try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
-                } catch (error) {
-                    postMessage({ error: error.message });
-                } finally {
-                    if (msg.data.close) self.close();
-                }
-            }
-        ).toString();
-        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-        this.worker = new Worker(window.URL.createObjectURL(this.blob));
-    }
-    call(func, callback, close = true) {
-        this.worker.postMessage({
-            fun: func.toString(),
-            close
-        });
-        this.worker.onmessage = function (e) {
-            if (e.data.error) {
-                console.error(e.data.error);
-            } else {
-                callback(e.data.result);
-            }
-        };
-        return this;
-    }
-}
-
-const useThread = (func, callback , close) => {
-    const T = new UseThreed();
-    if (func) {
-        T.call(func, callback , close);
-    }
-    return T;
-}
-
-export { useThread };

package/src/ui/constructors/_m.js.txt

@@ -1,96 +0,0 @@
-class Ziko{
-get #SwitchedStyleRTL_LTR(){
-    const CalculedStyle = globalThis.getComputedStyle(this.element); 
-    const SwitchedStyle = {}
-    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
-    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
-    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
-    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
-    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
-    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
-    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
-    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
-    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
-    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
-    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
-    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
-    if(["flex","inline-flex"].includes(CalculedStyle.display)){
-      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
-      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
-    }
-    return SwitchedStyle;
-  }
-  useRtl(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "rtl"
-    }) : this.style({direction : "rtl"}); 
-    return this;
-  }
-  useLtr(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "ltr"
-    }) : this.style({direction : "ltr"}); 
-    return this;
-
-    
-  }
-
-    filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-    const FilterItems = this.items.filter(condition_callback);
-    FilterItems.forEach(if_callback);
-    this.items
-      .filter((item) => !FilterItems.includes(item))
-      .forEach(else_callback);
-    return this;
-  }
-  filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.mount());
-    this.filter(
-      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unmount(),
-    );
-    // this.items.filter(n=>{
-    //   const content=n.element.textContent;
-    //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unmount());
-    //  return this;
-  }
-  filterByClass(value) {
-    this.items.map((n) => n.mount());
-    this.items
-      .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unmount());
-    return this;
-  }
-  sortByTextContent(value, displays) {
-    let item = this.children;
-    item
-      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n) => {
-        n.style.display = "none";
-      });
-    item
-      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n, i) => (n.style.display = displays[i]));
-    //return item.filter(n=>n.style.display!="none")
-    item.filter((n) => n.style.display != "none");
-    return this;
-  }
-
-    // setFullScreen(set = true, e) {
-  //   if(!this.element.requestFullscreen){
-  //     console.error("Fullscreen API is not supported in this browser.");
-  //     return this;
-  //   }
-  //   if (set) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
-  // toggleFullScreen(e) {
-  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
-}

package/src/ui/constructors/style/index.js

@@ -1,506 +0,0 @@
-import { addSuffixeToNumber } from "../../__utils__/index.js";
-import { Matrix,cos,sin} from "../../../math/index.js";
-import { Str } from "../../../data/index.js";
-import { camel2hyphencase } from '../../../data/string/converters.js'
-class ZikoUIElementStyle{
-    constructor(defaultStyle={}){
-        this.target=null;
-        this.styles=new Map(
-            [["default",defaultStyle]]
-        );
-        this.cache={
-            isHidden:false,
-            isFaddedOut:false,
-            transformation:{
-                Flip:[0,0,0],
-                matrix:new Matrix([
-                    [1,0,0,0],
-                    [0,1,0,0],
-                    [0,0,1,0],
-                    [0,0,0,1]
-                ])
-            }
-        }
-    }
-    style(styles){
-        for(const [key, value] of Object.entries(styles)){
-            if(Str.isCamelCase(key)){
-                delete styles[key];
-                Object.assign(styles,{[camel2hyphencase(key)]:value})
-            }
-        }
-        if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);
-        return this;
-    }
-    linkTo(target){
-        this.target=target;
-        return this;
-    }
-    use(name="default"){
-        this.style(this.styles.get(name));
-        return this;
-    }
-    update(name,styles){
-        const old=this.styles.get(name);
-        old?this.styles.set(name,Object.assign(old,styles)):this.styles.set(name,styles);
-        return this;
-    }
-    add(name,styles){
-        this.styles.set(name,styles);
-        return this;
-    }
-    replace(name,styles){
-        this.styles.set(name,styles);
-        return this;
-    }
-    delete(...names){
-        names.forEach(n=>this.styles.delete(n));
-        return this;
-    }
-    updateDefaultStyle(){
-        const defaultStyle=Object.fromEntries(
-            Object.entries(this.target.element.style).filter(n=>isNaN(+n[0]))
-        )   
-        this.update("default",defaultStyle);
-        return this;
-    }
-    hover(styles){
-        //this.updateDefaultStyle()
-        if(styles)this.add("hover",styles)
-        this.target?.element?.addEventListener("pointerenter",()=>this.use("hover"));
-        this.target?.element?.addEventListener("pointerleave",()=>this.use("default"))
-        return this;
-    }
-    // Checkers 
-    isInline(){
-        return getComputedStyle(this.target.element).display.includes("inline");
-    }
-    isBlock(){
-        return !(this.isInline());
-    }
-    // Size
-    size(width,height){
-        this.style({
-            width,
-            height
-        })
-        return this;
-    }
-    width(w){
-        if(w instanceof Object){
-          if(w instanceof Array)w={min:w[0],max:w[1]}
-          if("min" in w || "max" in w){
-            let min= w.min ?? w.max;
-            let max= w.max ?? w.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
-          }
-        }
-        else {
-          w=addSuffixeToNumber(w,"px");
-          this.style({width:w});
-        }
-        return this
-    }
-    height(h){
-        if(h instanceof Object){
-          if(h instanceof Array)h={min:h[0],max:h[1]}
-          if("min" in h || "max" in h){
-            let min= h.min ?? h.max;
-            let max= h.max ?? h.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
-          }
-        }
-        else {
-          h=addSuffixeToNumber(h,"px");
-          this.style({height:h});
-        }
-        return this
-    } 
-    enableResize(h=false,v=false){
-        let resize="none";
-        if(h)v?resize="both":resize="horizontal";
-        else v?resize="vertical":resize="none";
-        this.style({
-            resize,
-            overflow:"hidden"
-        });
-        if(this.isInline()){
-            console.group("Ziko Issue : Temporarily Incompatible Method");
-            console.warn(".enableResize has no effect on inline elements!");
-            console.info("%cConsider using other display types such as block, inline-block, flex, or grid for proper resizing behavior.","color:gold;background-color:#3333cc;padding:5px");
-            console.groupEnd();
-        }
-        return this;
-    }   
-    // Apparence
-    hide({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.hide({target,maskVector})
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=true;
-          this.style({display:"none"},{target,maskVector});
-        }
-        return this;
-    }
-    show({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.show({target,maskVector})
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=false;
-          this.style({display:""},{target,maskVector});
-        }
-        return this;
-    }
-    color(color){
-        this.style({color});
-        return this;
-    }
-    background(background){
-        this.style({background});
-        return this;
-    }
-    backgroundColor(backgroundColor){
-        this.style({backgroundColor});
-        return this;
-    }
-    opacity(opacity, { target, maskVector } = {}) {
-        this.style({ opacity }, { target, maskVector });
-        return this;
-    }
-    // Placement
-    position(position){
-        this.style({position});
-        return this
-    }
-    display(disp, { target, maskVector } = {}) {
-        this.style({ display: disp }, { target, maskVector });
-        return this;
-    }
-    zIndex(z){
-        this.style({zIndex:z});
-        return this;
-    }
-    float(float, { target, maskVector } = {}) {
-        this.style({ float: float }, { target, maskVector });
-        return this;
-    }
-    // Box Model 
-    border(border = "1px solid red", { target, maskVector } = {}){
-        this.style({border}, { target, maskVector });
-        return this;
-    }
-    borderTop(borderTop = "1px solid red", { target, maskVector } = {}){
-        this.style({borderTop}, { target, maskVector });
-        return this;
-    }
-    borderRight(borderRight = "1px solid red", { target, maskVector } = {}){
-        this.style({borderRight}, { target, maskVector });
-        return this;
-    }
-    borderBottom(borderBottom = "1px solid red", { target, maskVector } = {}){
-        this.style({borderBottom}, { target, maskVector });
-        return this;
-    }
-    borderLeft(borderLeft = "1px solid red", { target, maskVector } = {}){
-        this.style({borderLeft}, { target, maskVector });
-        return this;
-    }
-    borderRadius(radius){
-        radius=addSuffixeToNumber(radius,"px");
-        this.style({ borderRadius: radius }, { target, maskVector });
-        return this;
-    }
-    margin(margin){
-        margin=addSuffixeToNumber(margin,"px");
-        this.style({ margin }, { target, maskVector });
-        return this;
-    }
-    marginTop(marginTop){
-        marginTop=addSuffixeToNumber(marginTop,"px");
-        this.style({marginTop});
-        return this;
-    }
-    marginRight(marginRight){
-        marginRight=addSuffixeToNumber(marginRight,"px");
-        this.style({marginRight});
-        return this;
-    }
-    marginBootom(marginBootom){
-        marginBootom=addSuffixeToNumber(marginBootom,"px");
-        this.style({marginBootom});
-        return this;
-    }
-    marginLeft(marginLeft){
-        marginLeft=addSuffixeToNumber(marginLeft,"px");
-        this.style({marginLeft});
-        return this;
-    }
-    padding(padding){
-        padding=addSuffixeToNumber(padding,"px");
-        this.style({padding});
-        return this;
-    }
-    paddingTop(paddingTop){
-        paddingTop=addSuffixeToNumber(paddingTop,"px");
-        this.style({paddingTop});
-        return this;
-    }
-    paddingRight(paddingRight){
-        paddingRight=addSuffixeToNumber(paddingRight,"px");
-        this.style({paddingRight});
-        return this;
-    }
-    paddingBootom(paddingBootom){
-        paddingBootom=addSuffixeToNumber(paddingBootom,"px");
-        this.style({paddingBootom});
-        return this;
-    }
-    paddingLeft(paddingLeft){
-        paddingLeft=addSuffixeToNumber(paddingLeft,"px");
-        this.style({paddingLeft});
-        return this;
-    }
-    // Typographie
-    font(font){
-        this.style({font});
-        return this;
-    }
-    fontFamily(fontFamily=""){
-        this.style({fontFamily});
-        return this;
-    }
-    fontSize(fontSize){
-        this.style({fontSize});
-        return this;
-    }
-    // Misc
-    cursor(type="pointer"){
-        this.style({ cursor: type });
-        return this;
-    }  
-    overflow(x,y){
-        const values=["hidden","auto"];
-        this.style({
-          overflowX:typeof x==="number"?values[x]:x,
-          overflowY:typeof y==="number"?values[y]:y
-        },{target,maskVector})
-        return this;
-    }
-    clip(polygon, { target, maskVector } = {}) {
-        if (typeof polygon === "string") polygon = "polygon(" + polygon + ")";
-        this.style({ clipPath: polygon }, { target, maskVector });
-        return this;
-    }
-    // Transfromations
-    fadeOut(transitionTimming = 1) {
-        this.style({ 
-          transition:`opacity ${transitionTimming/1000}s`, 
-          opacity: 0 
-        });
-        this.cache.isFaddedOut=true;
-        return this;
-    }
-    fadeIn(transitionTimming = 1) {
-        this.style({ 
-          transition: `opacity ${transitionTimming/1000}s`, 
-          opacity: 1 
-        });
-        this.cache.isFaddedOut=false;
-        return this;
-    }
-    toggleFade(t_in = 1000,t_out=t_in){
-        this.cache.isFaddedOut?this.fadeIn(t_in):this.fadeOut(t_out);
-        return this;
-    }
-    morphBorderRadius(newValue, transitionTimming){
-        this.style({ 
-            borderRadius: newValue,
-            transition: `borderRadius ${transitionTimming/1000}s`, 
-        });
-        return this;
-    }
-    #applyTransformMatrix(transitionTimming){
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.style({
-            transform: `matrix3d(${transformMatrix})`,
-            "-webkit-transform": `matrix3d(${transformMatrix})`,
-            "-moz-transform": `matrix3d(${transformMatrix})`, 
-            "-ms-transform": `matrix3d(${transformMatrix})`, 
-            "-o-transform": `matrix3d(${transformMatrix})` 
-        });
-        if (transitionTimming != 0) this.style({ transition: `transform ${transitionTimming/1000}s ease` });
-    }
-    translate(dx, dy = dx ,dz = 0, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx);
-        this.cache.transformation.matrix.set(3,1,dy);
-        this.cache.transformation.matrix.set(3,2,dz);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateX(dx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx)
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateY(dy, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,1,dy)
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateZ(dz, transitionTimming = 0) {
-        const d=-1/this.cache.transformation.matrix[2][2];
-        this.cache.transformation.matrix.set(3,2,z);
-        this.cache.transformation.matrix.set(3,3,1-(dz/d));
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    perspective(distance,transitionTimming=0){
-        const z=this.cache.transformation.matrix[3][2];
-        this.cache.transformation.matrix.set(2,2,-1/d);
-        this.cache.transformation.matrix.set(3,3,1-(z/distance));
-        this.#applyTransformMatrix(transitionTimming);
-        return this; 
-    }
-    scale(sx, sy = sx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,sx)
-        this.cache.transformation.matrix.set(1,1,sy)
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,x)
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,y)
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skew(x, y = x, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x)
-        this.cache.transformation.matrix.set(1,0,y)
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x)
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,0,y);
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    rotateX(rx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,cos(rx));
-        this.cache.transformation.matrix.set(1,2,-sin(rx));
-        this.cache.transformation.matrix.set(2,1,sin(rx));
-        this.cache.transformation.matrix.set(1,2,cos(rx));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateY(ry, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(ry));
-        this.cache.transformation.matrix.set(0,2,sin(ry));
-        this.cache.transformation.matrix.set(2,0,-sin(ry));
-        this.cache.transformation.matrix.set(2,2,cos(ry));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateZ(rz, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(rz));
-        this.cache.transformation.matrix.set(0,1,-sin(rz));
-        this.cache.transformation.matrix.set(1,0,sin(rz));
-        this.cache.transformation.matrix.set(1,1,cos(rz)); 
-        this.#applyTransformMatrix(transitionTimming);  
-        return this;
-    }
-    flipeX(transitionTimming = 1) {
-        this.cache.transformation.Flip[0] += 180;
-        this.cache.transformation.Flip[0] %= 360;
-        this.rotateX(this.cache.transformation.Flip[0], transitionTimming);
-        return this;
-    }
-    flipeY(transitionTimming = 1) {
-        this.cache.transformation.Flip[1] += 180 ;
-        this.cache.transformation.Flip[1] %= 360;
-        this.rotateY(this.cache.transformation.Flip[1], transitionTimming);
-        return this;
-      }
-    flipeZ(transitionTimming = 1) {
-        this.cache.transformation.Flip[2] += 180;
-        this.cache.transformation.Flip[2] %= 360;
-        this.rotateZ(this.cache.transformation.Flip[2], transitionTimming);
-        return this;
-    }
-    slideHeightIn(transitionTimming = 1, h = this.h) {
-        this.style({ transition: transitionTimming + "s", height: h });
-        return this;
-    }
-    slideHeightOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", height: 0 });
-        this.target?.element?.n("transitionend", () =>
-          this.style({ opacity: "none" }),
-        );
-        return this;
-      }
-    slideWidthIn(transitionTimming = 1, w = this.w) {
-        this.style({ transition: transitionTimming + "s", width: w });
-        return this;
-    }
-    slideWidthOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", width: 0 });
-        const wrapper=()=>{
-            this.style({ opacity: "none" })
-        }
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
-        return this;
-    }
-    slideIn({ transitionTimming = 1, w = "100%", h = "auto" } = {}) {
-        this.style({
-          transition: transitionTimming + "s",
-          width: w,
-          height: h,
-          visibility: "visible",
-        });
-        return this;
-    }
-    slideOut({ transitionTimming = 1, width = 0, heightransitionTimming = 0 } = {}) {
-        this.style({
-          visibility: "hidden",
-          transition: transitionTimming + "s",
-          opacity: "none",
-          width: width,
-          height: height,
-        });
-        const wrapper=()=>{
-            this.style({ opacity: "none" });
-        }
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
-        return this;
-    }
-      
-}
-export{
-    ZikoUIElementStyle
-}