ziko 0.65.0 → 0.67.0

package/src/time/clocks/index.d.ts

@@ -0,0 +1,3 @@
+export type * from './tick.d.ts'
+export type * from './clock.d.ts'
+export type * from './scheduler.d.ts'

package/src/time/clocks/scheduler.d.ts

@@ -0,0 +1,42 @@
+export interface TimeTask {
+    fn: () => Promise<any> | any;
+    delay?: number;
+}
+
+export type ParallelTasks = TimeTask[];
+
+export interface TimeSchedulerOptions {
+    repeat?: number;
+    loop?: boolean;
+}
+
+export declare class TimeScheduler {
+    tasks: (TimeTask | ParallelTasks)[];
+    repeat: number;
+    loop: boolean;
+
+    stopped: boolean;
+    running: boolean;
+
+    onStart: (() => void) | null;
+    onTask: ((fn: () => Promise<any> | any) => void) | null;
+    onEnd: (() => void) | null;
+
+    constructor(
+        tasks?: (TimeTask | ParallelTasks)[],
+        options?: TimeSchedulerOptions
+    );
+
+    run(): Promise<void>;
+
+    stop(): void;
+
+    addTask(task: TimeTask | ParallelTasks): void;
+
+    clearTasks(): void;
+}
+
+export declare function Scheduler(
+    tasks?: (TimeTask | ParallelTasks)[],
+    options?: { repeat?: number | null }
+): TimeScheduler;

package/src/time/clocks/tick.d.ts

@@ -0,0 +1,26 @@
+export declare class Tick {
+    ms: number;
+    fn: (self: Tick) => void;
+    count: number;
+    frame: number;
+    id: ReturnType<typeof setInterval> | null;
+    running: boolean;
+
+    constructor(
+        fn: (self: Tick) => void,
+        ms: number,
+        count?: number,
+        start?: boolean
+    );
+
+    start(): this;
+    stop(): this;
+    isRunning(): boolean;
+}
+
+export declare function tick(
+    fn: (self: Tick) => void,
+    ms: number,
+    count?: number,
+    start?: boolean
+): Tick;

package/src/time/decorators/index.d.ts

@@ -0,0 +1,9 @@
+export declare function debounce<T extends (...args: any[]) => any>(
+    fn: T,
+    delay?: number
+): (...args: Parameters<T>) => void;
+
+export declare function throttle<T extends (...args: any[]) => any>(
+    fn: T,
+    delay: number
+): (...args: Parameters<T>) => void;

package/src/time/delay/index.d.ts

@@ -0,0 +1,12 @@
+export declare const sleep: (ms: number) => Promise<void>;
+
+export interface TimeoutResult {
+    id: ReturnType<typeof setTimeout>;
+    clear: () => void;
+    promise: Promise<void>;
+}
+
+export declare function timeout(
+    ms: number,
+    fn?: () => any
+): TimeoutResult;

package/src/time/ease/index.d.ts

