tauri-kargo-tools 0.1.3 → 0.1.4

package/dist/builder/menu.ts

@@ -0,0 +1,206 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, clamp, Ctx, VueRuntime } from "../vue-builder";
+import { MenuNode, Vue } from "../vue-model";
+/* ----------- Menu (modal <dialog> top-layer, placement précis, clics transmis aux items) ----------- */
+
+export function buildMenu<T extends object>(builder: Builder, node: MenuNode<T>, ctx: Ctx<T>) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    applySize(btn, node.buttonWidth, node.buttonHeight);
+    // Rendu du trigger (texte/html/img) – source = `label`
+    builder.renderTrigger(btn, node.label, (node as any).type as ('html' | 'img' | undefined));
+    ctx.add(btn);
+
+    // <dialog> modal (top-layer) pour capturer focus/clavier et bloquer l’arrière-plan
+    const pop = document.createElement('dialog') as HTMLDialogElement;
+    pop.setAttribute('data-menu', '');
+    if (!document.getElementById('menu-dialog-backdrop-style')) {
+        const st = document.createElement('style');
+        st.id = 'menu-dialog-backdrop-style';
+        st.textContent = `dialog[data-menu]::backdrop{background:transparent !important}`;
+        document.head.appendChild(st);
+    }
+    pop.style.position = 'fixed';
+    pop.style.inset = 'auto';
+    pop.style.margin = '0';
+    pop.style.padding = '0';
+    pop.style.border = 'none';
+    pop.style.background = 'transparent';
+    pop.style.overflow = 'visible';
+    pop.style.zIndex = '2147483647';
+    pop.style.display = 'none';
+    pop.style.visibility = 'hidden';
+    pop.tabIndex = -1;
+
+    // Panneau visuel
+    const panel = document.createElement('div');
+    applyIdAndClass(panel, node);
+    applySize(panel, node.width, node.height);
+    panel.setAttribute('role', 'menu');
+    panel.setAttribute('class', 'app');
+    panel.tabIndex = -1;
+    panel.style.maxWidth = 'min(90vw, 640px)';
+    panel.style.maxHeight = '80vh';
+    panel.style.overflow = 'auto';
+    panel.style.boxSizing = 'border-box';
+    panel.style.background = 'var(--menu-bg, #fff)';
+    panel.style.border = '1px solid var(--menu-border, rgba(0,0,0,.12))';
+    panel.style.borderRadius = '8px';
+    panel.style.boxShadow = '0 8px 30px rgba(0,0,0,.2)';
+    panel.style.padding = '0';
+
+    const host = document.createElement('div');
+    host.style.minWidth = '220px';
+    panel.appendChild(host);
+    pop.appendChild(panel);
+
+    document.body.appendChild(pop);
+    ctx.domUnsubs.push(() => { try { pop.close(); pop.remove(); } catch { } });
+
+    let child: VueRuntime<any> | null = null;
+    let openState = false;
+    const cleanup: Array<() => void> = [];
+
+    const clearChild = () => {
+        if (child) { try { child.stop(); } catch { } child = null; }
+        while (host.firstChild) host.removeChild(host.firstChild);
+    };
+    const mountFor = (value: any) => {
+        clearChild();
+        const ui = builder.findVueFor(value);
+        if (!ui) return false;
+        const wrap = document.createElement('div');
+        host.appendChild(wrap);
+        child = builder.bootInto(ui as Vue<any>, value, wrap);
+        return true;
+    };
+
+    const place = () => {
+        pop.style.display = 'block';
+        pop.style.visibility = 'hidden';
+        if (!pop.open) { try { pop.showModal(); } catch { } } // top-layer actif
+
+        const r = btn.getBoundingClientRect();
+        const pw = panel.offsetWidth || 0;
+        const ph = panel.offsetHeight || 0;
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const gap = 8;
+
+        let top = r.bottom + gap;
+        let left = r.left;
+        if (top + ph > vh) {
+            const above = r.top - gap - ph;
+            if (above >= 0) top = above;
+        }
+        left = clamp(left, gap, vw - pw - gap);
+        top = clamp(top, gap, vh - ph - gap);
+
+        pop.style.left = `${left}px`;
+        pop.style.top = `${top}px`;
+        pop.style.visibility = 'visible';
+    };
+
+    // Clic hors du panneau (sur le backdrop du dialog) => fermer
+    pop.addEventListener('click', (e) => {
+        if (e.target === pop) { e.preventDefault(); e.stopPropagation(); close(); }
+    });
+
+    // Gestion des clics **dans** le panel : laisser passer aux cibles, puis fermer
+    const onInsideClick = (e: MouseEvent) => {
+        const t = e.target as HTMLElement | null;
+        if (!t) return;
+        const item = t.closest('[data-menu-close], [role="menuitem"], button, a');
+        if (!item) return;
+        setTimeout(() => close(), 0);
+    };
+    panel.addEventListener('click', onInsideClick);
+
+    // Capture clavier au niveau du dialog (le parent ne reçoit rien)
+    const getFocusables = () =>
+        Array.from(panel.querySelectorAll<HTMLElement>(
+            '[role="menuitem"],button,a[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+        )).filter(el => !el.hasAttribute('disabled') && el.offsetParent !== null);
+
+    const onKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+            e.preventDefault(); e.stopPropagation();
+            close();
+            return;
+        }
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault(); e.stopPropagation();
+            const list = getFocusables();
+            if (!list.length) return;
+            const idx = list.indexOf(document.activeElement as HTMLElement);
+            const dir = (e.key === 'ArrowDown') ? 1 : -1;
+            const next = list[(idx + dir + list.length) % list.length] || list[0];
+            next.focus();
+            return;
+        }
+        e.stopPropagation();
+    };
+
+    const close = () => {
+        if (!openState) return;
+        for (const f of cleanup.splice(0)) { try { f(); } catch { } }
+        try { pop.close(); } catch { }
+        pop.style.display = 'none';
+        pop.style.visibility = 'hidden';
+        clearChild();
+        openState = false;
+    };
+
+    const open = () => {
+        if (openState) { close(); return; }
+        if (node.action) { try { (ctx.obj as any)[node.action]!(); } catch { } }
+        const value = (ctx.obj as any)[node.name];
+        if (value == null) { close(); return; }
+        if (!mountFor(value)) return;
+
+        place();
+        requestAnimationFrame(() => {
+            place();
+            const list = getFocusables();
+            (list[0] ?? panel).focus({ preventScroll: true });
+        });
+
+        document.addEventListener('keydown', onKey, true);
+        const onResize = () => place();
+        const onScroll = () => place();
+        window.addEventListener('resize', onResize);
+        window.addEventListener('scroll', onScroll, true);
+
+        cleanup.push(() => {
+            document.removeEventListener('keydown', onKey, true);
+            window.removeEventListener('resize', onResize);
+            window.removeEventListener('scroll', onScroll, true);
+        });
+
+        if (!(node.closeOnEsc ?? true)) {
+            const onCancel = (e: Event) => e.preventDefault();
+            pop.addEventListener('cancel', onCancel);
+            cleanup.push(() => pop.removeEventListener('cancel', onCancel));
+        }
+
+        openState = true;
+    };
+
+    // Réactivité si la source change pendant l’ouverture
+    const offField = ctx.listener.listen(node.name as keyof T, (v) => {
+        if (v == null) close();
+        else if (openState) {
+            const s = panel.scrollTop;
+            mountFor(v);
+            place();
+            panel.scrollTop = s;
+        }
+    });
+    ctx.dataUnsubs.push(offField);
+
+    // visible / enable (bouton)
+    bindVisibleEnabled(node, btn, ctx);
+
+    btn.addEventListener('click', open);
+    ctx.domUnsubs.push(() => btn.removeEventListener('click', open));
+    ctx.domUnsubs.push(() => close());
+}

