tauri-kargo-tools 0.1.3 → 0.1.5

package/dist/builder/boot-vue.ts

@@ -0,0 +1,136 @@
+// ./builder/boot-vue.ts
+import {
+    Builder,
+    Ctx,
+    applyIdAndClass,
+    applySize,
+    bindVisible,
+    bindEnabled,
+} from "../vue-builder";
+import {
+    BootVueNode,
+    StaticBootVueNode,
+    Vue,
+} from "../vue-model";
+
+/**
+ * BootVue — bouton avec label dynamique (KeysOfType<T,string>) qui,
+ * au clic, exécute `action()` puis monte la Vue de `name` dans un conteneur local.
+ */
+export function buildBootVue<T extends object>(
+    b: Builder,
+    node: BootVueNode<T, any, any, any>,
+    ctx: Ctx<T>
+) {
+    // wrapper racine du node
+
+
+
+    // bouton + conteneur d'accueil de la sous-UI
+    const btn = document.createElement("button");
+    applyIdAndClass(btn, node);
+
+
+    // taille appliquée au bouton (cohérent avec ButtonNode)
+    applySize(btn, node.width, node.height);
+
+    // visible sur le wrapper, enable sur le bouton
+    bindVisible(node as any, btn, ctx);
+    bindEnabled(node as any, btn, ctx);
+
+    // rendu du label dynamique
+    const labelKey = node.label as keyof T;
+    const render = (val: any) => b.renderTrigger(btn, String(val ?? ""), node.type);
+    render((ctx.obj as any)[labelKey]);
+
+    // écoute des changements du label
+    const offLabel = ctx.listener.listen(labelKey, (v: any) => render(v));
+    ctx.dataUnsubs.push(offLabel);
+
+    // logique de boot (montage/cleanup de la sous-UI)
+    let subStop: (() => void) | undefined;
+
+    const onClick = () => {
+        // 1) action()
+        try {
+            const fn = (ctx.obj as any)[node.factory];
+            if (typeof fn !== "function") return;
+
+            const child = fn.call(ctx.obj);
+
+            if (!child) return;
+            for (const u of ctx.domUnsubs) { try { u(); } catch { } }
+            for (const u of ctx.dataUnsubs) { try { u(); } catch { } }
+            b.bootInContainer(child)
+
+            // cleanup précédent
+            try { subStop?.(); } catch { }
+        } catch (e) {
+            console.warn("[bootVue.action] failed:", e);
+        }
+    };
+
+    btn.addEventListener("click", onClick);
+    ctx.domUnsubs.push(() => btn.removeEventListener("click", onClick));
+    ctx.domUnsubs.push(() => { try { subStop?.(); } catch { } });
+
+
+    ctx.add(btn);
+}
+
+/**
+ * StaticBootVue — bouton avec label fixe (string) qui,
+ * au clic, exécute `action()` puis monte la Vue de `name` dans un conteneur local.
+ */
+export function buildStaticBootVue<T extends object>(
+    b: Builder,
+    node: StaticBootVueNode<T, any, any>,
+    ctx: Ctx<T>
+) {
+    // wrapper racine du node
+
+
+
+    // bouton + conteneur d'accueil de la sous-UI
+    const btn = document.createElement("button");
+    applyIdAndClass(btn, node);
+
+    // taille appliquée au bouton
+    applySize(btn, node.width, node.height);
+
+    // visible sur le wrapper, enable sur le bouton
+    bindVisible(node as any, btn, ctx);
+    bindEnabled(node as any, btn, ctx);
+
+    // rendu du label fixe (texte / html / img)
+    b.renderTrigger(btn, node.label, node.type);
+
+    // logique de boot (montage/cleanup de la sous-UI)
+    let subStop: (() => void) | undefined;
+
+    const onClick = () => {
+        // 1) action()
+        try {
+            const fn = (ctx.obj as any)[node.factory];
+            if (typeof fn !== "function") return;
+            const child = fn.call(ctx.obj);
+            if (!child) return;
+            for (const u of ctx.domUnsubs) { try { u(); } catch { } }
+            for (const u of ctx.dataUnsubs) { try { u(); } catch { } }
+            b.bootInContainer(child)
+
+            // cleanup précédent
+            try { subStop?.(); } catch { }
+        } catch (e) {
+            console.warn("[staticBootVue.action] failed:", e);
+        }
+    };
+
+    btn.addEventListener("click", onClick);
+    ctx.domUnsubs.push(() => btn.removeEventListener("click", onClick));
+    ctx.domUnsubs.push(() => { try { subStop?.(); } catch { } });
+
+
+
+    ctx.add(btn);
+}