@@ -0,0 +1,103 @@
+declare const linear: (t: number) => number;
+
+// --- Sin ---
+declare const in_sin: (t: number) => number;
+declare const out_sin: (t: number) => number;
+declare const in_out_sin: (t: number) => number;
+
+// --- Quad ---
+declare const in_quad: (t: number) => number;
+declare const out_quad: (t: number) => number;
+declare const in_out_quad: (t: number) => number;
+
+// --- Cubic ---
+declare const in_cubic: (t: number) => number;
+declare const out_cubic: (t: number) => number;
+declare const in_out_cubic: (t: number) => number;
+
+// --- Quart ---
+declare const in_quart: (t: number) => number;
+declare const out_quart: (t: number) => number;
+declare const in_out_quart: (t: number) => number;
+
+// --- Quint ---
+declare const in_quint: (t: number) => number;
+declare const out_quint: (t: number) => number;
+declare const in_out_quint: (t: number) => number;
+
+// --- Expo ---
+declare const in_expo: (t: number) => number;
+declare const out_expo: (t: number) => number;
+declare const in_out_expo: (t: number) => number;
+
+// --- Circ ---
+declare const in_circ: (t: number) => number;
+declare const out_circ: (t: number) => number;
+declare const in_out_circ: (t: number) => number;
+
+// --- Arc ---
+declare const arc: (t: number) => number;
+
+// --- Back ---
+declare const back: (t: number, x?: number) => number;
+
+// --- Elastic ---
+declare const elastic: (t: number) => number;
+
+// --- Back variations ---
+declare const in_back: (t: number, c1?: number, c3?: number) => number;
+declare const out_back: (t: number, c1?: number, c3?: number) => number;
+declare const in_out_back: (t: number, c1?: number, c2?: number) => number;
+
+// --- Elastic variations ---
+declare const in_elastic: (t: number, c4?: number) => number;
+declare const out_elastic: (t: number, c4?: number) => number;
+declare const in_out_elastic: (t: number, c5?: number) => number;
+
+// --- Bounce ---
+declare const in_bounce: (t: number, n1?: number, d1?: number) => number;
+declare const out_bounce: (t: number, n1?: number, d1?: number) => number;
+declare const in_out_bounce: (t: number, n1?: number, d1?: number) => number;
+
+// --- Step & Discret ---
+declare const step: (t: number, steps?: number) => number;
+declare const discret: (t: number, segments?: number) => number;
+
+export {
+    linear,
+    in_sin,
+    out_sin,
+    in_out_sin,
+    in_quad,
+    out_quad,
+    in_out_quad,
+    in_cubic,
+    out_cubic,
+    in_out_cubic,
+    in_quart,
+    out_quart,
+    in_out_quart,
+    in_quint,
+    out_quint,
+    in_out_quint,
+    in_expo,
+    out_expo,
+    in_out_expo,
+    in_circ,
+    out_circ,
+    in_out_circ,
+    arc,
+    back,
+    elastic,
+    in_back,
+    out_back,
+    in_out_back,
+    in_elastic,
+    out_elastic,
+    in_out_elastic,
+    in_bounce,
+    out_bounce,
+    in_out_bounce,
+    step,
+    discret
+};

package/src/time/index.d.ts

@@ -0,0 +1,4 @@
+export type * from './ease/index.d.ts'
+export type * from './clocks/index.d.ts'
+export type * from './decorators/index.d.ts'
+export type * from './loop/index.d.ts'

package/src/time/loop/index.d.ts

@@ -0,0 +1,50 @@
+export declare class TimeLoop {
+    callback: (self: TimeLoop) => void;
+
+    protected cache: {
+        isRunning: boolean;
+        id: ReturnType<typeof setTimeout> | null;
+        last_tick: number | null;
+        step: number;
+        t0: number;
+        t1: number;
+        autoplay: boolean;
+        pauseTime: number | null;
+        frame: number;
+        elapsed?: number;
+    };
+
+    constructor(
+        callback: (self: TimeLoop) => void,
+        options?: {
+            step?: number;
+            t0?: number;
+            t1?: number;
+            autoplay?: boolean;
+        }
+    );
+
+    get frame(): number;
+
+    get elapsed(): number | undefined;
+
+    start(): this;
+    pause(): this;
+    resume(): this;
+    stop(): this;
+
+    startAfter(t?: number): this;
+    stopAfter(t?: number): this;
+
+    protected animate: () => void;
+}
+
+export declare function loop(
+    callback: (self: TimeLoop) => void,
+    options?: {
+        step?: number;
+        t0?: number;
+        t1?: number;
+        autoplay?: boolean;
+    }
+): TimeLoop;

package/src/ui/constructors/UIElement.js

@@ -7,20 +7,19 @@ import {
   IndexingMethods,
   EventsMethodes,
   StyleMethods
-} from "../__methods__/index.js";
-// import { 
-//   // useCustomEvent,
-//   // useSwipeEvent,
-//   // watchIntersection, 
-//   // watchSize,
-//   // watchAttr,
-//   // watchChildren
-// } from "../../--reactivity-deprecated/events/custom-event.js"
+} from "./mixins/index.js";
+
+import {
+  EventController
+} from '../../exp-events/index.js'
 class UIElement extends UIElementCore{
   constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
     super()
-    // console.log({type})
-    // console.log(this)
+    this.exp = {
+      events : {
+
+      }
+    }
     register_to_class(
       this, 
       LifecycleMethods,
@@ -31,9 +30,17 @@ class UIElement extends UIElementCore{
       EventsMethodes
     );
 
-    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render)
   }
+  _on(event, callback, {details_setter, category = 'global'} = {}){
+    if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
+    const EVENT = this.exp.events[category]
+    EVENT.addListener(event, callback);
+    if(details_setter) details_setter.call(EVENT);
+  }
+  _off(event, category = 'global'){
+    this.exp.events[category].removeListener(event)
+  }
   get element(){
     return this.cache.element;
   }