package/dist/builder/select.ts

@@ -0,0 +1,88 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+import { SelectNode } from "../vue-model";
+
+/* ----------- Select ----------- */
+export function buildSelect<T extends object>(builder: Builder, node: SelectNode<T, any, any, any, any>, ctx: Ctx<T>) {
+    const sel = document.createElement('select');
+    applyIdAndClass(sel, node);
+
+    // NEW: mode handling
+    const mode = (node.mode ?? 'list');               // 'dropdown' | 'list' | 'multi-list'
+    sel.multiple = mode === 'multi-list';             // multi seulement en 'multi-list'
+
+    applySize(sel, node.width, node.height);
+    ctx.add(sel);
+
+    bindVisibleEnabled(node, sel, ctx);
+
+    let displayFn = (ctx.obj as any)[node.displayMethod] as (a: any) => string;
+    if (typeof displayFn === 'function') displayFn = displayFn.bind(ctx.obj);
+
+    // NEW: helper pour calculer la hauteur visible (nombre de lignes)
+    const computeListSize = (count: number) => {
+        if (mode === 'dropdown') return 1;
+        // Par défaut on montre entre 2 et 10 lignes (sans dépasser la taille)
+        return Math.max(Math.min(count, 10), 2);
+    };
+
+    const rebuild = () => {
+        const arr = ((ctx.obj as any)[node.list] ?? []) as any[];
+        while (sel.firstChild) sel.removeChild(sel.firstChild);
+        for (let i = 0; i < arr.length; i++) {
+            const opt = document.createElement('option');
+            opt.value = String(i);
+            try { opt.text = String(displayFn(arr[i])); }
+            catch { opt.text = String(arr[i] as unknown as string); }
+            sel.appendChild(opt);
+        }
+
+        // NEW: forcer l’apparence "liste" quand mode != dropdown
+        sel.size = computeListSize(arr.length);
+    };
+
+    const syncSelection = () => {
+        const selectedIdx = (((ctx.obj as any)[node.selection] ?? []) as number[])
+            .filter((n: any) => Number.isFinite(n)) as number[];
+
+        if (sel.multiple) {
+            const set = new Set(selectedIdx);
+            for (const opt of Array.from(sel.options)) {
+                const idx = Number(opt.value);
+                opt.selected = set.has(idx);
+            }
+        } else {
+            const first = selectedIdx.find((n) => n >= 0 && n < sel.options.length);
+            if (first !== undefined) sel.value = String(first);
+            else sel.selectedIndex = -1;
+        }
+    };
+
+    rebuild();
+    syncSelection();
+
+    const offList = ctx.listener.listen(node.list as keyof T, () => { rebuild(); syncSelection(); });
+    const offSel = ctx.listener.listen(node.selection as keyof T, () => { syncSelection(); });
+    ctx.dataUnsubs.push(offList, offSel);
+
+    const onChange = () => {
+        let indices: number[];
+        if (sel.multiple) {
+            indices = Array.from(sel.selectedOptions)
+                .map(o => Number(o.value))
+                .filter(n => Number.isFinite(n));
+        } else {
+            indices = (sel.selectedIndex >= 0) ? [Number(sel.value)] : [];
+        }
+        if (node.muted) {
+            ctx.listener.setSilently(node.selection as keyof T, indices as any);
+            (ctx.listener as any).withAllMuted
+                ? (ctx.listener as any).withAllMuted(() => { (ctx.obj as any)[node.update]!(); })
+                : (ctx.obj as any)[node.update]!();
+        } else {
+            (ctx.obj as any)[node.selection] = indices as any;
+            (ctx.obj as any)[node.update]!();
+        }
+    };
+    sel.addEventListener('change', onChange);
+    ctx.domUnsubs.push(() => sel.removeEventListener('change', onChange));
+}