package/dist/builder/button.ts

@@ -0,0 +1,121 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+import { ButtonNode, StaticButtonNode } from "../vue-model";
+
+/* ----------- Button ----------- */
+export function buildStaticButton<T extends object>(builder: Builder, node: StaticButtonNode<T>, ctx: Ctx<T>) {
+    const btn = document.createElement('button');
+    applyIdAndClass(btn, node);
+    btn.type = 'button';
+    applySize(btn, node.width, node.height);
+    ctx.add(btn);
+
+    // --- rendu du contenu (texte / html / img) ---
+    const ctype = (node as any).type as ('img' | 'html' | undefined);
+    const nameKey = (node as any).name as (keyof T | undefined);
+
+    const renderContent = (valFromModel?: any) => {
+        const fallback = node.label ?? '';
+        const value = (valFromModel !== undefined) ? String(valFromModel ?? '') :
+            (nameKey ? String((ctx.obj as any)[nameKey] ?? '') : String(fallback));
+
+        if (!ctype) {
+            if (btn.innerHTML !== '') btn.innerHTML = '';
+            if (btn.textContent !== fallback) btn.textContent = fallback;
+            return;
+        }
+
+        if (ctype === 'html') {
+            if (btn.innerHTML !== value) btn.innerHTML = value;
+            return;
+        }
+
+        // ctype === 'img'
+        btn.innerHTML = '';
+        const img = document.createElement('img');
+        if (value) img.setAttribute('src', value);
+        img.alt = typeof node.label === 'string' ? node.label : '';
+        img.style.maxWidth = '100%';
+        img.style.maxHeight = '100%';
+        img.style.pointerEvents = 'none';
+        btn.appendChild(img);
+    };
+
+    renderContent();
+
+    if (ctype && nameKey) {
+        const off = ctx.listener.listen(nameKey, (v) => renderContent(v));
+        ctx.dataUnsubs.push(off);
+    }
+
+    bindVisibleEnabled(node, btn, ctx);
+
+    const onClick = () => {
+        if (node.muted && (ctx.listener as any).withAllMuted) {
+            (ctx.listener as any).withAllMuted(() => { (ctx.obj as any)[node.action]!(); });
+        } else {
+            (ctx.obj as any)[node.action]!();
+        }
+    };
+    btn.addEventListener('click', onClick);
+    ctx.domUnsubs.push(() => btn.removeEventListener('click', onClick));
+}
+
+/* ----------- ButtonLabel ----------- */
+export function buildButton<T extends object>(builder: Builder, node: ButtonNode<T, any>, ctx: Ctx<T>) {
+    const btn = document.createElement('button');
+    applyIdAndClass(btn, node);
+    btn.type = 'button';
+    applySize(btn, node.width, node.height);
+    ctx.add(btn);
+
+    const ctype = (node as any).type as ('img' | 'html' | undefined);
+    const sourceKey = ((node as any).name as (keyof T | undefined)) ?? (node.label as keyof T);
+
+    const renderFrom = (val: any) => {
+        const value = String(val ?? '');
+        if (!ctype) {
+            if (btn.innerHTML !== '') btn.innerHTML = '';
+            if (btn.textContent !== value) btn.textContent = value;
+            return;
+        }
+        if (ctype === 'html') {
+            if (btn.innerHTML !== value) btn.innerHTML = value;
+            return;
+        }
+        // ctype === 'img'
+        btn.innerHTML = '';
+        const img = document.createElement('img');
+        if (value) img.setAttribute('src', value);
+        const altText = String((ctx.obj as any)[node.label] ?? '');
+        img.alt = altText;
+        img.style.maxWidth = '100%';
+        img.style.maxHeight = '100%';
+        img.style.pointerEvents = 'none';
+        btn.appendChild(img);
+    };
+
+    renderFrom((ctx.obj as any)[sourceKey]);
+
+    const offSource = ctx.listener.listen(sourceKey, (v) => renderFrom(v));
+    ctx.dataUnsubs.push(offSource);
+
+    if (ctype === 'img' && sourceKey !== (node.label as keyof T)) {
+        const offAlt = ctx.listener.listen(node.label as keyof T, () => {
+            const img = btn.querySelector('img');
+            if (img) img.alt = String((ctx.obj as any)[node.label] ?? '');
+        });
+        ctx.dataUnsubs.push(offAlt);
+    }
+
+    bindVisibleEnabled(node, btn, ctx);
+
+    const onClick = () => {
+        if (node.muted && (ctx.listener as any).withAllMuted) {
+            (ctx.listener as any).withAllMuted(() => { (ctx.obj as any)[node.action]!(); });
+        } else {
+            (ctx.obj as any)[node.action]!();
+        }
+    };
+    btn.addEventListener('click', onClick);
+    ctx.domUnsubs.push(() => btn.removeEventListener('click', onClick));
+}