@@ -49,9 +56,6 @@ class UIElement extends UIElementCore{
     if(directive)this.element.setAttribute('data-hydration-directive', directive);
     return this;
   }
-  // isUIElement(){
-  //   return true;
-  // }
   get st(){
     return this.cache.style;
   }
@@ -91,84 +95,6 @@ class UIElement extends UIElementCore{
   get left(){
     return this.element.getBoundingClientRect().left;
   }
-  // clone(render=false) {
-  //   // UI.__proto__=this.__proto__;
-  //   // if(this.items.length){
-  //   //   const items = [...this.items].map(n=>n.clone());
-  //   //   UI.append(...items);
-  //   // }
-  //   // else UI.element=this.element.cloneNode(true);
-  //   // return UI.mount(render);
-  // }
-  // [Symbol.iterator]() {
-  //   return this.items[Symbol.iterator]();
-  // }
-  // maintain() {
-  //   for (let i = 0; i < this.items.length; i++) {
-  //     Object.defineProperty(this, i, {
-  //       value: this.items[i],
-  //       writable: true,
-  //       configurable: true,
-  //       enumerable: false 
-  //       });
-  //   }
-  // }
-  // freeze(freeze){
-  //   this.cache.isFrozzen=freeze;
-  //   return this;
-  // }
-  // setTarget(tg) {
-  //   if(this.isBody) return ;
-  //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unmount();
-  //   this.target = tg;
-  //   this.mount();
-  //   return this;
-  // }
-  // describe(label){
-  //   if(label)this.setAttr("aria-label",label)
-  // }
-  // get children() {
-  //   return [...this.element.children];
-  // }
-  // get cloneElement() {
-  //   return this.element.cloneNode(true);
-  // }
-  // setClasses(...value) {
-  //   this.setAttr("class", value.join(" "));
-  //   return this;
-  // }
-  // get classes(){
-  //   const classes=this.element.getAttribute("class");
-  //   return classes===null?[]:classes.split(" ");
-  // }
-  // addClass() {
-  //   /*this.setAttr("class", value);
-  //       return this;*/
-  // }
-  // setId(id) {
-  //   this.setAttr("id", id);
-  //   return this;
-  // }
-  // get id() {
-  //   return this.element.getAttribute("id");
-  // }
-  // To Fix
-  // onKeysDown({keys=[],callback}={}){
-  //   if(!this.events.key)this.events.key = useKeyEvent(this);
-  //   this.events.key.handleSuccessifKeys({keys,callback});
-  //   return this;
-  // }
-  // watchAttr(callback){
-  //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-  //   return this;
-  // }
-  // watchChildren(callback){
-  //   if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-  //   return this;
-  // }
-  // watchSize(callback)Remplaced By on onViewResize
-  // watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
 
 }
 export { UIElement }

package/src/ui/constructors/UIElementCore.d.ts

@@ -0,0 +1,59 @@
+import { UINode } from "./UINode.js";
+import { UIStore } from "../../__ziko__/__ui__.js";
+
+export declare class UIElementCore extends UINode {
+    cache: {
+        node: Node;
+        name?: string;
+        isInteractive?: boolean;
+        parent?: UIElementCore | null;
+        isBody?: boolean;
+        isRoot?: boolean;
+        isHidden?: boolean;
+        isFrozzen?: boolean;
+        attributes?: Record<string, any>;
+        filters?: Record<string, any>;
+        temp?: Record<string, any>;
+        element?: HTMLElement | SVGElement;
+    };
+
+    events: {
+        ptr: any | null;
+        mouse: any | null;
+        wheel: any | null;
+        key: any | null;
+        drag: any | null;
+        drop: any | null;
+        click: any | null;
+        clipboard: any | null;
+        focus: any | null;
+        swipe: any | null;
+        custom: any | null;
+    };
+
+    observer: {
+        resize: any | null;
+        intersection: any | null;
+    };
+
+    items: UIStore;
+
+    constructor();
+
+    init(
+        element: string | HTMLElement | SVGElement | null,
+        name: string,
+        type: "html" | "svg",
+        render?: boolean
+    ): void;
+
+    get element(): HTMLElement | SVGElement | undefined;
+
+    [Symbol.iterator](): Iterator<any>;
+
+    maintain(): void;
+
+    isInteractive(): boolean;
+
+    isUIElement(): true;
+}

package/src/ui/constructors/UIElementCore.js