package/dist/builder/vue.ts

@@ -0,0 +1,34 @@
+import { applyIdAndClass, applySize, Builder, Ctx, VueRuntime } from "../vue-builder";
+import { SingleVueNode, Vue } from "../vue-model";
+
+/* ----------- Single UI (champ objet) ----------- */
+    export function buildSingleVue<T extends object>(builder:Builder,node: SingleVueNode<T>, ctx: Ctx<T>) {
+        const host = document.createElement('div');
+        applyIdAndClass(host, node);
+        applySize(host, node.width, node.height);
+        ctx.add(host);
+
+        let child: VueRuntime<any> | null = null;
+
+        const clearHost = () => {
+            if (child) { try { child.stop(); } catch { } child = null; }
+            while (host.firstChild) host.removeChild(host.firstChild);
+        };
+
+        const mountFor = (value: any, duringBuild: boolean) => {
+            clearHost();
+            const ui = builder.findVueFor(value);
+            if (!ui) return;
+            const inner = document.createElement('div');
+            host.appendChild(inner);
+            child = builder.bootInto(ui as Vue<any>, value, inner, duringBuild ? ctx.postInits : undefined);
+        };
+
+        // initial (defer init au parent)
+        mountFor((ctx.obj as any)[node.name], true);
+
+        // updates (exécuter inits immédiatement)
+        const off = ctx.listener.listen(node.name as keyof T, (v) => mountFor(v, false));
+        ctx.dataUnsubs.push(off);
+        ctx.domUnsubs.push(() => clearHost());
+    }