package/dist/builder/custom.ts

@@ -0,0 +1,30 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+import { CustomNode } from "../vue-model";
+
+ /* ----------- Custom ----------- */
+    export function buildCustom<T extends object>(builder:Builder,node: CustomNode<T, any, any>, ctx: Ctx<T>) {
+        let el: HTMLElement | null = null;
+        try {
+            el = (ctx.obj as any)[node.factory]!();
+        } catch (e) {
+            console.warn('[custom] factory call failed:', e);
+            return;
+        }
+        if (!(el instanceof HTMLElement)) {
+            console.warn('[custom] factory did not return an HTMLElement');
+            return;
+        }
+
+        applyIdAndClass(el, node);
+        applySize(el, node.width, node.height);
+        ctx.add(el);
+
+        bindVisibleEnabled(node, el, ctx);
+
+        if (node.init) {
+            ctx.postInits.push(() => {
+                try { (ctx.obj as any)[node.init]!(); }
+                catch (e) { console.warn('[custom.init] call failed:', e); }
+            });
+        }
+    }

package/dist/builder/dialog.ts

@@ -0,0 +1,78 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx, VueRuntime } from "../vue-builder";
+import { DialogNode, Vue } from "../vue-model";
+
+ /* ----------- Dialog ----------- */
+    export function buildDialog<T extends object>(builder:Builder,node: DialogNode<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);
+
+        const dlg = document.createElement('dialog') as HTMLDialogElement;
+        applyIdAndClass(dlg, node);
+        applySize(dlg, node.width, node.height);
+        const host = document.createElement('div');
+        host.style.minWidth = '100%';
+        dlg.appendChild(host);
+
+        let child: VueRuntime<any> | null = null;
+        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 open = () => {
+            if (node.action) {
+                try { (ctx.obj as any)[node.action]!(); } catch { }
+            }
+            const value = (ctx.obj as any)[node.name];
+            if (value == null) {
+                try { dlg.close(); } catch { }
+                clearChild();
+                return;
+            }
+            const ok = mountFor(value);
+            if (!ok) return;
+            const modal = node.modal ?? true;
+            if (modal && 'showModal' in dlg) dlg.showModal(); else dlg.show();
+        };
+
+        const close = () => {
+            try { dlg.close(); } catch { }
+            clearChild();
+        };
+
+        const offField = ctx.listener.listen(node.name as keyof T, (v) => {
+            if (v == null) close();
+            else if (dlg.open) mountFor(v);
+        });
+        ctx.dataUnsubs.push(offField);
+
+        bindVisibleEnabled(node, btn, ctx);
+
+        if (node.closeOnBackdrop) {
+            dlg.addEventListener('click', (e) => { if (e.target === dlg) close(); });
+        }
+        if (!(node.closeOnEsc ?? false)) {
+            dlg.addEventListener('cancel', (e) => e.preventDefault());
+        }
+        dlg.addEventListener('close', () => clearChild());
+
+        btn.addEventListener('click', open);
+        ctx.domUnsubs.push(() => btn.removeEventListener('click', open));
+
+        ctx.add(dlg);
+        ctx.domUnsubs.push(() => { try { dlg.close(); } catch { } });
+    }

