tauri-kargo-tools 0.1.5 → 0.1.7

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "tauri-kargo-tools",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "",
-   "files": ["dist"],
- "exports": { "./*": "./dist/*" },
+   "files": ["src"],
+ "exports": { "./*": "./src/*" },
   "publishConfig": { "access": "public" },
   "repository": {
     "type": "git",

package/{dist → src}/builder/boot-vue.ts

@@ -1,4 +1,5 @@
 // ./builder/boot-vue.ts
+import { BootVueNode, StaticBootVueNode } from "../model/boot-vue";
 import {
     Builder,
     Ctx,
@@ -8,8 +9,7 @@ import {
     bindEnabled,
 } from "../vue-builder";
 import {
-    BootVueNode,
-    StaticBootVueNode,
+
     Vue,
 } from "../vue-model";
 

package/{dist → src}/builder/button.ts

@@ -1,5 +1,6 @@
-import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
-import { ButtonNode, StaticButtonNode } from "../vue-model";
+import { ButtonNode, StaticButtonNode } from "../model/button";
+import { applyIdAndClass, applySize, bindEnabled, bindVisible, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+
 
 /* ----------- Button ----------- */
 export function buildStaticButton<T extends object>(builder: Builder, node: StaticButtonNode<T>, ctx: Ctx<T>) {
@@ -106,7 +107,6 @@ export function buildButton<T extends object>(builder: Builder, node: ButtonNode
         });
         ctx.dataUnsubs.push(offAlt);
     }
-
     bindVisibleEnabled(node, btn, ctx);
 
     const onClick = () => {

package/{dist → src}/builder/custom.ts

@@ -1,5 +1,6 @@
+import { CustomNode } from "../model/custom";
 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>) {

package/{dist → src}/builder/dialog.ts

@@ -1,5 +1,6 @@
+import { DialogNode } from "../model/dialog";
 import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx, VueRuntime } from "../vue-builder";
-import { DialogNode, Vue } from "../vue-model";
+import {  Vue } from "../vue-model";
 
  /* ----------- Dialog ----------- */
     export function buildDialog<T extends object>(builder:Builder,node: DialogNode<T>, ctx: Ctx<T>) {

package/{dist → src}/builder/flow.ts

@@ -1,5 +1,6 @@
+import { FlowNode } from "../model/flow";
 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>) {

package/{dist → src}/builder/img.ts

@@ -1,5 +1,6 @@
+import { ImgNode } from "../model/img";
 import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
-import { ImgNode } from "../vue-model";
+
 
 
     /* ----------- Img ----------- */

package/{dist → src}/builder/input.ts

@@ -1,16 +1,16 @@
+import { InputNode } from "../model/input";
 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%");
+    applySize(input, node.width, node.height);
+  applyIdAndClass(input, node);
     const current = (ctx.obj as any)[node.name];
     const typeGuess =
         node.inputType ??
@@ -31,11 +31,11 @@ export function buildInput<T extends object>(builder: Builder, node: InputNode<T
         (input as HTMLInputElement).value = (current ?? '') as any as string;
     }
 
-    wrapper.appendChild(input);
-    ctx.add(wrapper);
+
+    ctx.add(input);
 
     // visible / enable factorisés
-    bindVisible(node, wrapper, ctx);
+    bindVisible(node, input, ctx);
     bindEnabled(node, input, ctx);
 
     // modèle -> UI

package/src/builder/label.ts

@@ -0,0 +1,43 @@
+import { LabelNode, StaticLabelNode } from "../model/label";
+import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, Ctx } from "../vue-builder";
+
+/* ----------- 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);
+
+  // Multi-ligne + espace intérieur sans changer la taille totale
+  span.style.whiteSpace = 'pre-line';
+  span.style.display = 'inline-block';
+  span.style.boxSizing = 'border-box';
+  span.style.padding = '4px 6px';        // ← espace texte/bord
+
+  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.style.whiteSpace = 'pre-line';
+  span.style.display = 'inline-block';
+  span.style.boxSizing = 'border-box';
+  span.style.padding = '4px 6px';
+
+  span.textContent = node.label;
+  ctx.add(span);
+
+  bindVisibleEnabled(node, span, ctx);
+}

package/{dist → src}/builder/list-of-vue.ts

@@ -1,5 +1,6 @@
-import { applyIdAndClass, applySize, Builder, Ctx, VueRuntime } from "../vue-builder";
-import { ListVueNode, Vue } from "../vue-model";
+import { ListVueNode } from "../model/list-of-vue";
+import { applyIdAndClass, applySize, bindEnabled, bindVisible, Builder, Ctx, VueRuntime } from "../vue-builder";
+import { Vue } from "../vue-model";
 
 /* ----------- List UI (liste d'objets) ----------- */
 export function buildListOfVue<T extends object>(builder: Builder, node: ListVueNode<T>, ctx: Ctx<T>) {
@@ -8,7 +9,8 @@ export function buildListOfVue<T extends object>(builder: Builder, node: ListVue
     div.style.display = 'flex';
     div.style.flexDirection = (node.orientation ?? 'column') === 'row' ? 'row' : 'column';
     applySize(div, node.width, node.height);
-
+    // bindVisible(node, div, ctx);
+    bindEnabled(node, div, ctx);
     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',
@@ -36,7 +38,14 @@ export function buildListOfVue<T extends object>(builder: Builder, node: ListVue
 
     const render = () => {
         clear();
-        const arr = ((ctx.obj as any)[node.list] ?? []) as any[];
+        let visible = true
+        if (node.visible) {
+            visible = !!(ctx.obj as any)[node.visible]
+        }
+        let arr: any = [];
+        if (visible) {
+            arr = ((ctx.obj as any)[node.list] ?? []) as any[];
+        }
         for (const item of arr) {
             const ui = builder.findVueFor(item);
             if (!ui) continue;
@@ -59,7 +68,13 @@ export function buildListOfVue<T extends object>(builder: Builder, node: ListVue
     render();
     const off = ctx.listener.listen(node.list as keyof T, () => render());
     ctx.dataUnsubs.push(off);
+    if (node.visible) {
+        const offVisible = ctx.listener.listen(node.visible as keyof T, () => render());
+        ctx.dataUnsubs.push(offVisible);
+    }
+
     ctx.domUnsubs.push(() => clear());
 
     ctx.add(div);
+
 }

package/{dist → src}/builder/menu.ts

@@ -1,5 +1,6 @@
+import { MenuNode } from "../model/menu";
 import { applyIdAndClass, applySize, bindVisibleEnabled, Builder, clamp, Ctx, VueRuntime } from "../vue-builder";
-import { MenuNode, Vue } from "../vue-model";
+import {  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>) {

package/{dist → src}/builder/select.ts

@@ -1,5 +1,6 @@
+import { SelectNode } from "../model/select";
 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>) {

package/src/builder/space.ts

@@ -0,0 +1,13 @@
+import { Space } from "../model/space";
+import { applySize, Builder, Ctx } from "../vue-builder";
+
+/* ----------- Flow ----------- */
+    export function buildSpace<T extends object>(builder:Builder,node: Space, ctx: Ctx<T>) {
+        const div = document.createElement('div');
+ 
+        div.style.visibility ="hidden"
+        applySize(div, node.width, node.height);
+        ctx.add(div);
+
+    }
+

package/{dist → src}/builder/vue.ts

@@ -1,5 +1,6 @@
+import { SingleVueNode } from "../model/vue";
 import { applyIdAndClass, applySize, Builder, Ctx, VueRuntime } from "../vue-builder";
-import { SingleVueNode, Vue } from "../vue-model";
+import {  Vue } from "../vue-model";
 
 /* ----------- Single UI (champ objet) ----------- */
     export function buildSingleVue<T extends object>(builder:Builder,node: SingleVueNode<T>, ctx: Ctx<T>) {
@@ -31,4 +32,6 @@ import { SingleVueNode, Vue } from "../vue-model";
         const off = ctx.listener.listen(node.name as keyof T, (v) => mountFor(v, false));
         ctx.dataUnsubs.push(off);
         ctx.domUnsubs.push(() => clearHost());
+
+    
     }

package/{dist → src/css}/vue-darkmode.css

@@ -111,11 +111,19 @@
     radial-gradient(500px 180px at 120% -10%, rgba(192, 166, 255, .12), transparent 45%);
   pointer-events: none;
 }
-
+.app span {
+  border: 1px solid var(--ui-border);
+  color: var(--ui-fg);
+  box-shadow: var(--ui-shadow);
+  border-radius: calc(var(--ui-radius) - 4px);
+}
 /* ---------- Typo inline ---------- */
 .app label,
 .app span {
   color: var(--text);
+  border-radius: var(--radius-xs);
+  box-shadow: inset 0 0 0 1px var(--control-inset);
+  background-color: #34363a;
 }
 
 .app label {
@@ -402,6 +410,4 @@
     transition: none !important;
     animation: none !important;
   }
-}
-
-
+}

package/{dist → src/css}/vue-lightmode.css

@@ -32,6 +32,14 @@
   font-family: var(--ui-font);
 }
 
+.app span {
+  border: 1px solid var(--ui-border);
+  color: var(--ui-fg);
+  box-shadow: var(--ui-shadow);
+  border-radius: calc(var(--ui-radius) - 4px);
+  background-color: #b6c4e1;
+}
+
 @media (prefers-color-scheme: dark) {
   .app {
     --ui-fg: #e6e8ee;
@@ -396,6 +404,4 @@
     transition: none;
     animation: none;
   }
-}
-
-
+}

package/src/model/boot-vue.ts

@@ -0,0 +1,58 @@
+import { ButtonContentType, KeysOfType, KeysOfTypeFunction, MethodNames0, Objectish, VoidMethodName1 } from "../vue-model";
+
+/** BootVue — bouton qui "boot" une Vue (label dynamique depuis T) */
+export interface BootVueNode<
+    T extends object,
+    NK extends KeysOfType<T, Objectish | null | undefined> = KeysOfType<T, Objectish | null | undefined>,
+    LK extends KeysOfType<T, string> = KeysOfType<T, string>,
+    MN extends MethodNames0<T> = MethodNames0<T>
+> {
+    kind: 'bootVue';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Objet dont l'UI sera montée quand on clique */
+    factory: KeysOfType<T, () => object>;
+
+    /** Clé string de T utilisée comme libellé du bouton */
+    label: LK;
+
+
+
+    /** Rendu optionnel du bouton */
+    type?: ButtonContentType;
+
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+    useVisibility?: boolean;
+}
+/** StaticBootVue — bouton qui "boot" une Vue (label fixe) */
+export interface StaticBootVueNode<
+    T extends object,
+    NK extends KeysOfType<T, Objectish | null | undefined> = KeysOfType<T, Objectish | null | undefined>,
+    MN extends MethodNames0<T> = MethodNames0<T>
+> {
+    kind: 'staticBootVue';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Objet dont l'UI sera montée quand on clique */
+    factory: KeysOfType<T, () => object>;
+
+    /** Libellé texte non dynamique */
+    label: string;
+
+
+
+    /** Rendu optionnel du bouton */
+    type?: ButtonContentType;
+
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+}

package/src/model/button.ts

@@ -0,0 +1,48 @@
+import { ButtonContentType, KeysOfType, MethodNames0 } from "../vue-model";
+
+export interface StaticButtonNode<T extends object, NK extends KeysOfType<T, string> = KeysOfType<T, string>> {
+    kind: 'staticButton';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Libellé texte par défaut */
+    label: string;
+    action: MethodNames0<T>;
+    muted?: boolean;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+     useVisibility?: boolean;
+
+    /** Rendu optionnel : 'img' = URL d'image, 'html' = markup HTML (depuis `name` si fourni, sinon `label`). */
+    type?: ButtonContentType;
+    /** Source du contenu si `type` défini (URL/HTML) ; sinon le rendu retombe sur `label`. */
+    name?: NK;
+}
+
+/** ButtonLabel — label typé comme une clé string de T */
+export interface ButtonNode<
+    T extends object,
+    LK extends KeysOfType<T, string> = KeysOfType<T, string>
+> {
+    kind: 'button';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Clé d'un champ string de T utilisé comme libellé (texte par défaut) */
+    label: LK;
+    action: MethodNames0<T>;
+    muted?: boolean;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+
+    /** Rendu optionnel : 'img' = URL d'image, 'html' = markup HTML (depuis `name` si fourni, sinon `label`). */
+    type?: ButtonContentType;
+    /** Clé string du modèle à utiliser pour le contenu quand `type` est défini. */
+    name?: KeysOfType<T, string>;
+}

package/src/model/custom.ts

@@ -0,0 +1,27 @@
+import { HTMLElementFactoryName, KeysOfType, VoidMethodName } from "../vue-model";
+
+/** CUSTOM — créé via une méthode de T (sans argument) qui retourne un HTMLElement
+ *  + une méthode d'init optionnelle (() => void) exécutée par le builder.
+ */
+export interface CustomNode<
+    T extends object,
+    FK extends HTMLElementFactoryName<T> = HTMLElementFactoryName<T>,
+    IK extends VoidMethodName<T> = VoidMethodName<T>
+> {
+    kind: 'custom';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+
+    /** Nom de la méthode sur T: () => HTMLElement */
+    factory: FK;
+
+    /** Nom d'une méthode sur T: () => void (appelée après création/insert du DOM) */
+    init?: IK;
+    useVisibility?: boolean;
+}

package/src/model/dialog.ts

@@ -0,0 +1,28 @@
+import { ButtonContentType, KeysOfType, Objectish } from "../vue-model";
+
+/** DIALOG — plus de listUI */
+export interface DialogNode<T extends object> {
+    kind: 'dialog';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Objet dont l'UI sera montée dans le dialog */
+    name: KeysOfType<T, Objectish | null | undefined>;
+    /** Libellé du bouton qui ouvre le dialog (ou source si `type` est défini) */
+    label: string;
+    buttonWidth?: number | string;
+    buttonHeight?: number | string;
+    width?: number | string;
+    height?: number | string;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    modal?: boolean;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+    action?: KeysOfType<T, () => void>;
+
+    /** Rendu du bouton trigger : 'img' = URL (dans `label`), 'html' = markup (dans `label`). */
+    type?: ButtonContentType;
+      useVisibility?: boolean;
+}

package/src/model/flow.ts

@@ -0,0 +1,19 @@
+import { UINode } from "../vue-model";
+
+export interface FlowNode<T extends object> {
+    kind: 'flow';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    orientation: 'column' | 'row';
+    gap?: number | string;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    wrap?: boolean;
+    style?: Partial<CSSStyleDeclaration>;
+    panel?: boolean;
+    width?: number | string;
+    height?: number | string;
+    children: UINode<T>[];
+}

package/src/model/img.ts

@@ -0,0 +1,21 @@
+import { KeysOfType } from "../vue-model";
+
+/** Img — URL typée comme une clé string de T */
+export interface ImgNode<
+    T extends object,
+    NK extends KeysOfType<T, string> = KeysOfType<T, string>
+> {
+    kind: 'img';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Clé d'un champ string de T contenant l'URL de l'image */
+    url: NK;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+      useVisibility?: boolean;
+}

package/src/model/input.ts

@@ -0,0 +1,25 @@
+/* ===================== Noeuds de l'AST ===================== */
+
+import { InputType, KeysOfType, MethodNames0 } from "../vue-model";
+
+/** Input: clé limitée à string | number | boolean */
+export interface InputNode<
+    T extends object,
+    NK extends KeysOfType<T, string | number | boolean> = KeysOfType<T, string | number | boolean>
+> {
+    kind: 'input';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    name: NK;
+    update?: MethodNames0<T>;
+
+    inputType?: InputType;
+    muted?: boolean;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+      useVisibility?: boolean;
+}

package/src/model/label.ts

@@ -0,0 +1,35 @@
+import { KeysOfType } from "../vue-model";
+
+/** Label: clé limitée à string */
+export interface LabelNode<
+    T extends object,
+    NK extends KeysOfType<T, string|number> = KeysOfType<T, string|number>
+> {
+    kind: 'label';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    name: NK;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+      useVisibility?: boolean;
+}
+/** Label: clé limitée à string */
+export interface StaticLabelNode<
+    T extends object
+> {
+    kind: 'staticLabel';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    label: string;
+    width?: number | string;
+    height?: number | string;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+      useVisibility?: boolean;
+}

package/src/model/list-of-vue.ts

@@ -0,0 +1,25 @@
+import { ArrayKeys, KeysOfType, VoidMethodName1 } from "../vue-model";
+
+/** LIST UI — plus de listUI */
+export interface ListVueNode<T extends object> {
+    kind: 'listOfVue';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+    list: ArrayKeys<T>;
+    orientation?: 'row' | 'column';
+    gap?: number | string;
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    wrap?: boolean;
+    style?: Partial<CSSStyleDeclaration>;
+    elementStyle?: Partial<CSSStyleDeclaration>;
+    panel?: boolean;
+    width?: number | string;
+    height?: number | string;
+    elementWidth?: number | string;
+    elementHeight?: number | string;
+    visible?: KeysOfType<T, boolean>; enable?: KeysOfType<T, boolean>;
+    useVisibility?: boolean;
+
+}

package/src/model/menu.ts

@@ -0,0 +1,28 @@
+import { ButtonContentType, KeysOfType, Objectish } from "../vue-model";
+
+/** MENU — mêmes paramètres que dialog, rendu différent côté renderer */
+export interface MenuNode<T extends object> {
+    kind: 'menu';
+    /** Identifiants CSS/DOM */
+    id?: string;
+    class?: string | string[];
+
+    /** Objet dont l'UI sera montée dans le menu */
+    name: KeysOfType<T, Objectish | null | undefined>;
+    /** Libellé du bouton qui ouvre le menu (ou source si `type` est défini) */
+    label: string;
+    buttonWidth?: number | string;
+    buttonHeight?: number | string;
+    width?: number | string;
+    height?: number | string;
+    closeOnBackdrop?: boolean;
+    closeOnEsc?: boolean;
+    modal?: boolean;
+    visible?: KeysOfType<T, boolean>;
+    enable?: KeysOfType<T, boolean>;
+    action?: KeysOfType<T, () => void>;
+
+    /** Rendu du bouton trigger : 'img' = URL (dans `label`), 'html' = markup (dans `label`). */
+    type?: ButtonContentType;
+      useVisibility?: boolean;
+}