package/dist/container.ts

@@ -0,0 +1,75 @@
+interface Holder<T> {
+    target?: T
+}
+
+
+function createProxy<T extends object>(holder: Holder<T>) {
+    const proxy = new Proxy({} as T, {
+
+        get(_targetObject: T, property: string | symbol, receiver) {
+
+            const value = Reflect.get(holder.target!, property, receiver);
+
+            if (typeof value === "function") {
+                return function <U>(...args: U[]) {
+
+                    return value.apply(holder.target, args);
+                };
+            }
+            return value;
+        },
+        set(_targetObject: T, property: string | symbol, value, receiver) {
+            // Redirige les écritures vers la cible actuelle
+            console.log(`Setting property: ${String(property)} to ${value}`);
+            return Reflect.set(holder.target!, property, value, receiver);
+        }
+    });
+    return proxy
+
+
+}
+
+
+class Container {
+    map!: Map<unknown, unknown>
+    mapProxy: Map<unknown, boolean>
+    constructor() {
+        this.map = new Map()
+        this.mapProxy = new Map()
+    }
+    getInstance<Type extends object>(typeConstructor: new () => Type): Type {
+        let c = this.map.get(typeConstructor) as Type
+        if (!c) {
+            const holder: Holder<Type> = {}
+            const proxy = createProxy<Type>(holder)
+            this.map.set(typeConstructor, proxy)
+            this.mapProxy.set(proxy, false)
+            c = new typeConstructor()
+            const proxyUsed = this.mapProxy.get(proxy)!
+            if (!proxyUsed) {
+                this.map.set(typeConstructor, c)
+                this.mapProxy.delete(proxy)
+            } else {
+                holder.target = c
+            }
+            return c
+        }
+        if (this.mapProxy.has(c)) {
+            this.mapProxy.set(c, true)
+        }
+        return c
+
+
+    }
+    setInstance<Type extends object>(value: Type) {
+        this.map.set(value.constructor, value)
+    }
+
+}
+const container: Container = new Container()
+export function get<Type extends object>(typeConstructor: new () => Type): Type {
+    return container.getInstance(typeConstructor)
+}
+export function set<Type extends object>(value: Type) {
+    container.setInstance(value)
+}

package/dist/listener-factory.ts

@@ -0,0 +1,41 @@
+// listener-factory.ts
+import { Listener, Handler, Unlisten } from "./listener";
+
+/** Cache: 1 Listener par objet */
+const LISTENER_CACHE: WeakMap<object, Listener<any>> = new WeakMap();
+
+/** Récupère (ou crée) le Listener associé à obj */
+export function getListener<T extends object>(obj: T): Listener<T> {
+  let l = LISTENER_CACHE.get(obj) as Listener<T> | undefined;
+  if (!l) {
+    l = new Listener(obj);
+    LISTENER_CACHE.set(obj, l);
+  }
+  return l;
+}
+
+/** Optionnel: helpers pratiques */
+export function on<T extends object, K extends keyof T>(
+  obj: T,
+  key: K,
+  cb: Handler<T, K>
+): Unlisten {
+  return getListener(obj).listen(key, cb);
+}
+
+export function setSilently<T extends object, K extends keyof T>(
+  obj: T,
+  key: K,
+  value: T[K]
+) {
+  getListener(obj).setSilently(key, value);
+}
+
+export function stopListener(obj: object) {
+  const l = LISTENER_CACHE.get(obj);
+  if (l) { l.stop(); LISTENER_CACHE.delete(obj); }
+}
+
+export function hasListener(obj: object): boolean {
+  return LISTENER_CACHE.has(obj);
+}

package/dist/listener.ts