package/dist/builder/flow.ts

@@ -0,0 +1,34 @@
+import { applyIdAndClass, applySize, Builder, Ctx } from "../vue-builder";
+import { FlowNode } from "../vue-model";
+
+/* ----------- Flow ----------- */
+    export function buildFlow<T extends object>(builder:Builder,node: FlowNode<T>, ctx: Ctx<T>) {
+        const div = document.createElement('div');
+        applyIdAndClass(div, node);
+        div.style.display = 'flex';
+        div.style.flexDirection = node.orientation === 'row' ? 'row' : 'column';
+        applySize(div, node.width, node.height);
+
+        if (node.gap !== undefined) (div.style as any).gap = typeof node.gap === 'number' ? `${node.gap}px` : String(node.gap);
+        const mapJustify: Record<string, string> = {
+            start: 'flex-start', end: 'flex-end', center: 'center',
+            'space-between': 'space-between', 'space-around': 'space-around', 'space-evenly': 'space-evenly'
+        };
+        const mapAlign: Record<string, string> = {
+            start: 'flex-start', end: 'flex-end', center: 'center', stretch: 'stretch'
+        };
+        if (node.justify) div.style.justifyContent = mapJustify[node.justify];
+        if (node.align) div.style.alignItems = mapAlign[node.align];
+        if (node.wrap) div.style.flexWrap = 'wrap';
+        if (node.style) for (const k of Object.keys(node.style) as Array<keyof CSSStyleDeclaration>) {
+            const v = node.style[k]; if (v != null) (div.style as any)[k] = v as any;
+        }
+        if (node.panel) div.classList.add('panel');
+
+        const childEls: HTMLElement[] = [];
+        const childCtx: Ctx<T> = { ...ctx, add: (el) => childEls.push(el) };
+        builder.buildNodes(node.children, childCtx);
+        for (const n of childEls) div.appendChild(n);
+
+        ctx.add(div);
+    }

package/dist/builder/img.ts

@@ -0,0 +1,27 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+import { ImgNode } from "../vue-model";
+
+
+    /* ----------- Img ----------- */
+export function buildImg<T extends object>(builder:Builder,node: ImgNode<T, any>, ctx: Ctx<T>) {
+        const img = document.createElement('img');
+        applyIdAndClass(img, node);
+        applySize(img, node.width, node.height);
+        if (node.alt != null) img.alt = node.alt;
+        const initial = String((ctx.obj as any)[node.url] ?? '');
+        if (initial !== '') img.setAttribute('src', initial);
+
+        ctx.add(img);
+
+        bindVisibleEnabled(node, img, ctx);
+
+        const offUrl = ctx.listener.listen(node.url as keyof T, (v) => {
+            const s = String(v ?? '');
+            const cur = img.getAttribute('src') ?? '';
+            if (cur !== s) {
+                if (s === '') img.removeAttribute('src');
+                else img.setAttribute('src', s);
+            }
+        });
+        ctx.dataUnsubs.push(offUrl);
+    }