@@ -30,7 +30,6 @@ class UIElementCore extends UINode{
       isRoot:false,
       isHidden: false,
       isFrozzen:false,
-      legacyParent : null,
       attributes: {},
       filters: {},
       temp:{}
@@ -53,14 +52,6 @@ class UIElementCore extends UINode{
       intersection:null
     }
     if(element) Object.assign(this.cache,{element});
-    // useDefaultStyle && this.style({ 
-    //   position: "relative",
-    //   boxSizing:"border-box",
-    //   margin:0,
-    //   padding:0,
-    //   width : "auto",
-    //   height : "auto"
-    //  });
     this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && render && this?.render?.()

package/src/ui/constructors/UINode.d.ts

@@ -0,0 +1,11 @@
+export declare class UINode {
+    cache: {
+        node: Node;
+    };
+
+    constructor(node: Node);
+
+    isUINode(): true;
+
+    get node(): Node;
+}

package/src/ui/constructors/UINode.js

@@ -4,7 +4,7 @@ export class UINode {
             node
         }
     }
-    isZikoUINode(){
+    isUINode(){
         return true
     }
     get node(){

package/src/ui/{__methods__ → constructors/mixins}/dom.js

@@ -1,4 +1,4 @@
-import { text } from "../text/index.js";
+import { text } from "../../text/index.js";
 import { __addItem__ } from "./utils/index.js";
 export function append(...ele) {
   __addItem__.call(this, "append", "push", ...ele);

package/src/ui/{__methods__ → constructors/mixins}/events.js

@@ -1,4 +1,4 @@
-import { EventsMap } from "../../events/events-map/index.js";
+import { EventsMap } from "../../../events/events-map/index.js";
 import {
   bind_pointer_event,
   bind_mouse_event,
@@ -10,9 +10,9 @@ import {
   bind_wheel_event,
   bind_view_event,
   bind_swipe_event
-} from "../../events/binders/index.js";
+} from "../../../events/binders/index.js";
 
-import { bind_custom_event } from "../../events/binders/custom-event.js";
+import { bind_custom_event } from "../../../events/binders/custom-event.js";
 
 const binderMap = {
   ptr: bind_pointer_event,

package/src/ui/{__methods__ → constructors/mixins}/style.js

@@ -1,4 +1,4 @@
-import { isStateGetter } from '../../hooks/use-state.js'
+import { isStateGetter } from '../../../hooks/use-state.js'
 export function style(styles){
     if(!this.element?.style) return this;
     for(let key in styles){

package/src/ui/{__methods__ → constructors/mixins}/utils/index.js

@@ -1,9 +1,9 @@
-import { isStateGetter } from "../../../hooks/use-state.js";
+import { isStateGetter } from "../../../../hooks/use-state.js";
 import { 
   is_camelcase,
   camel2hyphencase
- } from '../../../data/string/index.js'
- import { text } from "../../text/index.js";
+ } from '../../../../data/string/index.js'
+ import { text } from "../../../text/index.js";
 export async function __addItem__(adder, pusher, ...ele) {
   if (this.cache.isFrozzen) {
     console.warn("You can't append new item to frozzen element");
@@ -24,7 +24,7 @@ export async function __addItem__(adder, pusher, ...ele) {
       }
     }
     if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isZikoUINode) {
+    if (ele[i]?.isUINode) {
         ele[i].cache.parent = this;
         this.element?.[adder](ele[i].element);
         ele[i].target = this.element;

package/src/ui/web-component/index.d.ts

@@ -0,0 +1,14 @@
+import { UIElement } from "../constructors/UIElement";
+
+export interface WCPropDefinition {
+    type: (value: any) => any; // function to convert attribute string to prop value
+}
+
+export declare function define_wc(
+    name: `${string}-${string}`,
+    UI_Constructor: (props: Record<string, any>) => UIElement | UIElement[],
+    props?: Record<string, WCPropDefinition>,
+    options?: {
+        mode? : ShadowRootMode
+    }
+): void;

package/src/ui/web-component/index.js

@@ -1,4 +1,4 @@
-export function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
+export function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
     if (globalThis.customElements?.get(name)) {
         console.warn(`Custom element "${name}" is already defined`);
         return;
@@ -30,7 +30,7 @@ export function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
 
             render() {
                 this.shadowRoot.innerHTML = '';
-                const item = UIElement(this.props);
+                const item = UI_Constructor(this.props);
                 if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)) 
                 else item.mount(this.shadowRoot)
             }