@@ -0,0 +1,134 @@
+export type Unlisten = () => void;
+export type Handler<T, K extends keyof T> = (value: T[K], old: T[K]) => void;
+
+export class Listener<T extends object> {
+  protected obj: T;
+
+  /** État par propriété instrumentée. La valeur courante est toujours `value`. */
+  protected fields = new Map<PropertyKey, {
+    prevDesc?: PropertyDescriptor;              // descripteur propre d'origine (si existait sur l'instance)
+    handlers: Set<(v: any, o: any) => void>;    // callbacks
+    enumerable: boolean;                        // pour restaurer proprement
+    value: any;                                 // valeur source-de-vérité tant que c'est instrumenté
+    muted: number;                              // compteur de mute (réentrant)
+  }>();
+
+  constructor(obj: T) { this.obj = obj; }
+
+  listen<K extends keyof T>(key: K, handler: Handler<T, K>): Unlisten {
+    const prop = key as PropertyKey;
+    let st = this.fields.get(prop);
+
+    if (!st) {
+      // Descripteur propre s'il existe (sur l'instance)
+      const own = Object.getOwnPropertyDescriptor(this.obj, prop as any);
+
+      if (own && own.configurable === false) {
+        throw new Error(`Le champ "${String(prop)}" est non configurable.`);
+      }
+
+      const enumerable = own?.enumerable ?? true;
+
+      // Valeur initiale à capturer AVANT de remplacer par notre accessor
+      let current: any;
+      if (own) {
+        // data property
+        if ("value" in own) current = own.value;
+        // accessor property
+        else current = own.get ? own.get.call(this.obj) : undefined;
+      } else {
+        // rien sur l'instance → on lit (prototype/valeur courante)
+        current = (this.obj as any)[prop];
+      }
+
+      st = {
+        prevDesc: own,
+        handlers: new Set<(v: any, o: any) => void>(),
+        enumerable,
+        value: current,
+        muted: 0,
+      };
+
+      // On pose NOTRE accessor sur l'instance : get/set utilisent toujours st.value
+      Object.defineProperty(this.obj, prop, {
+        configurable: true,
+        enumerable,
+        get: () => st!.value,
+        set: (newVal: any) => {
+          const oldVal = st!.value;
+          st!.value = newVal;
+          if (st!.muted > 0 || Object.is(oldVal, newVal)) return;
+          for (const h of st!.handlers) {
+            try { h(newVal, oldVal); } catch { /* ignore handler errors */ }
+          }
+        }
+      });
+
+      this.fields.set(prop, st);
+    }
+
+    st.handlers.add(handler as any);
+    return () => this.unlisten(key, handler);
+  }
+
+  unlisten<K extends keyof T>(key: K, handler: Handler<T, K>): boolean {
+    const prop = key as PropertyKey;
+    const st = this.fields.get(prop);
+    if (!st) return false;
+
+    const ok = st.handlers.delete(handler as any);
+    if (st.handlers.size === 0) {
+      this.restore(prop, st);
+      this.fields.delete(prop);
+    }
+    return ok;
+  }
+
+  stop(): void {
+    for (const [prop, st] of this.fields) this.restore(prop, st);
+    this.fields.clear();
+  }
+
+  /** Écrit sans notifier */
+  setSilently<K extends keyof T>(key: K, value: T[K]) {
+    this.withMuted(key, () => { (this.obj as any)[key] = value; });
+  }
+
+  /** Mute une propriété (si instrumentée) pendant l'exécution de `fn` */
+  protected withMuted<K extends keyof T>(key: K, fn: () => void) {
+    const st = this.fields.get(key as PropertyKey);
+    if (!st) { fn(); return; } // pas instrumentée → exécuter sans mute
+    try { st.muted++; fn(); } finally { st.muted--; }
+  }
+
+  /** Mute toutes les propriétés instrumentées pendant l'exécution de `fn` */
+  protected withAllMuted(fn: () => void) {
+    try {
+      for (const st of this.fields.values()) st.muted++;
+      fn();
+    } finally {
+      for (const st of this.fields.values()) st.muted--;
+    }
+  }
+
+  /** Restaure la propriété sur l'instance et tente de conserver la dernière valeur */
+  private restore(prop: PropertyKey, st: NonNullable<ReturnType<typeof this.fields.get>>) {
+    const last = st.value;
+
+    if (st.prevDesc) {
+      // Remet le descripteur d’origine sur l'instance
+      Object.defineProperty(this.obj, prop, st.prevDesc);
+      // Essaye d’y réinjecter la dernière valeur (si setter/data writable)
+      try { (this.obj as any)[prop] = last; } catch { /* readonly d'origine, on ignore */ }
+    } else {
+      // Aucune prop propre avant : on remet une data property standard avec la dernière valeur
+      delete (this.obj as any)[prop];
+      Object.defineProperty(this.obj, prop, {
+        configurable: true,
+        enumerable: st.enumerable,
+        writable: true,
+        value: last
+      });
+    }
+  }
+}