package/dist/builder/input.ts

@@ -0,0 +1,80 @@
+import { applyIdAndClass, applySize, bindEnabled, bindVisible, Builder, Ctx } from "../vue-builder";
+import { InputNode } from "../vue-model";
+
+/* ----------- Input ----------- */
+export function buildInput<T extends object>(builder: Builder, node: InputNode<T, any>, ctx: Ctx<T>) {
+    const wrapper = document.createElement('label');
+    applyIdAndClass(wrapper, node);
+    wrapper.style.display = 'block';
+    if (node.label) wrapper.append(document.createTextNode(node.label + ' '));
+
+    const input = document.createElement('input');
+    applySize(wrapper, node.width, node.height);
+    applySize(input, "100%", "100%");
+    const current = (ctx.obj as any)[node.name];
+    const typeGuess =
+        node.inputType ??
+        (typeof current === 'boolean' ? 'checkbox'
+            : typeof current === 'number' ? 'number'
+                : 'text');
+
+    input.type = typeGuess === 'checkbox' ? 'checkbox'
+        : typeGuess === 'number' ? 'number'
+            : 'text';
+
+    if (typeGuess === 'checkbox') {
+        (input as HTMLInputElement).checked = Boolean(current);
+    } else if (typeGuess === 'number') {
+        (input as HTMLInputElement).valueAsNumber =
+            Number.isFinite(Number(current)) ? Number(current) : 0;
+    } else {
+        (input as HTMLInputElement).value = (current ?? '') as any as string;
+    }
+
+    wrapper.appendChild(input);
+    ctx.add(wrapper);
+
+    // visible / enable factorisés
+    bindVisible(node, wrapper, ctx);
+    bindEnabled(node, input, ctx);
+
+    // modèle -> UI
+    const offData = ctx.listener.listen(node.name as keyof T, (v) => {
+        if (typeGuess === 'checkbox') {
+            const nv = Boolean(v);
+            if ((input as HTMLInputElement).checked !== nv) (input as HTMLInputElement).checked = nv;
+        } else if (typeGuess === 'number') {
+            const nv = Number(v ?? 0);
+            if ((input as HTMLInputElement).valueAsNumber !== nv) (input as HTMLInputElement).valueAsNumber = nv;
+        } else {
+            const s = (v as any as string) ?? '';
+            if ((input as HTMLInputElement).value !== s) (input as HTMLInputElement).value = s;
+        }
+    });
+    ctx.dataUnsubs.push(offData);
+
+    // UI -> modèle + update
+    const onUser = () => {
+        const el = input as HTMLInputElement;
+        let next: any;
+        if (typeGuess === 'checkbox') next = el.checked;
+        else if (typeGuess === 'number') next = Number.isFinite(el.valueAsNumber) ? el.valueAsNumber : Number(el.value);
+        else next = el.value;
+
+        if (node.muted) {
+            ctx.listener.setSilently(node.name as keyof T, next);
+            if (node.update) {
+                (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.name] = next;
+            if (node.update) { (ctx.obj as any)[node.update]!(); }
+        }
+    };
+    const evt = typeGuess === 'checkbox' ? 'change' : 'input';
+    input.addEventListener(evt, onUser);
+    ctx.domUnsubs.push(() => input.removeEventListener(evt, onUser));
+}

package/dist/builder/label.ts

@@ -0,0 +1,31 @@
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+import { LabelNode, StaticLabelNode } from "../vue-model";
+
+  /* ----------- Label ----------- */
+    export function buildLabel<T extends object>(builder:Builder,node: LabelNode<T, any>, ctx: Ctx<T>) {
+        const span = document.createElement('span');
+        applyIdAndClass(span, node);
+        applySize(span, node.width, node.height);
+        span.textContent = String((ctx.obj as any)[node.name] ?? '');
+        ctx.add(span);
+
+        bindVisibleEnabled(node, span, ctx);
+
+        const offData = ctx.listener.listen(node.name as keyof T, (v) => {
+            const s = String(v ?? '');
+            if (span.textContent !== s) span.textContent = s;
+        });
+        ctx.dataUnsubs.push(offData);
+    }
+
+      /* ----------- Static Label ----------- */
+    export function buildStaticLabel<T extends object>(builder:Builder,node: StaticLabelNode<T>, ctx: Ctx<T>) {
+        const span = document.createElement('span');
+        applyIdAndClass(span, node);
+        applySize(span, node.width, node.height);
+        span.textContent = node.label;
+        ctx.add(span);
+
+        bindVisibleEnabled(node, span, ctx);
+
+    }

package/dist/builder/list-of-vue.ts

@@ -0,0 +1,65 @@
+import { applyIdAndClass, applySize, Builder, Ctx, VueRuntime } from "../vue-builder";
+import { ListVueNode, Vue } from "../vue-model";
+
+/* ----------- List UI (liste d'objets) ----------- */
+export function buildListOfVue<T extends object>(builder: Builder, node: ListVueNode<T>, ctx: Ctx<T>) {
+    const div = document.createElement('div');
+    applyIdAndClass(div, node);
+    div.style.display = 'flex';
+    div.style.flexDirection = (node.orientation ?? 'column') === 'row' ? 'row' : 'column';
+    applySize(div, node.width, node.height);
+
+    if (node.gap !== undefined) (div.style as any).gap = typeof node.gap === 'number' ? `${node.gap}px` : String(node.gap);
+    const mapJustify: Record<string, string> = {
+        start: 'flex-start', end: 'flex-end', center: 'center',
+        'space-between': 'space-between', 'space-around': 'space-around', 'space-evenly': 'space-evenly'
+    };
+    const mapAlign: Record<string, string> = {
+        start: 'flex-start', end: 'flex-end', center: 'center', stretch: 'stretch'
+    };
+    if (node.justify) div.style.justifyContent = mapJustify[node.justify];
+    if (node.align) div.style.alignItems = mapAlign[node.align];
+    if (node.wrap) div.style.flexWrap = 'wrap';
+    if (node.style) for (const k of Object.keys(node.style) as Array<keyof CSSStyleDeclaration>) {
+        const v = node.style[k]; if (v != null) (div.style as any)[k] = v as any;
+    }
+    if (node.panel) div.classList.add('panel');
+
+    const children: VueRuntime<any>[] = [];
+    let initial = true;
+
+    const clear = () => {
+        for (const r of children) { try { r.stop(); } catch { } }
+        children.length = 0;
+        while (div.firstChild) div.removeChild(div.firstChild);
+    };
+
+    const render = () => {
+        clear();
+        const arr = ((ctx.obj as any)[node.list] ?? []) as any[];
+        for (const item of arr) {
+            const ui = builder.findVueFor(item);
+            if (!ui) continue;
+            const host = document.createElement('div');
+            if (node.wrap) {
+                host.style.boxSizing = "border-box";
+                host.style.flex = "1 1 12rem";
+            }
+            if (node.elementStyle) for (const k of Object.keys(node.elementStyle) as Array<keyof CSSStyleDeclaration>) {
+                const v = node.elementStyle[k]; if (v != null) (host.style as any)[k] = v as any;
+            }
+            applySize(host, node.elementWidth, node.elementHeight);
+            div.appendChild(host);
+            const runtime = builder.bootInto(ui as Vue<any>, item, host, initial ? ctx.postInits : undefined);
+            children.push(runtime);
+        }
+        initial = false;
+    };
+
+    render();
+    const off = ctx.listener.listen(node.list as keyof T, () => render());
+    ctx.dataUnsubs.push(off);
+    ctx.domUnsubs.push(() => clear());
+
+    ctx.add(div);
+}